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