Added dropdown component test

src/__tests__/components/dropdown.test.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import { fireEvent } from "@testing-library/react";
+import Dropdown from "../../components/Dropdown";
+import { vitest } from "vitest";
+import { renderWithProvider } from "../../testHelpers";
+
+describe("Dropdown", () => {
+  const items = [
+    { value: 1, title: "Item 1" },
+    { value: 2, title: "Item 2" },
+    { value: 3, title: "Item 3" },
+  ];
+  const value = 1;
+  const onChange = vitest.fn();
+
+  it("should render the dropdown with correct items and tabIndexes", () => {
+    const { getByTestId, getAllByText, getByText } = renderWithProvider(
+      <Dropdown items={items} value={value} onChange={onChange} />
+    );
+
+    const dropdownItemsList = getByTestId("dropdown-items");
+
+    const selectedItem = getAllByText(items[0].title)[1];
+    const nonSelectedItem = getByText(items[1].title);
+
+    expect(dropdownItemsList.children.length).toEqual(items.length);
+    expect(selectedItem.tabIndex).toEqual(-1);
+    expect(nonSelectedItem.tabIndex).not.toEqual(-1);
+  });
+
+  it("should call onChange function when an item is selected", () => {
+    const { getByText } = renderWithProvider(<Dropdown items={items} value={value} onChange={onChange} />);
+
+    const nonSelectedItem = getByText(items[1].title);
+
+    fireEvent.click(nonSelectedItem);
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+    expect(onChange).toHaveBeenCalledWith(items[1].value);
+  });
+});

src/components/Dropdown/index.tsx

@@ -61,7 +61,7 @@ export default function Dropdown({ items, value, onChange }: IDropdownProps) {
           <ArrowDownIcon size={"16px"} />
         </DropdownActivatorWrapper>
 
-        <Grid maxHeight={200} overflowY={"auto"} gridGap={"4px"} pt={"6px"}>
+        <Grid maxHeight={200} overflowY={"auto"} gridGap={"4px"} pt={"6px"} data-testid={"dropdown-items"}>
           {items.map((item) => (
             <DropdownItemWrapper
               key={item.value}
@@ -70,6 +70,7 @@ export default function Dropdown({ items, value, onChange }: IDropdownProps) {
                 setOpened(false);
               }}
               active={item.value === value}
+              tabIndex={item.value === value ? -1 : undefined}
             >
               {item.title || item.value}
             </DropdownItemWrapper>