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}