diff --git a/packages/lqip-loader/README.md b/packages/lqip-loader/README.md index 7456677d4fad..0a3b28d2a961 100644 --- a/packages/lqip-loader/README.md +++ b/packages/lqip-loader/README.md @@ -1,4 +1,6 @@ -## lqip-loader: low quality images placeholders for webpack +# `@docusaurus/lqip-loader` + +Low Quality Image Placeholders (LQIP) loader for webpack. ### Installation @@ -12,14 +14,11 @@ Generating Base64 & dominant colours palette for a jpeg image imported in your J > The large image file will be emitted & only 400byte of Base64 (if set to true in the loader options) will be bundled. -`webpack.config.js` +#### `webpack.config.js` ```js { - /** - * OPTION A: - * default file-loader fallback - **/ + // OPTION A: default file-loader fallback test: /\.jpe?g$/, loaders: [ { @@ -33,10 +32,7 @@ Generating Base64 & dominant colours palette for a jpeg image imported in your J } ] - /** - * OPTION B: - * Chained with your own url-loader or file-loader - **/ + // OPTION B: Chained with your own url-loader or file-loader test: /\.(png|jpe?g)$/, loaders: [ { @@ -56,7 +52,7 @@ Generating Base64 & dominant colours palette for a jpeg image imported in your J } ``` -`your-app-module.js` +#### `your-app-module.js` ```js import banner from './images/banner.jpg'; diff --git a/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.svg b/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.svg new file mode 100644 index 000000000000..f7f324fe0bdf --- /dev/null +++ b/packages/lqip-loader/src/__tests__/__fixtures__/docusaurus.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/lqip-loader/src/__tests__/__fixtures__/endi.jpg b/packages/lqip-loader/src/__tests__/__fixtures__/endi.jpg new file mode 100644 index 000000000000..b31ee596ff6d Binary files /dev/null and b/packages/lqip-loader/src/__tests__/__fixtures__/endi.jpg differ diff --git a/packages/lqip-loader/src/__tests__/index.test.ts b/packages/lqip-loader/src/__tests__/index.test.ts new file mode 100644 index 000000000000..98e5fd2d165e --- /dev/null +++ b/packages/lqip-loader/src/__tests__/index.test.ts @@ -0,0 +1,71 @@ +/** + * Copyright (c) Facebook, Inc. and its affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + */ + +import path from 'path'; +import Vibrant from 'node-vibrant'; + +// @ts-ignore +import {toPalette, toBase64, toPropertyString} from '../utils'; +// @ts-ignore +import lqip from '../lqip'; + +describe('lqip-loader', () => { + describe('toBase64', () => { + test('should return a properly formatted Base64 image string', () => { + const expected = 'data:image/jpeg;base64,hello world'; + const mockedMimeType = 'image/jpeg'; + const mockedBase64Data = 'hello world'; + expect(toBase64(mockedMimeType, mockedBase64Data)).toEqual(expected); + }); + }); + + describe('toPalette', () => { + let correctTestSwatch: object = {}; + let testSwatchWithNull: object = {}; + + beforeAll(() => { + const imgPath = path.join(__dirname, '__fixtures__', 'endi.jpg'); + const vibrant = new Vibrant(imgPath, {}); + + return vibrant.getPalette().then((palette) => { + correctTestSwatch = Object.assign({}, palette); + testSwatchWithNull = Object.assign({}, palette, {Vibrant: null}); + }); + }); + + it('should return 6 hex colours sorted by popularity', () => { + expect(toPalette(correctTestSwatch)).toHaveLength(6); + }); + + it('should return 5 hex colours with no errors if a palette was incomplete', () => { + expect(toPalette(testSwatchWithNull)).toHaveLength(5); + }); + }); + + describe('lqip library', () => { + const imgPath = path.join(__dirname, '__fixtures__', 'endi.jpg'); + const invalidPath = path.join(__dirname, '__fixtures__', 'docusaurus.svg'); + + it('should reject unknown or unsupported file format', () => { + expect(lqip.base64(invalidPath)).rejects.toBeTruthy(); + }); + + it('should generate a valid base64', () => { + const expectedBase64 = 'data:image/jpeg;base64,/9j/2wBDA'; + lqip.base64(imgPath).then((base64: string) => { + expect(base64).toContain(expectedBase64); + }); + }); + + it('should generate a valid color palette', () => { + lqip.palette(imgPath).then((imgPalette: string[]) => { + expect(imgPalette).toHaveLength(6); + expect(imgPalette).toContain('#578ca1'); + }); + }); + }); +}); diff --git a/packages/lqip-loader/src/index.js b/packages/lqip-loader/src/index.js index f1fd4f5025ba..78d61ee724c3 100644 --- a/packages/lqip-loader/src/index.js +++ b/packages/lqip-loader/src/index.js @@ -60,9 +60,11 @@ module.exports = function (contentBuffer) { .then((data) => { if (data) { const [preSrc, palette] = data; - const param1 = preSrc ? `, "preSrc": ${JSON.stringify(preSrc)}` : ''; - const param2 = palette ? `, "palette": ${JSON.stringify(palette)}` : ''; - const result = `module.exports = {"src":${source}${param1}${param2}};`; + const finalObject = JSON.stringify({src: 'STUB', preSrc, palette}); + const result = `module.exports = ${finalObject.replace( + '"STUB"', + source, + )};`; callback(null, result); } else { callback('ERROR', null);