diff --git a/src/__tests__/components/dropdown.test.tsx b/src/__tests__/components/dropdown.test.tsx
new file mode 100644
index 0000000..6011f54
--- /dev/null
+++ b/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(
+
+ );
+
+ 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();
+
+ const nonSelectedItem = getByText(items[1].title);
+
+ fireEvent.click(nonSelectedItem);
+
+ expect(onChange).toHaveBeenCalledTimes(1);
+ expect(onChange).toHaveBeenCalledWith(items[1].value);
+ });
+});
diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
index 0f3093b..e27b363 100644
--- a/src/components/Dropdown/index.tsx
+++ b/src/components/Dropdown/index.tsx
@@ -61,7 +61,7 @@ export default function Dropdown({ items, value, onChange }: IDropdownProps) {
-
+
{items.map((item) => (
{item.title || item.value}