diff --git a/package.json b/package.json index f6ff54a..937821d 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@babel/preset-typescript": "^7.3.3", "@testing-library/jest-dom": "^5.0.1", "@testing-library/react": "^12.1.5", + "@testing-library/user-event": "^14.4.3", "@types/jest": "^29.1.2", "@types/react": "^17.0.47", "@types/react-select": "^5.0.1", diff --git a/src/__tests__/select-event.test.tsx b/src/__tests__/select-event.test.tsx index bf9d78c..9c3f635 100644 --- a/src/__tests__/select-event.test.tsx +++ b/src/__tests__/select-event.test.tsx @@ -1,6 +1,7 @@ import "@testing-library/jest-dom/extend-expect"; import { fireEvent, render } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; import React from "react"; import Select from "react-select"; @@ -77,6 +78,35 @@ describe("The openMenu event helper", () => { await selectEvent.select(input, "Strawberry"); expect(form).toHaveFormValues({ food: "strawberry" }); }); + + it("fires focus event", async () => { + const focusCallback = jest.fn(); + const { input } = renderForm(); + selectEvent.openMenu(input); + expect(getByText("Chocolate")).toBeInTheDocument(); + expect(getByText("Vanilla")).toBeInTheDocument(); + expect(getByText("Strawberry")).toBeInTheDocument(); + expect(getByText("Mango")).toBeInTheDocument(); + await userEvent.click(document.body); + expect(queryByText("Chocolate")).not.toBeInTheDocument(); + expect(queryByText("Vanilla")).not.toBeInTheDocument(); + expect(queryByText("Strawberry")).not.toBeInTheDocument(); + expect(queryByText("Mango")).not.toBeInTheDocument(); + }); + + it("allows blur event to fire when clicking elsewhere", async () => { + const blurCallback = jest.fn(); + const { input } = renderForm(