@ukic/web-components 2.29.0 → 2.29.1

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

@@ -1,1106 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-beforeAll(() => {
-    jest.spyOn(console, "warn").mockImplementation(jest.fn());
-});
-describe("ic-search-bar", () => {
-    const options = [
-        { label: "foo", value: "foo" },
-        { label: "bar", value: "bar" },
-        { label: "baz", value: "qux" },
-    ];
-    const longOptions = [
-        { label: "item 1", value: "item-1" },
-        { label: "item 2", value: "item-2" },
-        { label: "item 3", value: "item-3" },
-        { label: "item 4", value: "item-4" },
-        { label: "item 5", value: "item-5" },
-    ];
-    const focusAndTypeIntoInput = async (value, page) => {
-        await page.$eval("ic-search-bar", (el) => {
-            const textfield = el.shadowRoot.querySelector("ic-text-field");
-            const input = textfield.shadowRoot.querySelector("#ic-search-bar-input-0");
-            input.focus();
-        });
-        value.split("").forEach(async (char) => {
-            await page.keyboard.press(char);
-        });
-    };
-    it("renders clear button when value present", async () => {
-        const page = await newE2EPage();
-        await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
-        await page.waitForChanges();
-        let clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-        expect(await clearButton.isVisible()).toBeFalsy();
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-        expect(await clearButton.isVisible()).toBeTruthy();
-    });
-    it("should clear value when clear button pressed", async () => {
-        const page = await newE2EPage();
-        await page.setContent('<ic-search-bar label="Test Label"></ic-search-bar>');
-        const searchBar = await page.find("ic-search-bar");
-        const icClear = await page.spyOnEvent("icClear");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-        await clearButton.click();
-        await page.waitForChanges();
-        const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.querySelector("ic-text-field").shadowRoot.activeElement.id);
-        expect(await searchBar.getProperty("value")).toBe("");
-        expect(activeElId).toBe("ic-search-bar-input-0");
-        expect(icClear).toHaveReceivedEvent;
-    });
-    it("should emit icSubmitSearch when submit is clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("foo", page);
-        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-        await searchSubmitButton.click();
-        expect(icSubmitSearch).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-    });
-    it("should invoke submit event when search textfield is in a form", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <form>
-        <ic-search-bar label="Test Label" name="search01"></ic-search-bar>
-      </form>
-      <p id="text">idle</p>
-      <script>
-        document.querySelector('form').addEventListener('submit', (ev) => {
-          ev.preventDefault();
-          document.querySelector('#text').innerText = 'submitted';
-        })
-      </script>
-    `);
-        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-        await searchSubmitButton.click();
-        await page.waitForChanges();
-        expect(icSubmitSearch).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-        const p = await page.find("#text");
-        expect(p.innerText).toBe("submitted");
-    });
-    it("should render options", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await page.waitForChanges();
-        await page.waitForTimeout(500);
-        const menuItems = menu.findAll("li");
-        expect((await menuItems).length).toBe(2);
-        expect(await menu.isVisible()).toBeTruthy();
-    });
-    it("should begin with no aria-owns attribute and then add one when the menu appears", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        let textField = await page.find("ic-search-bar >>> ic-text-field");
-        let menu = await textField.find("ic-menu");
-        expect(textField).not.toHaveAttribute("aria-owns");
-        expect(menu).toBeNull();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        textField = await page.find("ic-search-bar >>> ic-text-field");
-        menu = await textField.find("ic-menu");
-        expect(textField).toHaveAttribute("aria-owns");
-        expect(menu).not.toBeNull();
-    });
-    it("should focus on input when menu is initially displayed", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.waitForTimeout(500);
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        const activeElId = await page.$eval("ic-search-bar", (el) => {
-            const textfield = el.shadowRoot.querySelector("ic-text-field");
-            return textfield.shadowRoot.activeElement.id;
-        });
-        expect(await menu.isVisible()).toBeTruthy();
-        expect(activeElId).toBe("ic-search-bar-input-0");
-    });
-    it("should remove menu when input value is cleared", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForTimeout(500);
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(await menu.isVisible()).toBeTruthy();
-        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-        await clearButton.click();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull();
-    });
-    it("should not update value when options are highlighted", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await searchBar.press("ArrowDown");
-        await page.waitForChanges();
-        expect(await searchBar.getProperty("value")).toBe("ba");
-    });
-    it("should focus on menu on ArrowDown from input", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await searchBar.press("ArrowDown");
-        await page.waitForChanges();
-        const activeElId = await page.$eval("ic-search-bar", (el) => {
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-    });
-    it("should focus on menu on ArrowUp from input", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await searchBar.press("ArrowUp");
-        await page.waitForChanges();
-        const activeElId = await page.$eval("ic-search-bar", (el) => {
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-    });
-    it("should highlight first and last options using Home and End and move focus to menu", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("End");
-        await page.waitForChanges();
-        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).not.toHaveClass("focused-option");
-        expect(menuOptions[1]).toHaveClass("focused-option");
-        let activeElId = await page.$eval("ic-search-bar", (el) => {
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(activeElId).toBe("ic-search-bar-input-0-menu-qux");
-        await page.keyboard.press("Home");
-        await page.waitForChanges();
-        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).toHaveClass("focused-option");
-        expect(menuOptions[1]).not.toHaveClass("focused-option");
-        activeElId = await page.$eval("ic-search-bar", (el) => {
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(activeElId).toBe("ic-search-bar-input-0-menu-bar");
-    });
-    it("should select first option and update value as label on Enter", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Enter");
-        expect(await searchBar.getProperty("value")).toBe("bar");
-    });
-    it("should keep the input value on Enter when searchMode is set to `query`", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Enter");
-        expect(await searchBar.getProperty("value")).toBe("ba");
-    });
-    it("should not highlight options when typing and searchMode is `query`", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("bar", page);
-        await page.waitForChanges();
-        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).not.toHaveClass("focused-option");
-    });
-    it("should move focus to first option after one ArrowDown press when searchMode is set to `query`", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label" search-mode="query"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).toHaveClass("focused-option");
-    });
-    it("should add a space to value on Space", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Space");
-        expect(await searchBar.getProperty("value")).toBe("ba ");
-    });
-    it("should remove a character from value on Backspace", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Backspace");
-        expect(await searchBar.getProperty("value")).toBe("b");
-    });
-    it("should set value to last option when pressing up on input", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await searchBar.press("ArrowUp");
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Enter");
-        expect(await searchBar.getProperty("value")).toBe("qux");
-    });
-    it("should close menu on escape", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowUp");
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(await menu.isVisible()).toBeTruthy();
-        await menu.press("Escape");
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull();
-    });
-    it("should close menu when blurred and open when focused", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        await page.waitForChanges();
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        // Will focus clear button then blur
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull;
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(await menu.isVisible()).toBeTruthy();
-    });
-    it("should emit icOptionSelect when a menu option has been selected", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar search label="Test Label"></ic-search-bar>
-    `);
-        const icOptionSelect = await page.spyOnEvent("icOptionSelect");
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("fo", page);
-        await page.waitForChanges();
-        await searchBar.press("ArrowDown");
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await menu.press("Enter");
-        expect(icOptionSelect).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-    });
-    it("should emit icMenuChange when opening/closing menu", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const icMenuChange = await page.spyOnEvent("icMenuChange");
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        expect(icMenuChange).toHaveReceivedEventDetail({
-            open: true,
-        });
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(icMenuChange).toHaveReceivedEventDetail({
-            open: false,
-        });
-    });
-    it("should prepopulate textfield with value in search mode", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label" value="test value"></ic-search-bar>
-    `);
-        const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
-        expect(await input.getProperty("value")).toBe("test value");
-    });
-    it("should filter options", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        await page.waitForChanges();
-        let menuItems = menu.findAll("li");
-        expect((await menuItems).length).toBe(2);
-        await page.keyboard.press("r");
-        await page.waitForChanges();
-        menuItems = menu.findAll("li");
-        expect((await menuItems).length).toBe(1);
-    });
-    it("should prevent form submit event when clear is invoked using Enter", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <form>
-        <ic-search-bar label="Test Label" name="search01"></ic-search-bar>
-      </form>
-      <p id="text">idle</p>
-      <script>
-        document.querySelector('form').addEventListener('submit', () => {
-          document.getElementById('text').innerText = 'submitted';
-        })
-      </script>
-    `);
-        const icClear = await page.spyOnEvent("icClear");
-        const p = await page.find("#text");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        expect(icClear).toHaveReceivedEvent();
-        expect(p.innerText).toBe("idle");
-    });
-    it("should clear the value when clear is invoked using Space - should not add a whitespace", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const icClear = await page.spyOnEvent("icClear");
-        const searchBar = await page.find("ic-search-bar");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Space");
-        await page.waitForChanges();
-        expect(icClear).toHaveReceivedEvent();
-        expect(searchBar.getAttribute("value")).toBe("");
-        expect(searchBar.getAttribute("value").length).toBe(0);
-    });
-    it("should emit icSubmitSearch when search button pressed with Space", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const icSubmitSearch = await page.spyOnEvent("icSubmitSearch");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Space");
-        await page.waitForChanges();
-        expect(icSubmitSearch).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-    });
-    it("should update value and move focus back to input when focus previously on ic-menu", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        const focusedElement = await page.evaluate(() => {
-            const el = document.querySelector("ic-search-bar").shadowRoot;
-            return el.activeElement.id;
-        });
-        expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
-        await page.keyboard.press("r");
-        const inputEl = await page.evaluate(() => {
-            const el = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-text-field");
-            return {
-                focusedEl: el.shadowRoot.activeElement.id,
-                inputValue: el.value,
-            };
-        });
-        expect(inputEl.focusedEl).toBe("ic-search-bar-input-0");
-        expect(inputEl.inputValue).toBe("bar");
-    });
-    it("should render suggestions after number of characters in value set to 3", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        searchBar.setProperty("charactersUntilSuggestion", 3);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull();
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("r", page);
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(await menu.isVisible()).toBeTruthy();
-    });
-    it("should render no results available if no matches", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("zzz", page);
-        await page.waitForChanges();
-        const noOptionsLabel = await page.evaluate(() => {
-            const menuEl = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-menu");
-            const noOptionsItem = menuEl.querySelectorAll("li")[0];
-            return noOptionsItem.innerText;
-        });
-        expect(noOptionsLabel).toBe("No results found");
-    });
-    it("should render 0 results if no matches (updated no options text)", async () => {
-        const NO_OPTIONS = "0 results";
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        searchBar.setProperty("emptyOptionListText", NO_OPTIONS);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("zzz", page);
-        await page.waitForChanges();
-        const noOptionsLabel = await page.evaluate(() => {
-            const menuEl = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-menu");
-            const noOptionsItem = menuEl.querySelectorAll("li")[0];
-            return noOptionsItem.innerText;
-        });
-        expect(noOptionsLabel).toBe(NO_OPTIONS);
-    });
-    it("should disable search button on 0 results", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("zzz", page);
-        await page.waitForChanges();
-        const searchSubmitBtn = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-        expect(await searchSubmitBtn.getProperty("disabled")).toBeTruthy();
-    });
-    it("should focus on first option when ic-menu rendered and Enter should select option", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        const FirstOptionClassIsFocusedOption = await page.evaluate(() => {
-            const menuEl = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-menu");
-            const firstMenuItem = menuEl.querySelectorAll("li")[0];
-            return firstMenuItem.classList.contains("focused-option");
-        });
-        expect(FirstOptionClassIsFocusedOption).toBeTruthy();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const input = await page.find("ic-search-bar >>> ic-text-field >>> #ic-search-bar-input-0");
-        expect(await input.getProperty("value")).toBe("bar");
-    });
-    it("should be able to select second menu item after selecting an initial menu item", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        let firstOption = (await menu.findAll("li"))[0];
-        expect(firstOption).toHaveClass("focused-option");
-        await searchBar.press("Enter");
-        await page.waitForChanges();
-        const value = await searchBar.getProperty("value");
-        await page.waitForChanges();
-        expect(value).toBe("bar");
-        await page.keyboard.press("Backspace");
-        await page.waitForChanges();
-        await searchBar.press("ArrowDown");
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        firstOption = (await menu.findAll("li"))[0];
-        const lastOption = (await menu.findAll("li"))[1];
-        expect(firstOption).not.toHaveClass("focused-option");
-        expect(lastOption).toHaveClass("focused-option");
-        await searchBar.press("Enter");
-        await page.waitForChanges();
-        expect(await searchBar.getProperty("value")).toBe("qux");
-    });
-    it("should tab through search bar from input > clear > submit > ic-menu (when options are available) > back to search bar", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        let focusedElement = await page.evaluate(() => {
-            const el = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-text-field");
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(focusedElement).toBe("ic-search-bar-input-0");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedElement = await page.evaluate(() => {
-            const el = document.querySelector("ic-search-bar");
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(focusedElement).toBe("clear-button");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedElement = await page.evaluate(() => {
-            const el = document.querySelector("ic-search-bar");
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(focusedElement).toBe("search-submit-button");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedElement = await page.evaluate(() => {
-            const el = document.querySelector("ic-search-bar").shadowRoot;
-            return el.activeElement.id;
-        });
-        expect(focusedElement).toBe("ic-search-bar-input-0-menu-bar");
-        await page.waitForChanges();
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedElement = await page.evaluate(() => {
-            const el = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-text-field");
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(focusedElement).toBe("ic-search-bar-input-0");
-    });
-    it("should render menu when shift is pressed while focus on input", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("Shift");
-        const menu = await page.find("ic-search-bar >>> ic-menu");
-        expect(await menu.isVisible()).toBeTruthy();
-    });
-    it("should display tooltip on search buttons when enabled", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        let submitSearchTooltipDisplay = await page.evaluate(() => {
-            const tooltip = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("#search-submit-button")
-                .shadowRoot.querySelector("ic-tooltip")
-                .shadowRoot.querySelector(".ic-tooltip-container");
-            return window.getComputedStyle(tooltip).display;
-        });
-        expect(submitSearchTooltipDisplay).toBe("none");
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForTimeout(300);
-        const clearTooltipDisplay = await page.evaluate(() => {
-            const tooltip = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("#clear-button")
-                .shadowRoot.querySelector("ic-tooltip")
-                .shadowRoot.querySelector(".ic-tooltip-container");
-            return window.getComputedStyle(tooltip).display;
-        });
-        expect(clearTooltipDisplay).toBe("block");
-        await page.keyboard.press("Tab");
-        await page.waitForTimeout(300);
-        submitSearchTooltipDisplay = await page.evaluate(() => {
-            const tooltip = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("#search-submit-button")
-                .shadowRoot.querySelector("ic-tooltip")
-                .shadowRoot.querySelector(".ic-tooltip-container");
-            return window.getComputedStyle(tooltip).display;
-        });
-        expect(submitSearchTooltipDisplay).toBe("block");
-    });
-    it("should highlight first option again after no results found", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("barr", page);
-        await page.waitForChanges();
-        const noOptionsLabel = await page.evaluate(() => {
-            const menuEl = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-menu");
-            const noOptionsItem = menuEl.querySelectorAll("li")[0];
-            return noOptionsItem.innerText;
-        });
-        expect(noOptionsLabel).toBe("No results found");
-        await page.waitForChanges();
-        await page.keyboard.press("Backspace");
-        await page.waitForTimeout(500);
-        const firstOptionFocused = await page.evaluate(() => {
-            const menuEl = document
-                .querySelector("ic-search-bar")
-                .shadowRoot.querySelector("ic-menu");
-            const firstOptionItem = menuEl.querySelectorAll("li")[0];
-            return firstOptionItem.classList.contains("focused-option");
-        });
-        expect(firstOptionFocused).toBeTruthy();
-    });
-    it("should focus onto button from search bar", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-      <ic-button id="button">Foo</ic-button>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        let focusedElement = await page.evaluate(() => {
-            const el = document.querySelector("ic-search-bar").shadowRoot;
-            return el.activeElement.id;
-        });
-        expect(focusedElement).toBe("ic-search-bar-input-0-menu-qux");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        focusedElement = await page.evaluate(() => {
-            return document.activeElement.id;
-        });
-        expect(focusedElement).toBe("button");
-    });
-    it("should emit icChange on delay", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" debounce="500"></ic-search-bar>`);
-        await page.waitForChanges();
-        const icChange = await page.spyOnEvent("icChange");
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForTimeout(600);
-        expect(icChange).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-        await focusAndTypeIntoInput("bar", page);
-        await page.waitForChanges();
-        await page.waitForTimeout(100);
-        expect(icChange).toHaveReceivedEventDetail({
-            value: "foo",
-        });
-        await page.waitForTimeout(500);
-        expect(icChange).toHaveReceivedEventDetail({
-            value: "foobar",
-        });
-    });
-    it("should highlight the menu option items in the correct order with arrowDown", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", longOptions);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("it", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        // First option has focused-option
-        let option = (await menu.findAll("li"))[0];
-        expect(option).toHaveClass("focused-option");
-        // Other options should not
-        for (let i = 1; i < longOptions.length; i++) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-        // Highlight the next option
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        option = (await menu.findAll("li"))[1];
-        expect(option).toHaveClass("focused-option");
-        for (let i = 2; i < longOptions.length; i++) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        option = (await menu.findAll("li"))[2];
-        expect(option).toHaveClass("focused-option");
-        for (let i = 3; i < longOptions.length; i++) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-    });
-    it("should highlight the menu option items in the correct order with arrowUp", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`
-      <ic-search-bar label="Test Label"></ic-search-bar>
-    `);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", longOptions);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("it", page);
-        await page.waitForChanges();
-        const menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        // First option has focused-option class
-        let option = (await menu.findAll("li"))[0];
-        expect(option).toHaveClass("focused-option");
-        // Other options should not have focused-option class
-        for (let i = 1; i < longOptions.length; i++) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-        // Highlight the last option
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        option = (await menu.findAll("li"))[longOptions.length - 1];
-        expect(option).toHaveClass("focused-option");
-        for (let i = longOptions.length - 2; i >= 0; i--) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        option = (await menu.findAll("li"))[longOptions.length - 2];
-        expect(option).toHaveClass("focused-option");
-        for (let i = longOptions.length - 3; i >= 0; i--) {
-            option = (await menu.findAll("li"))[i];
-            expect(option).not.toHaveClass("focused-option");
-        }
-    });
-    it("should reverse tab to submit button", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        await page.keyboard.down("ArrowDown");
-        await page.waitForChanges();
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const activeElId = await page.$eval("ic-search-bar", (el) => {
-            return el.shadowRoot.activeElement.id;
-        });
-        expect(activeElId).toBe("search-submit-button");
-    });
-    it("should not filter options when disable-filter is set to true", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" disable-filter="true"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("foo", page);
-        await page.waitForChanges();
-        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions).toHaveLength(options.length);
-    });
-    it("should select the highlighted option when submit search is clicked", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        // Select first filtered option
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        let menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[0];
-        expect(menuOption).toHaveClass("focused-option");
-        expect(menuOption).toEqualText("bar");
-        await searchSubmitButton.click();
-        await page.waitForChanges();
-        expect(await searchBar.getProperty("value")).toBe("bar");
-        // Select second filtered option
-        const clearButton = await page.find("ic-search-bar >>> ic-text-field ic-button.clear-button");
-        await clearButton.click();
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        menuOption = (await page.findAll("ic-search-bar >>> ic-text-field ic-menu li"))[1];
-        expect(menuOption).toHaveClass("focused-option");
-        expect(menuOption).toEqualText("baz");
-        await searchSubmitButton.click();
-        await page.waitForChanges();
-        expect(await searchBar.getProperty("value")).toBe("qux");
-    });
-    it("should display the loading option in the menu when loading then cancel loading when options provided", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" loading-label="load" disable-filter="true"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions).toHaveLength(1);
-        expect(menuOptions[0]).toHaveClass("loading-option");
-        expect(menuOptions[0]).toEqualText("load");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions).toHaveLength(3);
-        expect(menuOptions[0]).not.toHaveClass("loading-option");
-        expect(searchBar.getProperty("loading")).toBeFalsy;
-    });
-    it("should display the timeout state in the menu when timed out and should not update the options", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" loading-error-label="error message" timeout="1000" disable-filter="true"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(1000);
-        const menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions).toHaveLength(1);
-        expect(menuOptions[0]).toHaveClass("timeout");
-        expect(await menuOptions[0].find("ic-typography")).toEqualText("error message");
-        expect(await menuOptions[0].find("#retry-button")).not.toBeNull;
-        const searchSubmitButton = await page.find("ic-search-bar >>> ic-text-field ic-button.search-submit-button");
-        expect(await searchSubmitButton.getProperty("disabled")).toBeTruthy;
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        expect(menuOptions).toHaveLength(1);
-        expect(menuOptions[0]).toHaveClass("timeout");
-    });
-    it("should be able to focus retry button using tab and should keep loading state when menu closed", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(1000);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const activeElId = await page.$eval("ic-search-bar", (el) => el.shadowRoot.activeElement.id);
-        expect(activeElId).toBe("retry-button");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        let menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(menu).toBeNull;
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        menu = await page.find("ic-search-bar >>> ic-text-field ic-menu");
-        expect(await menu.isVisible()).toBeTruthy;
-        expect(await menu.findAll("li")).toHaveLength(1);
-    });
-    it("should trigger a retry when the retry button is pressed using space and enter", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000" disable-filter="true"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(1000);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        const retryButton = await page.find("ic-search-bar >>> ic-text-field ic-menu #retry-button");
-        await retryButton.press("Enter");
-        await page.waitForChanges();
-        let menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).toEqualText("Loading...");
-        await page.waitForTimeout(1000);
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await retryButton.press(" ");
-        await page.waitForChanges();
-        menuOptions = await page.findAll("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOptions[0]).toEqualText("Loading...");
-    });
-    it("should cancel loading when clear button is pressed", async () => {
-        const page = await newE2EPage();
-        await page.setContent(`<ic-search-bar label="Test Label" timeout="1000"></ic-search-bar>`);
-        const searchBar = await page.find("ic-search-bar");
-        searchBar.setProperty("options", options);
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(1000);
-        const clearButton = await page.find("ic-search-bar >>> ic-text-field .clear-button");
-        await clearButton.click();
-        await page.waitForChanges();
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(750);
-        let menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOption).toEqualText("Loading...");
-        await clearButton.click();
-        await page.waitForChanges();
-        //Check that the timeout was cancelled
-        await page.waitForTimeout(1000);
-        await searchBar.click();
-        await page.waitForChanges();
-        expect(await page.find("ic-search-bar >>> ic-text-field ic-menu")).toBeNull;
-        await focusAndTypeIntoInput("ba", page);
-        searchBar.setProperty("loading", true);
-        await page.waitForChanges();
-        await page.waitForTimeout(750);
-        menuOption = await page.find("ic-search-bar >>> ic-text-field ic-menu li");
-        expect(menuOption).toEqualText("Loading...");
-    });
-});
-//# sourceMappingURL=ic-search-bar.e2e.js.map