Skip to content

Commit

Permalink
Upgrade testing-library and wrap FocusScope tests in act
Browse files Browse the repository at this point in the history
  • Loading branch information
Vlad Moroz committed Jun 4, 2024
1 parent f1bd85f commit 007ba3a
Show file tree
Hide file tree
Showing 3 changed files with 67 additions and 51 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@
"@storybook/test": "^7.6.17",
"@testing-library/cypress": "^7.0.6",
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.0.1",
"@testing-library/react": "^15.0.7",
"@testing-library/user-event": "^14.1.0",
"@types/eslint": "^7.28.0",
"@types/fs-extra": "^11",
Expand Down
50 changes: 31 additions & 19 deletions packages/react/focus-scope/src/FocusScope.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,21 +35,27 @@ describe('FocusScope', () => {
});

it('should focus the next element in the scope on tab', () => {
tabbableFirst.focus();
userEvent.tab();
waitFor(() => expect(tabbableSecond).toHaveFocus());
React.act(() => {
tabbableFirst.focus();
userEvent.tab();
waitFor(() => expect(tabbableSecond).toHaveFocus());
});
});

it('should focus the last element in the scope on shift+tab from the first element in scope', () => {
tabbableFirst.focus();
userEvent.tab({ shift: true });
waitFor(() => expect(tabbableLast).toHaveFocus());
React.act(() => {
tabbableFirst.focus();
userEvent.tab({ shift: true });
waitFor(() => expect(tabbableLast).toHaveFocus());
});
});

it('should focus the first element in scope on tab from the last element in scope', async () => {
tabbableLast.focus();
userEvent.tab();
waitFor(() => expect(tabbableFirst).toHaveFocus());
React.act(() => {
tabbableLast.focus();
userEvent.tab();
waitFor(() => expect(tabbableFirst).toHaveFocus());
});
});
});

Expand Down Expand Up @@ -77,15 +83,19 @@ describe('FocusScope', () => {
});

it('should skip the element with a negative tabindex on tab', () => {
tabbableLast.focus();
userEvent.tab();
waitFor(() => expect(tabbableSecond).toHaveFocus());
React.act(() => {
tabbableLast.focus();
userEvent.tab();
waitFor(() => expect(tabbableSecond).toHaveFocus());
});
});

it('should skip the element with a negative tabindex on shift+tab', () => {
tabbableSecond.focus();
userEvent.tab({ shift: true });
waitFor(() => expect(tabbableLast).toHaveFocus());
React.act(() => {
tabbableSecond.focus();
userEvent.tab({ shift: true });
waitFor(() => expect(tabbableLast).toHaveFocus());
});
});
});

Expand All @@ -109,10 +119,12 @@ describe('FocusScope', () => {

it('should properly blur the last element in the scope before cycling back', async () => {
// Tab back and then tab forward to cycle through the scope
tabbableFirst.focus();
userEvent.tab({ shift: true });
userEvent.tab();
waitFor(() => expect(handleLastFocusableElementBlur).toHaveBeenCalledTimes(1));
React.act(() => {
tabbableFirst.focus();
userEvent.tab({ shift: true });
userEvent.tab();
waitFor(() => expect(handleLastFocusableElementBlur).toHaveBeenCalledTimes(1));
});
});
});
});
Expand Down
66 changes: 35 additions & 31 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5919,6 +5919,22 @@ __metadata:
languageName: node
linkType: hard

"@testing-library/dom@npm:^10.0.0":
version: 10.1.0
resolution: "@testing-library/dom@npm:10.1.0"
dependencies:
"@babel/code-frame": "npm:^7.10.4"
"@babel/runtime": "npm:^7.12.5"
"@types/aria-query": "npm:^5.0.1"
aria-query: "npm:5.3.0"
chalk: "npm:^4.1.0"
dom-accessibility-api: "npm:^0.5.9"
lz-string: "npm:^1.5.0"
pretty-format: "npm:^27.0.2"
checksum: 10/6d6ef942deedf547180c76d4cc2c43fe8e52a98ef68be6ba7382a43d3b1e1e5696d9c32ae0b2df12c92ea50023187d132ad2542fc118ba4b900f149e97d019e0
languageName: node
linkType: hard

