@watermarkinsights/ripple 5.3.0-0 → 5.3.0-2

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

@@ -0,0 +1,147 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Timepicker } from "./wm-timepicker";
+describe("timepicker", () => {
+    let page;
+    // let timepicker: any;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Timepicker],
+            html: "<wm-timepicker label='timepicker'></wm-timepicker>",
+        });
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("prevents user actions when disabled", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' disabled></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        const button = await page.root.shadowRoot.querySelector("button");
+        expect(input).toHaveAttribute("disabled");
+        expect(button).toHaveAttribute("disabled");
+    });
+    it("validates input", async () => {
+        const timepicker = new Timepicker();
+        // user passes hour
+        expect(await timepicker.isValidTime("0")).toBe(true);
+        expect(await timepicker.isValidTime("24")).toBe(true);
+        expect(await timepicker.isValidTime("8p")).toBe(true);
+        expect(await timepicker.isValidTime("12 a")).toBe(true);
+        expect(await timepicker.isValidTime("02am")).toBe(true);
+        expect(await timepicker.isValidTime("8:")).toBe(true);
+        // user passes hour and minutes
+        expect(await timepicker.isValidTime("1223")).toBe(true);
+        expect(await timepicker.isValidTime("927a")).toBe(true);
+        expect(await timepicker.isValidTime("12:12pm")).toBe(true);
+        expect(await timepicker.isValidTime("3:45 am")).toBe(true);
+        // rejected
+        expect(await timepicker.isValidTime("6f")).toBe(false);
+        expect(await timepicker.isValidTime("12m")).toBe(false);
+        expect(await timepicker.isValidTime("a")).toBe(false);
+        expect(await timepicker.isValidTime("92")).toBe(false);
+        expect(await timepicker.isValidTime("88:88")).toBe(false);
+        expect(await timepicker.isValidTime("999pm")).toBe(false);
+        expect(await timepicker.isValidTime("o1236")).toBe(false);
+        expect(await timepicker.isValidTime("12:45fm")).toBe(false);
+        expect(await timepicker.isValidTime("12342")).toBe(false);
+        expect(await timepicker.isValidTime("123:")).toBe(false);
+        expect(await timepicker.isValidTime("3:123")).toBe(false);
+        expect(await timepicker.isValidTime("4:60 pm")).toBe(false);
+        // weird edge cases
+        expect(await timepicker.isValidTime("17am")).toBe(false);
+        expect(await timepicker.isValidTime("17pm")).toBe(false);
+        // this is not caught by the regex, so we handle it later
+        expect(await timepicker.isValidTime("0pm")).toBe(true);
+    });
+    it("reformats", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.reformatTime("12", "00:00")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00am")).toBe("12:00 AM");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("12", "12:00pm")).toBe("12:00 PM");
+        expect(await timepicker.reformatTime("12", "24:00")).toBe("12:00 AM");
+        expect(await timepicker.reformatTime("12", "17:00")).toBe("05:00 PM");
+        expect(await timepicker.reformatTime("12", "7:00 am")).toBe("07:00 AM");
+        expect(await timepicker.reformatTime("12", "7 : 35")).toBe("07:35 AM");
+        expect(await timepicker.reformatTime("24", "0:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00am")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "12:00pm")).toBe("12:00");
+        expect(await timepicker.reformatTime("24", "24:00")).toBe("00:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "1700")).toBe("17:00");
+        //@ts-ignore
+        expect(await timepicker.reformatTime("24", "700a")).toBe("07:00");
+        expect(await timepicker.reformatTime("24", "7 :00 pm")).toBe("19:00");
+        expect(await timepicker.reformatTime("24", "17: 35")).toBe("17:35");
+    });
+    it("finds nearest time interval", async () => {
+        const timepicker = new Timepicker();
+        expect(await timepicker.findNearestTimeInterval("00:07")).toBe("00:00");
+        expect(await timepicker.findNearestTimeInterval("01:08")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("01:15")).toBe("01:15");
+        expect(await timepicker.findNearestTimeInterval("02:22")).toBe("02:15");
+        expect(await timepicker.findNearestTimeInterval("03:23")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("03:30")).toBe("03:30");
+        expect(await timepicker.findNearestTimeInterval("04:37")).toBe("04:30");
+        expect(await timepicker.findNearestTimeInterval("15:38")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("15:45")).toBe("15:45");
+        expect(await timepicker.findNearestTimeInterval("16:52")).toBe("16:45");
+        expect(await timepicker.findNearestTimeInterval("17:53")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("18:00")).toBe("18:00");
+        expect(await timepicker.findNearestTimeInterval("23:59")).toBe("00:00");
+        // edge case regarding leading zeroes
+        expect(await timepicker.findNearestTimeInterval("09:59")).toBe("10:00");
+    });
+    it("splits time", () => {
+        const timepicker = new Timepicker();
+        expect(timepicker.splitTime("5:37")).toStrictEqual([5, "37", undefined]);
+        expect(timepicker.splitTime("5:37 am")).toStrictEqual([5, "37", "am"]);
+        expect(timepicker.splitTime("09:00")).toStrictEqual([9, "00", undefined]);
+        expect(timepicker.splitTime("13:52")).toStrictEqual([13, "52", undefined]);
+        // edge case
+        //@ts-ignore
+        expect(timepicker.splitTime("0pm")).toStrictEqual([0, "00", "AM"]);
+    });
+    it("generates times", () => {
+        const timepicker = new Timepicker();
+        //prettier-ignore
+        expect(timepicker.generateTimeIntervals()).toStrictEqual([
+            "00:00", "00:15", "00:30", "00:45",
+            "01:00", "01:15", "01:30", "01:45",
+            "02:00", "02:15", "02:30", "02:45",
+            "03:00", "03:15", "03:30", "03:45",
+            "04:00", "04:15", "04:30", "04:45",
+            "05:00", "05:15", "05:30", "05:45",
+            "06:00", "06:15", "06:30", "06:45",
+            "07:00", "07:15", "07:30", "07:45",
+            "08:00", "08:15", "08:30", "08:45",
+            "09:00", "09:15", "09:30", "09:45",
+            "10:00", "10:15", "10:30", "10:45",
+            "11:00", "11:15", "11:30", "11:45",
+            "12:00", "12:15", "12:30", "12:45",
+            "13:00", "13:15", "13:30", "13:45",
+            "14:00", "14:15", "14:30", "14:45",
+            "15:00", "15:15", "15:30", "15:45",
+            "16:00", "16:15", "16:30", "16:45",
+            "17:00", "17:15", "17:30", "17:45",
+            "18:00", "18:15", "18:30", "18:45",
+            "19:00", "19:15", "19:30", "19:45",
+            "20:00", "20:15", "20:30", "20:45",
+            "21:00", "21:15", "21:30", "21:45",
+            "22:00", "22:15", "22:30", "22:45",
+            "23:00", "23:15", "23:30", "23:45",
+        ]);
+    });
+    it("renders error", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' error-message="There is an error."></wm-timepicker>`);
+        const errorEl = page.root.shadowRoot.querySelector(".error");
+        expect(errorEl.textContent).toBe("There is an error.");
+    });
+    it("sets input to required", async () => {
+        await page.setContent(`<wm-timepicker label='timepicker' required-field='true'></wm-timepicker>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+});

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

@@ -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

@@ -97,9 +97,9 @@ export class Toggletip {
         }
     }
     render() {
-        return (h(Host, { key: '8f5da43befa9de791cb44afba532182f6df0a81d', class: `size-${this.targetSize}` }, h("button", { key: '81c79d18ff76953fbf9dce6192011085ccb296ba', class: "button", type: "button", "aria-label": this.label, onClick: () => this.open(),
+        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", { key: '3b183d1c1624cbadb6b774c55c0debcb99785c6d', ref: (el) => (this.toggletipEl = el), class: `toggletip ${this.isOpen ? "" : "hidden"} ${this.tooltipPosition}` }, this.tooltip), h("div", { key: '45e77332889bdfc552906127f24452ee0c97fe27', ref: (el) => (this.liveRegionEl = el), class: "live-region sr-only", role: "status", "aria-live": "polite", "aria-atomic": "true" })));
+            onMouseEnter: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onMouseLeave: () => hideTooltip(), onFocus: () => showTooltip(this.tooltipPosition, this.el, this.tooltipMessage), onBlur: () => this.handleBlur() }), 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"; }

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

@@ -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

@@ -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

@@ -195,9 +195,9 @@ export class Uploader {
         return (h("div", { class: `wrapper ${this.errorMessage ? "invalid" : ""}` }, h("div", { id: "label", class: `label` }, this.label, this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))));
     }
     render() {
-        return (h(Host, { key: '4f9a5f1221aa84bad9e734bfba6a87f89fcdfd84' }, this.label && this.renderLabel(), this.renderHeader(), this.renderListContainer(), h("div", { key: '59f21688992efe6da96d837efee78d65db18f8d4', 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, null, 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: '1e68b8375c3d41706c5b84af7485d75f99e35dd9', 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

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