npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-0 → 5.11.0-10 - Mend

@watermarkinsights/ripple 5.11.0-0 → 5.11.0-10

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

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

@@ -0,0 +1,41 @@
+import AxePuppeteer from "@axe-core/puppeteer";
+import { newE2EPage } from "@stencil/core/testing";
+describe("wm-textarea", () => {
+    // ts throws erroneous warning about vars being unused...
+    // @ts-ignore
+    let page, el, textarea;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-textarea label='label' character-limit="20"></wm-textarea>
+      </main></body></html>`);
+        el = await page.find("wm-textarea");
+        textarea = await page.find("wm-textarea >>> textarea");
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("updates character count on text entry", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        const characterCount = await page.find("wm-textarea >>> .character-count");
+        expect(characterCount.textContent).toBe("4/20");
+    });
+    it("emits event on value change", async () => {
+        const eventSpy = await el.spyOnEvent("wmTextareaValueChanged");
+        await el.focus();
+        await page.keyboard.type("1234");
+        await page.waitForChanges();
+        expect(eventSpy).toHaveReceivedEventTimes(0);
+        await page.keyboard.press("Tab");
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+        await el.focus();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // expect event to still have fired only once, because value has not changed
+        expect(eventSpy).toHaveReceivedEventTimes(1);
+    });
+});

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

@@ -65,7 +65,7 @@ export class Textarea {
         this.announcement = message;
     }
     render() {
-        return (h("div", { key: 'da640972074f4fc3559d5f96d38b67ca6e318344', class: `wrapper label-${this.labelPosition} ${this.errorMessage ? "invalid" : ""}` }, h("div", { key: 'e94d0f36b0b3227b373ed28249836de792c1eab6', class: "label-wrapper" }, h("label", { key: 'cb23b31a548b758fedf30d48921ea5a9dc6d448a', htmlFor: "inputfield", class: "label" }, this.label, this.characterLimit && (h("span", { key: '7ff30e1c193960fda58d12d7dd86d1d24c410a29', class: "sr-only" }, " ", globalMessages.getCharacterLimit(this.characterLimit))), this.requiredField && (h("span", { key: '497e378c7f6276a8bf19055385caac60689bc0d7', class: "required", "aria-hidden": "true" }, "*")))), h("div", { key: '9a8ff59bb09e83999547ed1f4f2206eef4050a05', class: "inner-wrapper" }, h("div", { key: '6359e4f7919a6414b49d146b98cedc5bcdc44e4d', class: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { key: '411f5b3abbd1a0dcde085b5b18b0738ea7f0929f', id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { key: 'aa2ce03ed1a2ff9731b898c7bc1e71741f3bd780', id: "info", class: "info" }, this.info)), h("div", { key: 'd90b9eca7192178d8267ddaa6ff4d7879d15f349', id: "error", class: "error-message" }, this.errorMessage), h("div", { key: 'f226ad7a61e0f7cfef69f98bcc1b03ee75fa06c8', id: "live-polite", 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" : ""}` }, 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: `inputfield-wrapper ${this.errorMessage ? "invalid" : ""}`, style: this.inputWidth ? { width: this.inputWidth } : {} }, h("textarea", { id: "inputfield", disabled: this.isDisabled, "aria-describedby": "info error", onInput: (ev) => this.handleInput(ev), onBlur: () => this.handleBlur(), placeholder: this.placeholder, autocomplete: "off", "aria-required": this.requiredField ? "true" : null, value: this.value, rows: 3, style: { height: this.inputHeight } }), this.characterLimit && typeof this.characterLimit === "number" ? (h("div", { class: `character-count ${this.value.length > this.characterLimit ? "exceeded" : ""}` }, this.charCount, "/", this.characterLimit)) : ("")), this.info && (h("div", { id: "info", class: "info" }, this.info)), h("div", { id: "error", class: "error-message" }, this.errorMessage), h("div", { id: "live-polite", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.liveRegionEl = el) }, this.announcement))));
     }
     static get is() { return "wm-textarea"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { Textarea } from "./wm-textarea";
+// mock observers
+// global.ResizeObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+// global.MutationObserver = jest.fn().mockImplementation(() => ({
+//   observe: jest.fn(),
+//   unobserve: jest.fn(),
+//   disconnect: jest.fn(),
+// }));
+describe("textarea", () => {
+    let page;
+    let component;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label"></wm-textarea>`,
+        });
+        component = page.root;
+    });
+    it("builds", async () => {
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has right aria roles", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" disabled required-field></wm-textarea>`,
+        });
+        const textarea = await page.root.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("aria-describedby", "info error");
+        expect(textarea).toHaveAttribute("disabled");
+        const error = await page.root.shadowRoot.querySelector("#error");
+        expect(error).toEqualAttribute("aria-live", "assertive");
+        const livePolite = await page.root.shadowRoot.querySelector("#live-polite");
+        expect(livePolite).toEqualAttribute("aria-live", "polite");
+    });
+    it("sets initial value from textcontent", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label">Initial value</wm-textarea>`,
+        });
+        component = page.root;
+        expect(component.value).toBe("Initial value");
+    });
+    it("renders character limit", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" character-limit="20">Hello</wm-textarea>`,
+        });
+        component = page.root;
+        const characterLimitArea = await page.root.shadowRoot.querySelector(".character-count");
+        expect(characterLimitArea.textContent).toBe("5/20");
+    });
+    it("properties override height and width", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" input-width="200px" input-height="300px"></wm-textarea>`,
+        });
+        component = page.root;
+        const textarea = await component.shadowRoot.querySelector("textarea");
+        expect(textarea).toEqualAttribute("style", "height: 300px;");
+        const widthWrapper = await component.shadowRoot.querySelector(".inputfield-wrapper");
+        expect(widthWrapper).toEqualAttribute("style", "width: 200px;");
+    });
+    it("displays info and error-message properties", async () => {
+        page = await newSpecPage({
+            components: [Textarea],
+            html: `<wm-textarea id="textarea" label="label" info="example info text" error-message="example error text"></wm-textarea>`,
+        });
+        component = page.root;
+        const info = await component.shadowRoot.querySelector("#info");
+        expect(info.textContent).toBe("example info text");
+        const error = await component.shadowRoot.querySelector("#error");
+        expect(error.textContent).toBe("example error text");
+    });
+});