Skip to content

Commit 27e7b2c

Browse files
zombieJzombieJ
committed
test: base test
1 parent 8b2da80 commit 27e7b2c

File tree

5 files changed

+85
-126
lines changed

5 files changed

+85
-126
lines changed

‎src/BaseSelect/index.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -620,9 +620,9 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
620620
if (showAction.includes('focus')) {
621621
triggerOpen(true);
622622
}
623-
}
624623

625-
onFocus?.(event);
624+
onFocus?.(event);
625+
}
626626
};
627627

628628
// const onContainerBlur: React.FocusEventHandler<HTMLElement> = (...args) => {
@@ -666,8 +666,10 @@ const BaseSelect = React.forwardRef<BaseSelectRef, BaseSelectProps>((props, ref)
666666
}
667667
}
668668

669-
triggerOpen(false);
670-
onBlur?.(event);
669+
if (!disabled) {
670+
triggerOpen(false);
671+
onBlur?.(event);
672+
}
671673
};
672674

673675
// Give focus back of Select

‎src/SelectInput/Input.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import useBaseProps from '../hooks/useBaseProps';
66

77
export interface InputProps {
88
id?: string;
9-
disabled?: boolean;
109
readOnly?: boolean;
1110
value?: string;
1211
onChange?: React.ChangeEventHandler<HTMLInputElement>;
@@ -37,7 +36,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
3736
} = props;
3837
const { prefixCls, mode, onSearch, onSearchSubmit, onInputBlur, autoFocus } =
3938
useSelectInputContext();
40-
const { id, classNames, styles, open, activeDescendantId } = useBaseProps() || {};
39+
const { id, classNames, styles, open, activeDescendantId, role, disabled } = useBaseProps() || {};
4140

4241
const inputCls = clsx(`${prefixCls}-input`, classNames?.input, className);
4342

