@watermarkinsights/ripple 5.6.0-2 → 5.6.0-3

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

@@ -0,0 +1,74 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFunctions from "../../global/functions";
+jest.spyOn(globalFunctions, "generateId").mockReturnValue("random-id");
+import { Button } from "./wm-button";
+describe("button", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has style and an icon type props with default values", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        const button = page.root;
+        const buttonEl = page.root.shadowRoot.querySelector("button");
+        expect(button).toHaveProperty("buttonType");
+        expect(button.buttonType).toEqual("secondary");
+        expect(buttonEl).toHaveClass("-secondary");
+        expect(button).toHaveProperty("icon");
+        expect(button.icon).toEqual(undefined);
+        expect(button).toHaveProperty("iconSize");
+        expect(button.iconSize).toBeUndefined;
+    });
+    it("has a method that validates the style property and resets an invalid property to a button type of secondary", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        const button = page.root;
+        expect(button).toHaveProperty("buttonType");
+        button.setAttribute("button-type", "foobar");
+        expect(button.buttonType).toEqual("secondary");
+    });
+    it("sets the aria label if the property labelForIdenticalButtons is passed", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button label-for-identical-buttons='read this instead of the text'>Button</wm-button>",
+        });
+        const button = page.root.shadowRoot.querySelector("button");
+        expect(button).toEqualAttribute("aria-label", "read this instead of the text");
+    });
+    // TOOLTIP
+    describe("error throwing", () => {
+        it("throws error when icononly or navigational button used without tooltip", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button icon='f1c0' button-type='icononly'></wm-button>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.");
+            const mockFunc2 = jest.fn();
+            console.error = mockFunc2;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button icon='f1c0' button-type='navigational'></wm-button>",
+            });
+            expect(mockFunc2).toHaveBeenCalledWith("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.");
+        });
+        it("throws error when icononly button used without icon", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button button-type='icononly' tooltip='edit'></wm-button>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.");
+        });
+    });
+});

package/dist/collection/components/wm-file/wm-file.js

