mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-28 21:19:37 +08:00
Code Issues Actions 50 Packages Projects Releases Wiki Activity

feat: add-testing-lib (#35626)

Browse Source
This commit is contained in:
黑雨 2022-05-19 16:27:24 +08:00 committed by GitHub
parent 10964f158c
commit 370960ed6d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 52 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
components/select/__tests__/index.test.js
View File

@ -1,6 +1,6 @@
import React from 'react';
import { act } from 'react-dom/test-utils';
import { mount } from 'enzyme';
import { render, fireEvent } from '../../../tests/utils';
import Select from '..';
import Icon from '../../icon';
import focusTest from '../../../tests/shared/focusTest';
@ -14,12 +14,11 @@ describe('Select', () => {
mountTest(Select);
rtlTest(Select);
function toggleOpen(wrapper) {
function toggleOpen(container) {
act(() => {
wrapper.find('.ant-select-selector').simulate('mousedown');
fireEvent.mouseDown(container.querySelector('.ant-select-selector'));
jest.runAllTimers();
});
wrapper.update();
}
beforeEach(() => {
@ -31,73 +30,74 @@ describe('Select', () => {
});
it('should have default notFoundContent', () => {
const wrapper = mount(<Select mode="multiple" />);
toggleOpen(wrapper);
expect(wrapper.find('.ant-select-item-option').length).toBeFalsy();
expect(wrapper.find('.ant-empty').length).toBeTruthy();
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 wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
toggleOpen(wrapper);
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(dropdownWrapper.find('MenuItem').length).toBe(0);
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 wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
toggleOpen(wrapper);
const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
expect(dropdownWrapper.find('MenuItem').length).toBe(0);
const { container } = render(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
toggleOpen(container);
expect(container.querySelector('.ant-empty')).toBeFalsy();
});
it('should not have notFoundContent when mode is combobox and notFoundContent is set', () => {
const wrapper = mount(
const { container } = render(
<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
);
toggleOpen(wrapper);
const dropdownWrapper = wrapper.find('Trigger');
expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
expect(dropdownWrapper.find('.ant-select-item-empty').at(0).text()).toBe('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 wrapper = mount(
const { container, rerender } = render(
<Select open onDropdownVisibleChange={onDropdownVisibleChange}>
<Option value="1">1</Option>
</Select>,
);
let dropdownWrapper = wrapper.find('Trigger');
expect(dropdownWrapper.prop('popupVisible')).toBe(true);
toggleOpen(wrapper);
expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
toggleOpen(container);
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
expect(dropdownWrapper.prop('popupVisible')).toBe(true);
expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
wrapper.setProps({ open: false });
dropdownWrapper = wrapper.find('Trigger');
expect(dropdownWrapper.prop('popupVisible')).toBe(false);
toggleOpen(wrapper);
rerender(
<Select open={false} onDropdownVisibleChange={onDropdownVisibleChange}>
<Option value="1">1</Option>
</Select>,
);
expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1); // FIXME
toggleOpen(container);
expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
expect(dropdownWrapper.prop('popupVisible')).toBe(false);
expect(container.querySelectorAll('.ant-select-dropdown').length).toBe(1);
});
it('should show search icon when showSearch and open', () => {
const wrapper = mount(
jest.useFakeTimers();
const { container } = render(
<Select showSearch>
<Option value="1">1</Option>
</Select>,
);
expect(wrapper.find('.anticon-down').length).toBe(1);
expect(wrapper.find('.anticon-search').length).toBe(0);
wrapper.setProps({ open: true });
expect(wrapper.find('.anticon-down').length).toBe(0);
expect(wrapper.find('.anticon-search').length).toBe(1);
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 wrapper = mount(
const { rerender, asFragment } = render(
<Select
removeIcon={<Icon type="close" />}
clearIcon={<Icon type="close" />}
@ -106,20 +106,29 @@ describe('Select', () => {
<Option value="1">1</Option>
</Select>,
);
wrapper.setProps({ count: 10 });
rerender(
<Select
count={10}
removeIcon={<Icon type="close" />}
clearIcon={<Icon type="close" />}
menuItemSelectedIcon={<Icon type="close" />}
>
<Option value="1">1</Option>
</Select>,
);
jest.runAllTimers();
expect(wrapper.render()).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
});
describe('Deprecated', () => {
it('should ignore mode="combobox"', () => {
const wrapper = mount(
const { asFragment } = render(
<Select mode="combobox">
<Option value="1">1</Option>
</Select>,
);
expect(wrapper.render()).toMatchSnapshot();
expect(asFragment().firstChild).toMatchSnapshot();
});
});
});