Skip to content

Commit d65883d

Browse files
zombieJzombieJ
authored
test: Fix test case (#650)
* test: update snapshot * test: fix test case * test: part of test * test: part of test * test: part of test * test: part of test * test: part of test * test: fix all * chore: fix lint * test: update snapshot
1 parent f6fadac commit d65883d

12 files changed

+1509
-2014
lines changed

‎examples/custom-icons.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -71,9 +71,9 @@ const iconProps = {
7171
};
7272

7373
const iconPropsFunction = {
74-
suffixIcon: () => suffixIcon,
75-
clearIcon: () => clearIcon,
76-
removeIcon: () => removeIcon,
74+
suffixIcon,
75+
clearIcon,
76+
removeIcon,
7777
switcherIcon,
7878
};
7979

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
"*": "prettier --write --ignore-unknown"
4545
},
4646
"dependencies": {
47-
"@rc-component/select": "~1.2.0-alpha.0",
47+
"@rc-component/select": "~1.2.0-alpha.3",
4848
"@rc-component/tree": "~1.0.1",
4949
"@rc-component/util": "^1.3.0",
5050
"clsx": "^2.1.1"

‎tests/Select.checkable.spec.tsx‎

Lines changed: 78 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { fireEvent, render } from '@testing-library/react';
33
import { mount } from 'enzyme';
44
import React from 'react';
55
import TreeSelect, { SHOW_ALL, SHOW_PARENT, TreeNode } from '../src';
6+
import { clearSelection, search, selectNode, triggerOpen } from './util';
67

78
describe('TreeSelect.checkable', () => {
89
it('allow clear when controlled', () => {
@@ -210,6 +211,8 @@ describe('TreeSelect.checkable', () => {
210211
});
211212

212213
it('clear selected value and input value', () => {
214+
jest.useFakeTimers();
215+
213216
const treeData = [
214217
{
215218
key: '0',
@@ -218,7 +221,7 @@ describe('TreeSelect.checkable', () => {
218221
},
219222
];
220223

221-
const wrapper = mount(
224+
const { container } = render(
222225
<TreeSelect
223226
treeData={treeData}
224227
treeCheckable
@@ -227,12 +230,23 @@ describe('TreeSelect.checkable', () => {
227230
showCheckedStrategy={SHOW_PARENT}
228231
/>,
229232
);
230-
wrapper.openSelect();
231-
wrapper.selectNode(0);
232-
wrapper.search('foo');
233-
wrapper.clearAll();
234-
expect(wrapper.getSelection()).toHaveLength(0);
235-
expect(wrapper.find('input').first().props().value).toBe('');
233+
234+
triggerOpen(container);
235+
selectNode(0);
236+
search(container, 'foo');
237+
238+
// Clear all using mouseDown (same as wrapper.clearAll())
239+
const clearButton = container.querySelector('.rc-tree-select-clear')!;
240+
fireEvent.mouseDown(clearButton);
241+
242+
// Check that no items are selected
243+
expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(0);
244+
245+
// Check that input value is cleared
246+
const input = container.querySelector('input') as HTMLInputElement;
247+
expect(input.value).toBe('');
248+
249+
jest.useRealTimers();
236250
});
237251

238252
describe('uncheck', () => {
@@ -302,6 +316,8 @@ describe('TreeSelect.checkable', () => {
302316
});
303317

304318
it('check in filter', () => {
319+
jest.useFakeTimers();
320+
305321
const treeData = [
306322
{
307323
key: 'P001',
@@ -330,14 +346,20 @@ describe('TreeSelect.checkable', () => {
330346
],
331347
},
332348
];
333-
const wrapper = mount(<TreeSelect treeCheckable treeData={treeData} open />);
334-
wrapper.search('58');
335-
wrapper.selectNode(2);
336-
expect(wrapper.getSelection()).toHaveLength(1);
337-
338-
wrapper.search('59');
339-
wrapper.selectNode(2);
340-
expect(wrapper.getSelection()).toHaveLength(2);
349+
350+
const { container } = render(<TreeSelect treeCheckable treeData={treeData} open />);
351+
352+
// Search for '58' and select the found node
353+
search(container, '58');
354+
selectNode(2);
355+
expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(1);
356+
357+
// Search for '59' and select another node
358+
search(container, '59');
359+
selectNode(2);
360+
expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(2);
361+
362+
jest.useRealTimers();
341363
});
342364
});
343365

@@ -382,7 +404,7 @@ describe('TreeSelect.checkable', () => {
382404
},
383405
];
384406

385-
const wrapper = mount(
407+
const { container } = render(
386408
<TreeSelect
387409
treeCheckable
388410
treeData={treeData}
@@ -393,8 +415,8 @@ describe('TreeSelect.checkable', () => {
393415
/>,
394416
);
395417

396-
wrapper.search('0-0');
397-
wrapper.selectNode(0);
418+
search(container, '0-0');
419+
selectNode(0);
398420
expect(onChange).toHaveBeenCalledWith(['0-1-0', '0-1-2'], expect.anything(), expect.anything());
399421
});
400422

@@ -420,7 +442,7 @@ describe('TreeSelect.checkable', () => {
420442
it('uncontrolled', () => {
421443
const onChange = jest.fn();
422444

423-
const wrapper = mount(
445+
const { container } = render(
424446
<TreeSelect
425447
treeCheckable
426448
treeData={treeData}
@@ -430,15 +452,14 @@ describe('TreeSelect.checkable', () => {
430452
/>,
431453
);
432454

433-
wrapper.search('0-0-1');
434-
wrapper.selectNode(1);
455+
search(container, '0-0-1');
456+
selectNode(1);
435457
expect(onChange).toHaveBeenCalledWith(['0-0-1'], expect.anything(), expect.anything());
436458

437459
expect(
438-
wrapper
439-
.find('.rc-tree-select-tree-checkbox')
440-
.at(0)
441-
.hasClass('rc-tree-select-tree-checkbox-indeterminate'),
460+
container
461+
.querySelectorAll('.rc-tree-select-tree-checkbox')[0]
462+
.classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
442463
).toBeTruthy();
443464
});
444465

@@ -471,25 +492,29 @@ describe('TreeSelect.checkable', () => {
471492
}
472493
}
473494

474-
const wrapper = mount(<Test />);
495+
const { container } = render(<Test />);
475496

476-
wrapper.search('0-0-1');
477-
wrapper.selectNode(1);
497+
search(container, '0-0-1');
498+
selectNode(1);
478499
expect(onChange).toHaveBeenCalled();
479500

480501
expect(
481-
wrapper
482-
.find('.rc-tree-select-tree-checkbox')
483-
.at(0)
484-
.hasClass('rc-tree-select-tree-checkbox-indeterminate'),
502+
container
503+
.querySelectorAll('.rc-tree-select-tree-checkbox')[0]
504+
.classList.contains('rc-tree-select-tree-checkbox-indeterminate'),
485505
).toBe(true);
486506
});
487507
});
488508

489509
describe('labelInValue', () => {
490510
it('basic', () => {
491511
const wrapper = mount(
492-
<TreeSelect treeCheckable showCheckedStrategy="SHOW_PARENT" labelInValue value={[{ value: '0-0' }]}>
512+
<TreeSelect
513+
treeCheckable
514+
showCheckedStrategy="SHOW_PARENT"
515+
labelInValue
516+
value={[{ value: '0-0' }]}
517+
>
493518
<TreeNode key="0-0" value="0-0" title="0-0">
494519
<TreeNode key="0-0-0" value="0-0-0" title="0-0-0" />
495520
</TreeNode>
@@ -540,26 +565,26 @@ describe('TreeSelect.checkable', () => {
540565
it('extra.allCheckedNodes', () => {
541566
const onChange = jest.fn();
542567

543-
const wrapper = mount(
568+
const { container } = render(
544569
<TreeSelect open multiple treeCheckable onChange={onChange}>
545570
<TreeNode key="0-0" value="0-0" title="0-0" />
546571
</TreeSelect>,
547572
);
548573

549574
// Just click
550-
wrapper.selectNode();
575+
selectNode();
551576
expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
552577
expect.objectContaining({
553578
pos: '0-0',
554579
}),
555580
]);
556581

557-
wrapper.clearSelection(0);
582+
clearSelection(container, 0);
558583
onChange.mockReset();
559584

560585
// By search
561-
wrapper.search('0');
562-
wrapper.selectNode();
586+
search(container, '0');
587+
selectNode();
563588
expect(onChange.mock.calls[0][2].allCheckedNodes).toEqual([
564589
expect.objectContaining({
565590
pos: '0-0',
@@ -608,7 +633,7 @@ describe('TreeSelect.checkable', () => {
608633

609634
const onChange = jest.fn();
610635

611-
const wrapper = mount(
636+
const { container } = render(
612637
<TreeSelect
613638
open
614639
defaultValue={[{ value: '0-1' }]}
@@ -620,8 +645,8 @@ describe('TreeSelect.checkable', () => {
620645
/>,
621646
);
622647

623-
wrapper.search('0-0-0');
624-
wrapper.selectNode(1);
648+
search(container, '0-0-0');
649+
selectNode(1);
625650

626651
expect(onChange.mock.calls[0][0]).toEqual([
627652
{ label: 'Node2', value: '0-1' },
@@ -639,15 +664,17 @@ describe('TreeSelect.checkable', () => {
639664
},
640665
];
641666

642-
const wrapper = mount(<TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />);
667+
const { container } = render(
668+
<TreeSelect defaultValue={['0-0']} treeData={treeData} treeCheckable />,
669+
);
643670

644-
expect(wrapper.getSelection().length).toBeTruthy();
645-
expect(wrapper.find('.rc-tree-select-selection-item-remove').length).toBeFalsy();
671+
expect(container.querySelectorAll('.rc-tree-select-selection-item').length).toBeTruthy();
672+
expect(container.querySelectorAll('.rc-tree-select-selection-item-remove').length).toBeFalsy();
646673
});
647674

648675
it('treeCheckStrictly can set halfChecked', () => {
649676
const onChange = jest.fn();
650-
const wrapper = mount(
677+
const { container } = render(
651678
<TreeSelect
652679
treeCheckStrictly
653680
treeCheckable
@@ -662,17 +689,19 @@ describe('TreeSelect.checkable', () => {
662689
);
663690

664691
function getTreeNode(index) {
665-
return wrapper.find('.rc-tree-select-tree-treenode').not('[aria-hidden]').at(index);
692+
const treeNodes = container.querySelectorAll('.rc-tree-select-tree-treenode');
693+
const visibleNodes = Array.from(treeNodes).filter(node => !node.hasAttribute('aria-hidden'));
694+
return visibleNodes[index];
666695
}
667696

668697
expect(
669-
getTreeNode(0).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
698+
getTreeNode(0).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
670699
).toBeTruthy();
671700
expect(
672-
getTreeNode(1).hasClass('rc-tree-select-tree-treenode-checkbox-indeterminate'),
701+
getTreeNode(1).classList.contains('rc-tree-select-tree-treenode-checkbox-indeterminate'),
673702
).toBeFalsy();
674703

675-
wrapper.selectNode(1);
704+
selectNode(1);
676705
expect(onChange).toHaveBeenCalledWith(
677706
[
678707
{

‎tests/Select.multiple.spec.js‎

Lines changed: 42 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,22 @@
11
/* eslint-disable no-undef */
2-
import { render, fireEvent, within } from '@testing-library/react';
2+
import { render, fireEvent, within, screen } from '@testing-library/react';
33
import { mount } from 'enzyme';
44
import KeyCode from '@rc-component/util/lib/KeyCode';
55
import React from 'react';
66
import TreeSelect, { TreeNode } from '../src';
77
import focusTest from './shared/focusTest';
8+
import { selectNode, clearSelection, search, expectOpen, triggerOpen } from './util';
89

910
describe('TreeSelect.multiple', () => {
11+
beforeEach(() => {
12+
jest.useFakeTimers();
13+
});
14+
15+
afterEach(() => {
16+
jest.clearAllTimers();
17+
jest.useRealTimers();
18+
});
19+
1020
focusTest(true);
1121

1222
const treeData = [
@@ -129,14 +139,29 @@ describe('TreeSelect.multiple', () => {
129139
});
130140

131141
it('do not open tree when close button click', () => {
132-
const wrapper = mount(createSelect());
133-
wrapper.openSelect();
134-
wrapper.selectNode(0);
135-
wrapper.selectNode(1);
136-
wrapper.openSelect();
137-
wrapper.clearSelection(0);
138-
expect(wrapper.isOpen()).toBeFalsy();
139-
expect(wrapper.getSelection()).toHaveLength(1);
142+
const { container } = render(createSelect());
143+
144+
// Open the select dropdown
145+
triggerOpen(container);
146+
147+
// Select two nodes
148+
selectNode(0);
149+
selectNode(1);
150+
151+
// Check selections exist
152+
expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(2);
153+
154+
// Open again to ensure dropdown is open
155+
triggerOpen(container);
156+
157+
// Clear one selection - this should NOT open the dropdown
158+
clearSelection(container, 0);
159+
160+
// Check that only one selection remains
161+
expect(container.querySelectorAll('.rc-tree-select-selection-item')).toHaveLength(1);
162+
163+
// Check that dropdown is closed after clearing
164+
expectOpen(container, false);
140165
});
141166

142167
describe('maxTagCount', () => {
@@ -239,8 +264,8 @@ describe('TreeSelect.multiple', () => {
239264
// https://github.com/ant-design/ant-design/issues/12315
240265
it('select searched node', () => {
241266
const onChange = jest.fn();
242-
const wrapper = mount(
243-
<TreeSelect value={['leaf1']} multiple onChange={onChange}>
267+
const { container } = render(
268+
<TreeSelect value={['leaf1']} multiple onChange={onChange} open>
244269
<TreeNode value="parent 1" title="parent 1" key="0-1">
245270
<TreeNode value="parent 1-0" title="parent 1-0" key="0-1-1">
246271
<TreeNode value="leaf1" title="my leaf" key="random" />
@@ -252,8 +277,12 @@ describe('TreeSelect.multiple', () => {
252277
</TreeSelect>,
253278
);
254279

255-
wrapper.search('sss');
256-
wrapper.selectNode(2);
280+
// Search for 'sss'
281+
search(container, 'sss');
282+
283+
// Find and click on the searched node - use selectNode from util with correct index
284+
selectNode(2); // The sss node should be at index 2 after search filtering
285+
257286
expect(onChange).toHaveBeenCalledWith(['leaf1', 'sss'], expect.anything(), expect.anything());
258287
});
259288

0 commit comments

Comments
 (0)