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

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

@@ -1,7 +1,6 @@
 import { SearchBar } from "../../ic-search-bar";
 import { newSpecPage } from "@stencil/core/testing";
 import { Button } from "../../../ic-button/ic-button";
-import { TextField } from "../../../ic-text-field/ic-text-field";
 import { Menu } from "../../../ic-menu/ic-menu";
 import { waitForTimeout } from "../../../../testspec.setup";
 import { InputContainer } from "../../../ic-input-container/ic-input-container";
@@ -31,35 +30,35 @@ const menuOptions = [
 describe("ic-search-bar search", () => {
     it("should render", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders");
     });
     it("should render with value", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label" value="foo"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders-with-value");
     });
     it("should render aria-label when hideLabel is set", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label" hide-label="true"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders-with-hidden-label");
     });
     it("should render required variant", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label" required="true"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders-required");
     });
     it("should render disabled variant", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label" disabled="true"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders-disabled");
@@ -69,14 +68,14 @@ describe("ic-search-bar search", () => {
     });
     it("should render readonly variant", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField],
+            components: [SearchBar, Button],
             html: '<ic-search-bar label="Test label" readonly="true"></ic-search-bar>',
         });
         expect(page.root).toMatchSnapshot("renders-readonly");
     });
     it("should render with options", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
         });
         page.root.options = menuOptions;
@@ -85,14 +84,7 @@ describe("ic-search-bar search", () => {
     });
     it("should render with helper-text", async () => {
         const page = await newSpecPage({
-            components: [
-                SearchBar,
-                Button,
-                TextField,
-                Menu,
-                InputContainer,
-                InputLabel,
-            ],
+            components: [SearchBar, Button, Menu, InputContainer, InputLabel],
             html: '<ic-search-bar label="Test label" value="espresso" helper-text="This is a description"></ic-search-bar>',
         });
         page.root.options = menuOptions;
@@ -101,7 +93,7 @@ describe("ic-search-bar search", () => {
     });
     it("should test clear button", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
         });
         await page.waitForChanges();
@@ -116,12 +108,11 @@ describe("ic-search-bar search", () => {
     });
     it("should test handleMenuChange", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
         });
         const eventSpy = jest.fn();
         page.win.addEventListener("icMenuChange", eventSpy);
-        const focusEvent = jest.spyOn(SearchBar.prototype, "setFocus");
         await page.rootInstance.handleMenuChange({ detail: { open: true } });
         expect(page.rootInstance.open).toBe(true);
         await page.waitForChanges();
@@ -131,11 +122,10 @@ describe("ic-search-bar search", () => {
         });
         expect(page.rootInstance.open).toBe(false);
         await page.waitForChanges();
-        expect(focusEvent).toHaveBeenCalled();
     });
     it("should test host blur", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
         });
         page.root.options = menuOptions;
@@ -159,7 +149,7 @@ describe("ic-search-bar search", () => {
     });
     it("should test search submit button events", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<form><ic-search-bar label="Test label" value="espresso" focus-on-load="true"></ic-search-bar></form>',
         });
         const searchButton = page.root.shadowRoot.querySelector("#search-submit-button");
@@ -184,8 +174,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test keydown event - arrow down", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -193,22 +183,24 @@ describe("ic-search-bar search", () => {
         const eventSpy = jest.fn();
         page.win.addEventListener("menuOptionId", eventSpy);
         const menu = page.root.shadowRoot.querySelector("ic-menu");
-        menu.autoFocusOnSelected = true;
+        menu.autofocusOnSelected = true;
         await page.waitForChanges();
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "ArrowDown", preventDefault: () => null } },
+            key: "ArrowDown",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(eventSpy).toHaveBeenCalled;
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "Enter", preventDefault: () => null } },
+            key: "Enter",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(page.rootInstance.value).toBe("doubleespresso");
     });
     it("should test searchMode = `query`", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" search-mode="query"></ic-search-bar>',
         });
         page.root.options = menuOptions;
@@ -222,8 +214,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test keydown event - arrow up", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         const focusSpy = jest.spyOn(SearchBar.prototype, "setFocus");
         page.root.options = menuOptions;
