@watermarkinsights/ripple 5.11.0-1 → 5.11.0-10

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

@@ -0,0 +1,271 @@
+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 } as unknown;
+        //   component.handleChildUp(event as CustomEvent);
+        //   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 } as unknown;
+        //   component.handleChildDown(event as CustomEvent);
+        //   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");
+        });
+    });
+});