|
| 1 | +import { fireEvent, render } from '@testing-library/react'; |
| 2 | +import * as React from 'react'; |
| 3 | +import Select from '../src'; |
| 4 | +import { resetWarned } from '@rc-component/util'; |
| 5 | + |
| 6 | +describe.each([undefined, 'multiple', 'tags', 'combobox'] as const)( |
| 7 | + 'allowClear mode=%s', |
| 8 | + (mode) => { |
| 9 | + it('disables the clear entry and restores the complete configuration', () => { |
| 10 | + const onClear = jest.fn(); |
| 11 | + const onChange = jest.fn(); |
| 12 | + const props = { |
| 13 | + mode, |
| 14 | + defaultValue: 'one', |
| 15 | + onClear, |
| 16 | + onChange, |
| 17 | + options: [{ value: 'one' }], |
| 18 | + suffix: 'suffix', |
| 19 | + }; |
| 20 | + const config = Object.freeze({ clearIcon: 'custom', label: 'Erase', tabIndex: -1 }); |
| 21 | + const { container, getByRole, queryByRole, rerender } = render( |
| 22 | + <Select {...props} allowClear={false} />, |
| 23 | + ); |
| 24 | + const markup = container.innerHTML; |
| 25 | + rerender(<Select {...props} allowClear={{ ...config, disabled: true }} />); |
| 26 | + expect(container.innerHTML).toBe(markup); |
| 27 | + expect(queryByRole('button', { name: 'Erase' })).toBeNull(); |
| 28 | + expect(onClear).not.toHaveBeenCalled(); |
| 29 | + expect(onChange).not.toHaveBeenCalled(); |
| 30 | + expect(container.querySelector('.rc-select-suffix')).toHaveTextContent('suffix'); |
| 31 | + |
| 32 | + rerender(<Select {...props} allowClear={config} />); |
| 33 | + const button = getByRole('button', { name: 'Erase' }); |
| 34 | + expect(button).toHaveTextContent('custom'); |
| 35 | + expect(button.tabIndex).toBe(-1); |
| 36 | + fireEvent.click(button); |
| 37 | + expect(onClear).toHaveBeenCalledTimes(1); |
| 38 | + expect(onChange).toHaveBeenCalledWith( |
| 39 | + mode === 'multiple' || mode === 'tags' ? [] : undefined, |
| 40 | + mode === 'multiple' || mode === 'tags' ? [] : undefined, |
| 41 | + ); |
| 42 | + expect(queryByRole('button', { name: 'Erase' })).toBeNull(); |
| 43 | + }); |
| 44 | + }, |
| 45 | +); |
| 46 | + |
| 47 | +it('does not override component disabled or empty-value restrictions', () => { |
| 48 | + const { queryByRole, rerender } = render( |
| 49 | + <Select value="one" disabled allowClear={{ disabled: false }} />, |
| 50 | + ); |
| 51 | + expect(queryByRole('button', { name: 'Clear' })).toBeNull(); |
| 52 | + rerender(<Select allowClear={{ disabled: false }} />); |
| 53 | + expect(queryByRole('button', { name: 'Clear' })).toBeNull(); |
| 54 | +}); |
| 55 | + |
| 56 | +it('updates the clear tabIndex without changing the input tabIndex', () => { |
| 57 | + const { getByRole, rerender } = render( |
| 58 | + <Select value="one" tabIndex={3} allowClear={{ tabIndex: -1 }} />, |
| 59 | + ); |
| 60 | + expect(getByRole('button', { name: 'Clear' }).tabIndex).toBe(-1); |
| 61 | + expect(getByRole('combobox').tabIndex).toBe(3); |
| 62 | + rerender(<Select value="one" tabIndex={3} allowClear={{ tabIndex: 0, label: 'Erase' }} />); |
| 63 | + expect(getByRole('button', { name: 'Erase' }).tabIndex).toBe(0); |
| 64 | + expect(getByRole('combobox').tabIndex).toBe(3); |
| 65 | +}); |
| 66 | + |
| 67 | +it('treats a disabled clear configuration as false in custom-input warnings', () => { |
| 68 | + resetWarned(); |
| 69 | + const warning = jest.spyOn(console, 'warn').mockImplementation(() => {}); |
| 70 | + try { |
| 71 | + const props = { |
| 72 | + mode: 'combobox' as const, |
| 73 | + getInputElement: () => <input />, |
| 74 | + placeholder: 'Search', |
| 75 | + }; |
| 76 | + const { rerender } = render(<Select {...props} allowClear={{ disabled: true }} />); |
| 77 | + expect(warning).not.toHaveBeenCalled(); |
| 78 | + rerender(<Select {...props} allowClear />); |
| 79 | + expect(warning).toHaveBeenCalledWith( |
| 80 | + expect.stringContaining('Customize \x60getInputElement\x60 should customize clear'), |
| 81 | + ); |
| 82 | + } finally { |
| 83 | + warning.mockRestore(); |
| 84 | + resetWarned(); |
| 85 | + } |
| 86 | +}); |
0 commit comments