@@ -232,35 +224,40 @@ describe("ic-search-bar search", () => {
         const eventSpy = jest.fn();
         page.win.addEventListener("menuOptionId", eventSpy);
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "1", preventDefault: () => null } },
+            key: "1",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(focusSpy).toHaveBeenCalled;
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "ArrowUp", preventDefault: () => null } },
+            key: "ArrowUp",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(eventSpy).toHaveBeenCalled;
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "ArrowUp", preventDefault: () => null } },
+            key: "ArrowUp",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "Enter", preventDefault: () => null } },
+            key: "Enter",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(page.rootInstance.value).toBe("acano");
         page.rootInstance.open = true;
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "Backspace", preventDefault: () => null } },
+            key: "Backspace",
+            preventDefault: () => null,
         });
         await page.waitForChanges();
         expect(page.rootInstance.value).toBe("acano");
     });
     it("should test keydown event - backspace", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -275,8 +272,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test wrap around in menu", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -293,8 +290,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test menu item click", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -311,23 +308,20 @@ describe("ic-search-bar search", () => {
     });
     it("should test keydown event - escape", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
         await page.waitForChanges();
         await page.rootInstance.handleKeyDown({
-            detail: { event: { key: "Tab", preventDefault: () => null } },
+            key: "Tab",
+            preventDefault: () => null,
         });
         await page.rootInstance.handleKeyDown({
-            detail: {
-                event: {
-                    key: "Escape",
-                    preventDefault: () => null,
-                    stopImmediatePropagation: () => null,
-                },
-            },
+            key: "Escape",
+            preventDefault: () => null,
+            stopImmediatePropagation: () => null,
         });
         await page.waitForChanges();
         expect(page.rootInstance.value).toBe("espresso");
@@ -335,8 +329,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test key up event", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -358,8 +352,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test changing value", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.value = "mocha";
         await page.waitForChanges();
@@ -368,17 +362,17 @@ describe("ic-search-bar search", () => {
     });
     it("should test input event handler", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
+            components: [SearchBar, Button, Menu],
             html: '<ic-search-bar label="Test label" value="espresso" ></ic-search-bar>',
         });
         page.root.options = menuOptions;
         await page.waitForChanges();
-        const textfield = page.root.shadowRoot.querySelector("ic-text-field");
+        const input = page.root.shadowRoot.querySelector("input");
         const event = new Event("input", {
             bubbles: true,
             cancelable: true,
         });
-        textfield.dispatchEvent(event);
+        input.dispatchEvent(event);
         await page.waitForChanges();
         //delay to wait for aria live update
         await waitForTimeout(700);
@@ -389,8 +383,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test clear button events", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         await page.waitForChanges();
@@ -414,8 +408,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test select of empty option list text", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         const eventSpy = jest.fn();
@@ -429,8 +423,8 @@ describe("ic-search-bar search", () => {
     });
     it("should test select of empty option list text with previous option", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, Button, TextField, Menu],
-            html: '<ic-search-bar label="Test label" value="espresso" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, Button, Menu],
+            html: '<ic-search-bar label="Test label" value="espresso" disable-auto-filtering="true"></ic-search-bar>',
         });
         page.root.options = menuOptions;
         page.rootInstance.open = true;
@@ -446,23 +440,16 @@ describe("ic-search-bar search", () => {
     });
     it("should test loading state when no options passed and filtering disabled", async () => {
         const page = await newSpecPage({
-            components: [
-                SearchBar,
-                Button,
-                TextField,
-                Menu,
-                InputContainer,
-                InputLabel,
-            ],
-            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-filter="true"></ic-search-bar>',
-        });
-        const textfield = page.root.shadowRoot.querySelector("ic-text-field");
+            components: [SearchBar, Button, Menu, InputContainer, InputLabel],
+            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-auto-filtering="true"></ic-search-bar>',
+        });
+        const input = page.root.shadowRoot.querySelector("input");
         const event = new Event("input", {
             bubbles: true,
             cancelable: true,
         });
         page.rootInstance.value = "aa";
