@watermarkinsights/ripple 5.10.0-14 → 5.10.0-16

package/dist/collection/components/wm-uploader/wm-uploader.spec.js

@@ -0,0 +1,234 @@
+jest.mock("../../global/services/http-service");
+import { newSpecPage } from "@stencil/core/testing";
+import { Uploader } from "./wm-uploader";
+import { File } from "../wm-file/wm-file";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-uploader", () => {
+    let html, page;
+    beforeEach(async () => {
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    max-size="200 MB"
+    max-files="5"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+    });
+    afterEach(() => {
+        html = undefined;
+        page = undefined;
+    });
+    it("has necessary aria properties", async () => {
+        let inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-describedby", "file-count max-size accepted-types");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    label="example label"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "example label, Upload new document");
+        expect(inputEl).toEqualAttribute("aria-required", "true");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    label="Upload new document"
+    required-field="true"
+    ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        inputEl = page.root.shadowRoot.querySelector("input");
+        expect(inputEl).toEqualAttribute("aria-label", "Upload new document");
+    });
+    it("renders button text based on button-text prop", () => {
+        const labelEl = page.root.shadowRoot.querySelector("label");
+        expect(labelEl.textContent).toBe("Upload new document");
+    });
+    it("uploads files", async () => {
+        const input = page.root.shadowRoot.querySelector("input");
+        // fake files which the components uploadFiles() function will process
+        // @ts-ignore
+        input.files = {
+            length: 2,
+            0: {
+                lastModified: 1562163068000,
+                lastModifiedDate: new Date(1562163068000),
+                name: "third_file.pdf",
+                size: 104857600,
+                type: "application/pdf",
+                webkitRelativePath: "",
+            },
+            1: {
+                lastModified: 1562062469000,
+                lastModifiedDate: new Date(1562062469000),
+                name: "fourth file.jpg",
+                size: 123456,
+                type: "image/jpeg",
+                webkitRelativePath: "",
+            },
+        };
+        // triggering the change event will run validations and emit event wmUploaderFilesSelected
+        const ev = new Event("change");
+        let validFiles = [];
+        page.root.addEventListener("wmUploaderFilesSelected", (ev) => (validFiles = ev.detail));
+        input.dispatchEvent(ev);
+        await page.waitForChanges();
+        expect(validFiles[0].name).toBe("third_file.pdf");
+        expect(validFiles[1].size).toBe(123456);
+    });
+    it("disables button when upload is in progress", async () => {
+        html = `<wm-uploader id="uploader1">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB" progress="30"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        const labelEl = page.root.shadowRoot.querySelector("label");
+        expect(labelEl).toHaveClass("disabled");
+    });
+    it("renders max-files text, if set", async () => {
+        let html, page;
+        html = `<wm-uploader
+      id="uploader1"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        let fileCountEl = page.root.shadowRoot.querySelector("#file-count");
+        expect(fileCountEl).toBeFalsy();
+        html = `<wm-uploader
+    id="uploader1"
+    max-files="3"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        fileCountEl = page.root.shadowRoot.querySelector("#file-count");
+        expect(fileCountEl).toBeTruthy();
+        expect(fileCountEl.textContent).toBe("2 of 3 Files");
+    });
+    it("renders max-size text, if set", async () => {
+        let html, page;
+        html = `<wm-uploader
+      id="uploader1"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        let maxSizeEl = page.root.shadowRoot.querySelector("#max-size");
+        expect(maxSizeEl).toBeFalsy();
+        html = `<wm-uploader
+      id="uploader1"
+      max-size="25 MB"
+      button-text="Upload new document"
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        maxSizeEl = page.root.shadowRoot.querySelector("#max-size");
+        expect(maxSizeEl).toBeTruthy();
+        expect(maxSizeEl.textContent).toBe("Maximum file size 25 MB");
+    });
+    it("announces error when max-files has been reached and button clicked", async () => {
+        html = `<wm-uploader
+    id="uploader1"
+    max-files="2"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector("input");
+        input.click();
+        await page.waitForChanges();
+        const liveRegion = page.root.shadowRoot.querySelector(".live-region").textContent;
+        expect(liveRegion).toBe("The maximum number of files has been reached");
+    });
+    it("singularizes the accepted file types message", async () => {
+        let message = page.root.shadowRoot.querySelector("#accepted-types").textContent;
+        expect(message).toBe("Accepted file types: .pdf, .txt, .log, .xml, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .gif, .jpg, .jpeg, .png, .csv");
+        html = `<wm-uploader
+      id="uploader1"
+      file-types="jpeg"
+      button-text="Upload new document"
+      files='[{"id": "file1", "name": "File retrieved from server", "type": "pdf", "lastUpdated": "1/28/2020"},{"id": "file2", "name": "Second file", "type": "jpeg", "lastUpdated": "2/14/2019"}]'
+      ></wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        message = page.root.shadowRoot.querySelector("#accepted-types").textContent;
+        expect(message).toBe("Accepted file type: .jpeg");
+    });
+    it("provides wm-files with the proper show-info", async () => {
+        // defaults to time
+        let infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("1/28/2020");
+        // size
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="size"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("28 KB");
+        // time
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="time"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl.textContent).toBe("1/28/2020");
+        // none
+        html = `<wm-uploader
+    id="uploader1"
+    button-text="Upload new document"
+    show-info="none"
+    >
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020" size="28 KB"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019" size="3 MB""></wm-file>
+    </wm-uploader>`;
+        page = await newSpecPage({ components: [Uploader, File], html });
+        await page.waitForChanges();
+        infoEl = await page.root.querySelector("wm-file").shadowRoot.querySelector(".file-info");
+        expect(infoEl).toBe(null);
+    });
+});

package/dist/collection/global/functions.spec.js

@@ -0,0 +1,126 @@
+import { csvToArray, getAcceptedMimeTypesList, intl, snakeCaseToCamelCase, getNewIndexToFocus, transposeMatrix, wrapAround, skipByInterval, getSmallestSkipInterval, calcPercentageInRange, } from "./functions";
+describe("Global functions", () => {
+    it("converts the list of extensions into a list of MIME types", () => {
+        expect(getAcceptedMimeTypesList(["pdf", "doc", "txt"])).toMatchObject([
+            "application/pdf",
+            "application/msword",
+            "text/plain",
+        ]);
+    });
+    it("translates", () => {
+        expect(intl.formatMessage({ id: "date.Monday", defaultMessage: "Monday" })).toEqual("Monday"); // falls back to English when language attribute is not set
+    });
+    it("changes string from snake_case to camelCase", async () => {
+        expect(snakeCaseToCamelCase("snake_case")).toBe("snakeCase");
+        expect(snakeCaseToCamelCase("even_more_words")).toBe("evenMoreWords");
+        expect(snakeCaseToCamelCase("camelCase")).toBe("camelCase");
+        expect(snakeCaseToCamelCase("A regular sentence")).toBe("A regular sentence");
+        expect(snakeCaseToCamelCase("singleword")).toBe("singleword");
+    });
+    it("parses comma separated values properly", async () => {
+        expect(csvToArray("one, two, three")).toStrictEqual(["one", "two", "three"]);
+        expect(csvToArray("four,five, six")).toStrictEqual(["four", "five", "six"]);
+        expect(csvToArray("seven eight,nine ten eleven")).toStrictEqual(["seven eight", "nine ten eleven"]);
+    });
+    it("gets new index to focus correctly", async () => {
+        let index = 1;
+        let direction = "ArrowDown";
+        let listLength = 5;
+        // moves forward
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index + 1);
+        // wraps backwards
+        index = 4;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(0);
+        // moves backwards
+        direction = "ArrowUp";
+        index = 2;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(index - 1);
+        // wraps forward
+        index = 0;
+        expect(getNewIndexToFocus(index, direction, listLength)).toBe(listLength - 1);
+    });
+    it("transposes matrices correctly", () => {
+        expect(transposeMatrix([
+            [0, 1, 2],
+            [3, 4, 5],
+            [6, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, 6],
+            [1, 4, 7],
+            [2, 5, 8],
+        ]);
+        expect(transposeMatrix([
+            [0, 1, 2, 3],
+            [4, 5, 6, 7],
+            [8, 9, 10, 11],
+        ])).toStrictEqual([
+            [0, 4, 8],
+            [1, 5, 9],
+            [2, 6, 10],
+            [3, 7, 11],
+        ]);
+        expect(transposeMatrix([
+            ["0", "1", "2"],
+            ["3", "4", "5"],
+            ["6", "7", "8"],
+        ])).toStrictEqual([
+            ["0", "3", "6"],
+            ["1", "4", "7"],
+            ["2", "5", "8"],
+        ]);
+        expect(transposeMatrix([
+            [0, "1", 2],
+            [3, 4, [5]],
+            [{ key: "value" }, 7, 8],
+        ])).toStrictEqual([
+            [0, 3, { key: "value" }],
+            ["1", 4, 7],
+            [2, [5], 8],
+        ]);
+    });
+    it("wraps around indices correctly", () => {
+        // forward steps
+        expect(wrapAround(0, 1, 8)).toBe(1);
+        expect(wrapAround(2, 3, 8)).toBe(5);
+        expect(wrapAround(7, 1, 8)).toBe(8);
+        // forward to 0
+        expect(wrapAround(8, 1, 8)).toBe(0);
+        expect(wrapAround(2, 7, 8)).toBe(0);
+        // forward beyond 0
+        expect(wrapAround(8, 4, 8)).toBe(3);
+        expect(wrapAround(2, 10, 8)).toBe(3);
+        // backward steps
+        expect(wrapAround(8, -1, 8)).toBe(7);
+        expect(wrapAround(5, -3, 8)).toBe(2);
+        expect(wrapAround(1, -1, 8)).toBe(0);
+        // backward to end
+        expect(wrapAround(0, -1, 8)).toBe(8);
+        expect(wrapAround(7, -8, 8)).toBe(8);
+        // backward beyond end
+        expect(wrapAround(0, -7, 8)).toBe(2);
+        expect(wrapAround(2, -7, 8)).toBe(4);
+        // multiple wraps
+        expect(wrapAround(0, 10, 2)).toBe(1);
+        expect(wrapAround(0, -10, 2)).toBe(2);
+    });
+    it("skips by interval correctly", () => {
+        const list = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+        expect(skipByInterval(list, 0)).toStrictEqual([0, 1, 2, 3, 4, 5, 6, 7, 8, 9]);
+        expect(skipByInterval(list, 1)).toStrictEqual([0, 2, 4, 6, 8]);
+        expect(skipByInterval(list, 2)).toStrictEqual([0, 3, 6, 9]);
+        expect(skipByInterval(list, 3)).toStrictEqual([0, 4, 8]);
+        expect(skipByInterval(list, 4)).toStrictEqual([0, 5]);
+        expect(skipByInterval(list, 5)).toStrictEqual([0, 6]);
+        expect(skipByInterval(list, 20)).toStrictEqual([0]);
+        expect(getSmallestSkipInterval(list, 6)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 5)).toStrictEqual({ skipInterval: 1, skippedList: [0, 2, 4, 6, 8] });
+        expect(getSmallestSkipInterval(list, 3)).toStrictEqual({ skipInterval: 3, skippedList: [0, 4, 8] });
+        expect(getSmallestSkipInterval(list, 1)).toStrictEqual({ skipInterval: 9, skippedList: [0] });
+    });
+    it("calcs percentage in range properly", () => {
+        expect(calcPercentageInRange(13, 0, 100)).toBe(13);
+        expect(calcPercentageInRange(-75, -100, 0)).toBe(25);
+        expect(calcPercentageInRange(50, 25, 75)).toBe(50);
+        expect(calcPercentageInRange(150, 100, 300)).toBe(25);
+    });
+});

package/dist/collection/global/global.js

@@ -4,7 +4,7 @@ import { version } from "../../package.json";
 // test envs return 0 for plugin.length
 // do not print version number there as it causes issues
 if (window.navigator.plugins.length > 0) {
-    console.log("Ripple component library", version);
+    console.log("%cRipple component library %c%s", "color: #575195; font-weight: bold", "font-weight: bold", version);
 }
 // Dispatching events to track whether user is navigating with keyboard or mouse
 // no longer necessary for keyboard focus indicators (thanks to :focus-visible)

package/dist/collection/global/intl.js

@@ -97,16 +97,19 @@ export const uploaderMessages = {
         defaultMessage: "The file must be more than 0 bytes",
         description: "Error message when user attempts to upload a file of no size",
     }),
+    dropInstructions: intl.formatMessage({
+        id: "uploader.dropInstructions",
+        defaultMessage: "Browse or Drag Files Here",
+        description: "Instructions for how to choose files to upload",
+    }),
+    fileRequirements: intl.formatMessage({
+        id: "uploader.fileRequirements",
+        defaultMessage: "File Requirements",
+        description: "Expandable button revealing the uploader's file requirements",
+    }),
     // -------------------------------------------------------------------------- //
     //                             Functions                                      //
     // -------------------------------------------------------------------------- //
-    getAcceptedFileTypes: (validTypes, amount) => intl.formatMessage({
-        id: "uploader.acceptedFileTypes",
-        defaultMessage: "Accepted file {amount, plural, =1 {type} other {types}}: {fileTypes}",
-    }, {
-        fileTypes: validTypes,
-        amount: amount,
-    }),
     getFilesAdded: (numFiles) => intl.formatMessage({
         id: "uploader.filesAdded",
         defaultMessage: "{numFiles, plural, one {1 file added} other {# files added}}",
@@ -128,13 +131,6 @@ export const uploaderMessages = {
         id: "uploader.invalidFileType",
         defaultMessage: "The file type is invalid. Accepted types: {validTypes}",
     }, { validTypes }),
-    getMaxSize: (maxSize) => intl.formatMessage({
-        id: "uploader.maxSize",
-        defaultMessage: "Maximum file size {maxSize}",
-        description: "An indicator of the maximum file size the uploader allows",
-    }, {
-        maxSize: maxSize,
-    }),
     getUploadProgress: (percentage) => intl.formatMessage({
         id: "uploader.uploadProgress",
         defaultMessage: "Upload progress: {percentage}%",

package/dist/collection/lang/lang.spec.js

@@ -0,0 +1,20 @@
+"use strict";
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+const pig = require("./pig.json");
+describe("translations", () => {
+    it("has translated strings for every key", () => {
+        let missingFR = [];
+        let missingES = [];
+        let missingPIG = [];
+        for (let i = 0; i < Object.keys(en).length; i++) {
+            !Object.keys(fr).includes(Object.keys(en)[i]) && missingFR.push(Object.keys(en)[i]);
+            !Object.keys(es).includes(Object.keys(en)[i]) && missingES.push(Object.keys(en)[i]);
+            !Object.keys(pig).includes(Object.keys(en)[i]) && missingPIG.push(Object.keys(en)[i]);
+        }
+        expect(missingFR.length).toBe(0);
+        expect(missingES.length).toBe(0);
+        expect(missingPIG.length).toBe(0);
+    });
+});

package/dist/collection/lang/missing.js

@@ -1,43 +1,43 @@
-/* This script is useful when we translate internally, so we know which keys to translate.
- * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
- * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
- */
-
-const fs = require("fs");
-const en = require("./en.json");
-const fr = require("./fr.json");
-const es = require("./es.json");
-
-const keys = Object.keys(en);
-
-let missingFR = {};
-let missingES = {};
-
-keys.map((key) => {
-  if (!fr[key]) {
-    missingFR[key] = en[key];
-  }
-
-  if (!es[key]) {
-    missingES[key] = en[key];
-  }
-});
-
-const dataFR = JSON.stringify(missingFR, null, 2);
-const dataES = JSON.stringify(missingES, null, 2);
-
-const totalMissingFR = Object.entries(missingFR).length;
-if (totalMissingFR > 0) {
-  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
-    !!err && console.log(err);
-  });
-  console.log(`${totalMissingFR} french translations missing. See src/lang/missingTranslationsFR.json`);
-}
-
-const totalMissingES = Object.entries(missingES).length;
-if (totalMissingES > 0) {
-  fs.writeFile("src/lang/missingTranslationsES.json", dataES, (err) => {
-    !!err && console.log(err);
-  });
-  console.log(`${totalMissingES} spanish translations missing. See src/lang/missingTranslationsES.json`);
-}
+/* This script is useful when we translate internally, so we know which keys to translate.
+ * Currently Martin Maugeais translates to French and Kristian Manrique to Spanish.
+ * This script should be run with `npm run missing`. It may fail otherwise, as fs paths are relative to project root.
+ */
+
+const fs = require("fs");
+const en = require("./en.json");
+const fr = require("./fr.json");
+const es = require("./es.json");
+
+const keys = Object.keys(en);
+
+let missingFR = {};
+let missingES = {};
+
+keys.map((key) => {
+  if (!fr[key]) {
+    missingFR[key] = en[key];
+  }
+
+  if (!es[key]) {
+    missingES[key] = en[key];
+  }
+});
+
+const dataFR = JSON.stringify(missingFR, null, 2);
+const dataES = JSON.stringify(missingES, null, 2);
+
+const totalMissingFR = Object.entries(missingFR).length;
+if (totalMissingFR > 0) {
+  fs.writeFile("src/lang/missingTranslationsFR.json", dataFR, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingFR} french translations missing. See src/lang/missingTranslationsFR.json`);
+}
+
+const totalMissingES = Object.entries(missingES).length;
+if (totalMissingES > 0) {
+  fs.writeFile("src/lang/missingTranslationsES.json", dataES, (err) => {
+    !!err && console.log(err);
+  });
+  console.log(`${totalMissingES} spanish translations missing. See src/lang/missingTranslationsES.json`);
+}