Skip to content

Commit 7731a6b

Browse files
heiyu4585zombieJ
heiyu4585
and
zombieJ
authored
tesst: replace to testing-lib (#444)
* feat: replace to testing-lib * test: fix match pos * feat: update package.json Co-authored-by: zombiej <[email protected]>
1 parent b9577c8 commit 7731a6b

14 files changed

+733
-698
lines changed

‎jest.config.js

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
11
module.exports = {
22
setupFiles: ['./tests/setup.js'],
3-
snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
4-
};
3+
};

‎package.json

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@
3939
},
4040
"dependencies": {
4141
"@babel/runtime": "^7.10.1",
42+
"@testing-library/jest-dom": "^5.16.4",
43+
"@testing-library/react": "13.3.0",
4244
"classnames": "^2.2.5",
4345
"rc-util": "^5.9.8"
4446
},
@@ -51,9 +53,6 @@
5153
"@umijs/fabric": "^2.0.0",
5254
"cross-env": "^7.0.0",
5355
"dumi": "^1.1.0",
54-
"enzyme": "^3.1.1",
55-
"enzyme-adapter-react-16": "^1.0.1",
56-
"enzyme-to-json": "^3.6.1",
5756
"eslint": "^7.1.0",
5857
"expect.js": "~0.3.1",
5958
"father": "^2.22.0",
@@ -62,8 +61,8 @@
6261
"less": "^3.12.2",
6362
"np": "^7.2.0",
6463
"rc-tooltip": "^5.0.2",
65-
"react": "^16.0.0",
66-
"react-dom": "^16.0.0",
64+
"react": "^18.2.0",
65+
"react-dom": "^18.2.0",
6766
"regenerator-runtime": "^0.13.7",
6867
"typescript": "^4.0.2"
6968
},

‎tests/click.test.tsx

Lines changed: 68 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
2-
import { mount, ReactWrapper } from './util/wrapper';
2+
import { render, fireEvent } from '@testing-library/react';
33
import InputNumber, { InputNumberProps } from '../src';
4+
import KeyCode from 'rc-util/lib/KeyCode';
45