-        textfield.dispatchEvent(event);
+        input.dispatchEvent(event);
         page.rootInstance.loading = true;
         await page.waitForChanges();
         //delay to wait for aria live update
@@ -472,23 +459,16 @@ describe("ic-search-bar search", () => {
     });
     it("should test loading timeout and retry when options is not populated before the timeout is finished", async () => {
         const page = await newSpecPage({
-            components: [
-                SearchBar,
-                Button,
-                TextField,
-                Menu,
-                InputContainer,
-                InputLabel,
-            ],
-            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-filter="true" timeout="1000"></ic-search-bar>',
-        });
-        const textfield = page.root.shadowRoot.querySelector("ic-text-field");
+            components: [SearchBar, Button, Menu, InputContainer, InputLabel],
+            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-auto-filtering="true" timeout="1000"></ic-search-bar>',
+        });
+        const input = page.root.shadowRoot.querySelector("input");
         const event = new Event("input", {
             bubbles: true,
             cancelable: true,
         });
         page.rootInstance.value = "lo";
-        textfield.dispatchEvent(event);
+        input.dispatchEvent(event);
         page.rootInstance.loading = true;
         await page.waitForChanges();
         //delay to wait for aria live update
@@ -526,55 +506,41 @@ describe("ic-search-bar search", () => {
     });
     it("should test retry loading with keyboard navigation", async () => {
         const page = await newSpecPage({
-            components: [
-                SearchBar,
-                Button,
-                TextField,
-                Menu,
-                InputContainer,
-                InputLabel,
-            ],
-            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-filter="true" timeout="1000"></ic-search-bar>',
-        });
-        const textfield = page.root.shadowRoot.querySelector("ic-text-field");
+            components: [SearchBar, Button, Menu, InputContainer, InputLabel],
+            html: '<ic-search-bar label="Test label" helper-text="This is a description" disable-auto-filtering="true" timeout="1000"></ic-search-bar>',
+        });
+        const input = page.root.shadowRoot.querySelector("input");
         const event = new Event("input", {
             bubbles: true,
             cancelable: true,
         });
         page.rootInstance.value = "lo";
-        textfield.dispatchEvent(event);
+        input.dispatchEvent(event);
         page.rootInstance.loading = true;
         await page.waitForChanges();
         //delay to wait for aria live update and timeout
         await waitForTimeout(1100);
-        const retryClick = jest.spyOn(TextField.prototype, "setFocus");
+        const retryClick = jest.spyOn(HTMLInputElement.prototype, "focus");
         page.rootInstance.handleRetry({
             detail: { keyPressed: "Enter", value: "lo" },
         });
         await page.waitForChanges();
-        page.rootInstance.handleHostBlur({ relatedTarget: textfield });
+        page.rootInstance.handleHostBlur({ relatedTarget: input });
         await page.waitForChanges();
         expect(retryClick).toHaveBeenCalled;
         expect(page.rootInstance.open).toBeTruthy;
     });
     it("should render a hidden assistive element on load", async () => {
         const page = await newSpecPage({
-            components: [SearchBar, TextField, InputContainer, InputLabel],
-            html: '<ic-search-bar label="Test label" hint-text="Hint" disable-filter="true"></ic-search-bar>',
+            components: [SearchBar, InputContainer, InputLabel],
+            html: '<ic-search-bar label="Test label" assistive-hint-text="Hint" disable-auto-filtering="true"></ic-search-bar>',
         });
         expect(page.rootInstance.assistiveHintEl).not.toBeNull;
         expect(page.rootInstance.assistiveHintEl.innerText).toBe("Hint");
     });
     it("should test mousedown handler", async () => {
         const page = await newSpecPage({
-            components: [
-                SearchBar,
-                Button,
-                TextField,
-                Menu,
-                InputContainer,
-                InputLabel,
-            ],
+            components: [SearchBar, Button, Menu, InputContainer, InputLabel],
             html: '<ic-search-bar label="Test label" value="test"></ic-search-bar>',
         });
         await page.rootInstance.handleMouseDown({