@ukic/web-components 3.0.0-alpha.1 → 3.0.0-alpha.10

package/dist/collection/components/ic-select/test/basic/ic-select.spec.js

@@ -66,6 +66,12 @@ const menuOptionsWithDuplicates = [
         ],
     },
 ];
+const menuOptionsWithDisabled = [
+    { label: label1, value: value1 },
+    { label: label2, value: value2 },
+    { label: label3, value: value3, disabled: true },
+    { label: label4, value: value4 },
+];
 const menuOptionsWithGroups = [
     {
         label: "Fancy",
@@ -988,6 +994,34 @@ describe("ic-select searchable", () => {
         await page.waitForChanges();
         expect(eventSpy).not.toHaveBeenCalled();
     });
+    it("should clear the input text on blur when an option is not selected", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.rootInstance.searchableSelectInputValue = "aaa";
+        page.rootInstance.value = null;
+        await page.waitForChanges();
+        const event = new FocusEvent("blur");
+        await page.rootInstance.onBlur(event);
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(null);
+    });
+    it("should not clear the input text on blur when an option is selected", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        const event = new FocusEvent("blur");
+        page.rootInstance.searchableSelectInputValue = label1;
+        page.rootInstance.value = value1;
+        await page.waitForChanges();
+        await page.rootInstance.onBlur(event);
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(label1);
+    });
     it("should test searchable input", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
@@ -1219,7 +1253,7 @@ describe("ic-select searchable", () => {
         page.root.options = menuOptions;
         await page.waitForChanges();
     });
-    it("should test menus opens and closes when enter pressed - external filtering", async () => {
+    it("should test menu opens and closes when enter pressed - external filtering", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
             html: `<ic-select label="IC Select Test" searchable="true" disable-auto-filtering="true" debounce="300"></ic-select>`,
@@ -1308,6 +1342,19 @@ describe("ic-select searchable", () => {
         const input = page.root.shadowRoot.querySelector("input");
         expect(input.value).toBe(value1);
     });
+    it("should set the default value of searchable only when value is not null", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = null;
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(null);
+        page.root.value = value1;
+        await page.waitForChanges();
+        expect(page.rootInstance.searchableSelectInputValue).toBe(label1);
+    });
     it("should test loading state and timeout for searchable select with external filtering", async () => {
         const page = await newSpecPage({
             components: [Select, Menu, InputComponentContainer],
@@ -1435,5 +1482,191 @@ describe("ic-select searchable", () => {
         await page.waitForChanges();
         expect(page.rootInstance.searchableSelectInputValue).toBeUndefined;
     });
+    it("should render disabled", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true" disabled="true"></ic-select>`,
+        });
+        expect(page.root).toMatchSnapshot("renders-disabled");
+        page.rootInstance.disabled = false;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot("disabled-removed");
+    });
+    it("should emit icChange when input is edited after selection", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer],
+            html: `<ic-select label="IC Select Test" searchable="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = null;
+        await page.waitForChanges();
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icChange", eventSpy);
+        const event = { target: { value: value1 } };
+        await page.rootInstance.handleSearchableSelectInput(event);
+        await page.waitForChanges();
+        expect(eventSpy).not.toHaveBeenCalled();
+        page.root.value = value1;
+        await page.rootInstance.handleSearchableSelectInput(event);
+        await page.waitForChanges();
+        expect(eventSpy).toHaveBeenCalledWith(expect.objectContaining({
+            detail: expect.objectContaining({
+                value: null,
+            }),
+        }));
+    });
+});
+describe("ic-select multi", () => {
+    it("should not render a native select on a mobile / tablet screen", async () => {
+        Object.defineProperty(helpers, "isMobileOrTablet", {
+            value: jest.fn().mockReturnValue(true),
+        });
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("should test handleKeyboardOpen method on menu - arrow down", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector("ic-menu");
+        const KeyEvent = {
+            key: "ArrowDown",
+            preventDefault: () => null,
+        };
+        await menu.handleKeyboardOpen(KeyEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.open).toBeTruthy;
+        // Test option is not selected by automatic selection
+        expect(page.rootInstance.value).toBe(undefined);
+    });
+    it("should test menu handleKeyboardOpen method - arrow up", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector("ic-menu");
+        const KeyEvent = {
+            key: "ArrowUp",
+            preventDefault: () => null,
+        };
+        await menu.handleKeyboardOpen(KeyEvent);
+        await page.waitForChanges();
+        expect(page.rootInstance.open).toBeTruthy;
+        // Test option is not selected by automatic selection
+        expect(page.rootInstance.value).toBe(undefined);
+    });
+    it("should test keydown on menu - arrow down, up, and enter", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.rootInstance.open = true;
+        await page.waitForChanges();
+        const menu = page.root.shadowRoot.querySelector(menuUl);
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value1]);
+        expect(page.root).toMatchSnapshot();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowDown",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value1, value2]);
+        expect(page.root).toMatchSnapshot();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "ArrowUp",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        menu.dispatchEvent(new window.window.KeyboardEvent("keydown", {
+            key: "Enter",
+            bubbles: true,
+            cancelable: true,
+        }));
+        await page.waitForChanges();
+        expect(page.rootInstance.value).toEqual([value2]);
+    });
+    it("should select all options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icOptionSelect", eventSpy);
+        page.root.options = menuOptionsWithDisabled;
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: true } });
+        // Test disabled option not selected
+        expect(page.rootInstance.value).toEqual([value1, value2, value4]);
+        expect(eventSpy).toHaveBeenCalledTimes(3);
+    });
+    it("should emit icOptionSelect only for unselected options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        const eventSpy = jest.fn();
+        page.win.addEventListener("icOptionSelect", eventSpy);
+        page.root.options = menuOptionsWithDisabled;
+        page.root.value = [value1];
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: true } });
+        expect(eventSpy).toHaveBeenCalledTimes(2);
+    });
+    it("should deselect all options - handleSelectAllChange", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptionsWithDisabled;
+        page.root.value = [value1, value2, value4];
+        await page.waitForChanges();
+        page.rootInstance.handleSelectAllChange({ detail: { select: false } });
+        expect(page.rootInstance.value).toEqual(null);
+    });
+    it("should sort the selected options by the order of the options in the menu", async () => {
+        const page = await newSpecPage({
+            components: [Select, Menu, InputComponentContainer, Button],
+            html: `<ic-select label="IC Select Test" multiple="true"></ic-select>`,
+        });
+        page.root.options = menuOptions;
+        page.root.value = [value1];
+        await page.waitForChanges();
+        page.root.value = [value2, value1];
+        await page.waitForChanges();
+        const button = page.root.shadowRoot.querySelector("button.select-input");
+        expect(page.rootInstance.currValue).toEqual([value1, value2]);
+        expect(button.textContent).toContain(`${label1}, ${label2}`);
+    });
 });
 //# sourceMappingURL=ic-select.spec.js.map