ant-design/components/select/__tests__/index.test.tsx
DisLido 4bf79a8474
fix(Select): clear icon position ()
* fix(Select): clear icon position

Fix `.ant-select-has-feedback .ant-select-clear` position when `validateStatus` is empty

Signed-off-by: DisLido <dislido@foxmail.com>

* fix lint; add test case

---------

Signed-off-by: DisLido <dislido@foxmail.com>
2024-11-29 15:54:10 +08:00

239 lines
7.9 KiB
TypeScript

import React from 'react';
import { CloseOutlined } from '@ant-design/icons';
import type { SelectProps } from '..';
import Select from '..';
import Form from '../../form';
import { resetWarned } from '../../_util/warning';
import focusTest from '../../../tests/shared/focusTest';
import mountTest from '../../../tests/shared/mountTest';
import rtlTest from '../../../tests/shared/rtlTest';
import { act, fireEvent, render } from '../../../tests/utils';
const { Option } = Select;
describe('Select', () => {
focusTest(Select, { refFocus: true });
mountTest(Select);
rtlTest(Select);
function toggleOpen(container: ReturnType<typeof render>['container']): void {
fireEvent.mouseDown(container.querySelector('.ant-select-selector')!);
act(() => {
jest.runAllTimers();
});
}
beforeEach(() => {
jest.useFakeTimers();
});
afterEach(() => {
jest.useRealTimers();
});
it('should have default notFoundContent', () => {
const { container } = render(<Select mode="multiple" />);
toggleOpen(container);
expect(container.querySelectorAll('.ant-select-item-option').length).toBe(0);
expect(container.querySelectorAll('.ant-empty').length).toBeTruthy();
});
it('should support set notFoundContent to null', () => {
const { container } = render(<Select mode="multiple" notFoundContent={null} />);
toggleOpen(container);
expect(container.querySelectorAll('.ant-empty').length).toBe(0);
});
it('should not have default notFoundContent when mode is combobox', () => {
const { container } = render(
<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']} />,
);
toggleOpen(container);
expect(container.querySelector('.ant-empty')).toBeFalsy();
});
it('should not have notFoundContent when mode is combobox and notFoundContent is set', () => {
const { container } = render(
<Select
mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as SelectProps['mode']}
notFoundContent="not at all"
/>,
);
toggleOpen(container);
expect(container.querySelector('.ant-select-item-option')).toBeFalsy();
expect(container.querySelector('.ant-select-item-empty')).toHaveTextContent('not at all');
});
it('should be controlled by open prop', () => {
const onDropdownVisibleChange = jest.fn();
const TestComponent: React.FC = () => {
const [open, setOpen] = React.useState(false);
const handleChange: SelectProps['onDropdownVisibleChange'] = (value) => {
onDropdownVisibleChange(value);
setOpen(value);
};
return (
<Select open={open} onDropdownVisibleChange={handleChange}>
<Option value="1">1</Option>
</Select>
);
};
const { container } = render(<TestComponent />);
expect(container.querySelector('.ant-select-dropdown')).toBeFalsy();
toggleOpen(container);
expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
});
it('should show search icon when showSearch and open', () => {
jest.useFakeTimers();
const { container } = render(
<Select showSearch>
<Option value="1">1</Option>
</Select>,
);
expect(container.querySelectorAll('.anticon-down').length).toBe(1);
expect(container.querySelectorAll('.anticon-search').length).toBe(0);
toggleOpen(container);
expect(container.querySelectorAll('.anticon-down').length).toBe(0);
expect(container.querySelectorAll('.anticon-search').length).toBe(1);
});
describe('Select Custom Icons', () => {
it('should support customized icons', () => {
const { rerender, asFragment } = render(
<Select
removeIcon={<CloseOutlined />}
clearIcon={<CloseOutlined />}
menuItemSelectedIcon={<CloseOutlined />}
>
<Option value="1">1</Option>
</Select>,
);
rerender(
<Select
removeIcon={<CloseOutlined />}
clearIcon={<CloseOutlined />}
menuItemSelectedIcon={<CloseOutlined />}
>
<Option value="1">1</Option>
</Select>,
);
act(() => {
jest.runAllTimers();
});
expect(asFragment().firstChild).toMatchSnapshot();
});
});
describe('clear icon position', () => {
it('normal', () => {
const { container } = render(
<Select allowClear options={[{ value: '1', label: '1' }]} value="1" />,
);
expect(
getComputedStyle(container.querySelector('.ant-select-clear')!).insetInlineEnd,
).toEqual('11px');
});
it('hasFeedback, has validateStatus', () => {
const { container } = render(
<Form>
<Form.Item hasFeedback validateStatus="error">
<Select allowClear options={[{ value: '1', label: '1' }]} value="1" />,
</Form.Item>
</Form>,
);
expect(
getComputedStyle(container.querySelector('.ant-select-clear')!).insetInlineEnd,
).toEqual('33px');
});
it('hasFeedback, no validateStatus', () => {
const { container } = render(
<Form>
<Form.Item hasFeedback validateStatus="">
<Select allowClear options={[{ value: '1', label: '1' }]} value="1" />,
</Form.Item>
</Form>,
);
expect(
getComputedStyle(container.querySelector('.ant-select-clear')!).insetInlineEnd,
).toEqual('11px');
});
});
describe('Deprecated', () => {
it('should ignore mode="combobox"', () => {
const { asFragment } = render(
<Select mode={'combobox' as SelectProps['mode']}>
<Option value="1">1</Option>
</Select>,
);
expect(asFragment().firstChild).toMatchSnapshot();
});
it('dropdownClassName', () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(<Select dropdownClassName="legacy" open />);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Select] `dropdownClassName` is deprecated. Please use `popupClassName` instead.',
);
expect(container.querySelector('.legacy')).toBeTruthy();
errSpy.mockRestore();
});
it('warning for legacy dropdownMatchSelectWidth', () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Select dropdownMatchSelectWidth open />);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Select] `dropdownMatchSelectWidth` is deprecated. Please use `popupMatchSelectWidth` instead.',
);
errSpy.mockRestore();
});
it('deprecate showArrow', () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(<Select showArrow />);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Select] `showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.',
);
expect(container.querySelector('.ant-select-show-arrow')).toBeTruthy();
errSpy.mockRestore();
});
it('deprecate bordered', () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
const { container } = render(<Select bordered={false} />);
expect(errSpy).toHaveBeenCalledWith(
expect.stringContaining('Warning: [antd: Select] `bordered` is deprecated'),
);
expect(container.querySelector('.ant-select-borderless')).toBeTruthy();
errSpy.mockRestore();
});
it('Select maxCount warning', () => {
resetWarned();
const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
render(<Select maxCount={10} />);
expect(errSpy).toHaveBeenCalledWith(
'Warning: [antd: Select] `maxCount` only works with mode `multiple` or `tags`',
);
errSpy.mockRestore();
});
});
});