npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-4 → 5.11.0-5 - Mend

@watermarkinsights/ripple 5.11.0-4 → 5.11.0-5

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 (426) hide show

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

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

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

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