@@ -168,7 +168,7 @@ export class File {
         return (h("div", { class: `file-wrapper ${this.progress === 100 ? "checked" : ""}` }, h("div", { class: `file ${this.errorMessage ? "--error" : ""}` }, this.renderFileName(), !this.errorMessage && (h("div", { class: `right-group ${this.isCondensed ? "condensed" : ""}` }, this.renderFileInfo(), this.fileActions !== "" && this.renderFileControls())), this.errorMessage && (h("wm-button", { "permanently-delete": true, "button-type": "textonly", "label-for-identical-buttons": this.generateClearButtonLabel(this.name), onClick: () => this.wmFileErrorCleared.emit() }, this.clearButtonText))), this.errorMessage && h("div", { class: "error-message" }, this.errorMessage)));
     }
     render() {
-        return h(Host, { key: '5ad8e488eb44edfd26404408e27b8adc6d01e124', role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
+        return h(Host, { role: "listitem" }, this.isUploading ? this.renderFileInProgress() : this.renderFile());
     }
     static get is() { return "wm-file"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,194 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { File } from "./wm-file";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-file", () => {
+    let html, page;
+    async function createPageHelper() {
+        return await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`,
+        });
+    }
+    it("renders green check alongside recently uploaded files", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download preview delete"
+    progress="100"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileWrapperEl = page.root.shadowRoot.querySelector(".file-wrapper");
+        expect(fileWrapperEl).toHaveClass("checked");
+    });
+    it("renders file actions in the proper order", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions="download delete preview"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileActionEls = page.root.shadowRoot.querySelectorAll("wm-button");
+        expect(fileActionEls[0]).toEqualAttribute("tooltip", "Preview");
+        expect(fileActionEls[1]).toEqualAttribute("tooltip", "Download");
+        expect(fileActionEls[2]).toEqualAttribute("tooltip", "Delete");
+    });
+    it("defaults available actions to download and delete", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
+        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
+        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
+        expect(deleteButton).toBeTruthy();
+        expect(downloadButton).toBeTruthy();
+        expect(previewButton).toBeFalsy();
+    });
+    it("displays no file actions when an empty string is passed", async () => {
+        html = `<wm-file 
+    id="file1"
+    name="File retrieved from server"
+    type="pdf"
+    last-updated="10/30/97 3:46 PM"
+    size="22 KB"
+    file-actions=""
+    >
+    </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const deleteButton = page.root.shadowRoot.querySelector(".delete-button");
+        const downloadButton = page.root.shadowRoot.querySelector(".download-button");
+        const previewButton = page.root.shadowRoot.querySelector(".preview-button");
+        expect(deleteButton).toBeFalsy();
+        expect(downloadButton).toBeFalsy();
+        expect(previewButton).toBeFalsy();
+    });
+    it("renders timestamp by default, size if specified, or none based on show-info prop", async () => {
+        page = await createPageHelper();
+        await page.waitForChanges();
+        let fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="size"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("22 KB");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="time"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl.textContent).toBe("10/30/97 3:46 PM");
+        page = await newSpecPage({
+            components: [File],
+            html: `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      show-info="none"
+      >
+      </wm-file>`,
+        });
+        await page.waitForChanges();
+        fileInfoEl = page.root.shadowRoot.querySelector(".file-info");
+        expect(fileInfoEl).toBeFalsy();
+    });
+    it("emits the appropriate events when user clicks the buttons", async () => {
+        const filePreviewedSpy = jest.fn();
+        const fileDownloadedSpy = jest.fn();
+        const fileDeletedSpy = jest.fn();
+        html = `<wm-file 
+      id="file1"
+      name="File retrieved from server"
+      type="pdf"
+      last-updated="10/30/97 3:46 PM"
+      size="22 KB"
+      file-actions="download preview delete"
+      >
+      </wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        page.root.addEventListener("wmFilePreview", filePreviewedSpy);
+        page.root.addEventListener("wmFileDownload", fileDownloadedSpy);
+        page.root.addEventListener("wmFileDelete", fileDeletedSpy);
+        // wmFilePreview
+        page.root.shadowRoot.querySelector(".preview-button").click();
+        await page.waitForChanges();
+        expect(filePreviewedSpy.mock.calls[0][0].target.id).toBe("file1");
+        // wmFileDownload
+        page.root.shadowRoot.querySelector(".download-button").click();
+        await page.waitForChanges();
+        expect(fileDownloadedSpy.mock.calls[0][0].target.id).toBe("file1");
+        // wmFileDelete
+        page.root.shadowRoot.querySelector(".delete-button").click();
+        await page.waitForChanges();
+        expect(fileDeletedSpy.mock.calls[0][0].target.id).toBe("file1");
+        jest.restoreAllMocks();
+    });
+    it("renders with an error if one is passed", async () => {
+        html = `<wm-file
+      id="file1"
+      error-message="Example error message"
+      file='{"id": "file1", "name": "File retrieved from server.pdf", "lastUpdated": "10/30/97 3:46 PM", "size": "22 KB", "fileActions": "download preview delete"}'
+      ></wm-file>`;
+        page = await newSpecPage({ components: [File], html });
+        await page.waitForChanges();
+        const fileDiv = page.root.shadowRoot.querySelector(".file");
+        expect(fileDiv).toHaveClass("--error");
+        const errorText = page.root.shadowRoot.querySelector(".error-message");
+        expect(errorText.textContent).toBe("Example error message");
+    });
+});

package/dist/collection/components/wm-file-list/wm-file-list.js

@@ -4,7 +4,7 @@ export class FileList {
         this.showInfo = "last-updated";
     }
     render() {
-        return (h("div", { key: '398a8905ff498ed10cb7057d3c686f26d8f2a36f', role: "list", class: "list-wrapper" }, h("slot", { key: 'c66ff037e9ee2ced8b3ffef541164fe20ae3e125' })));
+        return (h("div", { role: "list", class: "list-wrapper" }, h("slot", null)));
     }
     static get is() { return "wm-file-list"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-file-list/wm-file-list.spec.js

@@ -0,0 +1,69 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { FileList } from "./wm-file-list";
+import { File } from "../wm-file/wm-file";
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-file-list", () => {
+    let page;
+    async function createPageHelper() {
+        return await newSpecPage({
+            components: [FileList, File],
+            html: `<wm-file-list id="filelist1">
+        <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+        <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+      </wm-file-list>`,
+        });
+    }
+    it("renders all files", async () => {
+        page = await createPageHelper();
+        await page.waitForChanges();
+        let fileEls = page.root.querySelectorAll("wm-file");
+        expect(fileEls.length).toBe(2);
+        expect(fileEls[0]).toEqualAttribute("id", "file1");
+        expect(fileEls[1]).toEqualAttribute("id", "file2");
+    });
+    it("passes on show-info to it's children wm-files", async () => {
+        page = await createPageHelper();
+        await page.waitForChanges();
+        // default (last-updated)
+        let fileEl = page.root.querySelector("wm-file");
+        expect(fileEl.showInfo).toBe("last-updated");
+        // size
+        page = await newSpecPage({
+            components: [FileList, File],
+            html: `<wm-file-list id="filelist1" show-info="size">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
+        });
+        await page.waitForChanges();
+        fileEl = page.root.querySelector("wm-file");
+        expect(fileEl.showInfo).toBe("size");
+        // last-updated (specified)
+        page = await newSpecPage({
+            components: [FileList, File],
+            html: `<wm-file-list id="filelist1" show-info="last-updated">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
+        });
+        await page.waitForChanges();
+        fileEl = page.root.querySelector("wm-file");
+        expect(fileEl.showInfo).toBe("last-updated");
+        // none
+        page = await newSpecPage({
+            components: [FileList, File],
+            html: `<wm-file-list id="filelist1" show-info="none">
+      <wm-file id="file1" name="File retrieved from server" type="pdf" last-updated="1/28/2020 5:29 PM" file-actions="preview download"></wm-file>
+      <wm-file id="file2" name="Second file" type="jpeg" last-updated="2/14/2019 7:21 AM" file-actions="preview download"></wm-file>
+    </wm-file-list>`,
+        });
+        await page.waitForChanges();
+        fileEl = page.root.querySelector("wm-file");
+        expect(fileEl.showInfo).toBe("none");
+    });
+});

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

@@ -0,0 +1,32 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-input", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, inputField;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-input label="input"></wm-input>
+      </main></body></html>`);
+        el = await page.find("wm-input");
+        inputField = await page.find("wm-input >>> input");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("updates input value when changed programatically", async () => {
+        el.setProperty("value", "33245");
+        await page.waitForChanges();
+        const value = await el.getProperty("value");
+        expect(value).toBe("33245");
+    });
+    it("updates value prop when user types", async () => {
+        await inputField.type("example");
+        await page.waitForChanges();
+        const value = await el.getProperty("value");
+        expect(value).toBe("example");
+    });
+});

