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-search/wm-search.e2e.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-search", () => {
+    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-search label="example" placeholder="search here"></wm-search>
+      </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("delegates focus", async () => {
+        await page.setContent(`<wm-search label="example" placeholder="search here">click here</wm-search>`);
+        const wmSearch = await page.find("wm-search");
+        wmSearch.focus();
+        let activeEl = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.nodeName;
+        });
+        expect(activeEl).toBe("INPUT");
+    });
+    it("updates the aria-live region with the number of results in the basic type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="basic" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("3 results found");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("2 results found");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+    it("updates the aria-live region with the number of results and the name of the corresponding item in the find type", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<wm-search label="example" search-type="find" placeholder="search here">click here</wm-search>`);
+        await page.waitForChanges();
+        let component = await page.find("wm-search");
+        let input = await page.find("wm-search >>> input");
+        let liveRegion = await page.find("wm-search >>> #wm-search-live");
+        expect(liveRegion.textContent).toEqual("");
+        await input.type("a");
+        await page.waitForChanges();
+        component.setProperty("numResults", 3);
+        component.setProperty("highlightedName", "a");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 3 results, a");
+        await input.type("b");
+        await page.waitForChanges();
+        component.setProperty("numResults", 2);
+        component.setProperty("highlightedName", "b");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("1 of 2 results, b");
+        await input.type("c");
+        await page.waitForChanges();
+        component.setProperty("numResults", 0);
+        component.setProperty("highlightedName", "");
+        await page.waitForChanges();
+        expect(liveRegion.textContent).toEqual("No results found");
+    });
+});

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

@@ -143,10 +143,10 @@ export class Search {
      * Functions that return elements specifically for search-and-find.
      */
     renderResultsAndBrowseButtons() {
-        return (h("div", { class: "wm-find-elements" }, h("div", { id: "results-display", class: "results" }, !!this.value && this.resultCount), h("div", { class: "wm-button-collection" }, h("wm-button", { "button-type": "icononly", icon: "f05d", tooltip: globalMessages.previous, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+        return (h("div", { class: "wm-find-elements" }, h("div", { id: "results-display", class: "results" }, !!this.value && this.resultCount), h("div", { class: "wm-button-collection" }, h("wm-button", { "button-type": "icononly", icon: "#move-up", tooltip: globalMessages.previous, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum - 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
                 id: "search.previousResult",
                 defaultMessage: "Press to hear previous matching result",
-            }) }), h("wm-button", { "button-type": "icononly", icon: "f045", tooltip: globalMessages.next, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
+            }) }), h("wm-button", { "button-type": "icononly", icon: "#move-down", tooltip: globalMessages.next, "tooltip-position": "bottom", onClick: () => this.changeHighlightedNum(this.highlightedNum + 1), disabled: this.isDisabled || this.numResults < 2, "label-for-identical-buttons": intl.formatMessage({
                 id: "search.nextResult",
                 defaultMessage: "Press to hear next matching result",
             }) }))));
@@ -166,10 +166,10 @@ export class Search {
      * End search and find render helpers
      */
     render() {
-        return (h(Host, { key: 'd5a43f8f31d5905f64db7ab92465bd79a38fac2a' }, h("div", { key: 'a775c1f1d3c0fec2661b74d82eb32f9919e1d8c8', id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { key: '8102a634e8063cd736acd7d821f5807270b92cd3', disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
+        return (h(Host, null, h("div", { id: "wm-search-wrapper", class: `wm-search-wrapper ${this.searchType}` }, h("input", { disabled: this.isDisabled, id: "wm-search-input", placeholder: this.placeholder, "aria-label": `${this.label ? this.label + ". " : ""}${intl.formatMessage({
                 id: "search.typeToFilterResults",
                 defaultMessage: "Type to filter the results",
-            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { key: '60a6363bc26e1f3f029aa37ebd84034ba42d2045', class: "mdi search-icon" }, String.fromCodePoint(parseInt(`0xf349`))), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { key: '8c8608879655285e7c99246f38f08a7c974c47d6', id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
+            })}`, onInput: (ev) => this.updateValue(ev.target.value), onBlur: () => this.handleBlur(), "aria-autocomplete": "none", autocomplete: "off", value: this.value }), h("span", { class: "svg-icon svg-search" }), this.searchType === "find" && this.renderResultsAndBrowseButtons(), h("div", { id: "wm-search-live", class: "sr-only", "aria-live": "polite", "aria-atomic": "true", ref: (el) => (this.resultsLiveRegion = el) }, this.announcement)), this.searchType === "find" && this.renderJumpToLink()));
     }
     static get is() { return "wm-search"; }
     static get encapsulation() { return "shadow"; }
@@ -380,9 +380,8 @@ export class Search {
                 "complexType": {
                     "signature": "(value: string) => Promise<void>",
                     "parameters": [{
-                            "name": "value",
-                            "type": "string",
-                            "docs": ""
+                            "tags": [],
+                            "text": ""
                         }],
                     "references": {
                         "Promise": {

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

@@ -0,0 +1,71 @@
+import { Search } from "./wm-search";
+import { newSpecPage } from "@stencil/core/testing";
+console.error = jest.fn();
+describe("wm-search", () => {
+    let page;
+    beforeEach(async () => {
+        jest.clearAllMocks();
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search></wm-search>`,
+        });
+        jest
+            .spyOn(window, "requestAnimationFrame")
+            // @ts-ignore
+            .mockImplementation((cb) => cb());
+    });
+    it("renders", () => {
+        expect(new Search()).toBeTruthy();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const search = new Search();
+        expect(search).toHaveProperty("placeholder");
+        expect(search).toHaveProperty("label");
+        expect(search).toHaveProperty("numResults");
+        expect(search).toHaveProperty("highlightedId");
+        expect(search).toHaveProperty("highlightedName");
+        expect(search).toHaveProperty("searchType");
+    });
+    it("should render an input element", async () => {
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toBeTruthy();
+    });
+    it("renders an aria-live region", () => {
+        const liveRegion = page.root.shadowRoot.querySelector("[aria-live='polite']");
+        expect(liveRegion).toBeTruthy();
+    });
+    it("throws an error if required props aren't passed", async () => {
+        expect(console.error).toHaveBeenCalledTimes(2);
+    });
+    it("should be the basic type by default", () => {
+        const search = new Search();
+        expect(search.searchType).toEqual("basic");
+    });
+    it("renders two buttons when the searchType property is set to find", async () => {
+        page.rootInstance.searchType = "find";
+        await page.waitForChanges();
+        const buttons = page.root.shadowRoot.querySelectorAll("wm-button");
+        expect(buttons.length).toEqual(2);
+    });
+    it("sets the input's placeholder attribute in sentence case according to the placeholder prop", async () => {
+        page = await newSpecPage({
+            components: [Search],
+            html: `<wm-search placeholder="Placeholder value"></wm-search>`,
+        });
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("placeholder", "Placeholder value");
+    });
+    it("sets the input's aria-label attribute according to the label prop", async () => {
+        page.rootInstance.label = "Label value";
+        await page.waitForChanges();
+        const input = page.root.shadowRoot.querySelector("input");
+        expect(input).toEqualAttribute("aria-label", "Label value. Type to filter the results");
+    });
+    it("sets the component's value property according to the input's value", async () => {
+        //Check input rather than just call the method???
+        await page.root.updateValue("hello");
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual("hello");
+    });
+});