@@ -135,14 +134,15 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>((props, ref) => {
135134
autoFocus={autoFocus}
136135
autoComplete={autoComplete || 'off'}
137136
className={inputCls}
137+
disabled={disabled}
138138
value={value || ''}
139139
onChange={handleChange}
140140
onKeyDown={handleKeyDown}
141141
onBlur={handleBlur}
142142
onCompositionStart={handleCompositionStart}
143143
onCompositionEnd={handleCompositionEnd}
144144
// Accessibility attributes
145-
role="combobox"
145+
role={role || 'combobox'}
146146
aria-expanded={open || false}
147147
aria-haspopup="listbox"
148148
aria-owns={`${id}_list`}

‎src/hooks/useBaseProps.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export interface BaseSelectContextProps extends BaseSelectProps {
1010
triggerOpen: boolean;
1111
multiple: boolean;
1212
toggleOpen: (open?: boolean) => void;
13+
role?: React.AriaRole;
1314
}
1415

1516
export const BaseSelectContext = React.createContext<BaseSelectContextProps>(null);

‎tests/Select.test.tsx‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -685,8 +685,6 @@ describe('Select.Basic', () => {
685685
fireEvent.click(container.querySelector('.rc-select'));
686686
expect(focusSpy).toHaveBeenCalled();
687687

688-
// We should mock trigger focus event since it not work in jsdom
689-
fireEvent.focus(container.querySelector('input'));
690688
jest.runAllTimers();
691689
});
692690

@@ -696,7 +694,7 @@ describe('Select.Basic', () => {
696694

697695
it('fires focus event', () => {
698696
expect(handleFocus).toHaveBeenCalled();
699-
expect(handleFocus.mock.calls.length).toBe(1);
697+
expect(handleFocus.mock.calls).toHaveLength(1);
700698
});
701699

702700
it('set className', () => {
@@ -1849,10 +1847,10 @@ describe('Select.Basic', () => {
18491847
[undefined].forEach((value) => {
18501848
it(`to ${value}`, () => {
18511849
const { container, rerender } = render(<Select value="light" />);
1852-
expect(container.querySelector('.rc-select-item').textContent).toEqual('light');
1850+
expect(container.querySelector('.rc-select-content-value').textContent).toEqual('light');
18531851

18541852
rerender(<Select value={value} />);
1855-
expect(container.querySelector('.rc-select-item')).toBeFalsy();
1853+
expect(container.querySelector('.rc-select-content-value')).toBeFalsy();
18561854
});
18571855
});
18581856
});
@@ -1973,7 +1971,7 @@ describe('Select.Basic', () => {
19731971
toggleOpen(container);
19741972
selectItem(container, index);
19751973
expect(onChange).toHaveBeenCalledWith(value, expect.anything());
1976-
expect(container.querySelector('.rc-select-item').textContent).toEqual(showValue);
1974+
expect(container.querySelector('.rc-select-content-value').textContent).toEqual(showValue);
19771975
});
19781976

19791977
expect(errorSpy).toHaveBeenCalledWith(warningMessage);

‎tests/__snapshots__/Select.test.tsx.snap‎

Lines changed: 71 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -135,50 +135,36 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
135135
class="antd select-test antd-single antd-allow-clear antd-show-search"
136136
>
137137
<div
138-
class="antd-selector"
138+
class="antd-content"
139139
>
140-
<span
141-
class="antd-selection-wrap"
140+
<div
141+
class="antd-content-value"
142+
style="visibility: visible;"
143+
title="2"
142144
>
143-
<span
144-
class="antd-selection-search"
145-
>
146-
<input
147-
aria-autocomplete="list"
148-
aria-controls="test-id_list"
149-
aria-expanded="false"
150-
aria-haspopup="listbox"
151-
aria-label="some-label"
152-
aria-labelledby="test-id"
153-
aria-owns="test-id_list"
154-
autocomplete="off"
155-
class="antd-selection-search-input"
156-
id="test-id"
157-
role="combobox"
158-
type="search"
159-
value=""
160-
/>
161-
</span>
162-
<span
163-
class="antd-selection-item"
164-
title="2"
165-
>
166-
2
167-
</span>
168-
</span>
145+
2
146+
</div>
147+
<input
148+
aria-autocomplete="list"
149+
aria-controls="test-id_list"
150+
aria-expanded="false"
151+
aria-haspopup="listbox"
152+
aria-label="some-label"
153+
aria-labelledby="test-id"
154+
aria-owns="test-id_list"
155+
autocomplete="off"
156+
class="antd-input"
157+
id="test-id"
158+
role="combobox"
159+
type="search"
160+
value=""
161+
/>
169162
</div>
170-
<span
171-
aria-hidden="true"
163+
<div
172164
class="antd-clear"
173-
style="user-select: none;"
174-
unselectable="on"
175165
>
176-
<span
177-
class="antd-clear-icon"
178-
>
179-
×
180-
</span>
181-
</span>
166+
×
167+
</div>
182168
</div>
183169
`;
184170

@@ -218,48 +204,34 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
218204
data-test="test-id"
219205
>
220206
<div
221-
class="antd-selector"
207+
class="antd-content"
222208
>
223-
<span
224-
class="antd-selection-wrap"
209+
<div
210+
class="antd-content-value"
211+
style="visibility: visible;"
212+
title="2"
225213
>
226-
<span
227-
class="antd-selection-search"
228-
>
229-
<input
230-
aria-autocomplete="list"
231-
aria-controls="test-id_list"
232-
aria-expanded="false"
233-
aria-haspopup="listbox"
234-
aria-owns="test-id_list"
235-
autocomplete="off"
236-
class="antd-selection-search-input"
237-
id="test-id"
238-
role="combobox"
239-
type="search"
240-
value=""
241-
/>
242-
</span>
243-
<span
244-
class="antd-selection-item"
245-
title="2"
246-
>
247-
2
248-
</span>
249-
</span>
214+
2
215+
</div>
216+
<input
217+
aria-autocomplete="list"
218+
aria-controls="test-id_list"
219+
aria-expanded="false"
220+
aria-haspopup="listbox"
221+
aria-owns="test-id_list"
222+
autocomplete="off"
223+
class="antd-input"
224+
id="test-id"
225+
role="combobox"
226+
type="search"
227+
value=""
228+
/>
250229
</div>
251-
<span
252-
aria-hidden="true"
230+
<div
253231
class="antd-clear"
254-
style="user-select: none;"
255-
unselectable="on"
256232
>
257-
<span
258-
class="antd-clear-icon"
259-
>
260-
×
261-
</span>
262-
</span>
233+
×
234+
</div>
263235
</div>
264236
`;
265237

@@ -295,48 +267,34 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
295267
role="button"
296268
>
297269
<div
298-
class="antd-selector"
270+
class="antd-content"
299271
>
300-
<span
301-
class="antd-selection-wrap"
272+
<div
273+
class="antd-content-value"
274+
style="visibility: visible;"
275+
title="2"
302276
>
303-
<span
304-
class="antd-selection-search"
305-
>
306-
<input
307-
aria-autocomplete="list"
308-
aria-controls="test-id_list"
309-
aria-expanded="false"
310-
aria-haspopup="listbox"
311-
aria-owns="test-id_list"
312-
autocomplete="off"
313-
class="antd-selection-search-input"
314-
id="test-id"
315-
role="button"
316-
type="search"
317-
value=""
318-
/>
319-
</span>
320-
<span
321-
class="antd-selection-item"
322-
title="2"
323-
>
324-
2
325-
</span>
326-
</span>
277+
2
278+
</div>
279+
<input
280+
aria-autocomplete="list"
281+
aria-controls="test-id_list"
282+
aria-expanded="false"
283+
aria-haspopup="listbox"
284+
aria-owns="test-id_list"
285+
autocomplete="off"
286+
class="antd-input"
287+
id="test-id"
288+
role="button"
289+
type="search"
290+
value=""
291+
/>
327292
</div>
328-
<span
329-
aria-hidden="true"
293+
<div
330294
class="antd-clear"
331-
style="user-select: none;"
332-
unselectable="on"
333295
>
334-
<span
335-
class="antd-clear-icon"
336-
>
337-
×
338-
</span>
339-
</span>
296+
×
297+
</div>
340298
</div>
341299
`;
342300

0 commit comments

Comments
 (0)