@momentum-ui/web-components 2.16.5 → 2.16.8

package/src/components/combobox/ComboBox.test.ts

@@ -0,0 +1,1530 @@
+import { comboBoxComplexObjectOption, comboBoxObjectOptions, comboBoxOptions } from "@/[sandbox]/sandbox.mock";
+import "@/components/icon/Icon";
+import { Key } from "@/constants";
+import { elementUpdated, fixture, fixtureCleanup, html, nextFrame, oneEvent } from "@open-wc/testing-helpers";
+import { repeat } from "lit-html/directives/repeat";
+import "./ComboBox";
+import { ComboBox } from "./ComboBox";
+
+describe("Combobox Component", () => {
+  afterEach(fixtureCleanup);
+
+  describe("Interaction", () => {
+    let el: ComboBox.ELEMENT;
+
+    beforeEach(async () => {
+      el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions} is-multi></md-combobox> `);
+    });
+    test("should set class if combobox with multi attribute", async () => {
+      expect(el.group!.classList.contains("md-combobox-multiselect")).toBeTruthy();
+    });
+    test("should open/close dropdown if arrow icon clicked", async () => {
+      const button = el.shadowRoot!.querySelector("button[class='md-combobox-button arrow-down']");
+      const event = new MouseEvent("click");
+      button!.dispatchEvent(event);
+      await el.updateComplete;
+      expect(el.expanded).toBeTruthy();
+      button!.dispatchEvent(event);
+      await el.updateComplete;
+      expect(el.expanded).toBeFalsy();
+    });
+
+    test("should dispatch events", async () => {
+      const eventIn = new Event("focusin");
+      const eventOut = new Event("focusOut");
+
+      setTimeout(() => el["handleFocusIn"](eventIn));
+      const focusIn = await oneEvent(el, "combobox-focus-in");
+      expect(focusIn).toBeDefined();
+
+      setTimeout(() => el["handleFocusOut"](eventOut));
+      const focusOut = await oneEvent(el, "combobox-focus-out");
+      expect(focusOut).toBeDefined();
+
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keydown", {
+          code
+        });
+      el.input!.dispatchEvent(createEvent(Key.ArrowDown));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Enter));
+      const { detail: detailOne } = await oneEvent(el, "change-selected");
+      expect(detailOne).toBeDefined();
+      expect(detailOne).toEqual(
+        expect.objectContaining({
+          value: "Afghanistan",
+          selected: ["Afghanistan"]
+        })
+      );
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowDown));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Enter));
+      const { detail: detailTwo } = await oneEvent(el, "change-selected");
+      expect(detailTwo).toBeDefined();
+      expect(detailTwo).toEqual(
+        expect.objectContaining({
+          value: "Aland Islands",
+          selected: ["Afghanistan", "Aland Islands"]
+        })
+      );
+    });
+
+    test("should dispatch input event", async () => {
+      jest.useRealTimers();
+
+      el.input!.value = "a";
+      el["inputValue"] = "a";
+      el.input!.dispatchEvent(new Event("input"));
+
+      const { detail } = await oneEvent(el, "combobox-input");
+
+      expect(detail).toBeDefined();
+      expect(detail).toEqual(expect.objectContaining({ value: "a" }));
+      jest.clearAllTimers();
+    });
+
+    test("should render selected options with multi attribute", async () => {
+      expect(el.selectedOptions.length).toEqual(0);
+      expect(el.selected!.length).toEqual(0);
+
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+
+      await elementUpdated(el);
+
+      expect(el.selectedOptions.length).toEqual(2);
+      expect(el.selected!.length).toEqual(2);
+    });
+
+    test("shouldn't render selected options without multi attribute", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      expect(el.selectedOptions.length).toEqual(0);
+      expect(el.selected!.length).toEqual(0);
+
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+
+      await elementUpdated(el);
+
+      expect(el.selectedOptions.length).toEqual(2);
+      expect(el.selected!.length).toEqual(0);
+    });
+
+    test("should render slotted content", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox with-custom-content is-multi>
+          <div slot="one" aria-label="Facebook" display-value="Facebook">
+            <span>Facebook</span>
+            <md-icon name="icon-facebook_16"></md-icon>
+          </div>
+          <div slot="two" aria-label="Twitter" display-value="Twitter">
+            <span class="company-value">Twitter</span>
+            <md-icon name="icon-twitter_16"></md-icon>
+          </div>
+          <div slot="three" aria-label="Wikipedia" display-value="Wikipedia">
+            <span class="company-value">Wikipedia</span>
+            <md-icon name="icon-wikipedia_16"></md-icon>
+          </div>
+          <div slot="four" aria-label="Google" display-value="Google">
+            <span class="company-value">Google</span>
+            <md-icon name="icon-google_16"></md-icon>
+          </div>
+        </md-combobox>
+      `);
+      expect(el.isCustomContent).toBeTruthy();
+      expect(el["customContent"].length).toEqual(4);
+    });
+
+    test("should render complex slotted content", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox with-custom-content is-multi>
+          ${repeat(
+            comboBoxComplexObjectOption,
+            (country) => country.countryNameEn,
+            (country: { countryNameEn: string; countryCallingCode: string }, index) => html`
+              <div
+                slot=${index}
+                display-value=${country.countryNameEn}
+                aria-label="+${country.countryCallingCode}${country.countryNameEn}"
+              >
+                <span>${country.countryNameEn}</span>
+                <span>+${country.countryCallingCode}</span>
+              </div>
+            `
+          )}
+        </md-combobox>
+      `);
+      expect(el.isCustomContent).toBeTruthy();
+      expect(el["customContent"].length).toEqual(10);
+
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keydown", {
+          code
+        });
+
+      el.input!.dispatchEvent(createEvent(Key.ArrowDown));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Enter));
+
+      expect(el.input!.value).toEqual("Andorra");
+
+      const event = new Event("input");
+      el.input!.value = "4";
+      el.input!.dispatchEvent(event);
+
+      await elementUpdated(el);
+      expect(el.filteredOptions.length).toEqual(5);
+    });
+
+    test("should render async slotted content", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox with-custom-content is-multi .customOptions=${[]}></md-combobox>
+      `);
+
+      el.expanded = true;
+      await elementUpdated(el);
+
+      jest.setTimeout(1000);
+
+      const slottedContent = comboBoxComplexObjectOption
+        .map((country: { countryNameEn: string; countryCallingCode: string }, index) => {
+          return ` <div
+        slot=${index}
+        display-value=${country.countryNameEn}
+        aria-label="+${country.countryCallingCode}${country.countryNameEn}"
+      >
+        <span>${country.countryNameEn}</span>
+        <span>+${country.countryCallingCode}</span>
+      </div>`;
+        })
+        .join("");
+
+      const resizeSpy = jest.spyOn(el, "resizeListbox" as never);
+
+      el.innerHTML = `${slottedContent}`;
+      el.customOptions = comboBoxComplexObjectOption as never[];
+
+      await elementUpdated(el);
+
+      expect(el.options.length).toEqual(10);
+      expect(resizeSpy).toHaveBeenCalled();
+
+      resizeSpy.mockRestore();
+    });
+  });
+
+  describe("Combobox", () => {
+    test("should set correct aria attributes", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} label="Country"></md-combobox>
+      `);
+
+      el.expanded = true;
+      await elementUpdated(el);
+      expect(el.input!.getAttribute("aria-expanded")).toEqual("true");
+      expect(el.button!.getAttribute("aria-expanded")).toEqual("true");
+    });
+
+    test("should open/close dropdown if clicked", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} no-clear-icon></md-combobox>
+      `);
+      const event = new MouseEvent("click");
+      el.input!.dispatchEvent(event);
+      el.input!.focus();
+
+      expect(el.expanded).toBeTruthy();
+
+      document.dispatchEvent(event);
+      el.input!.blur();
+
+      expect(el.expanded).toBeFalsy();
+    });
+
+    test("should set placeholder if property exist", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} placeholder="Placeholder Input"></md-combobox>
+      `);
+
+      expect(el.placeholder).toEqual("Placeholder Input");
+    });
+
+    test("should apply disabled attribute", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} disabled></md-combobox>
+      `);
+      expect(el.disabled).toBeTruthy();
+    });
+
+    test("should set input value in handler", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} disabled></md-combobox>
+      `);
+      const event = new Event("input");
+      el.input!.value = "combobox";
+      el.input!.dispatchEvent(event);
+
+      expect(el["inputValue"]).toEqual("combobox");
+    });
+
+    test("should handle keyUp event", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keyup", {
+          code
+        });
+
+      const backspace = createEvent(Key.Backspace);
+      el.input!.dispatchEvent(backspace);
+
+      const mock = jest.fn();
+
+      el.listBox!.style.maxHeight = mock();
+
+      expect(el.expanded).toBeTruthy();
+      expect(mock).toBeCalled();
+
+      el.expanded = false;
+
+      await elementUpdated(el);
+
+      mock.mockReset();
+      const escape = createEvent(Key.Escape);
+      el.input!.dispatchEvent(escape);
+
+      expect(el.expanded).toBeFalsy();
+      expect(mock).not.toBeCalled();
+    });
+
+    test("should handle keyDown event", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keydown", {
+          code
+        });
+
+      const listLen = el.lists!.length;
+
+      const backspace = createEvent(Key.Backspace);
+      el.input!.dispatchEvent(backspace);
+
+      await elementUpdated(el);
+
+      expect(el.focusedIndex).toEqual(-1);
+
+      el.expanded = true;
+      el.focusedIndex = 0;
+      await elementUpdated(el);
+
+      const arrowLeft = createEvent(Key.ArrowLeft);
+      const propogationSpyLeft = jest.spyOn(arrowLeft, "stopPropagation");
+      el.input!.dispatchEvent(arrowLeft);
+
+      expect(propogationSpyLeft).toHaveBeenCalled();
+      await elementUpdated(el);
+
+      const arrowRight = createEvent(Key.ArrowRight);
+      const propogationSpyRight = jest.spyOn(arrowRight, "stopPropagation");
+      el.input!.dispatchEvent(arrowRight);
+
+      expect(propogationSpyRight).toHaveBeenCalled();
+      await elementUpdated(el);
+
+      const enter = createEvent(Key.Enter);
+      el.input!.dispatchEvent(enter);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeFalsy();
+      expect(el.selectedOptions.length).toEqual(1);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
+      expect(el.input!.value).toEqual("Afghanistan");
+
+      el.expanded = false;
+      el.focusedIndex = 0;
+      await elementUpdated(el);
+
+      const arrowDown = createEvent(Key.ArrowDown);
+      el.input!.dispatchEvent(arrowDown);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(1);
+      expect(el.lists![1].hasAttribute("focused")).toBeTruthy();
+
+      el.expanded = false;
+      el.focusedIndex = listLen - 1;
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(arrowDown);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(0);
+      expect(el.lists![0].hasAttribute("focused")).toBeTruthy();
+
+      el.expanded = false;
+      el.focusedIndex = -1;
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(arrowDown);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(0);
+      expect(el.lists![0].hasAttribute("focused")).toBeTruthy();
+
+      el.expanded = false;
+      el.focusedIndex = 0;
+      await elementUpdated(el);
+
+      const arrowUp = createEvent(Key.ArrowUp);
+      el.input!.dispatchEvent(arrowUp);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(listLen - 1);
+      expect(el.lists![listLen - 1].hasAttribute("focused")).toBeTruthy();
+
+      el.expanded = false;
+      el.focusedIndex = listLen - 1;
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(arrowUp);
+
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(listLen - 2);
+      expect(el.lists![listLen - 2].hasAttribute("focused")).toBeTruthy();
+
+      el.expanded = false;
+      el.focusedIndex = 0;
+      el.input!.value = "combobox";
+      el.selectedOptions.push("Afghanistan");
+      const escape = createEvent(Key.Escape);
+
+      el.input!.dispatchEvent(escape);
+
+      expect(el.input!.value).toEqual("");
+      expect(el.focusedIndex).toEqual(-1);
+      expect(el.selectedOptions.length).toEqual(0);
+
+      el.expanded = true;
+      el.focusedIndex = 0;
+      el.input!.value = "combobox";
+      el.selectedOptions.push("Afghanistan");
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(escape);
+      expect(el.expanded).toBeFalsy();
+      expect(el.input!.value).toEqual("combobox");
+      expect(el.focusedIndex).toEqual(0);
+      expect(el.selectedOptions.length).toEqual(1);
+      const tab = createEvent(Key.Tab);
+      el.expanded = true;
+      el.focusedIndex = 0;
+      el.input!.value = "combobox";
+      el.selectedOptions.push("Afghanistan");
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(tab);
+      expect(el.expanded).toBeFalsy();
+      expect(el.input!.value).toEqual("combobox");
+      expect(el.focusedIndex).toEqual(0);
+
+      const home = createEvent(Key.Home);
+
+      const selectionMock = jest.fn();
+      el.input!.setSelectionRange = selectionMock;
+      el.input!.dispatchEvent(home);
+
+      expect(selectionMock).toHaveBeenCalled();
+
+      const end = createEvent(Key.End);
+      el.input!.dispatchEvent(end);
+
+      expect(selectionMock).toHaveBeenCalledTimes(2);
+
+      el.expanded = true;
+      el.selectedOptions = [];
+      el.focusedIndex = 0;
+      await elementUpdated(el);
+
+      const space = createEvent(Key.Space);
+      el.input!.dispatchEvent(space);
+
+      await elementUpdated(el);
+
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
+
+      const key = createEvent("KeyZ");
+      el.input!.dispatchEvent(key);
+      expect(el.focusedIndex).toEqual(0);
+    });
+    test("should remove all selected option if clear icon clicked", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+      const event = new MouseEvent("click");
+
+      setTimeout(() => el.handleRemoveAll(event));
+      const customEvent = await oneEvent(el, "remove-all-selected");
+      expect(customEvent).toBeDefined();
+      expect(el.selectedOptions.length).toEqual(0);
+    });
+
+    test("should remove option if option icon clicked", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+      await elementUpdated(el);
+
+      const clearOptionIcon = el.shadowRoot!.querySelector("md-icon[name='cancel-bold']");
+
+      clearOptionIcon!.dispatchEvent(new MouseEvent("click"));
+
+      expect(el.selectedOptions.length).toEqual(1);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Aland Islands"]));
+    });
+
+    test("should render correct multi icon name", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+
+      expect(el.shadowRoot!.querySelector(".md-combobox-button md-icon")!.getAttribute("name")).toEqual(
+        "arrow-down-bold"
+      );
+
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+      await elementUpdated(el);
+      expect(el.shadowRoot!.querySelector(".md-combobox-button md-icon")!.getAttribute("name")).toEqual("cancel-bold");
+    });
+    test("should render correct icon name", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+
+      expect(el.shadowRoot!.querySelector(".md-combobox-button md-icon")!.getAttribute("name")).toEqual(
+        "arrow-down-bold"
+      );
+
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+      await elementUpdated(el);
+      expect(el.shadowRoot!.querySelector(".md-combobox-button md-icon")!.getAttribute("name")).toEqual(
+        "arrow-down-bold"
+      );
+    });
+
+    test("should set correct icon for different combobox state", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      const event = new InputEvent("input", {
+        data: "a"
+      });
+      el.input!.value = "a";
+      expect(el.shadowRoot!.querySelector("md-icon[name='arrow-down-bold']")).not.toBeNull();
+      expect(el.shadowRoot!.querySelector("md-icon[name='cancel-bold']")).toBeNull();
+      el.input!.dispatchEvent(event);
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot!.querySelector("md-icon[name='arrow-down-bold']")).toBeNull();
+      expect(el.shadowRoot!.querySelector("md-icon[name='cancel-bold']")).not.toBeNull();
+
+      const backspace = new KeyboardEvent("keydown", {
+        code: Key.Backspace
+      });
+      el.input!.dispatchEvent(backspace);
+      await elementUpdated(el);
+      expect(el.shadowRoot!.querySelector("md-icon[name='arrow-down-bold']")).toBeNull();
+      expect(el.shadowRoot!.querySelector("md-icon[name='cancel-bold']")).not.toBeNull();
+    });
+    test("should set correct icon for different combobox state in multi mode", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+      const arrowDown = new KeyboardEvent("keydown", {
+        code: Key.ArrowDown
+      });
+      el.input!.value = "Afghanistan";
+
+      expect(el.shadowRoot!.querySelector("md-icon[name='arrow-down-bold']")).not.toBeNull();
+      expect(el.shadowRoot!.querySelector("md-icon[name='cancel-bold']")).toBeNull();
+      el.input!.dispatchEvent(arrowDown);
+
+      await elementUpdated(el);
+
+      expect(el.shadowRoot!.querySelector("md-icon[name='arrow-down-bold']")).toBeNull();
+      expect(el.shadowRoot!.querySelector("md-icon[name='cancel-bold']")).not.toBeNull();
+    });
+  });
+
+  describe("Combobox Multi Selected", () => {
+    let el: ComboBox.ELEMENT;
+    afterEach(fixtureCleanup);
+
+    beforeEach(async () => {
+      el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions} is-multi></md-combobox> `);
+    });
+    test("should add selected options", async () => {
+      const event = new MouseEvent("click");
+      el.lists![0].dispatchEvent(event);
+      el.lists![1].dispatchEvent(event);
+
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(2);
+    });
+    test("should clear selected option by click", async () => {
+      const event = new MouseEvent("click");
+      el.lists![0].dispatchEvent(event);
+      el.lists![1].dispatchEvent(event);
+
+      el.expanded = true;
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(2);
+      expect(el.selectedOptions.length).toEqual(2);
+
+      const firstListIcon = el.selected![0].querySelector("md-icon[name='cancel-bold']");
+      const secondListIcon = el.selected![1].querySelector("md-icon[name='cancel-bold']");
+
+      firstListIcon!.dispatchEvent(event);
+      secondListIcon!.dispatchEvent(event);
+
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(0);
+      expect(el.selectedOptions.length).toEqual(0);
+    });
+    test("should clear selected option by unchecked", async () => {
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keydown", {
+          code
+        });
+
+      el.input!.dispatchEvent(createEvent(Key.ArrowDown));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Space));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowDown));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Space));
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(2);
+      expect(el.selectedOptions.length).toEqual(2);
+
+      el.input!.dispatchEvent(createEvent(Key.Space));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowUp));
+      await nextFrame();
+      el.input!.dispatchEvent(createEvent(Key.Space));
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(0);
+      expect(el.selectedOptions.length).toEqual(0);
+    });
+    test("should add/remove selected attribute option when arrow and shift clicked", async () => {
+      el.selectedOptions = [
+        comboBoxOptions[0],
+        comboBoxOptions[1],
+        comboBoxOptions[2],
+        comboBoxOptions[3],
+        comboBoxOptions[4],
+        comboBoxOptions[5]
+      ];
+
+      await elementUpdated(el);
+      const createEvent = (code: string, shiftKey: boolean) =>
+        new KeyboardEvent("keyup", {
+          code,
+          shiftKey
+        });
+
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft, true));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft, true));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft, true));
+      await elementUpdated(el);
+
+      el.input!.dispatchEvent(createEvent(Key.Backspace, true));
+      await elementUpdated(el);
+
+      expect(el.selected!.length).toEqual(3);
+      expect(el.selectedOptions.length).toEqual(3);
+    });
+    test("should add/remove selected attribute option when arrow clicked", async () => {
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1]];
+
+      await elementUpdated(el);
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keyup", {
+          code
+        });
+
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft));
+      await elementUpdated(el);
+      expect(el.selected![1].hasAttribute("selected")).toBeTruthy();
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft));
+      await elementUpdated(el);
+      expect(el.selected![1].hasAttribute("selected")).toBeFalsy();
+      expect(el.selected![0].hasAttribute("selected")).toBeTruthy();
+
+      el.input!.dispatchEvent(createEvent(Key.Backspace));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.Backspace));
+      await elementUpdated(el);
+
+      expect(el.selectedOptions.length).toEqual(0);
+      expect(el.selected!.length).toEqual(0);
+    });
+
+    test("should unselect all if default button was pressed", async () => {
+      el.selectedOptions = [comboBoxOptions[0], comboBoxOptions[1], comboBoxOptions[2], comboBoxOptions[4]];
+      await elementUpdated(el);
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keyup", {
+          code
+        });
+
+      const selectedAttribute = {
+        get count() {
+          return [...el.selected!].filter((selected) => selected.hasAttribute("selected"));
+        }
+      };
+
+      expect(el.selectedOptions.length).toEqual(4);
+      expect(el.selected!.length).toEqual(4);
+      expect(selectedAttribute.count.length).toEqual(0);
+
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft));
+      await elementUpdated(el);
+      el.input!.dispatchEvent(createEvent(Key.ArrowLeft));
+      await elementUpdated(el);
+
+      expect(selectedAttribute.count.length).toEqual(1);
+
+      el.input!.dispatchEvent(createEvent("KeyA"));
+      await elementUpdated(el);
+      expect(selectedAttribute.count.length).toEqual(0);
+    });
+  });
+
+  describe("Listbox", () => {
+    test("should set correct aria label attribute", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} label="Country"></md-combobox>
+      `);
+      expect(el.listBox!.getAttribute("aria-label")).toEqual("Country");
+    });
+
+    test("should set correct styles", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      expect(el.expanded).toBeFalsy();
+      expect(el.listBox!.style.display).toEqual("none");
+
+      el.expanded = true;
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.listBox!.style.zIndex).toEqual("99");
+    });
+
+    test("should correct render options depends on input value", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      el["inputValue"] = "f";
+      await elementUpdated(el);
+      expect(el.lists!.length).toEqual(1);
+
+      el["inputValue"] = "fa";
+      await elementUpdated(el);
+      expect(el.filteredOptions.length).toEqual(0);
+      expect(el.shadowRoot!.querySelector(".no-result")).not.toBeNull();
+    });
+
+    test("should set correct id to each option in dom", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxObjectOptions} option-id="id" option-value="country" is-multi></md-combobox>
+      `);
+
+      const optionsCheckbox = el.shadowRoot!.querySelectorAll(".select-option");
+
+      const matcherId = [...el.lists!].map((option) => option.getAttribute("id"));
+      const matcherChecked = [...el.lists!].every((option) => option.hasAttribute("aria-checked"));
+
+      expect(matcherId).toEqual(expect.arrayContaining(comboBoxObjectOptions.map((option) => option.id)));
+      expect(optionsCheckbox.length).toEqual(29);
+      expect(matcherChecked).toBeTruthy();
+    });
+  });
+
+  describe("Option", () => {
+    test("should dispatch event when option clicked", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+
+      const event = new MouseEvent("click");
+
+      setTimeout(() => el.handleListClick(event));
+      const customEvent = await oneEvent(el, "selected-changed");
+
+      expect(customEvent).toBeDefined();
+      expect(el.expanded).toBeFalsy();
+    });
+    test("should dispatch event when option clicked (multi)", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} is-multi></md-combobox>
+      `);
+
+      const event = new MouseEvent("click");
+
+      setTimeout(() => el.handleListClick(event));
+      const customEvent = await oneEvent(el, "selected-changed");
+
+      await elementUpdated(el);
+
+      expect(customEvent).toBeDefined();
+      expect(el.expanded).toBeTruthy();
+    });
+
+    test("should toggle aria tags", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxObjectOptions} option-id="id" option-value="country" is-multi></md-combobox>
+      `);
+
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.ArrowDown }));
+      expect(el.expanded).toBeTruthy();
+
+      await nextFrame();
+
+      expect(el.focusedIndex).toEqual(0);
+      //expect(el.lists![0].getAttribute("aria-selected")).toEqual("true");
+
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Space }));
+
+      expect(el.selectedOptions.length).toEqual(1);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining([{ country: "Afghanistan", id: "0" }]));
+      expect(el.input!.value.length).toEqual(0);
+
+      await elementUpdated(el);
+
+      expect(el.lists![0].getAttribute("aria-checked")).toEqual("true");
+      expect(el.lists![0].getAttribute("selected")).toEqual("true");
+
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.ArrowDown }));
+      await nextFrame();
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Space }));
+      await elementUpdated(el);
+
+      expect(el.selectedOptions.length).toEqual(2);
+      expect(el.selectedOptions).toEqual(
+        expect.arrayContaining([
+          { country: "Afghanistan", id: "0" },
+          { country: "Aland Islands", id: "1" }
+        ])
+      );
+    });
+    test("should handle selected option without multi attribute", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.ArrowDown }));
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Enter }));
+      await nextFrame();
+
+      expect(el.selectedOptions.length).toEqual(1);
+
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.ArrowDown }));
+      el.input!.dispatchEvent(new KeyboardEvent("keydown", { code: Key.Enter }));
+      await nextFrame();
+
+      expect(el.selectedOptions.length).toEqual(1);
+    });
+
+    test("should change selected option", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${comboBoxOptions}></md-combobox> `);
+      el.expanded = true;
+      el.lists![0].dispatchEvent(new MouseEvent("click"));
+
+      await elementUpdated(el);
+
+      expect(el.focusedIndex).toEqual(0);
+      expect(el.selectedOptions.length).toEqual(1);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
+    });
+  });
+
+  test("should set initial value", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} .value=${[comboBoxOptions[0]]}></md-combobox>
+    `);
+
+    expect(el.value).toEqual(expect.arrayContaining([comboBoxOptions[0]]));
+    expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
+  });
+  test("should set initial value for multi", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox
+        .options=${comboBoxOptions}
+        .value=${[comboBoxOptions[1], comboBoxOptions[2]]}
+        is-multi
+      ></md-combobox>
+    `);
+
+    expect(el.value).toEqual(expect.arrayContaining([comboBoxOptions[1], comboBoxOptions[2]]));
+    expect(el.selected!.length).toEqual(2);
+    expect(el.selectedOptions).toEqual(expect.arrayContaining(["Aland Islands", "Albania"]));
+  });
+
+  test("should set initial value for option object", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox
+        .options=${comboBoxObjectOptions}
+        .value=${[comboBoxObjectOptions[4], comboBoxObjectOptions[5], { country: "Andorra", id: "17" }]}
+        is-multi
+        option-id="id"
+        option-value="country"
+      ></md-combobox>
+    `);
+
+    expect(el.value).toEqual(expect.arrayContaining([comboBoxObjectOptions[4], comboBoxObjectOptions[5]]));
+    expect(el.selected!.length).toEqual(2);
+    expect(el.optionId).toEqual("id");
+    expect(el.optionValue).toEqual("country");
+    expect(el.selectedOptions).toEqual(
+      expect.arrayContaining([
+        { country: "American Samoa", id: "4" },
+        { country: "Andorra", id: "5" }
+      ])
+    );
+  });
+
+  test("should render no options list if empty options provided", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html` <md-combobox .options=${[]}></md-combobox> `);
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector(".no-result")!.textContent!.trim()).toEqual("No Options");
+
+    el.inputValue = "One";
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector(".no-result")!.textContent!.trim()).toEqual("No Options");
+    expect(el.shadowRoot!.querySelectorAll(".no-result")!.length).toEqual(1);
+
+    el.inputValue = "On";
+    await elementUpdated(el);
+
+    expect(el.shadowRoot!.querySelector(".no-result")!.textContent!.trim()).toEqual("No Options");
+    expect(el.shadowRoot!.querySelectorAll(".no-result")!.length).toEqual(1);
+  });
+
+  test("should set custom value for default options", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} .value=${[comboBoxOptions[1]]} allow-custom-value></md-combobox>
+    `);
+    el.expanded = true;
+    const enter = new KeyboardEvent("keydown", { code: Key.Enter });
+
+    el.inputValue = "One";
+
+    await elementUpdated(el);
+    el.input!.dispatchEvent(enter);
+    await nextFrame();
+
+    expect(el.filteredOptions.includes("One")).toBeTruthy();
+    expect(el.filteredOptions.length).toEqual(12);
+
+    el.inputValue = comboBoxOptions[2];
+    await elementUpdated(el);
+    el.input!.dispatchEvent(enter);
+    await nextFrame();
+
+    expect(el.filteredOptions.includes("Albania")).toBeTruthy();
+    expect(el.filteredOptions.length).toEqual(1);
+  });
+
+  test("should not set custom value for object options", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox
+        .options=${comboBoxObjectOptions}
+        .value=${[comboBoxObjectOptions[4]]}
+        option-id="id"
+        option-value="country"
+        is-multi
+        allow-custom-value
+      ></md-combobox>
+    `);
+    el.expanded = true;
+    const enter = new KeyboardEvent("keydown", { code: Key.Enter });
+
+    el.inputValue = "One";
+
+    await elementUpdated(el);
+    el.input!.dispatchEvent(enter);
+    await nextFrame();
+
+    expect(el.filteredOptions.includes("One")).not.toBeTruthy();
+    expect(el.filteredOptions.length).toEqual(29);
+  });
+
+  test("should correct render invalid state", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox
+        .options=${comboBoxOptions}
+        .value=${[comboBoxOptions[4]]}
+        invalid
+        invalid-text-i18n="Error Message from Combobox"
+      ></md-combobox>
+    `);
+
+    expect(el.invalid).toBeTruthy();
+    expect(el.shadowRoot!.querySelector(".md-combobox-error")).not.toBeNull();
+    expect(el.shadowRoot!.querySelector("md-help-text")!.message).toEqual("Error Message from Combobox");
+  });
+
+  test("should render with Slect All option", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} is-multi allow-select-all> </md-combobox>
+    `);
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector("#md-combobox-listbox")?.querySelector("#selectAll")).not.toBeNull();
+  });
+
+  test("should select/unselect all options on clicking Select All", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} is-multi allow-select-all show-selected-count> </md-combobox>
+    `);
+    el.expanded = true;
+    await elementUpdated(el);
+    const selectAllEl = el.shadowRoot!.querySelector("#md-combobox-listbox")?.querySelector("#selectAll");
+    expect(selectAllEl).not.toBeNull();
+    expect(el.selectedOptions.length).toEqual(0);
+    selectAllEl?.dispatchEvent(new MouseEvent("click"));
+
+    await nextFrame();
+    expect(el.selectedOptions.length).toEqual(comboBoxOptions.length);
+    expect(el.shadowRoot!.querySelector(".md-combobox__multiwrap .selected-count")).not.toBeNull();
+    expect(el.shadowRoot!.querySelector(".md-combobox__multiwrap .selected-count")?.textContent).toEqual("All");
+
+    el.expanded = true;
+    await elementUpdated(el);
+    selectAllEl?.dispatchEvent(new MouseEvent("click"));
+    await nextFrame();
+    expect(el.selectedOptions.length).toEqual(0);
+    expect(el.shadowRoot!.querySelector(".md-combobox__multiwrap .selected-count")).toBeNull();
+  });
+
+  test("should show selected option's count", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} is-multi allow-select-all show-selected-count> </md-combobox>
+    `);
+    el.expanded = true;
+    await elementUpdated(el);
+
+    const firstOption = el.shadowRoot!.querySelectorAll("#md-combobox-listbox .md-combobox-option")[1];
+    firstOption.dispatchEvent(new MouseEvent("click"));
+    await nextFrame();
+    expect(el.selectedOptions.length).toEqual(1);
+    expect(el.shadowRoot!.querySelector(".md-combobox__multiwrap .selected-count")?.textContent).toEqual("1 Selected");
+  });
+
+  test("should render with custom error", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox .options=${comboBoxOptions} show-custom-error>
+        <div slot="custom-error">Custom Error!!!</div>
+      </md-combobox>
+    `);
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector('[slot="custom-error"]')).not.toBeNull();
+    expect(el.shadowRoot!.querySelector('[slot="custom-error"]')!.innerHTML).toEqual("Custom Error!!!");
+  });
+
+  describe("Combobox with group options", () => {
+    test("should render group label", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox with-custom-content>
+          <optgroup label="Countries">
+            <div slot="Australia" aria-label="Australia" display-value="Australia">
+              <span>Australia</span>
+            </div>
+            <div slot="Austria" aria-label="Austria" display-value="Austria">
+              <span>Austria</span>
+            </div>
+          </optgroup>
+          <optgroup label="Cites">
+            <div slot="Ambala" aria-label="Ambala" display-value="Ambala">
+              <span>Ambala</span>
+            </div>
+            <div slot="Banaras" aria-label="Banaras" display-value="Banaras">
+              <span>Banaras</span>
+            </div>
+          </optgroup>
+        </md-combobox>
+      `);
+
+      el.expanded = true;
+      await elementUpdated(el);
+      expect(el.shadowRoot!.querySelector(".group-label")).not.toBeNull();
+
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keydown", {
+          code
+        });
+
+      const backspace = createEvent(Key.Backspace);
+      el.input!.dispatchEvent(backspace);
+
+      await elementUpdated(el);
+
+      expect(el.focusedIndex).toEqual(-1);
+      const arrowDown = createEvent(Key.ArrowDown);
+      el.input!.dispatchEvent(arrowDown);
+
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(-1);
+
+      const groupList = el.shadowRoot!.querySelectorAll(".group-label");
+      expect(groupList![0].hasAttribute("focused")).toBeTruthy();
+
+      const enter = createEvent(Key.Enter);
+      groupList![0].dispatchEvent(enter);
+      await elementUpdated(el);
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedGroupIndex).toEqual(0);
+      expect(el.lists?.length).toEqual(2);
+
+      groupList![0].dispatchEvent(arrowDown);
+
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      expect(el.focusedIndex).toEqual(0);
+
+      groupList![0].dispatchEvent(arrowDown);
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.focusedGroupIndex).toEqual(-1);
+      expect(el.focusedIndex).toEqual(1);
+
+      groupList![0].dispatchEvent(enter);
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.input?.value).toEqual("Austria");
+      expect(el.expanded).toBeFalsy();
+
+      const arrowUp = createEvent(Key.ArrowUp);
+      el.input!.dispatchEvent(arrowUp);
+
+      await elementUpdated(el);
+      await nextFrame();
+
+      expect(el.expanded).toBeTruthy();
+      groupList![0].dispatchEvent(enter);
+
+      expect(el.input?.value).toEqual("Australia");
+      expect(el.expanded).toBeFalsy();
+    });
+  });
+
+  test("should navigate through tab between groups", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox with-custom-content>
+        <optgroup label="Countries">
+          <div slot="Australia" aria-label="Australia" display-value="Australia">
+            <span>Australia</span>
+          </div>
+          <div slot="Austria" aria-label="Austria" display-value="Austria">
+            <span>Austria</span>
+          </div>
+        </optgroup>
+        <optgroup label="Cites">
+          <div slot="Ambala" aria-label="Ambala" display-value="Ambala">
+            <span>Ambala</span>
+          </div>
+          <div slot="Banaras" aria-label="Banaras" display-value="Banaras">
+            <span>Banaras</span>
+          </div>
+        </optgroup>
+      </md-combobox>
+    `);
+
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector(".group-label")).not.toBeNull();
+
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    const backspace = createEvent(Key.Backspace);
+    const arrowDown = createEvent(Key.ArrowDown);
+    const arrowUp = createEvent(Key.ArrowUp);
+    const tab = createEvent(Key.Tab);
+    const enter = createEvent(Key.Enter);
+    const escape = createEvent(Key.Escape);
+
+    el.input!.dispatchEvent(backspace);
+
+    await elementUpdated(el);
+    expect(el.focusedIndex).toEqual(-1);
+    el.input!.dispatchEvent(arrowUp);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedIndex).toEqual(-1);
+
+    const groupList = el.shadowRoot!.querySelectorAll(".group-label");
+    expect(groupList![0].hasAttribute("focused")).toBeTruthy();
+
+    groupList![0].dispatchEvent(arrowDown);
+    await elementUpdated(el);
+    groupList![0].dispatchEvent(arrowUp);
+
+    groupList![0].dispatchEvent(enter);
+    await elementUpdated(el);
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedGroupIndex).toEqual(0);
+    expect(el.lists?.length).toEqual(2);
+
+    groupList![0]!.dispatchEvent(tab);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedIndex).toEqual(-1);
+    expect(el.focusedGroupIndex).toEqual(1);
+
+    groupList![1].dispatchEvent(enter);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.lists?.length).toEqual(2);
+    groupList![1].dispatchEvent(arrowDown);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    groupList![1].dispatchEvent(arrowUp);
+    groupList![1].dispatchEvent(enter);
+
+    expect(el.input?.value).toEqual("Ambala");
+    expect(el.expanded).toBeFalsy();
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    el.input!.dispatchEvent(arrowDown);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    groupList![0]!.dispatchEvent(escape);
+  });
+
+  test("should list all group related options on match", async () => {
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox with-custom-content>
+        <optgroup label="Countries">
+          <div slot="Australia" aria-label="Australia" display-value="Australia">
+            <span>Australia</span>
+          </div>
+          <div slot="Austria" aria-label="Austria" display-value="Austria">
+            <span>Austria</span>
+          </div>
+          <div slot="India" aria-label="India" display-value="India">
+            <span>India</span>
+          </div>
+        </optgroup>
+        <optgroup label="Cites">
+          <div slot="Ambala" aria-label="Ambala" display-value="Ambala">
+            <span>Ambala</span>
+          </div>
+          <div slot="Banaras" aria-label="Banaras" display-value="Banaras">
+            <span>Banaras</span>
+          </div>
+          <div slot="Ujjaini" aria-label="Ujjaini" display-value="Ujjaini">
+            <span>Indonasia</span>
+          </div>
+          <div slot="Indore" aria-label="Indore" display-value="Indore">
+            <span>Indore</span>
+          </div>
+        </optgroup>
+      </md-combobox>
+    `);
+
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector(".group-label")).not.toBeNull();
+
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    const backspace = createEvent(Key.Backspace);
+    el.input!.dispatchEvent(backspace);
+
+    await elementUpdated(el);
+
+    const event = new Event("input");
+    el.input!.value = "In";
+    el.input!.dispatchEvent(event);
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.lists?.length).toEqual(3);
+    const arrowDown = createEvent(Key.ArrowDown);
+    el.input!.dispatchEvent(arrowDown);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    const enter = createEvent(Key.Enter);
+    el.input!.dispatchEvent(enter);
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.input?.value).toEqual("India");
+  });
+
+  test("should navigate through tab between groups for multi select", async () => {
+    const el2 = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox with-custom-content is-multi use-virtual-scroll allow-select-all placeholder="Placeholder">
+        <div label="Countries">
+          <div slot="Austria" aria-label="Austria" display-value="Austria">
+            <span>Austria</span>
+          </div>
+        </div>
+      </md-combobox>
+    `);
+    await elementUpdated(el2);
+    await nextFrame();
+
+    const el = await fixture<ComboBox.ELEMENT>(html`
+      <md-combobox with-custom-content is-multi placeholder="Placeholder">
+        <optgroup label="Countries">
+          <div slot="Australia" aria-label="Australia" display-value="Australia">
+            <span>Australia</span>
+          </div>
+          <div slot="Austria" aria-label="Austria" display-value="Austria">
+            <span>Austria</span>
+          </div>
+        </optgroup>
+        <optgroup label="Cites">
+          <div slot="Ambala" aria-label="Ambala" display-value="Ambala">
+            <span>Ambala</span>
+          </div>
+          <div slot="Banaras" aria-label="Banaras" display-value="Banaras">
+            <span>Banaras</span>
+          </div>
+        </optgroup>
+      </md-combobox>
+    `);
+
+    el.expanded = true;
+    await elementUpdated(el);
+    expect(el.shadowRoot!.querySelector(".group-label")).not.toBeNull();
+
+    const createEvent = (code: string) =>
+      new KeyboardEvent("keydown", {
+        code
+      });
+
+    const backspace = createEvent(Key.Backspace);
+    const arrowDown = createEvent(Key.ArrowDown);
+    const arrowUp = createEvent(Key.ArrowUp);
+    const tab = createEvent(Key.Tab);
+    const enter = createEvent(Key.Enter);
+    const escape = createEvent(Key.Escape);
+    const end = createEvent(Key.End);
+
+    el.input!.dispatchEvent(backspace);
+
+    await elementUpdated(el);
+    expect(el.focusedIndex).toEqual(-1);
+    el.input!.dispatchEvent(arrowUp);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedIndex).toEqual(-1);
+
+    const groupList = el.shadowRoot!.querySelectorAll(".group-label");
+    expect(groupList![0].hasAttribute("focused")).toBeTruthy();
+
+    groupList![0].dispatchEvent(arrowDown);
+    await elementUpdated(el);
+    groupList![0].dispatchEvent(arrowUp);
+
+    groupList![0].dispatchEvent(enter);
+    await elementUpdated(el);
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedGroupIndex).toEqual(0);
+    expect(el.lists?.length).toEqual(2);
+
+    groupList![0]!.dispatchEvent(tab);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.expanded).toBeTruthy();
+    expect(el.focusedIndex).toEqual(-1);
+    expect(el.focusedGroupIndex).toEqual(1);
+
+    groupList![1].dispatchEvent(enter);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.lists?.length).toEqual(2);
+    groupList![1].dispatchEvent(arrowDown);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    groupList![1].dispatchEvent(enter);
+
+    await elementUpdated(el);
+    await nextFrame();
+
+    expect(el.input?.value).toEqual("Ambala");
+    expect(el.expanded).toBeFalsy();
+
+    await elementUpdated(el);
+    await nextFrame();
+    groupList![0]!.dispatchEvent(end);
+    groupList![0]!.dispatchEvent(escape);
+  }, 2000);
+
+  describe("Combobox with virtual scroll", () => {
+    test("should handle keyUp event", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} use-virtual-scroll></md-combobox>
+      `);
+      const createEvent = (code: string) =>
+        new KeyboardEvent("keyup", {
+          code
+        });
+
+      const backspace = createEvent(Key.Backspace);
+      el.input!.dispatchEvent(backspace);
+
+      const mock = jest.fn();
+
+      el.listBox!.style.maxHeight = mock();
+
+      expect(el.expanded).toBeTruthy();
+      expect(mock).toBeCalled();
+
+      el.expanded = false;
+
+      await elementUpdated(el);
+
+      mock.mockReset();
+      const escape = createEvent(Key.Escape);
+      el.input!.dispatchEvent(escape);
+
+      expect(el.expanded).toBeFalsy();
+      expect(mock).not.toBeCalled();
+    });
+    test("should set initial value for multi", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox
+          .options=${comboBoxOptions}
+          .value=${[comboBoxOptions[1], comboBoxOptions[2]]}
+          is-multi
+          use-virtual-scroll
+        ></md-combobox>
+      `);
+
+      expect(el.value).toEqual(expect.arrayContaining([comboBoxOptions[1], comboBoxOptions[2]]));
+      expect(el.selected!.length).toEqual(2);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Aland Islands", "Albania"]));
+    });
+
+    test("should update ariaLabelForComboBox based on search result count", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${["One", "Two", "Three"]}></md-combobox>
+      `);
+
+      el.searchResultAriaLabel = "Search results: {{count}} results found.";
+      el.inputValue = "One";
+      el["notifySearchResultCount"]();
+      await elementUpdated(el);
+
+      const inputEl = el.shadowRoot!.querySelector("input");
+
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results: 1 results found.");
+
+      el.searchResultAriaLabel = "";
+      el.ariaLabel = "Search results";
+      el["notifySearchResultCount"]();
+      await elementUpdated(el);
+      expect(inputEl?.getAttribute("aria-label")).toEqual("Search results, 1 results found.");
+
+      el.ariaLabel = "";
+      el["notifySearchResultCount"]();
+      await elementUpdated(el);
+      expect(inputEl?.getAttribute("aria-label")).toEqual("ComboBox Element, 1 results found.");
+    });
+
+    test("should change selected option for virtual scroll", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} use-virtual-scroll></md-combobox>
+      `);
+      el.expanded = true;
+      const lists = comboBoxOptions.map((item) => {
+        return `<div id=${item} class="md-combobox-option" role="option" style="height:12px;">${item}</div>`;
+      });
+
+      if (lists && el.listBox) {
+        el.listBox.innerHTML = `${lists.join("")}`;
+      }
+      const upd = el.lists![0];
+      if (el.lists![0]) {
+        upd.onclick = (event) => el.handleListClick(event);
+      }
+      el.lists![0].dispatchEvent(new MouseEvent("click"));
+
+      await elementUpdated(el);
+
+      expect(el.focusedIndex).toEqual(0);
+      expect(el.selectedOptions.length).toEqual(1);
+      expect(el.selectedOptions).toEqual(expect.arrayContaining(["Afghanistan"]));
+    });
+
+    test("should preserve options list when preventFilter is true", async () => {
+      const el = await fixture<ComboBox.ELEMENT>(html`
+        <md-combobox .options=${comboBoxOptions} prevent-filter></md-combobox>
+      `);
+      el.inputValue = "Afghanistan";
+      await elementUpdated(el);
+      expect(el.filteredOptions.length).toEqual(comboBoxOptions.length);
+      expect(el.filteredOptions).toEqual(expect.arrayContaining(comboBoxOptions));
+    });
+  });
+});