@ukic/web-components 2.1.0-beta.9 → 2.2.0

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

@@ -0,0 +1,584 @@
+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";
+import { InputLabel } from "../../../ic-input-label/ic-input-label";
+beforeAll(() => {
+  jest.spyOn(console, "warn").mockImplementation(jest.fn());
+});
+const menuOptions = [
+  { label: "Espresso", value: "espresso" },
+  { label: "Double Espresso", value: "doubleespresso" },
+  { label: "Flat White", value: "flatwhite" },
+  {
+    label: "Cappuccino",
+    value: "cappucino",
+    description: "with chocolate is best!",
+  },
+  { label: "Americano", value: "americano" },
+  { label: "Ameno", value: "ameno" },
+  {
+    label: "Tea",
+    value: "tea",
+    children: [{ label: "green", value: "green" }],
+  },
+  { label: "Aicano", value: "acano" },
+  { label: "Mocha", value: "mocha" },
+];
+describe("ic-search-bar search", () => {
+  it("should render", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField],
+      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],
+      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 hidelLabel is set", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField],
+      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],
+      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],
+      html: '<ic-search-bar label="Test label" disabled="true"></ic-search-bar>',
+    });
+    expect(page.root).toMatchSnapshot("renders-disabled");
+  });
+  it("should render readonly variant", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField],
+      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],
+      html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
+    });
+    page.root.options = menuOptions;
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-options");
+  });
+  it("should render with helper-text", async () => {
+    const page = await newSpecPage({
+      components: [
+        SearchBar,
+        Button,
+        TextField,
+        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;
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot("renders-with-helpertext");
+  });
+  it("should test clear button", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField, Menu],
+      html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.showClearButton).toBe(false);
+    await page.rootInstance.handleShowClearButton(true);
+    await page.waitForChanges();
+    expect(page.rootInstance.showClearButton).toBe(true);
+    expect(page.rootInstance.clearButtonFocused).toBe(false);
+    await page.rootInstance.handleFocusClearButton();
+    await page.waitForChanges();
+    expect(page.rootInstance.clearButtonFocused).toBe(true);
+  });
+  it("should test handleMenuChange", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField, 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();
+    expect(eventSpy).toHaveBeenCalled();
+    await page.rootInstance.handleMenuChange({
+      detail: { open: false, focusInput: true },
+    });
+    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],
+      html: '<ic-search-bar label="Test label" value="espresso"></ic-search-bar>',
+    });
+    page.root.options = menuOptions;
+    await page.waitForChanges();
+    const focusEventSpy = jest.fn();
+    page.win.addEventListener("icSearchBarFocus", focusEventSpy);
+    page.root.focus();
+    await page.waitForChanges();
+    expect(focusEventSpy).toHaveBeenCalled();
+    expect(page.rootInstance.open).toBeTruthy;
+    const blurEventSpy = jest.fn();
+    page.win.addEventListener("icSearchBarBlur", blurEventSpy);
+    page.root.blur();
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveBeenCalled();
+    expect(page.rootInstance.open).toBeFalsy;
+    page.rootInstance.menuCloseFromMenuChangeEvent = true;
+    page.root.focus();
+    await page.waitForChanges();
+    expect(page.rootInstance.open).toBeFalsy;
+  });
+  it("should test search submit button events", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField, 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");
+    searchButton.focus();
+    await page.waitForChanges();
+    expect(page.rootInstance.searchSubmitFocused).toBe(true);
+    const blurEventSpy = jest.fn();
+    page.win.addEventListener("icSubmitSearchBlur", blurEventSpy);
+    searchButton.blur();
+    await page.waitForChanges();
+    expect(blurEventSpy).toHaveBeenCalled();
+    const clickEventSpy = jest.fn();
+    page.win.addEventListener("icSubmitSearch", clickEventSpy);
+    searchButton.click();
+    await page.waitForChanges();
+    expect(clickEventSpy).toHaveBeenCalled();
+    expect(clickEventSpy).toHaveBeenCalledTimes(1);
+    const event = new KeyboardEvent("keydown", { key: " " });
+    await page.rootInstance.handleSubmitSearchKeyDown(event);
+    await page.waitForChanges();
+    expect(clickEventSpy).toHaveBeenCalledTimes(2);
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    const eventSpy = jest.fn();
+    page.win.addEventListener("menuOptionId", eventSpy);
+    const menu = page.root.shadowRoot.querySelector("ic-menu");
+    menu.autoFocusOnSelected = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "ArrowDown", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled;
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { 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],
+      html: '<ic-search-bar label="Test label" search-mode="query"></ic-search-bar>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "Enter", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("");
+  });
+  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>',
+    });
+    const focusSpy = jest.spyOn(SearchBar.prototype, "setFocus");
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    const eventSpy = jest.fn();
+    page.win.addEventListener("menuOptionId", eventSpy);
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "1", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(focusSpy).toHaveBeenCalled;
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "ArrowUp", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled;
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "ArrowUp", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { 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 } },
+    });
+    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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    const focusEvent = jest.spyOn(SearchBar.prototype, "setFocus");
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "Backspace", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("espresso");
+    expect(focusEvent).toHaveBeenCalled;
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "ArrowUp", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "ArrowDown", preventDefault: () => null } },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("espresso");
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    let items = Array.from(page.root.shadowRoot.querySelectorAll("ic-menu li"));
+    items[2].click();
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("flatwhite");
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    items = Array.from(page.root.shadowRoot.querySelectorAll("ic-menu li"));
+    items[2].blur();
+    expect(page.rootInstance.open).toBe(false);
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyDown({
+      detail: { event: { key: "Tab", preventDefault: () => null } },
+    });
+    await page.rootInstance.handleKeyDown({
+      detail: {
+        event: {
+          key: "Escape",
+          preventDefault: () => null,
+          stopImmediatePropagation: () => null,
+        },
+      },
+    });
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("espresso");
+    expect(page.rootInstance.open).toBe(false);
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyUp({ key: "Enter" });
+    await page.waitForChanges();
+    expect(page.rootInstance.open).toBe(false);
+    page.rootInstance.preventSubmit = true;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyUp({ key: "Escape" });
+    expect(page.rootInstance.open).toBe(false);
+    expect(page.rootInstance.preventSubmit).toBe(false);
+    page.rootInstance.preventSubmit = true;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleKeyUp({ key: "Enter" });
+    expect(page.rootInstance.open).toBe(true);
+  });
+  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>',
+    });
+    page.root.value = "mocha";
+    await page.waitForChanges();
+    expect(page.rootInstance.value).toBe("mocha");
+    expect(page.rootInstance.inputEl.value).toBe("mocha");
+  });
+  it("should test input event handler", async () => {
+    const page = await newSpecPage({
+      components: [SearchBar, Button, TextField, 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 event = new Event("input", {
+      bubbles: true,
+      cancelable: true,
+    });
+    textfield.dispatchEvent(event);
+    await page.waitForChanges();
+    //delay to wait for aria live update
+    await waitForTimeout(700);
+    expect(page.rootInstance.open).toBe(true);
+    expect(page.rootInstance.showClearButton).toBe(true);
+    const searchResultsStatusEl = page.root.shadowRoot.querySelector(".search-results-status");
+    expect(searchResultsStatusEl).toEqualText("2 results available");
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    await page.waitForChanges();
+    const clearButton = page.root.shadowRoot.querySelector("#clear-button");
+    clearButton.focus();
+    await page.waitForChanges();
+    expect(page.rootInstance.clearButtonFocused).toBe(true);
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icClearBlur", eventSpy);
+    clearButton.blur();
+    await waitForTimeout(500);
+    await page.waitForChanges();
+    expect(eventSpy).toHaveBeenCalled();
+    clearButton.click();
+    await page.waitForChanges();
+    await waitForTimeout(500);
+    expect(page.rootInstance.value).toBe("");
+    //test disconnected callback
+    await page.setContent("");
+    expect(page.rootInstance.assistiveHintEl).toBeNull;
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icOptionSelect", eventSpy);
+    await page.waitForChanges();
+    await page.rootInstance.handleOptionSelect({
+      detail: { label: "No results found" },
+    });
+    await page.waitForChanges();
+    expect(eventSpy).not.toHaveBeenCalled;
+  });
+  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>',
+    });
+    page.root.options = menuOptions;
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    await page.rootInstance.handleOptionSelect({
+      detail: { label: "No results found" },
+    });
+    expect(page.rootInstance.prevNoOption).toBe(false);
+    page.rootInstance.prevNoOption = true;
+    await page.waitForChanges();
+    await page.rootInstance.highlightFirstOptionAfterNoResults();
+    expect(page.rootInstance.prevNoOption).toBe(false);
+  });
+  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");
+    const event = new Event("input", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.value = "aa";
+    textfield.dispatchEvent(event);
+    page.rootInstance.loading = true;
+    await page.waitForChanges();
+    //delay to wait for aria live update
+    await waitForTimeout(700);
+    expect(page.rootInstance.filteredOptions).toHaveLength(1);
+    expect(page.rootInstance.filteredOptions[0].label).toEqual("Loading...");
+  });
+  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");
+    const event = new Event("input", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.value = "lo";
+    textfield.dispatchEvent(event);
+    page.rootInstance.loading = true;
+    await page.waitForChanges();
+    //delay to wait for aria live update
+    await waitForTimeout(700);
+    expect(page.rootInstance.filteredOptions).toHaveLength(1);
+    expect(page.rootInstance.filteredOptions[0].label).toEqual("Loading...");
+    //takes wait time to over timeout time
+    await waitForTimeout(400);
+    expect(page.rootInstance.filteredOptions[0].label).toEqual("Loading Error");
+    page.rootInstance.open = true;
+    await page.waitForChanges();
+    const retryButton = page.root.shadowRoot
+      .querySelector("ic-menu")
+      .querySelector("#retry-button");
+    const eventSpy = jest.fn();
+    page.win.addEventListener("icRetryLoad", eventSpy);
+    retryButton.click();
+    page.rootInstance.loading = true;
+    await page.waitForChanges();
+    //delay to wait for aria live update
+    await waitForTimeout(700);
+    expect(page.rootInstance.filteredOptions[0].label).toEqual("Loading...");
+    expect(eventSpy).toHaveBeenCalled();
+    page.root.options = [];
+    await page.waitForChanges();
+    expect(page.rootInstance.filteredOptions[0].label).toEqual("No results found");
+    //to ensure timeout was cancelled
+    await waitForTimeout(1000);
+    expect(page.rootInstance.filteredOptions[0].label).not.toEqual("Loading Error");
+    // Tests hadNoOptions() when options is updated
+    page.rootInstance.open = false;
+    page.root.options = [];
+    await page.waitForChanges();
+    expect(page.rootInstance.open).toBeFalsy;
+  });
+  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");
+    const event = new Event("input", {
+      bubbles: true,
+      cancelable: true,
+    });
+    page.rootInstance.value = "lo";
+    textfield.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");
+    page.rootInstance.handleRetry({
+      detail: { keyPressed: "Enter", value: "lo" },
+    });
+    await page.waitForChanges();
+    page.rootInstance.handleHostBlur({ relatedTarget: textfield });
+    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>',
+    });
+    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,
+      ],
+      html: '<ic-search-bar label="Test label" value="test"></ic-search-bar>',
+    });
+    await page.rootInstance.handleMouseDown({
+      preventDefault: () => null,
+    });
+    await page.waitForChanges();
+    expect(page.root.value).toBe("test");
+  });
+});
+//# sourceMappingURL=ic-search-bar.spec.js.map