@watermarkinsights/ripple 4.2.0-0 → 4.2.0

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

@@ -5,275 +5,275 @@ 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(),
+  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("builds", async () => {
+    const comp = await newSpecPage({
+      components: [Select, Option],
+      html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
     });
-    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");
+    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>',
     });
-    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");
+    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>',
     });
-    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");
+    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>',
     });
-    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");
+    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>',
     });
-    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);
+    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();
     });
-    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("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("toggles tabbing", () => {
-        const component = new Select();
-        component.isTabbing = false;
-        component.toggleTabbingOn();
-        expect(component.isTabbing).toBe(true);
-        component.toggleTabbingOff();
-        expect(component.isTabbing).toBe(false);
+    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("prevent button blur", () => {
-        const component = new Select();
-        const mockStopPropagation = jest.fn();
-        const event = { stopPropagation: mockStopPropagation };
-        const fakeTarget = document.createElement("div");
+    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
-        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();
+        .mockReturnValue([option1, option2, option3]);
+      component.moveToFirstOption();
+      expect(mockFocusOption).toHaveBeenCalledTimes(1);
+      expect(mockFocusOption).toHaveBeenCalledWith(option1);
+      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
+    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
-        event.key = "f";
-        component.handleKey(event);
-        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
-        expect(mockOpen).toHaveBeenCalledTimes(0);
-        jest.clearAllMocks();
-        jest.restoreAllMocks();
+        .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();
     });
-    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">
+  });
+  it("toggles tabbing", () => {
+    const component = new Select();
+    component.isTabbing = false;
+    component.toggleTabbingOn();
+    expect(component.isTabbing).toBe(true);
+    component.toggleTabbingOff();
+    expect(component.isTabbing).toBe(false);
+  });
+  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">
+      });
+      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");
-        });
+      });
+      const btn = page.root.shadowRoot.querySelector(".select-all");
+      expect(btn.textContent).toBe("Deselect All");
     });
+  });
 });