56
jest.mock('../src/utils/supportUtil');
67
const { supportBigInt } = require('../src/utils/supportUtil');
@@ -17,109 +18,78 @@ describe('InputNumber.Click', () => {
1718
function testInputNumber(
1819
name: string,
1920
props: Partial<InputNumberProps>,
20-
operate: (wrapper: ReactWrapper) => void,
21+
selector: string,
2122
changedValue: string | number,
2223
stepType: 'up' | 'down',
2324
) {
2425
it(name, () => {
2526
const onChange = jest.fn();
2627
const onStep = jest.fn();
27-
const wrapper = mount(<InputNumber onChange={onChange} onStep={onStep} {...props} />);
28-
operate(wrapper);
28+
const { container, unmount } = render(
29+
<InputNumber onChange={onChange} onStep={onStep} {...props} />,
30+
);
31+
fireEvent.focus(container.querySelector('input'));
32+
fireEvent.mouseDown(container.querySelector(selector));
33+
fireEvent.mouseUp(container.querySelector(selector));
34+
fireEvent.click(container.querySelector(selector));
35+
expect(onChange).toHaveBeenCalledTimes(1);
2936
expect(onChange).toHaveBeenCalledWith(changedValue);
3037
expect(onStep).toHaveBeenCalledWith(changedValue, { offset: 1, type: stepType });
31-
32-
wrapper.unmount();
38+
unmount();
3339
});
3440
}
3541

3642
describe('basic work', () => {
37-
testInputNumber(
38-
'up button',
39-
{ defaultValue: 10 },
40-
wrapper => wrapper.find('.rc-input-number-handler-up').simulate('mouseDown'),
41-
11,
42-
'up',
43-
);
43+
testInputNumber('up button', { defaultValue: 10 }, '.rc-input-number-handler-up', 11, 'up');
4444

45-
testInputNumber(
46-
'down button',
47-
{ value: 10 },
48-
wrapper => wrapper.find('.rc-input-number-handler-down').simulate('mouseDown'),
49-
9,
50-
'down',
51-
);
45+
testInputNumber('down button', { value: 10 }, '.rc-input-number-handler-down', 9, 'down');
5246
});
5347

5448
describe('empty input', () => {
55-
testInputNumber(
56-
'up button',
57-
{},
58-
wrapper => wrapper.find('.rc-input-number-handler-up').simulate('mouseDown'),
59-
1,
60-
'up',
61-
);
49+
testInputNumber('up button', {}, '.rc-input-number-handler-up', 1, 'up');
6250

63-
testInputNumber(
64-
'down button',
65-
{},
66-
wrapper => wrapper.find('.rc-input-number-handler-down').simulate('mouseDown'),
67-
-1,
68-
'down',
69-
);
51+
testInputNumber('down button', {}, '.rc-input-number-handler-down', -1, 'down');
7052
});
7153

7254
describe('empty with min & max', () => {
73-
testInputNumber(
74-
'up button',
75-
{ min: 6, max: 10 },
76-
wrapper => wrapper.find('.rc-input-number-handler-up').simulate('mouseDown'),
77-
6,
78-
'up',
79-
);
55+
testInputNumber('up button', { min: 6, max: 10 }, '.rc-input-number-handler-up', 6, 'up');
8056

81-
testInputNumber(
82-
'down button',
83-
{ min: 6, max: 10 },
84-
wrapper => wrapper.find('.rc-input-number-handler-down').simulate('mouseDown'),
85-
6,
86-
'down',
87-
);
57+
testInputNumber('down button', { min: 6, max: 10 }, '.rc-input-number-handler-down', 6, 'down');
8858
});
8959

9060
describe('null with min & max', () => {
9161
testInputNumber(
9262
'up button',
9363
{ value: null, min: 6, max: 10 },
94-
wrapper => wrapper.find('.rc-input-number-handler-up').simulate('mouseDown'),
64+
'.rc-input-number-handler-up',
9565
6,
9666
'up',
9767
);
9868

9969
testInputNumber(
10070
'down button',
10171
{ value: null, min: 6, max: 10 },
102-
wrapper => wrapper.find('.rc-input-number-handler-down').simulate('mouseDown'),
72+
'.rc-input-number-handler-down',
10373
6,
10474
'down',
10575
);
10676
});
10777

10878
describe('disabled', () => {
10979
it('none', () => {
110-
const wrapper = mount(<InputNumber value={5} min={3} max={9} />);
111-
expect(wrapper.exists('.rc-input-number-handler-up-disabled')).toBeFalsy();
112-
expect(wrapper.exists('.rc-input-number-handler-down-disabled')).toBeFalsy();
80+
const { container } = render(<InputNumber value={5} min={3} max={9} />);
81+
expect(container.querySelector('.rc-input-number-handler-up-disabled')).toBeFalsy();
82+
expect(container.querySelector('.rc-input-number-handler-down-disabled')).toBeFalsy();
11383
});
11484

11585
it('min', () => {
116-
const wrapper = mount(<InputNumber value={3} min={3} max={9} />);
117-
expect(wrapper.exists('.rc-input-number-handler-down-disabled')).toBeTruthy();
86+
const { container } = render(<InputNumber value={3} min={3} max={9} />);
87+
expect(container.querySelector('.rc-input-number-handler-down-disabled')).toBeTruthy();
11888
});
11989

12090
it('max', () => {
121-
const wrapper = mount(<InputNumber value={9} min={3} max={9} />);
122-
expect(wrapper.exists('.rc-input-number-handler-up-disabled')).toBeTruthy();
91+
const { container } = render(<InputNumber value={9} min={3} max={9} />);
92+
expect(container.querySelector('.rc-input-number-handler-up-disabled')).toBeTruthy();
12393
});
12494
});
12595

@@ -128,11 +98,11 @@ describe('InputNumber.Click', () => {
12898
supportBigInt.mockImplementation(() => false);
12999

130100
const onChange = jest.fn();
131-
const wrapper = mount(<InputNumber defaultValue={1e24} onChange={onChange} />);
132-
wrapper.find('.rc-input-number-handler-up').simulate('mouseDown');
101+
const { container } = render(<InputNumber defaultValue={1e24} onChange={onChange} />);
102+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
133103
expect(onChange).toHaveBeenCalledWith(Number.MAX_SAFE_INTEGER);
134104

135-
wrapper.find('.rc-input-number-handler-down').simulate('mouseDown');
105+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-down'));
136106
expect(onChange).toHaveBeenCalledWith(Number.MAX_SAFE_INTEGER - 1);
137107

138108
supportBigInt.mockRestore();
@@ -142,58 +112,65 @@ describe('InputNumber.Click', () => {
142112
supportBigInt.mockImplementation(() => false);
143113

144114
const onChange = jest.fn();
145-
const wrapper = mount(<InputNumber defaultValue={-1e25} onChange={onChange} />);
146-
wrapper.find('.rc-input-number-handler-down').simulate('mouseDown');
115+
const { container } = render(<InputNumber defaultValue={-1e25} onChange={onChange} />);
116+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-down'));
147117
expect(onChange).toHaveBeenCalledWith(Number.MIN_SAFE_INTEGER);
148118

149-
wrapper.find('.rc-input-number-handler-up').simulate('mouseDown');
119+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
150120
expect(onChange).toHaveBeenCalledWith(Number.MIN_SAFE_INTEGER + 1);
151121

152122
supportBigInt.mockRestore();
153123
});
154124

155125
it('no limit max safe when BigInt support', () => {
156126
const onChange = jest.fn();
157-
const wrapper = mount(<InputNumber stringMode defaultValue={1e24} onChange={onChange} />);
158-
wrapper.find('.rc-input-number-handler-up').simulate('mouseDown');
127+
const { container } = render(
128+
<InputNumber stringMode defaultValue={1e24} onChange={onChange} />,
129+
);
130+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
159131
expect(onChange).toHaveBeenCalledWith('999999999999999983222785');
160132
});
161133

162134
it('no limit min safe when BigInt support', () => {
163135
const onChange = jest.fn();
164-
const wrapper = mount(<InputNumber stringMode defaultValue={-1e25} onChange={onChange} />);
165-
wrapper.find('.rc-input-number-handler-down').simulate('mouseDown');
136+
const { container } = render(
137+
<InputNumber stringMode defaultValue={-1e25} onChange={onChange} />,
138+
);
139+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-down'));
166140
expect(onChange).toHaveBeenCalledWith('-10000000000000000905969665');
167141
});
168142
});
169143

170144
it('focus input when click up/down button', () => {
171145
const onFocus = jest.fn();
172146
const onBlur = jest.fn();
173-
const wrapper = mount(<InputNumber onFocus={onFocus} onBlur={onBlur} />, {
174-
attachTo: document.body,
175-
});
176-
177-
wrapper.find('.rc-input-number-handler-up').simulate('mouseDown');
178-
expect(wrapper.exists('.rc-input-number-focused')).toBeTruthy();
179-
expect(onFocus).toHaveBeenCalled();
180-
181-
wrapper.blurInput();
147+
const { container } = render(<InputNumber onFocus={onFocus} onBlur={onBlur} />);
148+
fireEvent.mouseDown(container.querySelector('.rc-input-number-handler-up'));
149+
setTimeout(() => {
150+
expect(input).toHaveFocus()
151+
expect(onFocus).toHaveBeenCalled();
152+
expect(container.querySelector('.rc-input-number-focused')).toBeTruthy();
153+
done()
154+
}, 500 /* however long my debounce is */)
155+
156+
fireEvent.blur(container.querySelector('input'));
182157
expect(onBlur).toHaveBeenCalled();
183-
expect(wrapper.exists('.rc-input-number-focused')).toBeFalsy();
158+
expect(container.querySelector('.rc-input-number-focused')).toBe(null);
184159
});
185160

186161
it('click down button with pressing shift key', () => {
187162
const onChange = jest.fn();
188163
const onStep = jest.fn();
189-
const wrapper = mount(
164+
const { container } = render(
190165
<InputNumber onChange={onChange} onStep={onStep} step={0.01} value={1.2} />,
191166
);
192-
193-
wrapper
194-
.find('.rc-input-number-handler-down')
195-
.simulate('keyDown', { shiftKey: true })
196-
.simulate('mouseDown');
167+
fireEvent.keyDown(container.querySelector('input'), {
168+
shiftKey: true,
169+
which: KeyCode.DOWN,
170+
key: 'ArrowDown',
171+
code: 'ArrowDown',
172+
keyCode: KeyCode.DOWN,
173+
});
197174

198175
expect(onChange).toHaveBeenCalledWith(1.1);
199176
expect(onStep).toHaveBeenCalledWith(1.1, { offset: '0.1', type: 'down' });
@@ -202,15 +179,17 @@ describe('InputNumber.Click', () => {
202179
it('click up button with pressing shift key', () => {
203180
const onChange = jest.fn();
204181
const onStep = jest.fn();
205-
const wrapper = mount(
182+
const { container } = render(
206183
<InputNumber onChange={onChange} onStep={onStep} step={0.01} value={1.2} />,
207184
);
208185

209-
wrapper
210-
.find('.rc-input-number-handler-up')
211-
.simulate('keyDown', { shiftKey: true })
212-
.simulate('mouseDown');
213-
186+
fireEvent.keyDown(container.querySelector('input'), {
187+
shiftKey: true,
188+
which: KeyCode.UP,
189+
key: 'ArrowUp',
190+
code: 'ArrowUp',
191+
keyCode: KeyCode.UP,
192+
});
214193
expect(onChange).toHaveBeenCalledWith(1.3);
215194
expect(onStep).toHaveBeenCalledWith(1.3, { offset: '0.1', type: 'up' });
216195
});

0 commit comments

Comments
 (0)