package/dist/collection/components/wm-input/wm-input.js

@@ -101,7 +101,7 @@ export class Input {
             : `info error`;
     }
     render() {
-        return (h("div", { key: '7db24a360d7f3378e69aa3c8fb659aa91b8b913f', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { key: '746b377195a7e93d1ec73f8de6122756d813992d', class: "label-wrapper" }, h("label", { key: '96ca5bc471e4f23aa6138dc377a38e5797b293e6', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: 'e51d0b811eb04dc446d4140a4adf36a4e85423da', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '244fcf468648e136e5c4a528c070488dccaa7c94', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '40d75843b86aa0012a5bb7d277c6d17cd9164ff5', class: "inner-wrapper" }, h("div", { key: '1caa12e9919c11f22071aae6916bbc32d37bebc2', class: "text-after-wrapper" }, h("div", { key: '1e07eb06f59c4c343eb6fd6188440b51046d359c', class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { key: '84db811d1334653344e90eecbc687bd23d9ae032', class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { key: '844dca05f01dde484479577e83176aff952727ab', ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { key: '6e01dbb081603f9c27e39cb8dd33b144657d9654', class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { key: 'cde565ddedd1355ea1129cf38c3de4335da38631', class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { key: 'a8d3c096987bd40efa9c5f7416df7cb50c9cc1ff', id: "info", class: "info" }, this.info)), h("div", { key: '48200834cdd3e3f633256afc75b4daacbf4fa0a8', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: '8db2be5cc97bbad09213e40464010285857638f5', class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
+        return (h("div", { class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}`, ref: (el) => (this.inputWrapperEl = el) }, h("div", { class: "label-wrapper" }, h("label", { htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { class: "required", "aria-hidden": "true" }, "*")))), h("div", { class: "inner-wrapper" }, h("div", { class: "text-after-wrapper" }, h("div", { class: `inputfield-wrapper ${this.isDisabled ? "disabled" : ""}`, style: this.getInputWidth() }, this.symbolBefore && (h("span", { class: "symbol", id: "symbol-before" }, this.symbolBefore)), h("input", { ref: (el) => (this.inputEl = el), id: "inputfield", disabled: this.isDisabled, "aria-describedby": this.descriptors(), onInput: (ev) => this.handleInput(ev), onKeyDown: (ev) => this.handleKeyDown(ev), onBlur: () => this.handleBlur(), onFocus: () => this.handleFocus(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, maxLength: this.characterLimit || undefined, type: this.type, step: this.step, max: this.max, min: this.min, value: this.el.value }), this.symbolAfter && (h("span", { class: "symbol", id: "symbol-after" }, this.symbolAfter)), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: "character-count" }, this.charCount, "/", this.characterLimit)) : ("")), this.textAfter && (h("span", { class: "text-after", id: "text-after" }, this.textAfter))), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-input"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,173 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Input } from "./wm-input";
+describe("input", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Input],
+            html: "<wm-input label='input'></wm-input>",
+        });
+    });
+    it("has the right aria attributes", async () => {
+        let inputField = await page.root.shadowRoot.querySelector("input");
+        // input field is described by help text
+        expect(inputField).toEqualAttribute("aria-describedby", "info error");
+    });
+    it("inputfield is disabled when the prop is passed", async () => {
+        await page.setContent(`<wm-input label="input" disabled></wm-input>`);
+        let inputField = await page.root.shadowRoot.querySelector("input");
+        expect(inputField).toHaveAttribute("disabled");
+    });
+    it("handles keydown", () => {
+        // handleKeyDown
+        const component = new Input();
+        component.characterLimit = 10;
+        let event = { key: "", ctrlKey: false, metaKey: false, altKey: false };
+        let inputEl = document.createElement("input");
+        // @ts-ignore
+        component.inputEl = inputEl;
+        const mockAnnounce = (component.announce = jest.fn());
+        const mockGenerateCharacterLimiWarning = (component.generateCharacterLimitWarning = jest.fn());
+        function resetKeys() {
+            event.key = "";
+            event.ctrlKey = false;
+            event.metaKey = false;
+            event.altKey = false;
+            //@ts-ignore
+            component.inputEl.value = "";
+        }
+        // no modifiers, empty key
+        resetKeys();
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // no modifiers, wrong key
+        resetKeys();
+        event.key = "ArrowDown";
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // no modifiers, right key, not at limit
+        resetKeys();
+        event.key = "a";
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // no modifiers, right key, at limit
+        resetKeys();
+        //@ts-ignore
+        component.inputEl.value = "1234567890";
+        event.key = "a";
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(1);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(1);
+        jest.clearAllMocks();
+        // no modifiers, right key, above limit
+        resetKeys();
+        //@ts-ignore
+        component.inputEl.value = "12345678901234567890";
+        event.key = "a";
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(1);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(1);
+        jest.clearAllMocks();
+        // ctrl modifier, right key, above limit
+        resetKeys();
+        //@ts-ignore
+        component.inputEl.value = "12345678901234567890";
+        event.key = "a";
+        event.ctrlKey = true;
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // meta modifier, right key, above limit
+        resetKeys();
+        //@ts-ignore
+        component.inputEl.value = "12345678901234567890";
+        event.key = "a";
+        event.metaKey = true;
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // alt modifier, right key, above limit
+        resetKeys();
+        //@ts-ignore
+        component.inputEl.value = "12345678901234567890";
+        event.key = "a";
+        event.altKey = true;
+        component.handleKeyDown(event);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimiWarning).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+    it("handles input", () => {
+        // handleInput
+        const component = new Input();
+        let inputEl = {};
+        let event = { target: inputEl };
+        const mockAnnounce = (component.announce = jest.fn());
+        const mockGenerateCharacterLimitWarning = (component.generateCharacterLimitWarning = jest.fn(() => "announcement"));
+        inputEl.value = "fish";
+        event.target = inputEl;
+        //@ts-ignore
+        component.handleInput(event);
+        expect(component.value).toBe("fish");
+        expect(component.charCount).toBe(4);
+        expect(mockAnnounce).toHaveBeenCalledTimes(0);
+        expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(0);
+        component.characterLimit = 10;
+        inputEl.value = "two fish";
+        event.target = inputEl;
+        //@ts-ignore
+        component.handleInput(event);
+        expect(component.value).toBe("two fish");
+        expect(component.charCount).toBe(8);
+        expect(mockAnnounce).toHaveBeenCalledTimes(1);
+        expect(mockAnnounce).toHaveBeenCalledWith("announcement");
+        expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledTimes(1);
+        expect(mockGenerateCharacterLimitWarning).toHaveBeenCalledWith(8, 10);
+        jest.resetAllMocks();
+    });
+    it("updates classes on focus", () => {
+        const component = new Input();
+        const divEl = document.createElement("div");
+        //@ts-ignore
+        component.inputWrapperEl = divEl;
+        //@ts-ignore
+        expect(component.inputWrapperEl).not.toHaveClass("focus");
+        component.handleFocus();
+        //@ts-ignore
+        expect(component.inputWrapperEl).toHaveClass("focus");
+    });
+    it("updates the live region announcement", () => {
+        // announce
+        const component = new Input();
+        let divEl = document.createElement("div");
+        //@ts-ignore
+        component.liveRegionEl = divEl;
+        component.announce("Message");
+        expect(component.announcement).toBe("Message");
+        //@ts-ignore
+        component.liveRegionEl.textContent = "Message";
+        component.announce("Message");
+        expect(component.announcement).toBe("Message" + "\u00A0");
+    });
+    it("generates the appropriate character limit warning", () => {
+        // generateCharacterLimitWarning
+        const component = new Input();
+        expect(component.generateCharacterLimitWarning(0, 10)).toBe("0 of 10 characters entered.");
+        expect(component.generateCharacterLimitWarning(5, 8)).toBe("5 of 8 characters entered.");
+        expect(component.generateCharacterLimitWarning(8, 8)).toBe("8 of 8 characters entered. No additional characters will be entered.");
+    });
+    it("sets input to required", async () => {
+        await page.setContent(`<wm-input label='input' required-field='true'></wm-input>`);
+        const input = await page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-required", "true");
+    });
+});

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

@@ -0,0 +1,23 @@
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-menuitem", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-action-menu id='menu' tooltip="menu name"><wm-menuitem id='first' disabled onClick='action()'>First action</wm-menuitem><wm-menuitem id='second'>Second action</wm-menuitem><wm-menuitem id='third'>Third action</wm-menuitem></wm-action-menu>
+      <script>function action() {document.getElementById('second').innerHTML = 'Changed text'}</script></main></body></html>`);
+    });
+    it("renders", async () => {
+        const element = await page.find("wm-menuitem");
+        expect(element).not.toBeNull();
+    });
+    it("prevents action on disabled item", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter"); // open popup
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        let changedMenuitem = await page.find("wm-menuitem#second");
+        expect(changedMenuitem.innerHTML).toEqual("Second action");
+    });
+});

package/dist/collection/components/wm-menuitem/wm-menuitem.js

@@ -88,7 +88,7 @@ export class Menuitem {
         }
     }
     render() {
-        return (h(Host, { key: '209d7a0e22f05dc500f71a8f8b29e51e4f5da1c2', tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { key: '3b5a9b5d9571ab224b6cde8a5a01548eb045b159', class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { key: 'de7447ebec7218723fec7390b77179bc68ae7823', ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
+        return (h(Host, { tabindex: -1, role: "menuitem", "aria-disabled": this.disabled ? "true" : null }, h("div", { class: "wrapper", "aria-disabled": this.disabled ? "true" : null }, h("span", { ref: (el) => (this.iconEl = el) }), this.el.textContent, this.description ? h("div", { class: "description" }, this.description) : "")));
     }
     static get is() { return "wm-menuitem"; }
     static get encapsulation() { return "shadow"; }