@watermarkinsights/ripple 5.2.1-2 → 5.2.1

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