Skip to content

Commit a4a3814

Browse files
afc163afc163
committed
chore: use testing-library dom events
1 parent b4921cd commit a4a3814

9 files changed

Lines changed: 48 additions & 81 deletions

‎package.json‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -53,19 +53,31 @@
5353
"clsx": "^2.1.1"
5454
},
5555
"devDependencies": {
56+
"@babel/eslint-parser": "^7.29.7",
57+
"@babel/eslint-plugin": "^7.29.7",
58+
"@eslint/eslintrc": "^3.3.5",
59+
"@eslint/js": "^9.39.4",
5660
"@rc-component/father-plugin": "^2.2.0",
5761
"@rc-component/np": "^1.0.4",
62+
"@testing-library/dom": "^10.4.1",
5863
"@testing-library/jest-dom": "^6.9.1",
5964
"@testing-library/react": "^16.3.2",
6065
"@types/jest": "^30.0.0",
6166
"@types/node": "^26.0.1",
6267
"@types/react": "^19.2.17",
6368
"@types/react-dom": "^19.2.3",
6469
"@types/warning": "^3.0.4",
70+
"@typescript-eslint/eslint-plugin": "^8.62.0",
71+
"@typescript-eslint/parser": "^8.62.0",
6572
"@umijs/fabric": "^4.0.1",
6673
"cross-env": "^10.1.0",
6774
"dumi": "^2.4.35",
6875
"eslint": "^9.39.4",
76+
"eslint-config-prettier": "^10.1.8",
77+
"eslint-plugin-jest": "^29.15.3",
78+
"eslint-plugin-react": "^7.37.5",
79+
"eslint-plugin-react-hooks": "^7.1.1",
80+
"eslint-plugin-unicorn": "^65.0.1",
6981
"father": "^4.6.23",
7082
"gh-pages": "^6.3.0",
7183
"husky": "^9.1.7",
@@ -75,18 +87,7 @@
7587
"rc-test": "^7.1.3",
7688
"react": "^19.2.7",
7789
"react-dom": "^19.2.7",
78-
"typescript": "^6.0.3",
79-
"@eslint/eslintrc": "^3.3.5",
80-
"@eslint/js": "^9.39.4",
81-
"eslint-plugin-react": "^7.37.5",
82-
"eslint-plugin-react-hooks": "^7.1.1",
83-
"eslint-config-prettier": "^10.1.8",
84-
"@babel/eslint-parser": "^7.29.7",
85-
"@babel/eslint-plugin": "^7.29.7",
86-
"@typescript-eslint/eslint-plugin": "^8.62.0",
87-
"@typescript-eslint/parser": "^8.62.0",
88-
"eslint-plugin-jest": "^29.15.3",
89-
"eslint-plugin-unicorn": "^65.0.1"
90+
"typescript": "^6.0.3"
9091
},
9192
"peerDependencies": {
9293
"react": ">=16.9.0",

‎tests/Collapsed.spec.tsx‎

Lines changed: 21 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence */
2-
import { act, fireEvent, render } from '@testing-library/react';
3+
import { act, render } from '@testing-library/react';
34
import React from 'react';
45
import Menu, { MenuItem, SubMenu } from '../src';
56

@@ -27,24 +28,18 @@ describe('Menu.Collapsed', () => {
2728
const { container, rerender } = render(genMenu());
2829

2930
// Inline
30-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
31-
'rc-menu-hidden',
32-
);
31+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
3332

3433
// Vertical
3534
rerender(genMenu({ mode: 'vertical' }));
3635
act(() => {
3736
jest.runAllTimers();
3837
});
39-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
40-
'rc-menu-hidden',
41-
);
38+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
4239

4340
// Inline
4441
rerender(genMenu({ mode: 'inline' }));
45-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
46-
'rc-menu-hidden',
47-
);
42+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
4843
});
4944

