@watermarkinsights/ripple 5.5.0 → 5.5.1

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

@@ -1,271 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import * as globalFuncs from "../../global/functions";
-jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
-import { Select } from "./wm-select";
-import { Option } from "../wm-option/wm-option";
-// mock MutationObserver
-global.MutationObserver = jest.fn().mockImplementation(() => ({
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-    disconnect: jest.fn(),
-}));
-describe("wm-select", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({
-            components: [Select, Option],
-            html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("has the right props", () => {
-        const select = new Select();
-        expect(select).toHaveProperty("label");
-        expect(select).toHaveProperty("labelPosition");
-        expect(select).toHaveProperty("maxHeight");
-        expect(select).toHaveProperty("requiredField");
-        expect(select).toHaveProperty("errorMessage");
-        expect(select).toHaveProperty("disabled");
-        expect(select).toHaveProperty("multiple");
-        expect(select).toHaveProperty("search");
-        expect(select).toHaveProperty("selectAll");
-        expect(select).toHaveProperty("placeholder");
-        expect(select).toHaveProperty("isExpanded");
-        expect(select).toHaveProperty("childOptions");
-        expect(select).toHaveProperty("keysSoFar");
-        expect(select).toHaveProperty("searchIndex");
-    });
-    it("has the right roles", async () => {
-        const page = await newSpecPage({
-            components: [Select, Option],
-            html: '<wm-select id="random-id" search label="mock label"><wm-option selected>First option</wm-option></wm-select>',
-        });
-        const searchFieldEl = await page.root.shadowRoot.querySelector(".searchfield");
-        const listboxEl = await page.root.shadowRoot.querySelector("#list");
-        expect(listboxEl).toEqualAttribute("role", "listbox");
-        expect(listboxEl).not.toHaveAttribute("aria-multiselectable"); // only multiselect
-        expect(searchFieldEl).toEqualAttribute("role", "combobox");
-    });
-    it("multiselect has multiselectable aria attr", async () => {
-        const page = await newSpecPage({
-            components: [Select, Option],
-            html: '<wm-select multiple label="mock label"><wm-option>1</wm-option></wm-select>',
-        });
-        const listboxEl = await page.root.shadowRoot.querySelector("#list");
-        expect(listboxEl).toHaveAttribute("aria-multiselectable");
-    });
-    it("displays error message", async () => {
-        const page = await newSpecPage({
-            components: [Select, Option],
-            html: '<wm-select error-message="test error" label="mock label"><wm-option selected></wm-option></wm-select>',
-        });
-        const errorMessage = await page.root.shadowRoot.querySelector(".error-message");
-        expect(errorMessage.textContent).toBe("test error");
-    });
-    it("adapts options correctly - multiselect", async () => {
-        const page = await newSpecPage({
-            components: [Select, Option],
-            html: '<wm-select multiple label="mock label"><wm-option></wm-option></wm-select>',
-        });
-        const option = await page.root.querySelector("wm-option");
-        expect(option === null || option === void 0 ? void 0 : option.classList.contains("multi-option")).toBe(true);
-    });
-    describe("reacts to wm-option events", () => {
-        it("handles option Enter", () => {
-            // handleChildEnter
-            const component = new Select();
-            const mockClose = (component.close = jest.fn());
-            component.handleChildEnter();
-            expect(mockClose).toHaveBeenCalledTimes(1);
-            jest.restoreAllMocks();
-        });
-        it("handles option Up", () => {
-            // handleChildUp
-            const component = new Select();
-            const mockMoveUp = (component.moveUp = jest.fn());
-            const optionEl = document.createElement("option");
-            const event = { detail: optionEl };
-            component.handleChildUp(event);
-            expect(mockMoveUp).toHaveBeenCalledTimes(1);
-            expect(mockMoveUp).toHaveBeenCalledWith(optionEl);
-            jest.restoreAllMocks();
-        });
-        it("handles option Down", () => {
-            // handleChildDown
-            const component = new Select();
-            const mockMoveDown = (component.moveDown = jest.fn());
-            const optionEl = document.createElement("option");
-            const event = { detail: optionEl };
-            component.handleChildDown(event);
-            expect(mockMoveDown).toHaveBeenCalledTimes(1);
-            expect(mockMoveDown).toHaveBeenCalledWith(optionEl);
-            jest.restoreAllMocks();
-        });
-        it("handles option Home", () => {
-            // moveToFirstOption
-            const component = new Select();
-            const mockFocusOption = (component.focusOption = jest.fn());
-            const option1 = document.createElement("option");
-            option1.textContent = "1";
-            const option2 = document.createElement("option");
-            option2.textContent = "2";
-            const option3 = document.createElement("option");
-            option3.textContent = "3";
-            jest
-                .spyOn(component, "visibleOptionEls", "get")
-                // @ts-ignore
-                .mockReturnValue([option1, option2, option3]);
-            component.moveToFirstOption();
-            expect(mockFocusOption).toHaveBeenCalledTimes(1);
-            expect(mockFocusOption).toHaveBeenCalledWith(option1);
-            jest.restoreAllMocks();
-        });
-        it("handles option End", () => {
-            // moveToLastOption
-            const component = new Select();
-            const mockFocusOption = (component.focusOption = jest.fn());
-            const option1 = document.createElement("option");
-            option1.textContent = "1";
-            const option2 = document.createElement("option");
-            option2.textContent = "2";
-            const option3 = document.createElement("option");
-            option3.textContent = "3";
-            jest
-                .spyOn(component, "visibleOptionEls", "get")
-                // @ts-ignore
-                .mockReturnValue([option1, option2, option3]);
-            component.moveToLastOption();
-            expect(mockFocusOption).toHaveBeenCalledTimes(1);
-            expect(mockFocusOption).toHaveBeenCalledWith(option3);
-            jest.restoreAllMocks();
-        });
-        it("handles option Escape", () => {
-            // closePopupOnEscape
-            const component = new Select();
-            const mockClose = (component.close = jest.fn());
-            component.closePopupOnEscape();
-            expect(mockClose).toHaveBeenCalledTimes(1);
-            expect(mockClose).toHaveBeenCalledWith();
-            jest.restoreAllMocks();
-        });
-        it("handles option Blur", () => {
-            // handleOptionBlur
-            const component = new Select();
-            const blurObserver = jest.fn();
-            const fakeTarget = document.createElement("div");
-            component.el.addEventListener("blur", blurObserver);
-            component.handleOptionBlur({ detail: { relatedTarget: component.el } });
-            expect(blurObserver).toHaveBeenCalledTimes(0);
-            jest.clearAllMocks();
-            component.handleOptionBlur({ detail: { relatedTarget: fakeTarget } });
-            expect(blurObserver).toHaveBeenCalledTimes(1);
-            expect(blurObserver.mock.calls[0][0].relatedTarget).toStrictEqual(fakeTarget);
-            jest.clearAllMocks();
-            jest.restoreAllMocks();
-        });
-    });
-    it("prevent button blur", () => {
-        const component = new Select();
-        const mockStopPropagation = jest.fn();
-        const event = { stopPropagation: mockStopPropagation };
-        const fakeTarget = document.createElement("div");
-        // @ts-ignore
-        event.relatedTarget = fakeTarget;
-        component.handleButtonBlur(event);
-        expect(mockStopPropagation).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        // @ts-ignore
-        event.relatedTarget = component.el;
-        component.handleButtonBlur(event);
-        expect(mockStopPropagation).toHaveBeenCalledTimes(1);
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
-    });
-    it("handles keydowns", () => {
-        const component = new Select();
-        const mockPreventDefault = jest.fn();
-        const event = { preventDefault: mockPreventDefault, key: "" };
-        const mockOpen = (component.open = jest.fn());
-        // @ts-ignore
-        event.key = "ArrowDown";
-        component.isExpanded = false;
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-        expect(mockOpen).toHaveBeenCalledWith("next");
-        jest.clearAllMocks();
-        component.isExpanded = true;
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        expect(mockOpen).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        // @ts-ignore
-        event.key = "ArrowUp";
-        component.isExpanded = false;
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
-        expect(mockOpen).toHaveBeenCalledTimes(1);
-        expect(mockOpen).toHaveBeenCalledWith("previous");
-        jest.clearAllMocks();
-        component.isExpanded = true;
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        expect(mockOpen).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        // any other key
-        // @ts-ignore
-        event.key = "f";
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        expect(mockOpen).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
-    });
-    describe("select-all option", () => {
-        it("shows select-all button when prop is set and multiple is set", async () => {
-            const page = await newSpecPage({
-                components: [Select, Option],
-                html: '<wm-select multiple select-all label="mock label"><wm-option></wm-option></wm-select>',
-            });
-            const btn = page.root.shadowRoot.querySelector(".select-all");
-            expect(btn).not.toBeNull();
-        });
-        it("doesn't show select-all button when prop is not set", async () => {
-            const page = await newSpecPage({
-                components: [Select, Option],
-                html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
-            });
-            const btn = page.root.shadowRoot.querySelector(".select-all");
-            expect(btn).toBeNull();
-        });
-        it("doesn't show select-all button when prop is set but multiple is not", async () => {
-            const page = await newSpecPage({
-                components: [Select, Option],
-                html: '<wm-select select-all label="mock label"><wm-option selected></wm-option></wm-select>',
-            });
-            const btn = page.root.shadowRoot.querySelector(".select-all");
-            expect(btn).toBeNull();
-        });
-        it("button text is 'Select all'", async () => {
-            const page = await newSpecPage({
-                components: [Select, Option],
-                html: `<wm-select multiple select-all label="mock label">
-        <wm-option>first</wm-option>
-        <wm-option>second</wm-option>
-        </wm-select>`,
-            });
-            const btn = page.root.shadowRoot.querySelector(".select-all");
-            expect(btn.textContent).toBe("Select All");
-        });
-        it("button text is 'Deselect all' when all options are selected", async () => {
-            const page = await newSpecPage({
-                components: [Select, Option],
-                html: `<wm-select multiple select-all label="mock label">
-        <wm-option selected>first</wm-option>
-        <wm-option selected>second</wm-option>
-        </wm-select>`,
-            });
-            const btn = page.root.shadowRoot.querySelector(".select-all");
-            expect(btn.textContent).toBe("Deselect All");
-        });
-    });
-});

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

@@ -1,112 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-snackbar", () => {
-    let page;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent("<wm-button id='create-snack' onclick='generateSnackbar()'></wm-button><wm-snackbar notifications='[]' id='snack'></wm-snackbar ><script>function generateSnackbar() { const snackbar = document.getElementById('snack'); const id = '3'; let notifications = JSON.parse(snackbar.notifications); let newNotification = {'id': id, message: 'You did something', link: 'Undo'};       let updatedNotifications = [ ...notifications, newNotification ]; snackbar.notifications = JSON.stringify(updatedNotifications); }</script>");
-        await page.evaluate(async () => {
-            document.addEventListener("wmSnackbarSnackFinished", (ev) => {
-                const snackbar = document.querySelector("wm-snackbar");
-                let newSnacks = JSON.parse(snackbar.notifications).filter((snack) => +snack.id !== +ev.detail.id);
-                snackbar.notifications = JSON.stringify(newSnacks);
-            });
-        });
-    });
-    afterEach(async () => {
-        jest.clearAllTimers();
-    });
-    // RENDER
-    it("it displays a snackbar when it receives a notification", async () => {
-        //generate snackbar
-        const button = await page.find("wm-button");
-        button.click(); //perform action that generates a notification
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).not.toBeNull();
-    });
-    it("it displays multiple snackbars when it receives more than one notification", async () => {
-        //generate snackbars
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        button.click();
-        await page.waitForChanges();
-        const snackbars = await page.findAll("wm-snackbar >>> .content-wrapper");
-        expect(snackbars.length).toBe(2);
-    });
-    it("dismisses the snackbar after 20 seconds if the user is clicking and not tabbing", async () => {
-        //generate snackbar
-        const snackExpired = await page.spyOnEvent("wmSnackbarSnackFinished");
-        const button = await page.find("wm-button");
-        button.click();
-        await page.waitForChanges();
-        let snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).not.toBeNull();
-        await new Promise((resolve) => {
-            setTimeout(() => {
-                resolve("");
-            }, 21000);
-        });
-        snack = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snack).toBeNull();
-        expect(snackExpired).toHaveReceivedEventDetail({
-            id: "3",
-            message: "You did something",
-            link: "Undo",
-        });
-    });
-    it("dismisses the snackbar when the close button is clicked", async () => {
-        //generate snackbar
-        const triggerButton = await page.find("wm-button");
-        triggerButton.click();
-        await page.waitForChanges();
-        //press close button
-        const closeButton = await page.find("wm-snackbar >>> button");
-        closeButton.click();
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-    });
-    //ACCESSIBILITY
-    it("renders an aria-live region", async () => {
-        const element = await page.find("wm-snackbar >>> #wm-live-region-snack");
-        expect(element).toEqualAttribute("aria-live", "polite");
-    });
-    it("focuses the action link in snackbar if the user is tabbing", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const focusedElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        const link = await page.find("wm-snackbar >>> .link");
-        expect(focusedElId).toBe(link.id);
-    });
-    it("dismisses the snackbar when enter is pressed on close button and returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //press close button
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-    it("dismisses the snackbar if the user tabs out of it and it returns focus to last active element before snackbar was created", async () => {
-        //generate snackbar
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        //tab out
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const snackbar = await page.find("wm-snackbar >>> .content-wrapper");
-        expect(snackbar).toBeNull();
-        const focusedElId = await page.evaluate(() => document.activeElement.id);
-        expect(focusedElId).toBe("create-snack");
-    });
-});

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

