npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-7 → 5.11.0-9 - Mend

@watermarkinsights/ripple 5.11.0-7 → 5.11.0-9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (350) hide show

package/dist/collection/components/wm-toggletip/wm-toggletip.e2e.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-toggletip", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
+        </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent("<wm-toggletip label='label' tooltip='Text'></wm-toggletip>");
+        const component = await page.find("wm-toggletip");
+        component.focus();
+        await page.waitForChanges();
+        let activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toBe("BUTTON");
+    });
+    // Enter or click opens tooltip, no change in focus
+    // Tab, escape close tooltip
+    it("opens and closes properly", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        const toggletip = await page.find("wm-toggletip >>> .toggletip");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        // check focus remains on button
+        const activeElNodeName = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.nodeName);
+        expect(activeElNodeName).toEqual("BUTTON");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.click("wm-toggletip");
+        await page.waitForChanges();
+        expect(toggletip).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.mouse.click(-10, -10);
+        await page.waitForChanges();
+        expect(toggletip).toHaveClass("hidden");
+    });
+    // test to make sure liveregion is updated properly
+    it("updates liveregion", async () => {
+        await page.setContent(`<wm-toggletip label='More information' tooltip='Further explanation'></wm-toggletip>`);
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const liveRegion = await page.find("wm-toggletip >>> .live-region");
+        expect(liveRegion.textContent).toBe("Further explanation");
+    });
+    it("renders a tooltip", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><div id="tooltip-container"><div id="wm-tooltip" popover="manual" class="wm-tooltip" aria-hidden="true"></div></div><main><h1>Title</h1>
+        <wm-toggletip label='More information' tooltip='Further explanation'>Click me</wm-toggletip>
+        </main></body></html>`);
+        await page.click("wm-toggletip");
+        const tooltip = await page.find("#wm-tooltip");
+        expect(tooltip.textContent).toEqual("More information");
+    });
+});

package/dist/collection/components/wm-toggletip/wm-toggletip.js CHANGED Viewed

@@ -10,9 +10,7 @@ export class Toggletip {
         this.tooltip = undefined;
         this.tooltipPosition = "bottom-right";
         this.targetSize = "small";
-    }
-    get isOpen() {
-        return this.toggletipEl.matches(":popover-open");
+        this.isOpen = false;
     }
     componentWillLoad() {
         const validTooltipPlacement = [
@@ -41,50 +39,40 @@ export class Toggletip {
                 ev.preventDefault();
                 if (this.isOpen) {
                     ev.stopPropagation(); // prevent closing modal if within one
-                    this.toggletipEl.hidePopover();
+                    this.close();
                 }
                 break;
             case "Tab":
                 if (this.isOpen) {
-                    this.toggletipEl.hidePopover();
+                    this.close();
                 }
         }
     }
     handleClick(ev) {
         if (this.isOpen) {
-            if (ev.target === this.el || this.el.contains(ev.target)) {
+            const isElOrChild = ev.composedPath().includes(this.el);
+            if (isElOrChild) {
                 // Re-announce if clicking any part of the component while open
                 this.announceToggletip();
             }
+            else {
+                this.close();
+            }
         }
     }
     open() {
         hideTooltip();
-        requestAnimationFrame(() => {
-            // toggletip position
-            // Vertical
-            if (this.tooltipPosition.includes("bottom") && shouldOpenUp(this.el, this.toggletipEl.clientHeight)) {
-                this.tooltipPosition = this.tooltipPosition.replace("bottom", "top");
-            }
-            else if (this.tooltipPosition.includes("top") && shouldOpenDown(this.el, this.toggletipEl.clientHeight)) {
-                this.tooltipPosition = this.tooltipPosition.replace("top", "bottom");
-            }
-            // Horizontal
-            if (this.tooltipPosition.includes("left") && shouldShiftRight(this.el, this.toggletipEl.clientWidth)) {
-                this.tooltipPosition = this.tooltipPosition.replace("left", "right");
-            }
-            else if (this.tooltipPosition.includes("right") && shouldShiftLeft(this.el, this.toggletipEl.clientWidth)) {
-                this.tooltipPosition = this.tooltipPosition.replace("right", "left");
-            }
-            requestAnimationFrame(() => {
-                this.toggletipEl.classList.remove("hidden");
-            });
-        });
+        this.setToggletipPosition(this.tooltipPosition, this.el, this.toggletipEl.clientHeight, this.toggletipEl.clientWidth);
+        this.isOpen = true;
         this.announceToggletip();
     }
+    close() {
+        this.isOpen = false;
+        hideTooltip();
+    }
     handleBlur() {
         hideTooltip();
-        // clear live region on blur to prevent old announcement text from being picked up by screen readers
+        // clear liveregion on blur to prevent old announcement text from being picked up by screen readers
         this.liveRegionEl.innerHTML = "";
     }
     announceToggletip() {
@@ -93,10 +81,26 @@ export class Toggletip {
             this.liveRegionEl.innerHTML = this.tooltip;
         }, 10);
     }
+    setToggletipPosition(pos, el, toggletipHeight, toggletipWidth) {
+        // Vertical
+        if (pos.includes("bottom") && shouldOpenUp(el, toggletipHeight)) {
+            pos = pos.replace("bottom", "top");
+        }
+        else if (pos.includes("top") && shouldOpenDown(el, toggletipHeight)) {
+            pos = pos.replace("top", "bottom");
+        }
+        // Horizontal
+        if (pos.includes("left") && shouldShiftRight(el, toggletipWidth)) {
+            pos = pos.replace("left", "right");
+        }
+        else if (pos.includes("right") && shouldShiftLeft(el, toggletipWidth)) {
+            pos = pos.replace("right", "left");
+        }
+    }
     render() {
-        return (h(Host, { key: '32543d13ba5bb35fa974fe8f65194260888e8f82', class: `size-${this.targetSize}` }, h("button", { key: 'ec07b4bd3e2c12b4011f551386a7dd677a18d6ec', class: "button", type: "button", "aria-label": this.label, popoverTarget: "toggletip", popoverTargetAction: "toggle", onClick: () => this.open(),
-            // In order to position the tooltip identically to the toggletip, its presence is determined by these four events
-            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { key: 'c5adc72bc9993bd38675ca3640d9cd899031a50d', class: "svg-icon svg-info" })), h("div", { key: '64fbe0df0fdfb1b84904a3b679b964811c6f36f6', popover: "", ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.tooltipPosition} ${this.targetSize} hidden`, id: "toggletip" }, this.tooltip), h("div", { key: '2e75edec08f5f05fa2016c3da53f6beaa3edb8d9', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+        return (h(Host, { class: `size-${this.targetSize}` }, h("button", { class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+            // In order to position the tooltip identically to the toggletip, it's presence is determined by these four events
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }, h("div", { class: "svg-icon svg-info" })), h("div", { ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-toggletip"; }
     static get encapsulation() { return "shadow"; }
@@ -132,7 +136,7 @@ export class Toggletip {
             },
             "tooltip": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -168,7 +172,7 @@ export class Toggletip {
                     "text": ""
                 },
                 "attribute": "tooltip-position",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "\"bottom-right\""
             },
             "targetSize": {
@@ -191,6 +195,11 @@ export class Toggletip {
             }
         };
     }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
     static get elementRef() { return "el"; }
     static get listeners() {
         return [{

package/dist/collection/components/wm-toggletip/wm-toggletip.spec.js ADDED Viewed

@@ -0,0 +1,21 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Toggletip } from "./wm-toggletip";
+describe("toggletip", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Toggletip],
+            html: `<wm-toggletip label="More information" tooltip="Further explanation"></wm-toggletip>`,
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has proper aria roles & attributes", async () => {
+        const liveRegion = page.root.shadowRoot.querySelector(".live-region");
+        const button = page.root.shadowRoot.querySelector("button");
+        expect(liveRegion).toEqualAttribute("role", "status");
+        expect(button).toEqualAttribute("type", "button");
+        expect(button).toEqualAttribute("aria-label", "More information");
+    });
+});

package/dist/collection/components/wm-uploader/wm-uploader.e2e.js ADDED Viewed

@@ -0,0 +1,70 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-uploader", () => {
+    let page, input, label;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="2020-01-28T22:29:10.397Z"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2019-02-14T12:21:05.397Z"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        input = await page.find("wm-uploader >>> input[type='file']");
+        label = await page.find("wm-uploader >>> label");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders the component", async () => {
+        expect(input).not.toBeNull();
+        expect(label).not.toBeNull();
+    });
+    it("focuses previous file when deleting with the keyboard", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-uploader button-text="Upload new document">
+        <wm-file id="file1" name="First file" type="pdf" file-actions="preview delete"></wm-file>
+        <wm-file id="file2" name="Second file" type="pdf" file-actions="delete"></wm-file>
+      </wm-uploader>
+      </main></body></html>`);
+        await page.waitForChanges();
+        let fileEls = await page.findAll("wm-file");
+        let secondFileEl = fileEls[1];
+        // inital check of file count
+        expect(fileEls.length).toBe(2);
+        // user must be tabbing for these changes to occur
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        // check focused element is last file, delete button
+        let activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file2");
+        let activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+        let mockFileDeleteEvent = new CustomEvent("wmFileDelete");
+        //@ts-ignore
+        mockFileDeleteEvent.target = secondFileEl;
+        secondFileEl.dispatchEvent(mockFileDeleteEvent);
+        await page.evaluate(() => { var _a; return (_a = document.getElementById("file2")) === null || _a === void 0 ? void 0 : _a.remove(); });
+        await page.waitForChanges();
+        // confirm file has been removed
+        fileEls = await page.findAll("wm-file");
+        expect(fileEls.length).toBe(1);
+        // check focused element is last file, delete button
+        activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toBe("file1");
+        activeElButtonType = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.classList[0]);
+        expect(activeElButtonType).toBe("delete-button");
+    });
+    //  it("disables the button dynamically", async () => {
+    // disabled when maxed out
+    // disabled while a file is uploading
+    // not disabled after upload
+    // });
+});

package/dist/collection/components/wm-uploader/wm-uploader.js CHANGED Viewed

@@ -300,9 +300,9 @@ export class Uploader {
         return (h("div", { class: `drop-area -${this.dropArea}`, ref: (el) => (this.dropAreaEl = el), onDragEnter: (ev) => this.handleDragEnter(ev), onDragOver: (ev) => this.handleDragOver(ev), onDragLeave: (ev) => this.handleDragLeave(ev), onDrop: (ev) => this.handleDrop(ev) }, this.dropArea == "page" && (h("div", { ref: (el) => (this.dropOverlayEl = el), class: "drop-overlay", popover: "manual" }, h("span", { class: "upload-arrow" }), h("span", null, "Drop to Upload")))));
     }
     render() {
-        return (h(Host, { key: '05fa03d63ba14665a196bece2c82eabb4882ba82', class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: 'fd2c2779cc8f5e8aab480fdb68ac0e482905785d', ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
+        return (h(Host, { class: `-${this.dropArea}` }, this.uploaderType == "drop" && this.renderDropArea(), this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { ref: (el) => (this.assertiveLiveRegionEl = el), class: "live-region sr-only", "aria-live": "assertive" // since it's directly linked to the action the user took, it should be read in priority. With polite, some messages get dismissed in favor of the page title
             ,
-            "aria-atomic": "true" }), h("div", { key: '2a5c1d00d2a98bd40fa9ac8dbc248209cca470ba', ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
+            "aria-atomic": "true" }), h("div", { ref: (el) => (this.politeLiveRegionEl = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" })));
     }
     static get is() { return "wm-uploader"; }
     static get encapsulation() { return "shadow"; }

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

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