5045
it('should always follow submenu popup hidden when mode is switched', () => {
@@ -61,9 +56,7 @@ describe('Menu.Collapsed', () => {
6156
const { container, rerender } = render(genMenu());
6257

6358
// Hover submenu1
64-
fireEvent.mouseEnter(
65-
container.querySelectorAll('.rc-menu-submenu-title')[0],
66-
);
59+
fireEvent.mouseEnter(container.querySelectorAll('.rc-menu-submenu-title')[0]);
6760

6861
act(() => {
6962
jest.runAllTimers();
@@ -73,9 +66,7 @@ describe('Menu.Collapsed', () => {
7366
});
7467

7568
// Hover submenu1-1
76-
fireEvent.mouseEnter(
77-
container.querySelectorAll('.rc-menu-submenu-title')[1],
78-
);
69+
fireEvent.mouseEnter(container.querySelectorAll('.rc-menu-submenu-title')[1]);
7970

8071
act(() => {
8172
jest.runAllTimers();
@@ -114,12 +105,8 @@ describe('Menu.Collapsed', () => {
114105
);
115106

116107
const { container, rerender } = render(genMenu());
117-
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass(
118-
'rc-menu-inline',
119-
);
120-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
121-
'rc-menu-hidden',
122-
);
108+
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass('rc-menu-inline');
109+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
123110

124111
rerender(genMenu({ inlineCollapsed: true }));
125112
// 动画结束后套样式;
@@ -135,22 +122,16 @@ describe('Menu.Collapsed', () => {
135122
jest.runAllTimers();
136123
});
137124

138-
expect(container.querySelector('ul.rc-menu-root')).toHaveClass(
139-
'rc-menu-vertical',
140-
);
125+
expect(container.querySelector('ul.rc-menu-root')).toHaveClass('rc-menu-vertical');
141126
expect(container.querySelectorAll('ul.rc-menu-sub')).toHaveLength(0);
142127

143128
rerender(genMenu({ inlineCollapsed: false }));
144129
act(() => {
145130
jest.runAllTimers();
146131
});
147132

148-
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass(
149-
'rc-menu-inline',
150-
);
151-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
152-
'rc-menu-hidden',
153-
);
133+
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass('rc-menu-inline');
134+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
154135
});
155136

156137
it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
@@ -199,20 +180,12 @@ describe('Menu.Collapsed', () => {
199180
jest.runAllTimers();
200181
});
201182

202-
expect(container.querySelector('.rc-menu-submenu')).toHaveClass(
203-
'rc-menu-submenu-vertical',
204-
);
183+
expect(container.querySelector('.rc-menu-submenu')).toHaveClass('rc-menu-submenu-vertical');
205184

206-
expect(container.querySelector('.rc-menu-submenu')).toHaveClass(
207-
'rc-menu-submenu-open',
208-
);
185+
expect(container.querySelector('.rc-menu-submenu')).toHaveClass('rc-menu-submenu-open');
209186

210-
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass(
211-
'rc-menu-vertical',
212-
);
213-
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass(
214-
'rc-menu-hidden',
215-
);
187+
expect(container.querySelector('ul.rc-menu-sub')).toHaveClass('rc-menu-vertical');
188+
expect(container.querySelector('ul.rc-menu-sub')).not.toHaveClass('rc-menu-hidden');
216189
});
217190

218191
it('inlineCollapsed MenuItem Tooltip can be removed', () => {
@@ -271,15 +244,11 @@ describe('Menu.Collapsed', () => {
271244
const { container, rerender } = render(genMenu());
272245

273246
// Default
274-
expect(
275-
container.querySelector('.rc-menu-item-selected').textContent,
276-
).toBe('Option 1');
247+
expect(container.querySelector('.rc-menu-item-selected').textContent).toBe('Option 1');
277248

278249
// Click to change select
279250
fireEvent.click(container.querySelectorAll('.rc-menu-item')[1]);
280-
expect(
281-
container.querySelector('.rc-menu-item-selected').textContent,
282-
).toBe('Option 2');
251+
expect(container.querySelector('.rc-menu-item-selected').textContent).toBe('Option 2');
283252

284253
// Collapse it
285254
rerender(genMenu({ inlineCollapsed: true }));
@@ -292,20 +261,12 @@ describe('Menu.Collapsed', () => {
292261

293262
// Expand it
294263
rerender(genMenu({ inlineCollapsed: false }));
295-
expect(
296-
container.querySelector('.rc-menu-item-selected').textContent,
297-
).toBe('Option 2');
264+
expect(container.querySelector('.rc-menu-item-selected').textContent).toBe('Option 2');
298265
});
299266

300267
it('should hideMenu in initial state when collapsed', () => {
301268
const genMenu = (props?) => (
302-
<Menu
303-
mode="inline"
304-
inlineCollapsed
305-
defaultSelectedKeys={['1']}
306-
openKeys={['3']}
307-
{...props}
308-
>
269+
<Menu mode="inline" inlineCollapsed defaultSelectedKeys={['1']} openKeys={['3']} {...props}>
309270
<MenuItem key="1">Option 1</MenuItem>
310271
<MenuItem key="2">Option 2</MenuItem>
311272
<SubMenu key="3" title="Option 3">
@@ -327,9 +288,7 @@ describe('Menu.Collapsed', () => {
327288
jest.runAllTimers();
328289
});
329290

330-
expect(
331-
container.querySelector('.rc-menu-item-selected').textContent,
332-
).toBe('Option 1');
291+
expect(container.querySelector('.rc-menu-item-selected').textContent).toBe('Option 1');
333292
});
334293

335294
it('vertical also support inlineCollapsed', () => {

‎tests/Focus.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef */
2-
import { act, fireEvent, render } from '@testing-library/react';
3+
import { act, render } from '@testing-library/react';
34
import { spyElementPrototypes } from '@rc-component/util';
45
import React from 'react';
56
import Menu, { MenuItem, MenuItemGroup, MenuRef, SubMenu } from '../src';

‎tests/Keyboard.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence, max-classes-per-file */
2-
import { fireEvent, render } from '@testing-library/react';
3+
import { render } from '@testing-library/react';
34
import { KeyCode, spyElementPrototypes } from '@rc-component/util';
45
import React from 'react';
56
import { act } from 'react-dom/test-utils';

‎tests/Menu.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence, max-classes-per-file */
23
import type { MenuMode } from '@/interface';
3-
import { fireEvent, render } from '@testing-library/react';
4+
import { render } from '@testing-library/react';
45
import { KeyCode, resetWarned, spyElementPrototypes } from '@rc-component/util';
56
import React from 'react';
67
import { act } from 'react-dom/test-utils';

‎tests/MenuItem.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef */
2-
import { fireEvent, render } from '@testing-library/react';
3+
import { render } from '@testing-library/react';
34
import { KeyCode } from '@rc-component/util';
45
import React from 'react';
56
import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';

‎tests/Responsive.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef, react/no-multi-comp, react/jsx-curly-brace-presence, max-classes-per-file */
2-
import { act, fireEvent, render } from '@testing-library/react';
3+
import { act, render } from '@testing-library/react';
34
import ResizeObserver from '@rc-component/resize-observer';
45
import { KeyCode, spyElementPrototype } from '@rc-component/util';
56
import React from 'react';

‎tests/SubMenu.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef */
2-
import { act, fireEvent, render } from '@testing-library/react';
3+
import { act, render } from '@testing-library/react';
34
import { resetWarned } from '@rc-component/util';
45
import React from 'react';
56
import Menu, { MenuItem, SubMenu } from '../src';

‎tests/semantic.spec.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1+
import { fireEvent } from '@testing-library/dom';
12
/* eslint-disable no-undef */
2-
import { act, fireEvent, render } from '@testing-library/react';
3+
import { act, render } from '@testing-library/react';
34
import React from 'react';
45
import Menu, { MenuItem, MenuItemGroup, SubMenu } from '../src';
56
describe('semantic', () => {

0 commit comments

Comments
 (0)