@@ -1,9 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-jest.mock("../../global/functions");
-import { Snackbar } from "./wm-snackbar";
-describe("wm-snackbar", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({ components: [Snackbar], html: "<wm-snackbar><wm-snackbar>" });
-        expect(comp.root).toMatchSnapshot();
-    });
-});

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

@@ -1,91 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-describe("wm-tab-item", () => {
-    let page; //, mock: any;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en' dir="ltr">
-      <head><title>Page</title></head>
-        <body>
-          <main style="height: 3000px">
-          <h1>Title</h1>
-            <div id="tab-container">
-              <wm-tab-list id="test-tab" selected-tab="first">
-                <wm-tab-item tab-id="first" id="first-tab">First</wm-tab-item>
-                <wm-tab-item tab-id="second" id="second-tab">Second</wm-tab-item>
-              </wm-tab-list>
-              <wm-tab-panel tab-id="first" id="dynamic-panel">Tab Content First</wm-tab-panel>
-            </div>
-            <div id="test-div"></div>
-          </main>
-        </body>
-      </html>`);
-        await page.evaluate(async () => {
-            const container = document.querySelector("#tab-container");
-            container.addEventListener("wmTabSelected", (ev) => {
-                const tabList = document.querySelector("#test-tab");
-                tabList.selectedTab = ev.detail.tabId;
-            });
-        });
-        await page.waitForChanges();
-    });
-    it("renders a list item with a role of presentation and with a link that has a role of tab", async () => {
-        const tabItem = await page.find("wm-tab-item");
-        const listItem = await tabItem.shadowRoot.querySelector("li");
-        expect(listItem).not.toBeNull();
-        expect(listItem.getAttribute("role")).toEqual("presentation");
-        const link = await tabItem.shadowRoot.querySelector("a");
-        expect(link).not.toBeNull();
-        expect(link.getAttribute("role")).toEqual("tab");
-    });
-    it("emits an event when clicked or enter is pressed", async () => {
-        const wmTabSelectedSpy = await page.spyOnEvent("wmTabSelected");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        expect(wmTabSelectedSpy).toHaveReceivedEventDetail({ tabId: "second" });
-        jest.restoreAllMocks();
-    });
-    it("has an aria-selected attribute set to true when it is selected", async () => {
-        await page.keyboard.press("Tab"); // To next tab component
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        const linkUncontrolled = await secondTabItemUncontrolled.shadowRoot.querySelector("#tab-link-second");
-        const selectedStatusUncontrolled = await linkUncontrolled.getAttribute("aria-selected");
-        expect(selectedStatusUncontrolled).toBe("true");
-    });
-    it("renders an unordered list with a role of tablist", async () => {
-        const ulElement = await page.find("wm-tab-list >>> ul");
-        expect(ulElement).not.toBeNull();
-        expect(ulElement.getAttribute("role")).toEqual("tablist");
-    });
-    it("has a role of tabpanel", async () => {
-        const tabPanel = await page.find("wm-tab-panel");
-        expect(tabPanel.getAttribute("role")).toEqual("tabpanel");
-    });
-    it("displays if the tab item with the same tabId is selected", async () => {
-        const dynamicPanel = await page.find("#dynamic-panel");
-        expect(dynamicPanel).not.toHaveClass("tab-hidden");
-    });
-    it("does not display if the tab item with the same tabId is not selected", async () => { });
-    it("has an aria-labelledby attribute that corresponds to the correct tab", async () => {
-        //uncontrolled -- tab panel attribute is dynamic
-        let changingTabPanel = await page.find("#dynamic-panel");
-        const label = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(label).toEqual("tab-link-first");
-        let secondTabItemUncontrolled = await page.find("#second-tab");
-        await secondTabItemUncontrolled.click();
-        await page.waitForChanges();
-        changingTabPanel = await page.find("#dynamic-panel");
-        const newLabel = await changingTabPanel.getAttribute("aria-labelledby");
-        expect(newLabel).toEqual("tab-link-second");
-    });
-    it("switches to a dropdown at the appropriate breakpoint", async () => {
-        const comp = await page.find("wm-tab-list");
-        expect(comp).toMatchSnapshot();
-        page.setViewport({ width: 300, height: 900 });
-        await page.waitForChanges();
-        expect(comp).toMatchSnapshot();
-    });
-});

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

@@ -1,12 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { TabList } from "./wm-tab-list/wm-tab-list";
-import { TabItem } from "./wm-tab-item/wm-tab-item";
-describe("wm-tabs", () => {
-    it("builds", async () => {
-        const page = await newSpecPage({
-            components: [TabList, TabItem],
-            html: '<wm-tab-list><wm-tab-item id="tab1"></wm-tab-item></wm-tab-list>',
-        });
-        expect(page.root).toMatchSnapshot();
-    });
-});