Skip to content

Commit e57a56a

Browse files
su-muzhisu-muzhi
committed
tests: fix mode is single but not correct behavior
1 parent 53fef45 commit e57a56a

File tree

5 files changed

+106
-72
lines changed

5 files changed

+106
-72
lines changed

‎src/BaseSelect/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -454,6 +454,7 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
454454
};
455455

456456
// Close will clean up single mode search text
457+
// mode not in ['combobox', 'multiple', 'tags', undefined]
457458
React.useEffect(() => {
458459
if (!mergedOpen && !multiple && mode && mode !== 'combobox') {
459460
onInternalSearch('', false, false);

‎tests/BaseSelect.test.tsx‎

Lines changed: 0 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -123,51 +123,4 @@ describe('BaseSelect', () => {
123123

124124
expect(container.querySelector('.rc-select-dropdown-placement-fallback')).toBeTruthy();
125125
});
126-
127-
describe("Testing BaseSelect component's onContainerBlur params", () => {
128-
it('mode with null, onBlur source is blur', () => {
129-
const onSearch = jest.fn();
130-
const { container } = render(
131-
<BaseSelect
132-
prefixCls="rc-select"
133-
id="test"
134-
displayValues={[]}
135-
onDisplayValuesChange={() => {}}
136-
searchValue="1"
137-
showSearch
138-
onSearch={onSearch}
139-
OptionList={OptionList}
140-
emptyOptions
141-
/>,
142-
);
143-
expect(container.querySelector('div.rc-select')).toBeTruthy();
144-
fireEvent.change(container.querySelector('input'), { target: { value: '2' } });
145-
expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' });
146-
fireEvent.blur(container.querySelector('div.rc-select'));
147-
expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' });
148-
});
149-
150-
it('mode with multiple, onBlur source is blur', () => {
151-
const onSearch = jest.fn();
152-
const { container } = render(
153-
<BaseSelect
154-
prefixCls="rc-select"
155-
mode="multiple"
156-
id="test"
157-
displayValues={[]}
158-
onDisplayValuesChange={() => {}}
159-
searchValue="1"
160-
showSearch
161-
onSearch={onSearch}
162-
OptionList={OptionList}
163-
emptyOptions
164-
/>,
165-
);
166-
expect(container.querySelector('div.rc-select')).toBeTruthy();
167-
fireEvent.change(container.querySelector('input'), { target: { value: '2' } });
168-
expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' });
169-
fireEvent.blur(container.querySelector('div.rc-select'));
170-
expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' });
171-
});
172-
});
173126
});

‎tests/Blur.test.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import type { OptionListProps, RefOptionListProps } from '@/OptionList';
2+
import { fireEvent, render } from '@testing-library/react';
3+
import { forwardRef } from 'react';
4+
import BaseSelect from '../src/BaseSelect';
5+
import Select, { Option } from '../src';
6+
7+
const OptionList = forwardRef<RefOptionListProps, OptionListProps>(() => (
8+
<div className="popup">Popup</div>
9+
));
10+
11+
describe('Select.Blur', () => {
12+
it('mode with undefined, onBlur source is blur', () => {
13+
const onSearch = jest.fn();
14+
const { container } = render(
15+
<BaseSelect
16+
prefixCls="rc-select"
17+
id="test"
18+
displayValues={[]}
19+
onDisplayValuesChange={() => {}}
20+
searchValue="1"
21+
showSearch
22+
onSearch={onSearch}
23+
OptionList={OptionList}
24+
emptyOptions
25+
/>,
26+
);
27+
expect(container.querySelector('div.rc-select')).toBeTruthy();
28+
fireEvent.change(container.querySelector('input'), { target: { value: '2' } });
29+
expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' });
30+
fireEvent.blur(container.querySelector('div.rc-select'));
31+
expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' });
32+
});
33+
34+
it('mode with multiple, onBlur source is blur', () => {
35+
const onSearch = jest.fn();
36+
const { container } = render(
37+
<BaseSelect
38+
prefixCls="rc-select"
39+
mode="multiple"
40+
id="test"
41+
displayValues={[]}
42+
onDisplayValuesChange={() => {}}
43+
searchValue="1"
44+
showSearch
45+
onSearch={onSearch}
46+
OptionList={OptionList}
47+
emptyOptions
48+
/>,
49+
);
50+
expect(container.querySelector('div.rc-select')).toBeTruthy();
51+
fireEvent.change(container.querySelector('input'), { target: { value: '2' } });
52+
expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' });
53+
fireEvent.blur(container.querySelector('div.rc-select'));
54+
expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' });
55+
});
56+
57+
it('mode with multiple, onBlur source is blur', () => {
58+
const onSearch = jest.fn();
59+
const { container } = render(
60+
<BaseSelect
61+
prefixCls="rc-select"
62+
mode="multiple"
63+
id="test"
64+
displayValues={[]}
65+
onDisplayValuesChange={() => {}}
66+
searchValue="1"
67+
showSearch
68+
onSearch={onSearch}
69+
OptionList={OptionList}
70+
emptyOptions
71+
/>,
72+
);
73+
expect(container.querySelector('div.rc-select')).toBeTruthy();
74+
fireEvent.change(container.querySelector('input'), { target: { value: '2' } });
75+
expect(onSearch).toHaveBeenCalledWith('2', { source: 'typing' });
76+
fireEvent.blur(container.querySelector('div.rc-select'));
77+
expect(onSearch).toHaveBeenCalledWith('', { source: 'blur' });
78+
});
79+
80+
it('click item and blur should trigger onBlur but not trigger onSearch', () => {
81+
const onSearch = jest.fn();
82+
const onBlur = jest.fn();
83+
84+
const Demo = () => (
85+
<Select onSearch={onSearch} showSearch onBlur={onBlur}>
86+
<Option value="11">11</Option>
87+
<Option value="22">22</Option>
88+
<Option value="33">33</Option>
89+
</Select>
90+
);
91+
92+
const { container } = render(<Demo />);
93+
const input = container.querySelector('input');
94+
fireEvent.change(input, { target: { value: '1' } });
95+
fireEvent.click(
96+
container.querySelectorAll('.rc-select-dropdown .rc-select-item-option-content')[0],
97+
);
98+
fireEvent.blur(input);
99+
expect(container.querySelector('.rc-select-dropdown-hidden')).toBeTruthy();
100+
expect(onSearch).toHaveBeenCalledTimes(1);
101+
expect(onBlur).toHaveBeenCalledTimes(1);
102+
});
103+
});

‎tests/Select.test.tsx‎

Lines changed: 0 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2367,28 +2367,4 @@ describe('Select.Basic', () => {
23672367
expect(element[0]).not.toHaveClass('rc-select-item-option-disabled');
23682368
expect(element[1]).toHaveClass('rc-select-item-option-disabled');
23692369
});
2370-
2371-
it('click item and blur should trigger onBlur but not trigger onSearch', () => {
2372-
const onSearch = jest.fn();
2373-
const onBlur = jest.fn();
2374-
2375-
const Demo = () => (
2376-
<Select onSearch={onSearch} showSearch onBlur={onBlur}>
2377-
<Option value="11">11</Option>
2378-
<Option value="22">22</Option>
2379-
<Option value="33">33</Option>
2380-
</Select>
2381-
);
2382-
2383-
const { container } = render(<Demo />);
2384-
const input = container.querySelector('input');
2385-
fireEvent.change(input, { target: { value: '1' } });
2386-
fireEvent.click(
2387-
container.querySelectorAll('.rc-select-dropdown .rc-select-item-option-content')[0],
2388-
);
2389-
fireEvent.blur(input);
2390-
expect(container.querySelector('.rc-select-dropdown-hidden')).toBeTruthy();
2391-
expect(onSearch).toHaveBeenCalledTimes(1);
2392-
expect(onBlur).toHaveBeenCalledTimes(1);
2393-
});
23942370
});

‎tests/shared/inputFilterTest.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@ export default function inputFilterTest(mode: any) {
2222
expect(container.querySelector('.rc-select')).toHaveClass('rc-select-open');
2323
expect(container.querySelector('input')).toHaveValue('1');
2424
fireEvent.click(container.querySelector('.rc-select-item-option'));
25-
expect(container.querySelector('input')).toHaveValue(mode === 'single' ? '' : '1');
25+
const isMultiple = mode === 'multiple' || mode === 'tags';
26+
expect(container.querySelector('input')).toHaveValue(!isMultiple ? '' : '1');
2627
});
2728

2829
it('should clear input filter after select', () => {

0 commit comments

Comments
 (0)