From 507887eac3a0c5eb96d3d6f38bf91ed788561cda Mon Sep 17 00:00:00 2001
From: Ryo Matsukawa <76232929+ryo-manba@users.noreply.github.com>
Date: Mon, 14 Oct 2024 23:13:04 +0900
Subject: [PATCH] chore(test): update testing libraries and refactor (#3886)
---
apps/docs/components/sandpack/entries.ts | 2 +-
jest.config.js | 2 +-
package.json | 16 +-
.../accordion/__tests__/accordion.test.tsx | 70 +-
.../__tests__/autocomplete.test.tsx | 101 +-
.../button/__tests__/button-group.test.tsx | 2 +-
.../button/__tests__/button.test.tsx | 25 +-
.../components/card/__tests__/card.test.tsx | 10 +-
.../__tests__/checkbox-group.test.tsx | 25 +-
.../checkbox/__tests__/checkbox.test.tsx | 52 +-
.../components/chip/__tests__/chip.test.tsx | 10 +-
.../date-input/__tests__/date-input.test.tsx | 35 +-
.../date-input/__tests__/time-input.test.tsx | 31 +-
.../__tests__/date-picker.test.tsx | 30 +-
.../dropdown/__tests__/dropdown.test.tsx | 597 +++++----
.../listbox/__tests__/listbox.test.tsx | 24 +-
.../components/menu/__tests__/menu.test.tsx | 48 +-
.../components/modal/__tests__/modal.test.tsx | 13 +-
.../navbar/__tests__/navbar.test.tsx | 30 +-
.../popover/__tests__/popover.test.tsx | 62 +-
.../components/radio/__tests__/radio.test.tsx | 42 +-
.../select/__tests__/select.test.tsx | 141 +--
.../slider/__tests__/slider.test.tsx | 26 +-
.../switch/__tests__/switch.test.tsx | 66 +-
.../components/table/__tests__/table.test.tsx | 25 +-
.../components/tabs/__tests__/tabs.test.tsx | 54 +-
.../tooltip/__tests__/tooltip.test.tsx | 2 +-
.../__tests__/clipboard.test.tsx | 2 +-
.../__tests__/use-pagination.test.tsx | 4 +-
.../__tests__/use-ref-state.test.tsx | 2 +-
plop/hook/__tests__/{{hookName}}.test.tsx.hbs | 2 +-
pnpm-lock.yaml | 1103 ++++++++---------
scripts/setup-test.ts | 2 +-
33 files changed, 1179 insertions(+), 1477 deletions(-)
diff --git a/apps/docs/components/sandpack/entries.ts b/apps/docs/components/sandpack/entries.ts
index f1bc2d217..191bc54e4 100644
--- a/apps/docs/components/sandpack/entries.ts
+++ b/apps/docs/components/sandpack/entries.ts
@@ -10,7 +10,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
+
);`;
diff --git a/jest.config.js b/jest.config.js
index 4c8ce18dd..aaa6fd92e 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -18,7 +18,7 @@ module.exports = {
],
},
transformIgnorePatterns: ["[/\\\\]node_modules[/\\\\].+\\.(js|jsx)$"],
- setupFilesAfterEnv: ["@testing-library/jest-dom/extend-expect", "./scripts/setup-test.ts"],
+ setupFilesAfterEnv: ["@testing-library/jest-dom", "./scripts/setup-test.ts"],
globals: {
"ts-jest": {
tsconfig: "tsconfig.json",
diff --git a/package.json b/package.json
index 4bd51aaf5..662d939e5 100644
--- a/package.json
+++ b/package.json
@@ -73,17 +73,15 @@
"@swc-node/jest": "^1.5.2",
"@swc/core": "^1.3.35",
"@swc/jest": "^0.2.24",
- "@testing-library/dom": "^8.1.0",
- "@testing-library/jest-dom": "^5.16.4",
- "@testing-library/react": "^14.0.0",
- "@testing-library/react-hooks": "^8.0.1",
- "@testing-library/user-event": "^14.4.3",
- "@types/jest": "^28.1.1",
+ "@testing-library/dom": "^10.4.0",
+ "@testing-library/jest-dom": "^6.5.0",
+ "@testing-library/react": "^16.0.1",
+ "@testing-library/user-event": "^14.5.2",
+ "@types/jest": "^29.5.13",
"@types/node": "^15.12.4",
"@types/react": "^18.0.1",
"@types/react-dom": "^18.0.0",
"@types/shelljs": "^0.8.9",
- "@types/testing-library__jest-dom": "5.14.5",
"@typescript-eslint/eslint-plugin": "^5.42.0",
"@typescript-eslint/parser": "^5.42.0",
"chalk": "^4.1.2",
@@ -115,8 +113,8 @@
"gray-matter": "^4.0.3",
"husky": "^8.0.1",
"intl-messageformat": "^10.1.0",
- "jest": "^28.1.1",
- "jest-environment-jsdom": "^28.1.1",
+ "jest": "^29.7.0",
+ "jest-environment-jsdom": "^28.1.3",
"jest-watch-typeahead": "1.1.0",
"lint-staged": "^13.0.3",
"npm-check-updates": "^16.10.18",
diff --git a/packages/components/accordion/__tests__/accordion.test.tsx b/packages/components/accordion/__tests__/accordion.test.tsx
index ac63c95cb..8a4d78df7 100644
--- a/packages/components/accordion/__tests__/accordion.test.tsx
+++ b/packages/components/accordion/__tests__/accordion.test.tsx
@@ -30,7 +30,7 @@ describe("Accordion", () => {
expect(() => wrapper.unmount()).not.toThrow();
- expect(spy).toBeCalledTimes(0);
+ expect(spy).toHaveBeenCalledTimes(0);
});
it("ref should be forwarded", () => {
@@ -121,9 +121,7 @@ describe("Accordion", () => {
expect(button).toHaveAttribute("aria-expanded", "false");
- await act(async () => {
- await user.click(button);
- });
+ await user.click(button);
expect(button).toHaveAttribute("aria-expanded", "true");
});
@@ -163,18 +161,12 @@ describe("Accordion", () => {
const second = wrapper.getByTestId("item-2");
const secondButton = second.querySelector("button") as HTMLElement;
- act(() => {
- focus(firstButton);
- });
-
- await act(async () => {
- await user.keyboard("[ArrowDown]");
- });
+ await focus(firstButton);
+ await user.keyboard("[ArrowDown]");
expect(secondButton).toHaveFocus();
- await act(async () => {
- await user.keyboard("[ArrowUp]");
- });
+ await user.keyboard("[ArrowUp]");
+
expect(firstButton).toHaveFocus();
});
@@ -200,14 +192,10 @@ describe("Accordion", () => {
focus(secondButton);
});
- await act(async () => {
- await user.keyboard("[Home]");
- });
+ await user.keyboard("[Home]");
expect(firstButton).toHaveFocus();
- await act(async () => {
- await user.keyboard("[End]");
- });
+ await user.keyboard("[End]");
expect(secondButton).toHaveFocus();
});
@@ -233,9 +221,7 @@ describe("Accordion", () => {
focus(firstButton);
});
- await act(async () => {
- await user.keyboard("[Tab]");
- });
+ await user.keyboard("[Tab]");
expect(secondButton).toHaveFocus();
});
@@ -276,10 +262,7 @@ describe("Accordion", () => {
expect(button).toHaveAttribute("aria-expanded", "false");
- await act(async () => {
- await user.click(button);
- });
-
+ await user.click(button);
expect(button).toHaveAttribute("aria-expanded", "true");
});
@@ -300,17 +283,11 @@ describe("Accordion", () => {
expect(item1.querySelector("[role='region']")).toBeInTheDocument();
- await act(async () => {
- await user.click(button);
- });
-
+ await user.click(button);
const item2 = wrapper.getByTestId("item-2");
const button2 = item2.querySelector("button") as HTMLElement;
- await act(async () => {
- await user.click(button2);
- });
-
+ await user.click(button2);
expect(item1.querySelector("[role='region']")).toBeInTheDocument();
expect(item2.querySelector("[role='region']")).toBeInTheDocument();
});
@@ -331,29 +308,22 @@ describe("Accordion", () => {
const firstButton = await wrapper.getByRole("button", {name: "Accordion Item 1"});
- await act(() => {
+ act(() => {
focus(firstButton);
});
- await act(async () => {
- await user.keyboard("[Tab]");
- });
+
+ await user.keyboard("[Tab]");
expect(input).toHaveFocus();
- await act(async () => {
- await user.keyboard("aaa");
- });
+ await user.keyboard("aaa");
expect(input).toHaveValue("aaa");
- await act(async () => {
- await user.keyboard("[ArrowLeft]");
- await user.keyboard("b");
- });
+ await user.keyboard("[ArrowLeft]");
+ await user.keyboard("b");
expect(input).toHaveValue("aaba");
- await act(async () => {
- await user.keyboard("[ArrowRight]");
- await user.keyboard("c");
- });
+ await user.keyboard("[ArrowRight]");
+ await user.keyboard("c");
expect(input).toHaveValue("aabac");
});
diff --git a/packages/components/autocomplete/__tests__/autocomplete.test.tsx b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
index fb6162007..9b46dcaa5 100644
--- a/packages/components/autocomplete/__tests__/autocomplete.test.tsx
+++ b/packages/components/autocomplete/__tests__/autocomplete.test.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import {within, render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {useForm} from "react-hook-form";
import {Autocomplete, AutocompleteItem, AutocompleteProps, AutocompleteSection} from "../src";
@@ -77,6 +77,12 @@ const AutocompleteExample = (props: Partial = {}) => (
);
describe("Autocomplete", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render();
@@ -172,9 +178,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -201,9 +205,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -211,9 +213,7 @@ describe("Autocomplete", () => {
let options = wrapper.getAllByRole("option");
// select the target item
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await user.click(options[0]);
const {container} = wrapper;
@@ -224,9 +224,7 @@ describe("Autocomplete", () => {
expect(clearButton).not.toBeNull();
// click the clear button
- await act(async () => {
- await userEvent.click(clearButton);
- });
+ await user.click(clearButton);
// assert that the input has empty value
expect(autocomplete).toHaveValue("");
@@ -253,9 +251,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -263,9 +259,7 @@ describe("Autocomplete", () => {
let options = wrapper.getAllByRole("option");
// select the target item
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await user.click(options[0]);
const {container} = wrapper;
@@ -276,9 +270,7 @@ describe("Autocomplete", () => {
expect(clearButton).not.toBeNull();
// click the clear button
- await act(async () => {
- await userEvent.click(clearButton);
- });
+ await user.click(clearButton);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -294,9 +286,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -304,9 +294,7 @@ describe("Autocomplete", () => {
let options = wrapper.getAllByRole("option");
// select the target item
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await user.click(options[0]);
const {container} = wrapper;
@@ -317,9 +305,7 @@ describe("Autocomplete", () => {
expect(clearButton).not.toBeNull();
/// click the clear button
- await act(async () => {
- await userEvent.click(clearButton);
- });
+ await user.click(clearButton);
// assert that the input has empty value
expect(autocomplete).toHaveValue("");
@@ -338,9 +324,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -348,9 +332,7 @@ describe("Autocomplete", () => {
let options = wrapper.getAllByRole("option");
// select the target item
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await user.click(options[0]);
const {container} = wrapper;
@@ -361,9 +343,7 @@ describe("Autocomplete", () => {
expect(clearButton).not.toBeNull();
// click the clear button
- await act(async () => {
- await userEvent.click(clearButton);
- });
+ await user.click(clearButton);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -395,9 +375,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the select listbox by clicking selector button
- await act(async () => {
- await userEvent.click(selectorButton);
- });
+ await user.click(selectorButton);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -406,9 +384,7 @@ describe("Autocomplete", () => {
expect(autocomplete).toHaveFocus();
// close the select listbox by clicking selector button again
- await act(async () => {
- await userEvent.click(selectorButton);
- });
+ await user.click(selectorButton);
// assert that the autocomplete listbox is closed
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -439,17 +415,13 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
// open the select listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
// click outside the autocomplete component
- await act(async () => {
- await userEvent.click(document.body);
- });
+ await user.click(document.body);
// assert that the autocomplete is closed
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -488,17 +460,14 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("close-when-clicking-outside-test");
// open the autocomplete listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
// click outside the autocomplete component
- await act(async () => {
- await userEvent.click(document.body);
- });
+ await user.click(document.body);
// assert that the autocomplete listbox is closed
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
@@ -522,9 +491,7 @@ describe("Autocomplete", () => {
const autocomplete = wrapper.getByTestId("autocomplete");
// open the listbox
- await act(async () => {
- await userEvent.click(autocomplete);
- });
+ await user.click(autocomplete);
// assert that the autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -537,9 +504,7 @@ describe("Autocomplete", () => {
expect(options.length).toBe(3);
// select the target item
- await act(async () => {
- await userEvent.click(options[0]);
- });
+ await user.click(options[0]);
// assert that the input has target selection
expect(autocomplete).toHaveValue("Penguin");
@@ -598,9 +563,7 @@ describe("Autocomplete", () => {
expect(selectorButton2).not.toBeNull();
// open the select listbox by clicking selector button in the first autocomplete
- await act(async () => {
- await userEvent.click(selectorButton);
- });
+ await user.click(selectorButton);
// assert that the first autocomplete listbox is open
expect(autocomplete).toHaveAttribute("aria-expanded", "true");
@@ -609,9 +572,7 @@ describe("Autocomplete", () => {
expect(autocomplete).toHaveFocus();
// close the select listbox by clicking the second autocomplete
- await act(async () => {
- await userEvent.click(selectorButton2);
- });
+ await user.click(selectorButton2);
// assert that the first autocomplete listbox is closed
expect(autocomplete).toHaveAttribute("aria-expanded", "false");
diff --git a/packages/components/button/__tests__/button-group.test.tsx b/packages/components/button/__tests__/button-group.test.tsx
index d4452870f..ce31a5b02 100644
--- a/packages/components/button/__tests__/button-group.test.tsx
+++ b/packages/components/button/__tests__/button-group.test.tsx
@@ -35,7 +35,7 @@ describe("ButtonGroup", () => {
let button = wrapper.getByTestId("button-test");
userEvent.click(button);
- expect(handler).toBeCalledTimes(0);
+ expect(handler).toHaveBeenCalledTimes(0);
});
it("should render different variants", () => {
diff --git a/packages/components/button/__tests__/button.test.tsx b/packages/components/button/__tests__/button.test.tsx
index c3930e8fa..4d55de3e2 100644
--- a/packages/components/button/__tests__/button.test.tsx
+++ b/packages/components/button/__tests__/button.test.tsx
@@ -1,9 +1,16 @@
import * as React from "react";
-import {act, render} from "@testing-library/react";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {Button} from "../src";
describe("Button", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render();
@@ -17,24 +24,24 @@ describe("Button", () => {
expect(ref.current).not.toBeNull();
});
- it("should trigger onPress function", () => {
+ it("should trigger onPress function", async () => {
const onPress = jest.fn();
const {getByRole} = render();
- act(() => {
- getByRole("button").click();
- });
+ const button = getByRole("button");
+
+ await user.click(button);
expect(onPress).toHaveBeenCalled();
});
- it("should ignore events when disabled", () => {
+ it("should ignore events when disabled", async () => {
const onPress = jest.fn();
const {getByRole} = render();
- act(() => {
- getByRole("button").click();
- });
+ const button = getByRole("button");
+
+ await user.click(button);
expect(onPress).not.toHaveBeenCalled();
});
diff --git a/packages/components/card/__tests__/card.test.tsx b/packages/components/card/__tests__/card.test.tsx
index ea1b7f9bd..089f63486 100644
--- a/packages/components/card/__tests__/card.test.tsx
+++ b/packages/components/card/__tests__/card.test.tsx
@@ -1,6 +1,6 @@
import * as React from "react";
import {render} from "@testing-library/react";
-import {act} from "@testing-library/react-hooks";
+import userEvent from "@testing-library/user-event";
import {Card} from "../src";
@@ -24,15 +24,15 @@ describe("Card", () => {
expect(() => wrapper.unmount()).not.toThrow();
});
- it("should be clicked when is pressable", () => {
+ it("should be clicked when is pressable", async () => {
const onPress = jest.fn();
const {getByRole} = render();
const button = getByRole("button");
- act(() => {
- button.click();
- });
+ const user = userEvent.setup();
+
+ await user.click(button);
expect(onPress).toHaveBeenCalled();
});
diff --git a/packages/components/checkbox/__tests__/checkbox-group.test.tsx b/packages/components/checkbox/__tests__/checkbox-group.test.tsx
index 68ea6e93b..7245ca6b2 100644
--- a/packages/components/checkbox/__tests__/checkbox-group.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox-group.test.tsx
@@ -1,10 +1,16 @@
import * as React from "react";
import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {CheckboxGroup, Checkbox} from "../src";
describe("Checkbox.Group", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render(
@@ -48,7 +54,7 @@ describe("Checkbox.Group", () => {
expect(container.querySelector("[data-testid=second-checkbox] input")).not.toBeChecked();
});
- it("should change value after click", () => {
+ it("should change value after click", async () => {
let value = ["sydney"];
const wrapper = render(
{
const secondCheckbox = wrapper.getByTestId("second-checkbox");
- act(() => {
- secondCheckbox.click();
- });
+ await user.click(secondCheckbox);
expect(value).toEqual(["sydney", "buenos-aires"]);
});
@@ -98,7 +102,7 @@ describe("Checkbox.Group", () => {
expect(secondCheckbox).not.toBeChecked();
});
- it("should work correctly with controlled value", () => {
+ it("should work correctly with controlled value", async () => {
let checked = ["sydney"];
const onChange = jest.fn((value) => {
checked = value;
@@ -125,20 +129,13 @@ describe("Checkbox.Group", () => {
const secondCheckbox = wrapper.getByTestId("second-checkbox");
- act(() => {
- secondCheckbox.click();
- });
+ await user.click(secondCheckbox);
expect(onChange).toHaveBeenCalledTimes(1);
expect(checked).toEqual(["sydney", "buenos-aires"]);
});
describe("validation", () => {
- let user = userEvent.setup();
-
- beforeAll(() => {
- user = userEvent.setup();
- });
describe("validationBehavior=native", () => {
it("supports group level isRequired", async () => {
let {getAllByRole, getByRole, getByTestId} = render(
diff --git a/packages/components/checkbox/__tests__/checkbox.test.tsx b/packages/components/checkbox/__tests__/checkbox.test.tsx
index 462f93e97..e88356bb5 100644
--- a/packages/components/checkbox/__tests__/checkbox.test.tsx
+++ b/packages/components/checkbox/__tests__/checkbox.test.tsx
@@ -1,11 +1,17 @@
import * as React from "react";
import {render, renderHook, act} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {useForm} from "react-hook-form";
import {Checkbox, CheckboxProps} from "../src";
describe("Checkbox", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render(Label);
@@ -29,25 +35,21 @@ describe("Checkbox", () => {
expect(container.querySelector("input")?.checked).toBe(false);
});
- it("should change value after click", () => {
+ it("should change value after click", async () => {
const wrapper = render(Option);
const checkbox = wrapper.container.querySelector("input")!;
expect(checkbox.checked).toBe(false);
- act(() => {
- wrapper.getByTestId("checkbox-test").click();
- });
+ await user.click(wrapper.getByTestId("checkbox-test"));
expect(checkbox.checked).toBe(true);
});
- it("should ignore events when disabled", () => {
+ it("should ignore events when disabled", async () => {
const {container} = render(Option);
- act(() => {
- userEvent.click(container.querySelector("label")!);
- });
+ await user.click(container.querySelector("label")!);
expect(container.querySelector("input")?.checked).toBe(false);
});
@@ -58,7 +60,7 @@ describe("Checkbox", () => {
expect(container.querySelector("input")?.indeterminate).toBe(true);
});
- it('should work correctly with "onChange" prop', () => {
+ it('should work correctly with "onChange" prop', async () => {
const onChange = jest.fn();
const wrapper = render(
@@ -66,11 +68,9 @@ describe("Checkbox", () => {
,
);
- act(() => {
- wrapper.getByTestId("checkbox-test").click();
- });
+ await user.click(wrapper.getByTestId("checkbox-test"));
- expect(onChange).toBeCalled();
+ expect(onChange).toHaveBeenCalled();
});
it('should work correctly with "onFocus" prop', () => {
@@ -87,7 +87,7 @@ describe("Checkbox", () => {
input.focus();
});
- expect(onFocus).toBeCalled();
+ expect(onFocus).toHaveBeenCalled();
});
it("should have required attribute when isRequired with native validationBehavior", () => {
@@ -112,7 +112,7 @@ describe("Checkbox", () => {
expect(container.querySelector("input")).toHaveAttribute("aria-required", "true");
});
- it("should work correctly with controlled value", () => {
+ it("should work correctly with controlled value", async () => {
const onChange = jest.fn();
const Component = (props: CheckboxProps) => {
@@ -138,20 +138,12 @@ describe("Checkbox", () => {
,
);
- act(() => {
- wrapper.getByTestId("checkbox-test").click();
- });
+ await user.click(wrapper.getByTestId("checkbox-test"));
- expect(onChange).toBeCalled();
+ expect(onChange).toHaveBeenCalled();
});
describe("validation", () => {
- let user;
-
- beforeEach(() => {
- user = userEvent.setup();
- });
-
describe("validationBehavior=native", () => {
it("supports isRequired", async () => {
const {getByRole, getByTestId} = render(
@@ -257,14 +249,12 @@ describe("Checkbox with React Hook Form", () => {
});
it("should submit form when required field is not empty", async () => {
- act(() => {
- checkbox3.click();
- });
+ const user = userEvent.setup();
+
+ await user.click(checkbox3);
expect(checkbox3.checked).toBe(true);
- const user = userEvent.setup();
-
await user.click(submitButton);
expect(onSubmit).toHaveBeenCalledTimes(1);
diff --git a/packages/components/chip/__tests__/chip.test.tsx b/packages/components/chip/__tests__/chip.test.tsx
index 377e4487e..197f51be4 100644
--- a/packages/components/chip/__tests__/chip.test.tsx
+++ b/packages/components/chip/__tests__/chip.test.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import {render} from "@testing-library/react";
import {Avatar} from "@nextui-org/avatar";
-import {act} from "@testing-library/react-hooks";
+import userEvent from "@testing-library/user-event";
import {Chip} from "../src";
@@ -49,13 +49,13 @@ describe("Chip", () => {
expect(wrapper.getByRole("button")).not.toBeNull();
});
- it("should call onClose when close button is clicked", () => {
+ it("should call onClose when close button is clicked", async () => {
const onClose = jest.fn();
const {getByRole} = render();
- act(() => {
- getByRole("button").click();
- });
+ const user = userEvent.setup();
+
+ await user.click(getByRole("button"));
expect(onClose).toHaveBeenCalled();
});
diff --git a/packages/components/date-input/__tests__/date-input.test.tsx b/packages/components/date-input/__tests__/date-input.test.tsx
index 62dd7d6bb..156e300a2 100644
--- a/packages/components/date-input/__tests__/date-input.test.tsx
+++ b/packages/components/date-input/__tests__/date-input.test.tsx
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-autofocus */
import * as React from "react";
-import {act, fireEvent, render} from "@testing-library/react";
+import {fireEvent, render} from "@testing-library/react";
import {CalendarDate, CalendarDateTime, DateValue, ZonedDateTime} from "@internationalized/date";
import {pointerMap, triggerPress} from "@nextui-org/test-utils";
import userEvent from "@testing-library/user-event";
@@ -67,10 +67,7 @@ describe("DateInput", () => {
/>,
);
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
await user.keyboard("01011980");
expect(tree.getByText("Date unavailable.")).toBeInTheDocument();
@@ -205,17 +202,13 @@ describe("DateInput", () => {
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[1]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -236,22 +229,14 @@ describe("DateInput", () => {
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[0]).toHaveFocus();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[1]).toHaveFocus();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[2]).toHaveFocus();
expect(onBlurSpy).toHaveBeenCalledTimes(0);
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(onBlurSpy).toHaveBeenCalledTimes(1);
expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
@@ -266,9 +251,7 @@ describe("DateInput", () => {
expect(onKeyDownSpy).not.toHaveBeenCalled();
expect(onKeyUpSpy).not.toHaveBeenCalled();
- await act(() => {
- user.tab();
- });
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onKeyDownSpy).not.toHaveBeenCalled();
diff --git a/packages/components/date-input/__tests__/time-input.test.tsx b/packages/components/date-input/__tests__/time-input.test.tsx
index da00dab92..d055e9c60 100644
--- a/packages/components/date-input/__tests__/time-input.test.tsx
+++ b/packages/components/date-input/__tests__/time-input.test.tsx
@@ -1,6 +1,6 @@
/* eslint-disable jsx-a11y/no-autofocus */
import * as React from "react";
-import {act, fireEvent, render} from "@testing-library/react";
+import {fireEvent, render} from "@testing-library/react";
import {Time, ZonedDateTime} from "@internationalized/date";
import {TimeValue} from "@react-types/datepicker";
import {pointerMap, triggerPress} from "@nextui-org/test-utils";
@@ -237,17 +237,13 @@ describe("TimeInput", () => {
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[1]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -268,22 +264,14 @@ describe("TimeInput", () => {
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[0]).toHaveFocus();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[1]).toHaveFocus();
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(segments[2]).toHaveFocus();
expect(onBlurSpy).toHaveBeenCalledTimes(0);
- await act(async () => {
- await user.tab();
- });
+ await user.tab();
expect(onBlurSpy).toHaveBeenCalledTimes(1);
expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
@@ -298,10 +286,7 @@ describe("TimeInput", () => {
expect(onKeyDownSpy).not.toHaveBeenCalled();
expect(onKeyUpSpy).not.toHaveBeenCalled();
- await act(() => {
- user.tab();
- });
-
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onKeyDownSpy).not.toHaveBeenCalled();
expect(onKeyUpSpy).toHaveBeenCalledTimes(1);
diff --git a/packages/components/date-picker/__tests__/date-picker.test.tsx b/packages/components/date-picker/__tests__/date-picker.test.tsx
index 8d95dd634..53309cfbb 100644
--- a/packages/components/date-picker/__tests__/date-picker.test.tsx
+++ b/packages/components/date-picker/__tests__/date-picker.test.tsx
@@ -246,19 +246,13 @@ describe("DatePicker", () => {
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
expect(segments[1]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
@@ -288,19 +282,13 @@ describe("DatePicker", () => {
expect(onFocusChangeSpy).not.toHaveBeenCalled();
expect(onFocusSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onBlurSpy).not.toHaveBeenCalled();
expect(onFocusChangeSpy).toHaveBeenCalledTimes(1);
expect(onFocusSpy).toHaveBeenCalledTimes(1);
- await act(() => {
- user.click(document.body);
- });
-
+ await user.click(document.body);
expect(document.body).toHaveFocus();
expect(onBlurSpy).toHaveBeenCalledTimes(1);
expect(onFocusChangeSpy).toHaveBeenCalledTimes(2);
@@ -375,10 +363,7 @@ describe("DatePicker", () => {
expect(document.activeElement).toBe(button);
expect(button).toHaveFocus();
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
expect(document.body).toHaveFocus();
});
@@ -391,10 +376,7 @@ describe("DatePicker", () => {
expect(onKeyDownSpy).not.toHaveBeenCalled();
expect(onKeyUpSpy).not.toHaveBeenCalled();
- await act(async () => {
- await user.tab();
- });
-
+ await user.tab();
expect(segments[0]).toHaveFocus();
expect(onKeyDownSpy).not.toHaveBeenCalled();
expect(onKeyUpSpy).toHaveBeenCalledTimes(1);
diff --git a/packages/components/dropdown/__tests__/dropdown.test.tsx b/packages/components/dropdown/__tests__/dropdown.test.tsx
index 51be87d10..b4a0361fd 100644
--- a/packages/components/dropdown/__tests__/dropdown.test.tsx
+++ b/packages/components/dropdown/__tests__/dropdown.test.tsx
@@ -1,7 +1,7 @@
import * as React from "react";
import {act, render, fireEvent} from "@testing-library/react";
import {Button} from "@nextui-org/button";
-import userEvent from "@testing-library/user-event";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {keyCodes} from "@nextui-org/test-utils";
import {User} from "@nextui-org/user";
import {Image} from "@nextui-org/image";
@@ -14,6 +14,11 @@ import {Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, DropdownSection}
const spy = jest.spyOn(console, "error").mockImplementation(() => {});
describe("Dropdown", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
afterEach(() => {
jest.clearAllMocks();
});
@@ -144,11 +149,8 @@ describe("Dropdown", () => {
expect(triggerButton).toBeTruthy();
- await act(async () => {
- await userEvent.click(triggerButton);
- });
-
- expect(spy).toBeCalledTimes(0);
+ await user.click(triggerButton);
+ expect(spy).toHaveBeenCalledTimes(0);
let menu = wrapper.queryByRole("menu");
@@ -182,13 +184,11 @@ describe("Dropdown", () => {
let triggerButton = wrapper.getByTestId("trigger-test");
- expect(onOpenChange).toBeCalledTimes(0);
+ expect(onOpenChange).toHaveBeenCalledTimes(0);
- act(() => {
- triggerButton.click();
- });
+ await user.click(triggerButton);
- expect(onOpenChange).toBeCalledTimes(1);
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
let menu = wrapper.getByRole("menu");
@@ -201,12 +201,10 @@ describe("Dropdown", () => {
expect(menuItems.length).toBe(4);
- await act(async () => {
- await userEvent.click(menuItems[1]);
+ await user.click(menuItems[1]);
- expect(onSelectionChange).toBeCalledTimes(1);
- expect(onOpenChange).toBeCalled();
- });
+ expect(onSelectionChange).toHaveBeenCalledTimes(1);
+ expect(onOpenChange).toHaveBeenCalled();
});
it("should work with multiple selection (controlled)", async () => {
@@ -236,13 +234,11 @@ describe("Dropdown", () => {
let triggerButton = wrapper.getByTestId("trigger-test");
- expect(onOpenChange).toBeCalledTimes(0);
+ expect(onOpenChange).toHaveBeenCalledTimes(0);
- act(() => {
- triggerButton.click();
- });
+ await user.click(triggerButton);
- expect(onOpenChange).toBeCalledTimes(1);
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
let menu = wrapper.getByRole("menu");
@@ -255,12 +251,10 @@ describe("Dropdown", () => {
expect(menuItems.length).toBe(4);
- await act(async () => {
- await userEvent.click(menuItems[0]);
+ await user.click(menuItems[0]);
- expect(onSelectionChange).toBeCalledTimes(1);
- expect(onOpenChange).toBeCalled();
- });
+ expect(onSelectionChange).toHaveBeenCalledTimes(1);
+ expect(onOpenChange).toHaveBeenCalled();
});
it("should show checkmarks if selectionMode is single and has a selected item", () => {
@@ -366,7 +360,7 @@ describe("Dropdown", () => {
expect(checkmark1).toBeFalsy();
});
- it("should not open on disabled button", () => {
+ it("should not open on disabled button", async () => {
const wrapper = render(
@@ -389,16 +383,14 @@ describe("Dropdown", () => {
expect(triggerButton).toBeTruthy();
- act(() => {
- triggerButton.click();
- });
+ await user.click(triggerButton);
let menu = wrapper.queryByRole("menu");
expect(menu).toBeFalsy();
});
- it("should not open on disabled dropdown", () => {
+ it("should not open on disabled dropdown", async () => {
const wrapper = render(
@@ -419,16 +411,14 @@ describe("Dropdown", () => {
expect(triggerButton).toBeTruthy();
- act(() => {
- triggerButton.click();
- });
+ await user.click(triggerButton);
let menu = wrapper.queryByRole("menu");
expect(menu).toBeFalsy();
});
- it("should not select on disabled item", () => {
+ it("should not select on disabled item", async () => {
const onSelectionChange = jest.fn();
const wrapper = render(
@@ -455,11 +445,9 @@ describe("Dropdown", () => {
expect(menuItems.length).toBe(4);
- act(() => {
- menuItems[1].click();
- });
+ await user.click(menuItems[1]);
- expect(onSelectionChange).toBeCalledTimes(0);
+ expect(onSelectionChange).toHaveBeenCalledTimes(0);
});
it("should render without error (custom trigger with isDisabled)", async () => {
@@ -488,7 +476,7 @@ describe("Dropdown", () => {
,
);
- expect(spy).toBeCalledTimes(0);
+ expect(spy).toHaveBeenCalledTimes(0);
spy.mockRestore();
@@ -502,7 +490,7 @@ describe("Dropdown", () => {
,
);
- expect(spy).toBeCalledTimes(0);
+ expect(spy).toHaveBeenCalledTimes(0);
spy.mockRestore();
@@ -516,7 +504,7 @@ describe("Dropdown", () => {
,
);
- expect(spy).toBeCalledTimes(0);
+ expect(spy).toHaveBeenCalledTimes(0);
spy.mockRestore();
@@ -534,7 +522,7 @@ describe("Dropdown", () => {
,
);
- expect(spy).toBeCalledTimes(0);
+ expect(spy).toHaveBeenCalledTimes(0);
spy.mockRestore();
});
@@ -580,9 +568,7 @@ describe("Dropdown", () => {
expect(dropdown2).not.toBeNull();
// open the dropdown listbox by clicking dropdownor button in the first dropdown
- await act(async () => {
- await userEvent.click(dropdown);
- });
+ await user.click(dropdown);
// assert that the first dropdown listbox is open
expect(dropdown).toHaveAttribute("aria-expanded", "true");
@@ -591,9 +577,7 @@ describe("Dropdown", () => {
expect(dropdown2).toHaveAttribute("aria-expanded", "false");
// close the dropdown listbox by clicking the second dropdown
- await act(async () => {
- await userEvent.click(dropdown2);
- });
+ await user.click(dropdown2);
// assert that the first dropdown listbox is closed
expect(dropdown).toHaveAttribute("aria-expanded", "false");
@@ -601,281 +585,262 @@ describe("Dropdown", () => {
// assert that the second dropdown listbox is open
expect(dropdown2).toHaveAttribute("aria-expanded", "true");
});
-});
-describe("Keyboard interactions", () => {
- it("should focus on the first item on keyDown (Enter)", async () => {
- const wrapper = render(
-
-
-
-
-
- New file
- Copy link
- Edit file
-
- Delete file
-
-
- ,
- );
-
- let triggerButton = wrapper.getByTestId("trigger-test");
-
- act(() => {
- triggerButton.focus();
- });
-
- expect(triggerButton).toHaveFocus();
-
- fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
-
- let menu = wrapper.queryByRole("menu");
-
- expect(menu).toBeTruthy();
-
- let menuItems = wrapper.getAllByRole("menuitemradio");
-
- expect(menuItems.length).toBe(4);
-
- expect(menuItems[0]).toHaveFocus();
- });
-
- it("should focus on the first item on keyDown (Space)", async () => {
- const wrapper = render(
-
-
-
-
-
- New file
- Copy link
- Edit file
-
- Delete file
-
-
- ,
- );
-
- let triggerButton = wrapper.getByTestId("trigger-test");
-
- act(() => {
- triggerButton.focus();
- });
-
- expect(triggerButton).toHaveFocus();
-
- fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
-
- let menu = wrapper.queryByRole("menu");
-
- expect(menu).toBeTruthy();
-
- let menuItems = wrapper.getAllByRole("menuitemradio");
-
- expect(menuItems.length).toBe(4);
-
- expect(menuItems[0]).toHaveFocus();
- });
-
- it("should press the item on keyDown (Enter)", async () => {
- const user = userEvent.setup();
-
- const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
-
- const wrapper = render(
-
-
-
-
-
- {
- /* eslint-disable no-console */
- console.log("ENTER");
- }}
- >
- New file
-
- Copy link
- Edit file
-
- Delete file
-
-
- ,
- );
-
- let triggerButton = wrapper.getByTestId("trigger-test");
-
- act(() => {
- triggerButton.focus();
- });
-
- expect(triggerButton).toHaveFocus();
-
- fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
-
- let menu = wrapper.queryByRole("menu");
-
- expect(menu).toBeTruthy();
-
- let menuItems = wrapper.getAllByRole("menuitemradio");
-
- expect(menuItems.length).toBe(4);
-
- expect(menuItems[0]).toHaveFocus();
-
- await act(async () => {
- await user.keyboard("[Enter]");
- });
-
- expect(logSpy).toHaveBeenCalledWith("ENTER");
-
- logSpy.mockRestore();
- });
-
- it("should press the item on keyDown (Space)", async () => {
- const user = userEvent.setup();
-
- const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
-
- const wrapper = render(
-
-
-
-
-
- {
- /* eslint-disable no-console */
- console.log("SPACE");
- }}
- >
- New file
-
- Copy link
- Edit file
-
- Delete file
-
-
- ,
- );
-
- let triggerButton = wrapper.getByTestId("trigger-test");
-
- act(() => {
- triggerButton.focus();
- });
-
- expect(triggerButton).toHaveFocus();
-
- fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
-
- let menu = wrapper.queryByRole("menu");
-
- expect(menu).toBeTruthy();
-
- let menuItems = wrapper.getAllByRole("menuitemradio");
-
- expect(menuItems.length).toBe(4);
-
- expect(menuItems[0]).toHaveFocus();
-
- await act(async () => {
- await user.keyboard("[Space]");
- });
-
- expect(logSpy).toHaveBeenCalledWith("SPACE");
-
- logSpy.mockRestore();
- });
-
- it("should respect closeOnSelect setting of DropdownItem (static)", async () => {
- const onOpenChange = jest.fn();
- const wrapper = render(
-
-
-
-
-
-
- New file
-
- Copy link
-
- ,
- );
-
- let triggerButton = wrapper.getByTestId("trigger-test");
-
- act(() => {
- triggerButton.click();
- });
- expect(onOpenChange).toBeCalledTimes(1);
-
- let menuItems = wrapper.getAllByRole("menuitem");
-
- await act(async () => {
- await userEvent.click(menuItems[0]);
- expect(onOpenChange).toBeCalledTimes(1);
- });
-
- await act(async () => {
- await userEvent.click(menuItems[1]);
- expect(onOpenChange).toBeCalledTimes(2);
- });
- });
-
- it("should respect closeOnSelect setting of DropdownItem (dynamic)", async () => {
- const onOpenChange = jest.fn();
- const items = [
- {
- key: "new",
- label: "New file",
- },
- {
- key: "copy",
- label: "Copy link",
- },
- ];
- const wrapper = render(
-
-
-
-
-
- {(item) => (
-
- {item.label}
+ describe("Keyboard interactions", () => {
+ it("should focus on the first item on keyDown (Enter)", async () => {
+ const wrapper = render(
+
+
+
+
+
+ New file
+ Copy link
+ Edit file
+
+ Delete file
- )}
-
- ,
- );
+
+ ,
+ );
- let triggerButton = wrapper.getByTestId("trigger-test");
+ let triggerButton = wrapper.getByTestId("trigger-test");
- act(() => {
- triggerButton.click();
- });
- expect(onOpenChange).toBeCalledTimes(1);
+ act(() => {
+ triggerButton.focus();
+ });
- let menuItems = wrapper.getAllByRole("menuitem");
+ expect(triggerButton).toHaveFocus();
- await act(async () => {
- await userEvent.click(menuItems[0]);
- expect(onOpenChange).toBeCalledTimes(1);
+ fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+
+ let menu = wrapper.queryByRole("menu");
+
+ expect(menu).toBeTruthy();
+
+ let menuItems = wrapper.getAllByRole("menuitemradio");
+
+ expect(menuItems.length).toBe(4);
+
+ expect(menuItems[0]).toHaveFocus();
});
- await act(async () => {
- await userEvent.click(menuItems[1]);
- expect(onOpenChange).toBeCalledTimes(2);
+ it("should focus on the first item on keyDown (Space)", async () => {
+ const wrapper = render(
+
+
+
+
+
+ New file
+ Copy link
+ Edit file
+
+ Delete file
+
+
+ ,
+ );
+
+ let triggerButton = wrapper.getByTestId("trigger-test");
+
+ act(() => {
+ triggerButton.focus();
+ });
+
+ expect(triggerButton).toHaveFocus();
+
+ fireEvent.keyDown(triggerButton, {key: " ", charCode: keyCodes[" "]});
+
+ let menu = wrapper.queryByRole("menu");
+
+ expect(menu).toBeTruthy();
+
+ let menuItems = wrapper.getAllByRole("menuitemradio");
+
+ expect(menuItems.length).toBe(4);
+
+ expect(menuItems[0]).toHaveFocus();
+ });
+
+ it("should press the item on keyDown (Enter)", async () => {
+ const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+
+ const wrapper = render(
+
+
+
+
+
+ {
+ /* eslint-disable no-console */
+ console.log("ENTER");
+ }}
+ >
+ New file
+
+ Copy link
+ Edit file
+
+ Delete file
+
+
+ ,
+ );
+
+ let triggerButton = wrapper.getByTestId("trigger-test");
+
+ act(() => {
+ triggerButton.focus();
+ });
+
+ expect(triggerButton).toHaveFocus();
+
+ fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+
+ let menu = wrapper.queryByRole("menu");
+
+ expect(menu).toBeTruthy();
+
+ let menuItems = wrapper.getAllByRole("menuitemradio");
+
+ expect(menuItems.length).toBe(4);
+
+ expect(menuItems[0]).toHaveFocus();
+
+ await user.keyboard("[Enter]");
+
+ expect(logSpy).toHaveBeenCalledWith("ENTER");
+
+ logSpy.mockRestore();
+ });
+
+ it("should press the item on keyDown (Space)", async () => {
+ const logSpy = jest.spyOn(console, "log").mockImplementation(() => {});
+
+ const wrapper = render(
+
+
+
+
+
+ {
+ /* eslint-disable no-console */
+ console.log("SPACE");
+ }}
+ >
+ New file
+
+ Copy link
+ Edit file
+
+ Delete file
+
+
+ ,
+ );
+
+ let triggerButton = wrapper.getByTestId("trigger-test");
+
+ act(() => {
+ triggerButton.focus();
+ });
+
+ expect(triggerButton).toHaveFocus();
+
+ fireEvent.keyDown(triggerButton, {key: "Enter", charCode: keyCodes.Enter});
+
+ let menu = wrapper.queryByRole("menu");
+
+ expect(menu).toBeTruthy();
+
+ let menuItems = wrapper.getAllByRole("menuitemradio");
+
+ expect(menuItems.length).toBe(4);
+
+ expect(menuItems[0]).toHaveFocus();
+
+ await user.keyboard("[Space]");
+
+ expect(logSpy).toHaveBeenCalledWith("SPACE");
+
+ logSpy.mockRestore();
+ });
+
+ it("should respect closeOnSelect setting of DropdownItem (static)", async () => {
+ const onOpenChange = jest.fn();
+ const wrapper = render(
+
+
+
+
+
+
+ New file
+
+ Copy link
+
+ ,
+ );
+
+ let triggerButton = wrapper.getByTestId("trigger-test");
+
+ await user.click(triggerButton);
+
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
+
+ let menuItems = wrapper.getAllByRole("menuitem");
+
+ await user.click(menuItems[0]);
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
+
+ await user.click(menuItems[1]);
+ expect(onOpenChange).toHaveBeenCalledTimes(2);
+ });
+
+ it("should respect closeOnSelect setting of DropdownItem (dynamic)", async () => {
+ const onOpenChange = jest.fn();
+ const items = [
+ {
+ key: "new",
+ label: "New file",
+ },
+ {
+ key: "copy",
+ label: "Copy link",
+ },
+ ];
+ const wrapper = render(
+
+
+
+
+
+ {(item) => (
+
+ {item.label}
+
+ )}
+
+ ,
+ );
+
+ let triggerButton = wrapper.getByTestId("trigger-test");
+
+ await user.click(triggerButton);
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
+
+ let menuItems = wrapper.getAllByRole("menuitem");
+
+ await user.click(menuItems[0]);
+ expect(onOpenChange).toHaveBeenCalledTimes(1);
+
+ await user.click(menuItems[1]);
+ expect(onOpenChange).toHaveBeenCalledTimes(2);
});
});
});
diff --git a/packages/components/listbox/__tests__/listbox.test.tsx b/packages/components/listbox/__tests__/listbox.test.tsx
index a3d3ab0ba..36bc7ebca 100644
--- a/packages/components/listbox/__tests__/listbox.test.tsx
+++ b/packages/components/listbox/__tests__/listbox.test.tsx
@@ -1,10 +1,16 @@
import * as React from "react";
-import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {Listbox, ListboxItem, ListboxSection} from "../src";
describe("Listbox", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render(
@@ -145,11 +151,8 @@ describe("Listbox", () => {
expect(listboxItems.length).toBe(4);
- await act(async () => {
- await userEvent.click(listboxItems[1]);
-
- expect(onSelectionChange).toBeCalledTimes(1);
- });
+ await user.click(listboxItems[1]);
+ expect(onSelectionChange).toHaveBeenCalledTimes(1);
});
it("should work with multiple selection (controlled)", async () => {
@@ -179,11 +182,8 @@ describe("Listbox", () => {
expect(listboxItems.length).toBe(4);
- await act(async () => {
- await userEvent.click(listboxItems[0]);
-
- expect(onSelectionChange).toBeCalledTimes(1);
- });
+ await user.click(listboxItems[0]);
+ expect(onSelectionChange).toHaveBeenCalledTimes(1);
});
it("should show checkmarks if selectionMode is single and has a selected item", () => {
diff --git a/packages/components/menu/__tests__/menu.test.tsx b/packages/components/menu/__tests__/menu.test.tsx
index aeb7f14a5..98530665e 100644
--- a/packages/components/menu/__tests__/menu.test.tsx
+++ b/packages/components/menu/__tests__/menu.test.tsx
@@ -1,10 +1,16 @@
import * as React from "react";
-import {act, render} from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
+import {render} from "@testing-library/react";
+import userEvent, {UserEvent} from "@testing-library/user-event";
import {Menu, MenuItem, MenuSection} from "../src";
describe("Menu", () => {
+ let user: UserEvent;
+
+ beforeEach(() => {
+ user = userEvent.setup();
+ });
+
it("should render correctly", () => {
const wrapper = render(