"@testing-library/dom@npm:^7.22.3, @testing-library/dom@npm:^7.29.6":
version: 7.31.2
resolution: "@testing-library/dom@npm:7.31.2"
Expand All @@ -5935,22 +5951,6 @@ __metadata:
languageName: node
linkType: hard

"@testing-library/dom@npm:^8.5.0":
version: 8.20.1
resolution: "@testing-library/dom@npm:8.20.1"
dependencies:
"@babel/code-frame": "npm:^7.10.4"
"@babel/runtime": "npm:^7.12.5"
"@types/aria-query": "npm:^5.0.1"
aria-query: "npm:5.1.3"
chalk: "npm:^4.1.0"
dom-accessibility-api: "npm:^0.5.9"
lz-string: "npm:^1.5.0"
pretty-format: "npm:^27.0.2"
checksum: 10/6c7a92fcc89931ef62a9a92dacec09b3e5ee5c3aba2171aa8de6c7504927b7c9364d73d2ed87b72447d6783108c1c92c207d16f788de64c69bc97059d7105e3c
languageName: node
linkType: hard

"@testing-library/dom@npm:^9.3.1":
version: 9.3.4
resolution: "@testing-library/dom@npm:9.3.4"
Expand Down Expand Up @@ -6030,17 +6030,21 @@ __metadata:
languageName: node
linkType: hard

"@testing-library/react@npm:^13.0.1":
version: 13.4.0
resolution: "@testing-library/react@npm:13.4.0"
"@testing-library/react@npm:^15.0.7":
version: 15.0.7
resolution: "@testing-library/react@npm:15.0.7"
dependencies:
"@babel/runtime": "npm:^7.12.5"
"@testing-library/dom": "npm:^8.5.0"
"@testing-library/dom": "npm:^10.0.0"
"@types/react-dom": "npm:^18.0.0"
peerDependencies:
"@types/react": ^18.0.0
react: ^18.0.0
react-dom: ^18.0.0
checksum: 10/788249aad25a0161b197b7d387011e2578701ab18451b69a987eb073b2d24eb1041f242581c3dd4800f5abcf4f11811f5f6b1e682a45f1840a08fdde3ce559b7
peerDependenciesMeta:
"@types/react":
optional: true
checksum: 10/a9342ad09b019b0f99688fb50265899bc93adfe23c22aa6743fd920635b43fdc66877e66d95f240923aa6f7d3aa360837f5b053fb363a31975788974dff7bc93
languageName: node
linkType: hard

Expand Down Expand Up @@ -7340,6 +7344,15 @@ __metadata:
languageName: node
linkType: hard

"aria-query@npm:5.3.0, aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
version: 5.3.0
resolution: "aria-query@npm:5.3.0"
dependencies:
dequal: "npm:^2.0.3"
checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e
languageName: node
linkType: hard

"aria-query@npm:^4.2.2":
version: 4.2.2
resolution: "aria-query@npm:4.2.2"
Expand All @@ -7350,15 +7363,6 @@ __metadata:
languageName: node
linkType: hard

"aria-query@npm:^5.0.0, aria-query@npm:^5.3.0":
version: 5.3.0
resolution: "aria-query@npm:5.3.0"
dependencies:
dequal: "npm:^2.0.3"
checksum: 10/c3e1ed127cc6886fea4732e97dd6d3c3938e64180803acfb9df8955517c4943760746ffaf4020ce8f7ffaa7556a3b5f85c3769a1f5ca74a1288e02d042f9ae4e
languageName: node
linkType: hard

"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
version: 1.0.1
resolution: "array-buffer-byte-length@npm:1.0.1"
Expand Down Expand Up @@ -15138,7 +15142,7 @@ __metadata:
"@storybook/test": "npm:^7.6.17"
"@testing-library/cypress": "npm:^7.0.6"
"@testing-library/jest-dom": "npm:^5.16.4"
"@testing-library/react": "npm:^13.0.1"
"@testing-library/react": "npm:^15.0.7"
"@testing-library/user-event": "npm:^14.1.0"
"@types/eslint": "npm:^7.28.0"
"@types/fs-extra": "npm:^11"
Expand Down

0 comments on commit 007ba3a

Please sign in to comment.