chore(v2): add lqip-loader tests, clarify loader code, improve README (#2561)

* chore(v2): add lqip-loader tests, clarify loader code, improve README

* Rename index.test.js.ts to index.test.ts

* smarter and cleaner approach to the loader export

* Update index.test.ts

Co-authored-by: Yangshun Tay <tay.yang.shun@gmail.com>

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';

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');
+      });
+    });
+  });
+});

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);