From dfd1897063a0e450849bf5e4b11b34d20d22ec30 Mon Sep 17 00:00:00 2001 From: dingkang Date: Tue, 7 Jun 2022 10:14:32 +0800 Subject: [PATCH] test: replace test case with test library (#35925) * test: replace test case with test library * test: replace test case with test library * test: update snapshots --- .../table/__tests__/Table.expand.test.js | 62 +- .../table/__tests__/Table.filter.test.js | 1350 +++++++++-------- .../table/__tests__/Table.order.test.js | 13 +- .../table/__tests__/Table.pagination.test.js | 392 +++-- .../table/__tests__/Table.sorter.test.js | 514 ++++--- components/table/__tests__/Table.test.js | 79 +- .../__snapshots__/Table.filter.test.js.snap | 320 +++- .../__snapshots__/empty.test.js.snap | 70 +- components/table/__tests__/empty.test.js | 18 +- 9 files changed, 1638 insertions(+), 1180 deletions(-) diff --git a/components/table/__tests__/Table.expand.test.js b/components/table/__tests__/Table.expand.test.js index 858a834ec0..652679082a 100644 --- a/components/table/__tests__/Table.expand.test.js +++ b/components/table/__tests__/Table.expand.test.js @@ -1,6 +1,6 @@ /* eslint-disable react/no-multi-comp */ import React from 'react'; -import { mount } from 'enzyme'; +import { render, fireEvent } from '../../../tests/utils'; import Table from '..'; const columns = [ @@ -39,13 +39,13 @@ const data = [ describe('Table.expand', () => { it('click to expand', () => { - const wrapper = mount(); - wrapper.find('.ant-table-row-expand-icon').last().simulate('click'); - expect(wrapper.render()).toMatchSnapshot(); + const { container, asFragment } = render(
); + fireEvent.click(container.querySelector('.ant-table-row-expand-icon')); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('expandRowByClick should not block click icon', () => { - const wrapper = mount( + const { container } = render(
{ }} />, ); + fireEvent.click(container.querySelector('.ant-table-row-expand-icon')); + expect(container.querySelector('.ant-table-row-expand-icon-expanded')).toBeTruthy(); - wrapper.find('.ant-table-row-expand-icon').first().simulate('click'); - expect( - wrapper - .find('.ant-table-row-expand-icon') - .first() - .hasClass('ant-table-row-expand-icon-expanded'), - ).toBeTruthy(); - - wrapper.find('.ant-table-row-expand-icon').first().simulate('click'); - expect( - wrapper - .find('.ant-table-row-expand-icon') - .first() - .hasClass('ant-table-row-expand-icon-collapsed'), - ).toBeTruthy(); + fireEvent.click(container.querySelector('.ant-table-row-expand-icon')); + expect(container.querySelector('.ant-table-row-expand-icon-collapsed')).toBeTruthy(); }); it('show expandIcon', () => { - const wrapper = mount( + const { container } = render(
{ }} />, ); - - expect(wrapper.find('.expand-icon')).toHaveLength(1); + expect(container.querySelectorAll('.expand-icon')).toHaveLength(1); }); it('row indent padding should be 0px when indentSize defined as 0', () => { - const wrapper = mount(
); - const button = wrapper.find('.ant-table-row-expand-icon').at(0); - button.simulate('click'); - expect(wrapper.find('.indent-level-1').at(0).prop('style')).toHaveProperty( - 'paddingLeft', - '0px', - ); + const { container } = render(
); + + fireEvent.click(container.querySelector('.ant-table-row-expand-icon')); + expect(container.querySelector('.indent-level-1').style.paddingLeft).toEqual('0px'); }); describe('expandIconColumnIndex', () => { it('basic', () => { - const wrapper = mount( + const { container } = render(
{ />, ); - expect(wrapper.find('td').at(0).text()).toEqual('bamboo'); - expect(wrapper.find('td').at(1).find('.ant-table-row-expand-icon').length).toBeTruthy(); + const tdNodeList = container.querySelectorAll('td'); + expect(tdNodeList[0].textContent).toEqual('bamboo'); + expect(tdNodeList[1].querySelector('.ant-table-row-expand-icon')).toBeTruthy(); }); it('work with selection', () => { - const wrapper = mount( + const { container } = render(
{ rowSelection={{}} />, ); - - expect(wrapper.find('td').at(0).find('.ant-checkbox-input').length).toBeTruthy(); - expect(wrapper.find('td').at(1).text()).toEqual('bamboo'); - expect(wrapper.find('td').at(2).find('.ant-table-row-expand-icon').length).toBeTruthy(); + const tdNodeList = container.querySelectorAll('td'); + expect(tdNodeList[0].querySelector('.ant-checkbox-input')).toBeTruthy(); + expect(tdNodeList[1].textContent).toEqual('bamboo'); + expect(tdNodeList[2].querySelector('.ant-table-row-expand-icon')).toBeTruthy(); }); }); }); diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js index 569c6badfa..40555d3053 100644 --- a/components/table/__tests__/Table.filter.test.js +++ b/components/table/__tests__/Table.filter.test.js @@ -1,17 +1,13 @@ /* eslint-disable react/no-multi-comp */ import React from 'react'; -import { mount } from 'enzyme'; import { act } from 'react-dom/test-utils'; -import { render, fireEvent } from '../../../tests/utils'; +import { render, fireEvent, waitFor } from '../../../tests/utils'; import Table from '..'; import Input from '../../input'; import Tooltip from '../../tooltip'; import Button from '../../button'; import Select from '../../select'; -import Tree from '../../tree'; import ConfigProvider from '../../config-provider'; -import Checkbox from '../../checkbox'; -import Menu from '../../menu'; // https://github.com/Semantic-Org/Semantic-UI-React/blob/72c45080e4f20b531fda2e3e430e384083d6766b/test/specs/modules/Dropdown/Dropdown-test.js#L73 const nativeEvent = { nativeEvent: { stopImmediatePropagation: () => {} } }; @@ -58,45 +54,55 @@ describe('Table.filter', () => { return
; } - function renderedNames(wrapper) { - return wrapper.find('BodyRow').map(row => row.props().record.name); + function renderedNames(container) { + const namesList = []; + container + .querySelector('.ant-table-tbody') + .querySelectorAll('tr') + .forEach(tr => { + namesList.push(tr.querySelector('td').textContent); + }); + return namesList; } it('not show filter icon when undefined', () => { const noFilterColumn = { ...column, filters: undefined }; delete noFilterColumn.onFilter; - const wrapper = mount( + const { container } = render( createTable({ columns: [noFilterColumn], }), ); - expect(wrapper.find('.ant-table-filter-column')).toHaveLength(0); + expect(container.querySelectorAll('.ant-table-filter-column')).toHaveLength(0); }); // https://github.com/ant-design/ant-design/issues/26988 it('not show filter icon when filter and filterDropdown is undefined', () => { const noFilterColumn = { ...column, filters: undefined, filterDropdown: undefined }; delete noFilterColumn.onFilter; - const wrapper = mount( + const { container } = render( createTable({ columns: [noFilterColumn], }), ); - expect(wrapper.find('.ant-table-filter-column')).toHaveLength(0); + expect(container.querySelectorAll('.ant-table-filter-column')).toHaveLength(0); }); it('renders filter correctly', () => { - const wrapper = mount(createTable()); + const { asFragment } = render(createTable()); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); - it('renders menu correctly', () => { - const wrapper = mount(createTable()); - const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); - expect(dropdownWrapper.render()).toMatchSnapshot(); + // async await 解决 Warning: An update to Item ran an effect, but was not wrapped in act(...). + it('renders menu correctly', async () => { + const { container } = render(createTable()); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); + await waitFor(() => + expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(), + ); }); it('renders empty menu correctly', () => { @@ -127,8 +133,8 @@ describe('Table.filter', () => { jest.useRealTimers(); }); - it('renders radio filter correctly', () => { - const wrapper = mount( + it('renders radio filter correctly', async () => { + const { container } = render( createTable({ columns: [ { @@ -138,13 +144,15 @@ describe('Table.filter', () => { ], }), ); - const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); - expect(dropdownWrapper.render()).toMatchSnapshot(); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); + await waitFor(() => + expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(), + ); }); - it('renders custom content correctly', () => { + it('renders custom content correctly', async () => { const filter =
custom filter
; - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -155,35 +163,42 @@ describe('Table.filter', () => { }), ); - const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent()); - expect(dropdownWrapper.render()).toMatchSnapshot(); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); + await waitFor(() => + expect(container.querySelector('.ant-table-filter-dropdown')).toMatchSnapshot(), + ); }); it('override custom filter correctly', () => { - const filter = ({ prefixCls, setSelectedKeys, confirm, clearFilters }) => ( -
- setSelectedKeys([42])} id="setSelectedKeys"> - setSelectedKeys - - confirm()} id="confirm"> - Confirm - - clearFilters()} id="reset"> - Reset - - { - setSelectedKeys([43]); - confirm(); - }} - id="simulateOnSelect" - > - SimulateOnSelect - -
- ); + let renderSelectedKeys = null; + const filter = ({ prefixCls, setSelectedKeys, selectedKeys, confirm, clearFilters }) => { + renderSelectedKeys = selectedKeys; - const wrapper = mount( + return ( +
+ setSelectedKeys([42])} id="setSelectedKeys"> + setSelectedKeys + + confirm()} id="confirm"> + Confirm + + clearFilters()} id="reset"> + Reset + + { + setSelectedKeys([43]); + confirm(); + }} + id="simulateOnSelect" + > + SimulateOnSelect + +
+ ); + }; + + const { container } = render( createTable({ columns: [ { @@ -194,39 +209,37 @@ describe('Table.filter', () => { }), ); - function getFilterMenu() { - return wrapper.find('FilterDropdown'); - } - // check if renderer well - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - expect(wrapper.find('#customFilter')).toMatchSnapshot(); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); + expect(container.querySelector('#customFilter')).toMatchSnapshot(); // try to use reset btn - expect(getFilterMenu().props().filterState.filteredKeys).toBeFalsy(); - wrapper.find('#setSelectedKeys').simulate('click'); - wrapper.find('#confirm').simulate('click'); - expect(getFilterMenu().props().filterState.filteredKeys).toEqual([42]); - wrapper.find('#reset').simulate('click'); - wrapper.find('#confirm').simulate('click'); - expect(getFilterMenu().props().filterState.filteredKeys).toBeFalsy(); + expect(renderSelectedKeys).toHaveLength(0); + fireEvent.click(container.querySelector('#setSelectedKeys')); + fireEvent.click(container.querySelector('#confirm')); + expect(renderSelectedKeys).toEqual([42]); + + // Reset + fireEvent.click(container.querySelector('#reset')); + fireEvent.click(container.querySelector('#confirm')); + expect(renderSelectedKeys).toHaveLength(0); // try to use confirm btn - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - wrapper.find('#setSelectedKeys').simulate('click'); - expect(getFilterMenu().find('Dropdown').first().props().visible).toBeTruthy(); - wrapper.find('#confirm').simulate('click'); - expect(getFilterMenu().props().filterState.filteredKeys).toEqual([42]); - expect(getFilterMenu().find('Dropdown').first().props().visible).toBeFalsy(); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('#setSelectedKeys')); + expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); + fireEvent.click(container.querySelector('#confirm')); + expect(renderSelectedKeys).toEqual([42]); + expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); // Simulate onSelect, setSelectedKeys & confirm - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - wrapper.find('#simulateOnSelect').simulate('click'); - expect(getFilterMenu().props().filterState.filteredKeys).toEqual([43]); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('#simulateOnSelect')); + expect(renderSelectedKeys).toEqual([43]); }); it('can be controlled by filterDropdownVisible', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ columns: [ { @@ -237,48 +250,72 @@ describe('Table.filter', () => { }), ); - let dropdown = wrapper.find('Dropdown').first(); - expect(dropdown.props().visible).toBe(true); + expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); - wrapper.setProps({ - columns: [ - { - ...column, - filterDropdownVisible: false, - }, - ], - }); + rerender( + createTable({ + columns: [ + { + ...column, + filterDropdownVisible: false, + }, + ], + }), + ); - dropdown = wrapper.find('Dropdown').first(); - expect(dropdown.props().visible).toBe(false); + expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); }); it('if the filter is visible it should ignore the selectedKeys changes', () => { - const wrapper = mount( - createTable({ - columns: [ - { - ...column, - filterDropdownVisible: true, - }, - ], - }), + const myColumn = { + title: 'Name', + dataIndex: 'name', + filters: [{ text: 'J', value: 'J' }], + onFilter: (value, record) => record.name.includes(value), + }; + + const tableProps = { + columns: [ + { + ...myColumn, + filterDropdownVisible: true, + }, + ], + }; + + const { container, rerender } = render(createTable(tableProps)); + + const checkboxList = container + .querySelector('.ant-table-filter-dropdown') + .querySelectorAll('input[type="checkbox"]'); + expect(checkboxList.length).toBeTruthy(); + checkboxList.forEach(checkbox => { + expect(checkbox.checkbox).toBeFalsy(); + }); + + fireEvent.click( + container.querySelector('.ant-table-filter-dropdown').querySelector('input[type="checkbox"]'), + ); + fireEvent.click( + container + .querySelector('.ant-table-filter-dropdown') + .querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'), ); - expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toBeFalsy(); - wrapper.find('FilterDropdown').find('input[type="checkbox"]').first().simulate('click'); - wrapper - .find('FilterDropdown') - .find('.ant-table-filter-dropdown-btns .ant-btn-primary') - .simulate('click'); - expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']); - wrapper.setProps({ dataSource: [...data, { key: 999, name: 'Chris' }] }); - expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(['boy']); + expect(container.querySelectorAll('tbody tr')).toHaveLength(2); + + rerender( + createTable({ + ...tableProps, + dataSource: [...data, { key: 999, name: 'Jason' }], + }), + ); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); }); it('fires change event when visible change', () => { const handleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -288,14 +325,12 @@ describe('Table.filter', () => { ], }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(handleChange).toHaveBeenCalledWith(true); }); it('can be controlled by filteredValue', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ columns: [ { @@ -306,48 +341,62 @@ describe('Table.filter', () => { }), ); - expect(wrapper.find('tbody tr').length).toBe(1); - wrapper.setProps({ - columns: [ - { - ...column, - filteredValue: [], - }, - ], - }); - expect(wrapper.find('tbody tr').length).toBe(4); + expect(container.querySelectorAll('tbody tr').length).toBe(1); + + rerender( + createTable({ + columns: [ + { + ...column, + filteredValue: [], + }, + ], + }), + ); + + expect(container.querySelectorAll('tbody tr').length).toBe(4); }); it('should handle filteredValue and non-array filterValue as expected', () => { - const wrapper = mount( + let filterKeys = new Set(); + + const { rerender } = render( createTable({ columns: [ { ...column, filteredValue: ['Lucy', 12, true], + onFilter: value => { + filterKeys.add(value); + return false; + }, }, ], }), ); - function getFilterMenu() { - return wrapper.find('FilterDropdown'); - } - expect(getFilterMenu().props().filterState.filteredKeys).toEqual(['Lucy', '12', 'true']); + expect(Array.from(filterKeys)).toEqual(['Lucy', '12', 'true']); - wrapper.setProps({ - columns: [ - { - ...column, - filteredValue: null, - }, - ], - }); - expect(getFilterMenu().props().filterState.filteredKeys).toEqual(null); + filterKeys = new Set(); + rerender( + createTable({ + columns: [ + { + ...column, + filteredValue: null, + onFilter: value => { + filterKeys.add(value); + return true; + }, + }, + ], + }), + ); + expect(Array.from(filterKeys)).toHaveLength(0); }); it('can be controlled by filteredValue null', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ columns: [ { @@ -358,21 +407,26 @@ describe('Table.filter', () => { }), ); - expect(wrapper.find('tbody tr').length).toBe(1); - wrapper.setProps({ - columns: [ - { - ...column, - filteredValue: null, - }, - ], - }); - expect(wrapper.find('tbody tr').length).toBe(4); + expect(container.querySelectorAll('tbody tr').length).toBe(1); + + rerender( + createTable({ + columns: [ + { + ...column, + filteredValue: null, + }, + ], + }), + ); + + expect(container.querySelectorAll('tbody tr').length).toBe(4); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('render checked of checkbox correctly controlled by filteredValue', () => { ['Lucy', 23, false].forEach(val => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -384,12 +438,15 @@ describe('Table.filter', () => { }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - - expect(wrapper.find('FilterDropdown').find('Checkbox').at(0).props().checked).toEqual(true); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + expect( + container + .querySelector('.ant-table-filter-dropdown') + .querySelectorAll('.ant-checkbox-input')[0].checked, + ).toEqual(true); }); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -400,13 +457,17 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); - expect(wrapper.find('FilterDropdown').find('Checkbox').at(0).props().checked).toEqual(false); + expect( + container + .querySelector('.ant-table-filter-dropdown') + .querySelectorAll('.ant-checkbox-input')[0].checked, + ).toEqual(false); }); it('can read defaults from defaultFilteredValue', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ columns: [ { @@ -416,56 +477,61 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.find('tbody tr').length).toBe(1); - expect(wrapper.find('tbody tr').text()).toBe('Lucy'); + expect(container.querySelectorAll('tbody tr').length).toBe(1); + expect(container.querySelector('tbody tr').textContent).toBe('Lucy'); // Should properly ignore further defaultFilteredValue changes - wrapper.setProps({ - columns: [ - { - ...column, - defaultFilteredValue: [], - }, - ], - }); - expect(wrapper.find('tbody tr').length).toBe(1); - expect(wrapper.find('tbody tr').text()).toBe('Lucy'); + rerender( + createTable({ + columns: [ + { + ...column, + defaultFilteredValue: [], + }, + ], + }), + ); + + expect(container.querySelectorAll('tbody tr').length).toBe(1); + expect(container.querySelector('tbody tr').textContent).toBe('Lucy'); // Should properly be overidden by non-null filteredValue - wrapper.setProps({ - columns: [ - { - ...column, - defaultFilteredValue: ['Lucy'], - filteredValue: ['Tom'], - }, - ], - }); - expect(wrapper.find('tbody tr').length).toBe(1); - expect(wrapper.find('tbody tr').text()).toBe('Tom'); + rerender( + createTable({ + columns: [ + { + ...column, + defaultFilteredValue: ['Lucy'], + filteredValue: ['Tom'], + }, + ], + }), + ); + expect(container.querySelectorAll('tbody tr').length).toBe(1); + expect(container.querySelector('tbody tr').textContent).toBe('Tom'); // Should properly be overidden by a null filteredValue - wrapper.setProps({ - columns: [ - { - ...column, - defaultFilteredValue: ['Lucy'], - filteredValue: null, - }, - ], - }); - expect(wrapper.find('tbody tr').length).toBe(4); + rerender( + createTable({ + columns: [ + { + ...column, + defaultFilteredValue: ['Lucy'], + filteredValue: null, + }, + ], + }), + ); + expect(container.querySelectorAll('tbody tr').length).toBe(4); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('fires change event', () => { const handleChange = jest.fn(); - const wrapper = mount(createTable({ onChange: handleChange })); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click'); - wrapper - .find('FilterDropdown') - .find('.ant-table-filter-dropdown-btns .ant-btn-primary') - .simulate('click'); + const { container } = render(createTable({ onChange: handleChange })); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(handleChange).toHaveBeenCalledWith( {}, { name: ['boy'] }, @@ -477,32 +543,27 @@ describe('Table.filter', () => { ); }); - it('fires pagination change event', () => { + it('fires pagination change event', async () => { const onPaginationChange = jest.fn(); - const wrapper = mount(createTable({ pagination: { onChange: onPaginationChange } })); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click'); - wrapper - .find('FilterDropdown') - .find('.ant-table-filter-dropdown-btns .ant-btn-primary') - .simulate('click'); - - expect(onPaginationChange).toHaveBeenCalledWith(1, 10); + const { container } = render(createTable({ pagination: { onChange: onPaginationChange } })); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + await waitFor(() => expect(onPaginationChange).toHaveBeenCalledWith(1, 10)); }); - it('should not fire change event when close filterDropdown without changing anything', () => { + it('should not fire change event when close filterDropdown without changing anything', async () => { const handleChange = jest.fn(); - const wrapper = mount(createTable({ onChange: handleChange })); + const { container } = render(createTable({ onChange: handleChange })); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - - expect(handleChange).not.toHaveBeenCalled(); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + await waitFor(() => expect(handleChange).not.toHaveBeenCalled()); }); - it('should not fire change event when close a filtered filterDropdown without changing anything', () => { + it('should not fire change event when close a filtered filterDropdown without changing anything', async () => { const handleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ onChange: handleChange, columns: [ @@ -513,14 +574,12 @@ describe('Table.filter', () => { ], }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - - expect(handleChange).not.toHaveBeenCalled(); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + await waitFor(() => expect(handleChange).not.toHaveBeenCalled()); }); - it('three levels menu', () => { + it('three levels menu', async () => { const onChange = jest.fn(); const filters = [ { text: 'Upper', value: 'Upper' }, @@ -543,7 +602,7 @@ describe('Table.filter', () => { ], }, ]; - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -556,13 +615,13 @@ describe('Table.filter', () => { ); jest.useFakeTimers(); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); // Open - wrapper.find('.ant-table-filter-trigger').simulate('click'); + fireEvent.click(container.querySelector('.ant-table-filter-trigger')); function getFilterMenu() { - return wrapper.find('FilterDropdown'); + return container.querySelector('.ant-table-filter-dropdown'); } // Seems raf not trigger when in useEffect for async update @@ -571,87 +630,109 @@ describe('Table.filter', () => { for (let i = 0; i < 3; i += 1) { act(() => { jest.runAllTimers(); - wrapper.update(); }); } } // Open Level2 - getFilterMenu().find('div.ant-dropdown-menu-submenu-title').at(0).simulate('mouseEnter'); + fireEvent.mouseEnter( + getFilterMenu().querySelectorAll('div.ant-dropdown-menu-submenu-title')[0], + ); refreshTimer(); // Open Level3 - getFilterMenu().find('div.ant-dropdown-menu-submenu-title').at(1).simulate('mouseEnter'); + fireEvent.mouseEnter( + getFilterMenu().querySelectorAll('div.ant-dropdown-menu-submenu-title')[1], + ); refreshTimer(); // Select Level3 value - getFilterMenu().find('li.ant-dropdown-menu-item').last().simulate('click'); - getFilterMenu().find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + const items = getFilterMenu().querySelectorAll('li.ant-dropdown-menu-item'); + fireEvent.click(items[items.length - 1]); + fireEvent.click( + getFilterMenu().querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'), + ); refreshTimer(); + expect(onChange).toHaveBeenCalled(); onChange.mock.calls.forEach(([, currentFilters]) => { const [, val] = Object.entries(currentFilters)[0]; expect(val).toEqual(['Jack']); }); - expect(renderedNames(wrapper)).toEqual(['Jack']); + expect(renderedNames(container)).toEqual(['Jack']); - // What's this? Is that a coverage case? - getFilterMenu().find('li.ant-dropdown-menu-item').last().simulate('click'); + // What's this? Is that a coverage case? Or check a crash? + const latestItems = getFilterMenu().querySelectorAll('li.ant-dropdown-menu-item'); + fireEvent.click(latestItems[latestItems.length - 1]); jest.useRealTimers(); }); describe('should support value types', () => { + const filterKeys = new Set(); [ ['Light', 93], ['Bamboo', false], ].forEach(([text, value]) => { - it(`${typeof value} type`, () => { - const onFilter = jest.fn(); + it(`${typeof value} type`, async () => { + jest.useFakeTimers(); const onChange = jest.fn(); const filters = [{ text, value }]; - const wrapper = mount( + const { container } = render( createTable({ columns: [ { ...column, filters, - onFilter, + onFilter: val => { + expect(val).toBe(value); + filterKeys.add(val); + return false; + }, }, ], onChange, }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); jest.useFakeTimers(); - wrapper.find('MenuItem').first().simulate('click'); + + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + // This test can be remove if refactor - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - wrapper.update(); - - expect(wrapper.find('FilterDropdown').find('Checkbox').at(0).props().checked).toEqual(true); - - expect(typeof wrapper.find('FilterDropdown').props().filterState.filteredKeys[0]).toEqual( - 'string', + fireEvent.click( + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary'), ); - expect(onFilter.mock.calls.length > 0).toBeTruthy(); - onFilter.mock.calls.forEach(([val]) => { - expect(val).toBe(value); - }); + await waitFor(() => + expect( + container + .querySelector('.ant-table-filter-dropdown') + .querySelectorAll('.ant-checkbox-input')[0].checked, + ).toEqual(true), + ); + + expect(typeof Array.from(filterKeys)[0]).toEqual('number'); + + expect(Array.from(filterKeys).length > 0).toBeTruthy(); + onChange.mock.calls.forEach(([, currentFilters]) => { const [, val] = Object.entries(currentFilters)[0]; expect(val).toEqual([value]); }); // Another time of Filter show // https://github.com/ant-design/ant-design/issues/15593 - wrapper.find('MenuItem').first().simulate('click'); - expect(wrapper.find('FilterDropdown').find('Checkbox').at(0).props().checked).toEqual( - false, - ); + + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + + expect( + container + .querySelector('.ant-table-filter-dropdown') + .querySelectorAll('.ant-checkbox-input')[0].checked, + ).toEqual(false); jest.useRealTimers(); }); }); @@ -659,7 +740,6 @@ describe('Table.filter', () => { it('works with JSX in controlled mode', () => { const { Column } = Table; - class App extends React.Component { state = { filters: {}, @@ -689,24 +769,25 @@ describe('Table.filter', () => { } } - const wrapper = mount(); + const { container } = render(); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - expect(wrapper.find('Dropdown').first().props().visible).toBe(true); - wrapper.find('MenuItem').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - wrapper.update(); - expect(wrapper.find('Dropdown').first().props().visible).toBe(false); - expect(renderedNames(wrapper)).toEqual(['Jack']); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').simulate('click'); - wrapper.update(); - expect(wrapper.find('Dropdown').first().props().visible).toBe(true); - expect(renderedNames(wrapper)).toEqual(['Jack']); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - expect(wrapper.find('Dropdown').first().props().visible).toBe(false); + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[0]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(renderedNames(container)).toEqual(['Jack']); + expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); + + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link')); + + expect(container.querySelector('.ant-dropdown-open')).toBeTruthy(); + expect(renderedNames(container)).toEqual(['Jack']); + + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(container.querySelector('.ant-dropdown-open')).toBeFalsy(); }); it('works with grouping columns in controlled mode', () => { @@ -740,14 +821,15 @@ describe('Table.filter', () => { { key: 2, name: 'Tom', age: 21 }, { key: 3, name: 'Jerry', age: 22 }, ]; - const wrapper = mount(
); + const { container } = render(
); - expect(renderedNames(wrapper)).toEqual(['Jack']); + expect(renderedNames(container)).toEqual(['Jack']); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('confirm filter when dropdown hidden', () => { const handleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -761,10 +843,9 @@ describe('Table.filter', () => { onChange: handleChange, }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-dropdown-menu-item').first().simulate('click'); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(handleChange).toHaveBeenCalled(); expect(handleChange.mock.calls[0][3].currentDataSource.length).toBe(1); @@ -774,7 +855,7 @@ describe('Table.filter', () => { const filterIcon = filtered => ( {filtered ? 'filtered' : 'unfiltered'} ); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -784,21 +865,15 @@ describe('Table.filter', () => { ], }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-dropdown-menu-item').first().simulate('click'); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - expect(wrapper.find('.customize-icon').render()).toMatchSnapshot(); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-dropdown-menu-item').first().simulate('click'); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - expect(wrapper.find('.customize-icon').render()).toMatchSnapshot(); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + expect(container.querySelector('.customize-icon')).toMatchSnapshot(); }); it('renders custom filter icon as string correctly', () => { const filterIcon = () => 'string'; - const wrapper = mount( + const { asFragment } = render( createTable({ columns: [ { @@ -808,7 +883,7 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('renders custom filter icon with right Tooltip title', () => { @@ -817,7 +892,7 @@ describe('Table.filter', () => { Tooltip ); - const wrapper = mount( + const { asFragment } = render( createTable({ columns: [ { @@ -827,12 +902,12 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('renders custom filter icon as ReactNode', () => { const filterIcon = ; - const wrapper = mount( + const { container, asFragment } = render( createTable({ columns: [ { @@ -842,8 +917,8 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find('span.customize-icon').length).toBe(1); + expect(asFragment().firstChild).toMatchSnapshot(); + expect(container.querySelector('span.customize-icon')).toBeTruthy(); }); // https://github.com/ant-design/ant-design/issues/13028 @@ -884,14 +959,13 @@ describe('Table.filter', () => { } } - const wrapper = mount(); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-input').simulate('change', { target: { value: 'test' } }); - expect(wrapper.find('.ant-input').instance().value).toBe('test'); - wrapper.find('.ant-btn').simulate('click'); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - expect(wrapper.find('.ant-input').instance().value).toBe(''); + const { container } = render(); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.change(container.querySelector('.ant-input'), { target: { value: 'test' } }); + expect(container.querySelector('.ant-input').value).toBe('test'); + fireEvent.click(container.querySelector('.ant-btn')); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + expect(container.querySelector('.ant-input').value).toBe(''); }); // https://github.com/ant-design/ant-design/issues/17833 @@ -900,7 +974,7 @@ describe('Table.filter', () => { const filterDropdown = ({ setSelectedKeys }) => ( setSelectedKeys([e.target.value])} /> ); - const wrapper = mount( + const { container } = render( createTable({ onChange, columns: [ @@ -913,12 +987,9 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: 'whatevervalue' } }); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.change(container.querySelector('input'), { target: { value: 'whatevervalue' } }); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(onChange).not.toHaveBeenCalled(); }); @@ -932,7 +1003,7 @@ describe('Table.filter', () => { ); - const wrapper = mount( + const { container } = render( createTable({ onChange, columns: [ @@ -945,12 +1016,11 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper - .find('input') - .first() - .simulate('change', { target: { value: 'test' } }); - wrapper.find('.confirm-btn').first().simulate('click'); + + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.change(container.querySelector('input'), { target: { value: 'test' } }); + fireEvent.click(container.querySelector('.confirm-btn')); + expect(onChange).toHaveBeenCalled(); onChange.mock.calls.forEach(([, currentFilters]) => { const [, val] = Object.entries(currentFilters)[0]; @@ -959,8 +1029,11 @@ describe('Table.filter', () => { }); it('should work as expected with complex custom filterDropdown', () => { + let renderSelectedKeys = null; const onChange = jest.fn(); + const filterDropdown = ({ setSelectedKeys, selectedKeys, confirm }) => { + renderSelectedKeys = selectedKeys; const handleChange = selectedValues => { setSelectedKeys(selectedValues); }; @@ -1013,7 +1086,7 @@ describe('Table.filter', () => { label: 'Not Identified', }, ]; - const wrapper = mount( + const { container } = render( createTable({ onChange, columns: [ @@ -1027,11 +1100,13 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.find('FilterDropdown').props().filterState.filteredKeys).toEqual(filteredValue); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-select-selector').simulate('mousedown'); - wrapper.find('.ant-select-item-option').first().simulate('click'); - wrapper.find('.confirm-btn').first().simulate('click'); + + expect(renderSelectedKeys).toEqual(filteredValue); + + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + fireEvent.click(container.querySelector('.ant-select-item-option')); + fireEvent.click(container.querySelector('.confirm-btn')); expect(onChange).toHaveBeenCalled(); onChange.mock.calls.forEach(([, currentFilters]) => { const [, val] = Object.entries(currentFilters)[0]; @@ -1065,7 +1140,7 @@ describe('Table.filter', () => { /> ); - const wrapper = mount( + const { container, rerender } = render( { />, ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('MenuItem').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(onChange).toHaveBeenCalled(); onChange.mockReset(); expect(onChange).not.toHaveBeenCalled(); + rerender( + , + ); - wrapper.setProps({ - filters: [ - { - text: 'Jim', - value: 'Jim', - }, - ], - }); - - wrapper.find('MenuItem').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(onChange).toHaveBeenCalled(); }); it('should support getPopupContainer', () => { const getPopupContainer = jest.fn(node => node.parentNode); - mount( + render( createTable({ columns: [ { @@ -1117,7 +1194,7 @@ describe('Table.filter', () => { it('should support getPopupContainer from ConfigProvider', () => { const getPopupContainer = jest.fn(node => node.parentNode); - mount( + render( {createTable({ columns: [ @@ -1154,7 +1231,7 @@ describe('Table.filter', () => { /> ); - mount(); + render(); expect(filterDropdownMock).toHaveBeenCalledWith( expect.objectContaining({ visible: false, @@ -1184,16 +1261,15 @@ describe('Table.filter', () => { /> ); - const wrapper = mount(); + const { container } = render(); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(filterDropdownMock).toHaveBeenCalledWith( expect.objectContaining({ visible: true, }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(filterDropdownMock).toHaveBeenCalledWith( expect.objectContaining({ visible: false, @@ -1203,17 +1279,17 @@ describe('Table.filter', () => { it('should reset pagination after filter', () => { const handleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ onChange: handleChange, dataSource: longData, pagination: true, }), ); - - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('MenuItem').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(handleChange).toHaveBeenCalledWith( { @@ -1227,12 +1303,12 @@ describe('Table.filter', () => { action: 'filter', }, ); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(0); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(0); }); it('should keep pagination current after filter', () => { const handleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ onChange: handleChange, dataSource: longData, @@ -1241,11 +1317,12 @@ describe('Table.filter', () => { }, }), ); - expect(wrapper.find('.ant-pagination-item-active').text()).toBe('3'); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('MenuItem').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('3'); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(handleChange).toHaveBeenCalledWith( { @@ -1286,14 +1363,14 @@ describe('Table.filter', () => { } } - mount(); + render(); }); // https://github.com/ant-design/ant-design/issues/20854 it('Not cache for onChange state', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render(
{ ); // Sort it - wrapper.find('.ant-table-column-sorters').simulate('click'); + fireEvent.click(container.querySelector('.ant-table-column-sorters'), nativeEvent); expect(onChange).toHaveBeenCalledWith( expect.anything(), { @@ -1337,9 +1414,11 @@ describe('Table.filter', () => { // Filter it onChange.mockReset(); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - wrapper.find('.ant-dropdown-menu-item').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). + fireEvent.click(container.querySelector('.ant-dropdown-trigger'), nativeEvent); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(onChange).toHaveBeenCalledWith( expect.anything(), { @@ -1360,7 +1439,7 @@ describe('Table.filter', () => { }); it('locale should work', () => { - const wrapper = mount( + const { container } = render( createTable({ locale: { filterConfirm: 'Bamboo' }, columns: [ @@ -1374,22 +1453,22 @@ describe('Table.filter', () => { }), ); - expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').text()).toEqual( - 'Bamboo', - ); - expect(wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').last().text()).toEqual( - 'Reset', - ); - expect(wrapper.find('.ant-table-filter-dropdown-checkall').first().text()).toEqual( + expect( + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary').textContent, + ).toEqual('Bamboo'); + expect( + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').textContent, + ).toEqual('Reset'); + expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toEqual( 'Select all items', ); - expect(wrapper.find('.ant-input').getDOMNode().getAttribute('placeholder')).toEqual( + expect(container.querySelector('.ant-input').getAttribute('placeholder')).toEqual( 'Search in filters', ); }); it('filtered should work', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1400,11 +1479,13 @@ describe('Table.filter', () => { }), ); - expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeTruthy(); + expect( + container.querySelector('.ant-table-filter-trigger').className.includes('active'), + ).toBeTruthy(); }); it('filteredValue with empty array should not active the filtered icon', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1415,21 +1496,23 @@ describe('Table.filter', () => { }), ); - expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeFalsy(); + expect( + container.querySelector('.ant-table-filter-trigger').className.includes('active'), + ).toBeFalsy(); }); it('with onFilter', () => { const onFilter = jest.fn((value, record) => record.key === value); const columns = [{ dataIndex: 'key', filteredValue: [5], onFilter }]; const testData = [{ key: 1 }, { key: 3 }, { key: 5 }]; - const wrapper = mount(
); + const { container } = render(
); expect(onFilter).toHaveBeenCalled(); - expect(wrapper.find('tbody tr')).toHaveLength(1); + expect(container.querySelectorAll('tbody tr')).toHaveLength(1); }); it('jsx work', () => { - const wrapper = mount( + const { container } = render(
{
, ); - expect(wrapper.find('tbody tr')).toHaveLength(1); - expect(wrapper.find('tbody tr td').text()).toEqual('Jack'); + expect(container.querySelectorAll('tbody tr')).toHaveLength(1); + expect(container.querySelector('tbody tr td').textContent).toEqual('Jack'); }); it(`shouldn't keep status when controlled filteredValue isn't change`, () => { @@ -1459,21 +1542,15 @@ describe('Table.filter', () => { ], onFilter: filterFn, }; - const wrapper = mount(createTable({ columns: [filterControlledColumn] })); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('FilterDropdown').find('MenuItem').first().simulate('click'); - wrapper // close drodown - .find('FilterDropdown') - .find('.ant-table-filter-dropdown-btns .ant-btn-primary') - .simulate('click'); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); // reopen - const checkbox = wrapper - .find('FilterDropdown') - .find('MenuItem') - .first() - .find('Checkbox') - .first(); - expect(checkbox.props().checked).toEqual(false); + const { container } = render(createTable({ columns: [filterControlledColumn] })); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); // close drodown + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); // reopen + const checkbox = container + .querySelector('.ant-dropdown-menu-item') + .querySelector('input[type=checkbox]'); + expect(checkbox.checked).toEqual(false); }); it('should not trigger onChange when filters is empty', () => { @@ -1496,12 +1573,12 @@ describe('Table.filter', () => { ]} /> ); - const wrapper = mount(); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); + const { container, unmount } = render(); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(onChange).not.toHaveBeenCalled(); onChange.mockReset(); - wrapper.unmount(); + unmount(); }); it('filters in children should render', () => { @@ -1553,16 +1630,17 @@ describe('Table.filter', () => { english2: 72, }, ]; - const wrapper = mount( + const { container } = render( createTable({ columns, dataSource, }), ); - expect(wrapper.find('.ant-table-filter-column')).toHaveLength(3); + expect(container.querySelectorAll('.ant-table-filter-column')).toHaveLength(3); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('should pagination.current be 1 after filtering', () => { const onChange = jest.fn(); const columns = [ @@ -1599,24 +1677,25 @@ describe('Table.filter', () => { }, ]; - const wrapper = mount( + const { container } = render( , ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('FilterDropdown').find('MenuItem').at(0).simulate('click'); - wrapper.find('.ant-btn-primary').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(onChange.mock.calls[0][0].current).toBe(1); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); - wrapper.find('FilterDropdown').find('MenuItem').at(1).simulate('click'); - wrapper.find('.ant-btn-primary').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); + fireEvent.click(container.querySelectorAll('.ant-dropdown-menu-item')[1]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); expect(onChange.mock.calls[1][0].current).toBe(1); }); // https://github.com/ant-design/ant-design/issues/30454 it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => { const onFilterDropdownVisibleChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1644,17 +1723,18 @@ describe('Table.filter', () => { }), ); - wrapper.find('.ant-dropdown-trigger').first().simulate('click'); + fireEvent.click(container.querySelector('.ant-dropdown-trigger')); expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1); - wrapper.find('#confirm-only').simulate('click'); + fireEvent.click(container.querySelector('#confirm-only')); expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1); - wrapper.find('#confirm-and-close').simulate('click'); + fireEvent.click(container.querySelector('#confirm-and-close')); expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2); expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('Column with filter and children filters properly.', () => { class App extends React.Component { state = { @@ -1736,20 +1816,24 @@ describe('Table.filter', () => { } } - const wrapper = mount(); + const { container } = render(); - expect(wrapper.find('.ant-table-tbody .ant-table-cell').first().text()).toEqual(`${32}`); - wrapper.find('.ant-dropdown-trigger.ant-table-filter-trigger').simulate('click'); - wrapper.find('.ant-dropdown-menu-item').first().simulate('click'); - wrapper.find('.ant-btn.ant-btn-primary.ant-btn-sm').simulate('click'); - expect(wrapper.find('.ant-table-tbody .ant-table-cell').first().text()).toEqual(`${66}`); + expect(container.querySelector('.ant-table-tbody .ant-table-cell').textContent).toEqual( + `${32}`, + ); + fireEvent.click(container.querySelector('.ant-dropdown-trigger.ant-table-filter-trigger')); + fireEvent.click(container.querySelector('.ant-dropdown-menu-item')); + fireEvent.click(container.querySelector('.ant-btn.ant-btn-primary.ant-btn-sm')); + expect(container.querySelector('.ant-table-tbody .ant-table-cell').textContent).toEqual( + `${66}`, + ); }); describe('filter tree mode', () => { it('supports filter tree', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1759,19 +1843,18 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Tree).length).toBe(1); - expect(wrapper.find('.ant-tree-checkbox').length).toBe(5); + expect(container.querySelectorAll('.ant-table-filter-dropdown-tree').length).toBe(1); + expect(container.querySelectorAll('.ant-tree-checkbox').length).toBe(5); }); it('supports search input in filter tree', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1782,23 +1865,19 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Tree).length).toBe(1); - expect(wrapper.find(Input).length).toBe(1); - wrapper - .find(Input) - .find('input') - .simulate('change', { target: { value: '111' } }); + expect(container.querySelectorAll('.ant-table-filter-dropdown-tree').length).toBe(1); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + fireEvent.change(container.querySelector('.ant-input'), { target: { value: '111' } }); }); it('supports search input in filter menu', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1808,23 +1887,19 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Menu).length).toBe(1); - expect(wrapper.find(Input).length).toBe(1); - wrapper - .find(Input) - .find('input') - .simulate('change', { target: { value: '111' } }); + expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + fireEvent.change(container.querySelector('.ant-input'), { target: { value: '111' } }); }); it('should skip search when filters[0].text is ReactNode', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1848,25 +1923,22 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Menu).length).toBe(1); - expect(wrapper.find(Input).length).toBe(1); - expect(wrapper.find('li.ant-dropdown-menu-item').length).toBe(3); - wrapper - .find(Input) - .find('input') - .simulate('change', { target: { value: '123' } }); - expect(wrapper.find('li.ant-dropdown-menu-item').length).toBe(2); + expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(3); + fireEvent.change(container.querySelector('.ant-input'), { target: { value: '123' } }); + expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(2); }); it('should supports filterSearch has type of function', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1890,25 +1962,21 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Menu).length).toBe(1); - expect(wrapper.find(Input).length).toBe(1); - expect(wrapper.find('li.ant-dropdown-menu-item').length).toBe(3); - wrapper - .find(Input) - .find('input') - .simulate('change', { target: { value: '456' } }); - expect(wrapper.find('li.ant-dropdown-menu-item').length).toBe(2); + expect(container.querySelectorAll('.ant-table-filter-dropdown-search').length).toBe(1); + expect(container.querySelectorAll('.ant-input').length).toBe(1); + expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(3); + fireEvent.change(container.querySelector('.ant-input'), { target: { value: '456' } }); + expect(container.querySelectorAll('li.ant-dropdown-menu-item').length).toBe(2); }); it('supports check all items', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1919,30 +1987,29 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Checkbox).length).toBe(1); - expect(wrapper.find(Checkbox).text()).toBe('Select all items'); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); - wrapper - .find(Checkbox) - .find('input') - .simulate('change', { target: { checked: true } }); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(5); - wrapper - .find(Checkbox) - .find('input') - .simulate('change', { target: { checked: false } }); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); + expect(container.querySelectorAll('.ant-table-filter-dropdown-checkall').length).toBe(1); + expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toBe( + 'Select all items', + ); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); + + // fireEvent.change(container.querySelector('.ant-table-filter-dropdown-checkall input'), { target: { checked: true } }); + // 为什么 fireEvent.change 模拟 checkbox 触发会失败 + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5); + + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); }); it('supports check item by selecting it', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1953,28 +2020,32 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find(Checkbox).length).toBe(1); - expect(wrapper.find(Checkbox).text()).toBe('Select all items'); - wrapper.find('.ant-tree-node-content-wrapper').at(0).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(0).hasClass('ant-tree-checkbox-checked')).toBe( - true, + expect(container.querySelectorAll('.ant-table-filter-dropdown-checkall').length).toBe(1); + expect(container.querySelector('.ant-table-filter-dropdown-checkall').textContent).toBe( + 'Select all items', ); + fireEvent.click(container.querySelector('.ant-tree-node-content-wrapper')); + expect( - wrapper - .find('.ant-table-filter-dropdown-checkall .ant-checkbox') - .hasClass('ant-checkbox-indeterminate'), + container + .querySelector('.ant-tree-checkbox') + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect( + container + .querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox') + .className.includes('ant-checkbox-indeterminate'), ).toBe(true); }); it('select-all checkbox should change when all items are selected', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -1988,17 +2059,17 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - wrapper.find('.ant-tree-node-content-wrapper').at(0).simulate('click'); - wrapper.find('.ant-tree-node-content-wrapper').at(1).simulate('click'); + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[0]); + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[1]); + expect( - wrapper - .find('.ant-table-filter-dropdown-checkall .ant-checkbox') - .hasClass('ant-checkbox-checked'), + container + .querySelector('.ant-table-filter-dropdown-checkall .ant-checkbox') + .className.includes('ant-checkbox-checked'), ).toBe(true); }); }); @@ -2006,7 +2077,7 @@ describe('Table.filter', () => { it('filterMultiple is false - check item', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -2017,35 +2088,44 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.ant-tree-checkbox').length).toBe(5); - expect(wrapper.find('.ant-table-filter-dropdown-checkall').exists()).toBe(false); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); - wrapper.find('.ant-tree-checkbox').at(2).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(2).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - wrapper.find('.ant-tree-checkbox').at(1).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(1).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - wrapper.find('.ant-tree-checkbox').at(1).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(1).hasClass('ant-tree-checkbox-checked')).toBe( - false, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); + expect(container.querySelectorAll('.ant-tree-checkbox').length).toBe(5); + expect(container.querySelector('.ant-table-filter-dropdown-checkall')).toBe(null); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); + + fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[2]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[2] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); + + fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[1]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[1] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); + + fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[1]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[1] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(false); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); }); it('filterMultiple is false - select item', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -2056,34 +2136,43 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.ant-tree-checkbox').length).toBe(5); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); - wrapper.find('.ant-tree-node-content-wrapper').at(2).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(2).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - wrapper.find('.ant-tree-node-content-wrapper').at(1).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(1).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - wrapper.find('.ant-tree-node-content-wrapper').at(1).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(1).hasClass('ant-tree-checkbox-checked')).toBe( - false, - ); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); + + expect(container.querySelectorAll('.ant-tree-checkbox').length).toBe(5); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); + + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[2]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[2] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); + + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[1]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[1] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); + + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[1]); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[1] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(false); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); }); it('should select children when select parent', () => { jest.useFakeTimers(); jest.spyOn(console, 'error').mockImplementation(() => undefined); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -2105,30 +2194,40 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); // check parentnode - wrapper.find('.ant-tree-checkbox').at(2).simulate('click'); - expect(wrapper.find('.ant-tree-checkbox').at(2).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox').at(3).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - expect(wrapper.find('.ant-tree-checkbox').at(4).hasClass('ant-tree-checkbox-checked')).toBe( - true, - ); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack']); - wrapper.find('.ant-tree-checkbox').at(2).simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - wrapper.find('.ant-tree-node-content-wrapper').at(2).simulate('click'); - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-primary').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack']); + + fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[2]); + + expect( + container + .querySelectorAll('.ant-tree-checkbox')[2] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[3] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + expect( + container + .querySelectorAll('.ant-tree-checkbox')[4] + .className.includes('ant-tree-checkbox-checked'), + ).toBe(true); + + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(renderedNames(container)).toEqual(['Jack']); + + fireEvent.click(container.querySelectorAll('.ant-tree-checkbox')[2]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + + fireEvent.click(container.querySelectorAll('.ant-tree-node-content-wrapper')[2]); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-primary')); + expect(renderedNames(container)).toEqual(['Jack']); }); it('clearFilters should support params', () => { @@ -2144,28 +2243,34 @@ describe('Table.filter', () => { false, ], ]; - const filter = ({ prefixCls, setSelectedKeys, confirm, clearFilters }) => ( -
- {filterConfig.map(([text, id, param]) => ( - <> - { - setSelectedKeys([text]); - confirm(); - }} - id={`set${id}`} - > - setSelectedKeys - - clearFilters(param)} id={`reset${id}`}> - Reset - - - ))} -
- ); - const wrapper = mount( + let renderSelectedKeys; + const filter = ({ prefixCls, setSelectedKeys, selectedKeys, confirm, clearFilters }) => { + renderSelectedKeys = selectedKeys; + + return ( +
+ {filterConfig.map(([text, id, param]) => ( + <> + { + setSelectedKeys([text]); + confirm(); + }} + id={`set${id}`} + > + setSelectedKeys + + clearFilters(param)} id={`reset${id}`}> + Reset + + + ))} +
+ ); + }; + + const { container } = render( createTable({ columns: [ { @@ -2176,25 +2281,20 @@ describe('Table.filter', () => { }), ); - function getFilterMenu() { - return wrapper.find('FilterDropdown'); - } - // check if renderer well - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - expect(wrapper.find('#customFilter')).toMatchSnapshot(); - expect(getFilterMenu().props().filterState.filteredKeys).toBeFalsy(); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); + expect(container.querySelector('#customFilter')).toMatchSnapshot(); + expect(renderSelectedKeys).toHaveLength(0); - filterConfig.forEach(([text, id, , res1, res2]) => { - wrapper.find(`#set${id}`).simulate('click'); - wrapper.update(); - expect(renderedNames(wrapper)).toEqual([text]); + filterConfig.forEach(([text, id, , matchNames, visible]) => { + fireEvent.click(container.querySelector(`#set${id}`)); + expect(renderedNames(container)).toEqual([text]); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); - wrapper.find(`#reset${id}`).simulate('click'); - wrapper.update(); - expect(renderedNames(wrapper)).toEqual(res1); - expect(wrapper.find('Dropdown').first().props().visible).toBe(res2); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); + fireEvent.click(container.querySelector(`#reset${id}`)); + expect(renderedNames(container)).toEqual(matchNames); + + expect(container.querySelector('.ant-dropdown-open'))[visible ? 'toBeTruthy' : 'toBeFalsy'](); }); }); @@ -2209,26 +2309,23 @@ describe('Table.filter', () => { defaultFilteredValue: ['girl'], }; - let wrapper = mount( + const { container, rerender } = render( createTable({ columns: [columnFilter], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - wrapper - .find(Checkbox) - .find('input') - .simulate('change', { target: { checked: true } }); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(5); - wrapper.find('button.ant-btn-link').simulate('click', nativeEvent); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(0); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); - wrapper = mount( + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5); + fireEvent.click(container.querySelector('button.ant-btn-link'), nativeEvent); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(0); + + rerender( createTable({ columns: [ { @@ -2238,19 +2335,16 @@ describe('Table.filter', () => { ], }), ); - wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent); + + fireEvent.click(container.querySelector('span.ant-dropdown-trigger'), nativeEvent); act(() => { jest.runAllTimers(); - wrapper.update(); }); - wrapper - .find(Checkbox) - .find('input') - .simulate('change', { target: { checked: true } }); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(5); - wrapper.find('button.ant-btn-link').simulate('click', nativeEvent); - expect(wrapper.find('.ant-tree-checkbox-checked').length).toBe(1); - expect(wrapper.find('.ant-tree-checkbox-checked+span').text()).toBe('Girl'); + fireEvent.click(container.querySelector('.ant-table-filter-dropdown-checkall')); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(5); + fireEvent.click(container.querySelector('button.ant-btn-link'), nativeEvent); + expect(container.querySelectorAll('.ant-tree-checkbox-checked').length).toBe(1); + expect(container.querySelector('.ant-tree-checkbox-checked+span').textContent).toBe('Girl'); }); it('filteredKeys should all be controlled or not controlled', () => { @@ -2306,8 +2400,9 @@ describe('Table.filter', () => { expect(errorSpy).not.toBeCalled(); }); + // Warning: An update to Item ran an effect, but was not wrapped in act(...). it('can reset if filterResetToDefaultFilteredValue and filter is changing', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -2322,36 +2417,37 @@ describe('Table.filter', () => { ], }), ); - expect(wrapper.find('tbody tr').length).toBe(1); - expect(wrapper.find('tbody tr').text()).toBe('Jack'); + expect(container.querySelectorAll('tbody tr').length).toBe(1); + expect(container.querySelector('tbody tr').textContent).toBe('Jack'); // open filter - wrapper.find('span.ant-dropdown-trigger').first().simulate('click'); + + fireEvent.click(container.querySelector('span.ant-dropdown-trigger')); expect( - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').props().disabled, + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled, ).toBeTruthy(); - expect(wrapper.find('li.ant-dropdown-menu-item').at(0).text()).toBe('Jack'); - expect(wrapper.find('li.ant-dropdown-menu-item').at(1).text()).toBe('Lucy'); + expect(container.querySelectorAll('li.ant-dropdown-menu-item')[0].textContent).toBe('Jack'); + expect(container.querySelectorAll('li.ant-dropdown-menu-item')[1].textContent).toBe('Lucy'); // deselect default - wrapper.find('li.ant-dropdown-menu-item').at(0).simulate('click'); + fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[0]); expect( - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').props().disabled, + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled, ).toBeFalsy(); // select other one - wrapper.find('li.ant-dropdown-menu-item').at(1).simulate('click'); + fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[1]); expect( - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').props().disabled, + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled, ).toBeFalsy(); // deselect other one - wrapper.find('li.ant-dropdown-menu-item').at(1).simulate('click'); + fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[1]); expect( - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').props().disabled, + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled, ).toBeFalsy(); // select default - wrapper.find('li.ant-dropdown-menu-item').at(0).simulate('click'); + fireEvent.click(container.querySelectorAll('li.ant-dropdown-menu-item')[0]); expect( - wrapper.find('.ant-table-filter-dropdown-btns .ant-btn-link').props().disabled, + container.querySelector('.ant-table-filter-dropdown-btns .ant-btn-link').disabled, ).toBeTruthy(); }); }); diff --git a/components/table/__tests__/Table.order.test.js b/components/table/__tests__/Table.order.test.js index 9a8b60ebc0..485475b018 100644 --- a/components/table/__tests__/Table.order.test.js +++ b/components/table/__tests__/Table.order.test.js @@ -1,5 +1,5 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { render } from '../../../tests/utils'; import Table from '..'; import { resetWarned } from '../../_util/warning'; @@ -37,7 +37,7 @@ describe('Table.order', () => { it('warning if duplicated SELECTION_COLUMN', () => { resetWarned(); - mount( + render( createTable({ columns: [Table.SELECTION_COLUMN, Table.SELECTION_COLUMN], rowSelection: {}, @@ -53,7 +53,7 @@ describe('Table.order', () => { }); it('auto fixed', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -69,8 +69,9 @@ describe('Table.order', () => { }), ); - expect(wrapper.find('tr').last().find('td')).toHaveLength(3); - expect(wrapper.find('tr').last().find('td.ant-table-cell-fix-left')).toHaveLength(2); - wrapper.unmount(); + expect(container.querySelectorAll('tr')[1].querySelectorAll('td')).toHaveLength(3); + expect( + container.querySelectorAll('tr')[1].querySelectorAll('td.ant-table-cell-fix-left'), + ).toHaveLength(2); }); }); diff --git a/components/table/__tests__/Table.pagination.test.js b/components/table/__tests__/Table.pagination.test.js index a49ef65dd3..53aa0fbc04 100644 --- a/components/table/__tests__/Table.pagination.test.js +++ b/components/table/__tests__/Table.pagination.test.js @@ -1,8 +1,9 @@ /* eslint-disable import/first */ jest.mock('../../_util/scrollTo'); -import { mount } from 'enzyme'; import React from 'react'; +import { act } from 'react-dom/test-utils'; +import { render, fireEvent } from '../../../tests/utils'; import Table from '..'; import scrollTo from '../../_util/scrollTo'; import { resetWarned } from '../../_util/warning'; @@ -33,54 +34,64 @@ describe('Table.pagination', () => { return
; } - function renderedNames(wrapper) { - return wrapper.find('BodyRow').map(row => row.props().record.name); + function renderedNames(contain) { + // --- reserve comment for code review --- + // return wrapper.find('BodyRow').map(row => row.props().record.name); + const namesList = []; + contain + .querySelector('.ant-table-tbody') + .querySelectorAll('tr') + .forEach(tr => { + namesList.push(tr.querySelector('td').textContent); + }); + return namesList; } it('renders pagination correctly', () => { - const wrapper = mount(createTable()); - expect(wrapper.render()).toMatchSnapshot(); + const { asFragment } = render(createTable()); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('not crash when pageSize is undefined', () => { expect(() => { - mount(createTable({ pagination: { pageSize: undefined } })); + render(createTable({ pagination: { pageSize: undefined } })); }).not.toThrow(); }); it('should not show pager if pagination.hideOnSinglePage is true and only 1 page', () => { - const wrapper = mount(createTable({ pagination: { pageSize: 3, hideOnSinglePage: true } })); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { pageSize: 3, hideOnSinglePage: false } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: true } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination: { pageSize: 4, hideOnSinglePage: false } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: true } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination: { pageSize: 5, hideOnSinglePage: false } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); + const { container, rerender } = render( + createTable({ pagination: { pageSize: 3, hideOnSinglePage: true } }), + ); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + rerender(createTable({ pagination: { pageSize: 3, hideOnSinglePage: false } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + rerender(createTable({ pagination: { pageSize: 4, hideOnSinglePage: true } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + rerender(createTable({ pagination: { pageSize: 4, hideOnSinglePage: false } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + rerender(createTable({ pagination: { pageSize: 5, hideOnSinglePage: true } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + rerender(createTable({ pagination: { pageSize: 5, hideOnSinglePage: false } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); }); it('should use pageSize when defaultPageSize and pageSize are both specified', () => { - const wrapper = mount(createTable({ pagination: { pageSize: 3, defaultPageSize: 4 } })); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); + const { container } = render(createTable({ pagination: { pageSize: 3, defaultPageSize: 4 } })); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2); }); it('paginate data', () => { - const wrapper = mount(createTable()); + const { container } = render(createTable()); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy']); - wrapper.find('Pager').last().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy']); + fireEvent.click(container.querySelector('.ant-pagination-next')); + expect(renderedNames(container)).toEqual(['Tom', 'Jerry']); }); it('repaginates when pageSize change', () => { - const wrapper = mount(createTable()); - - wrapper.setProps({ pagination: { pageSize: 1 } }); - expect(renderedNames(wrapper)).toEqual(['Jack']); + const { container, rerender } = render(createTable()); + rerender(createTable({ pagination: { pageSize: 1 } })); + expect(renderedNames(container)).toEqual(['Jack']); }); // https://github.com/ant-design/ant-design/issues/33487 @@ -100,32 +111,32 @@ describe('Table.pagination', () => { /> ); } - const wrapper = mount(); - expect(wrapper.render()).toMatchSnapshot(); + const { asFragment } = render(); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('should accept pagination size', () => { - const wrapper = mount( + const { container } = render( createTable({ pagination: { size: 'small' }, }), ); - expect(wrapper.find('.ant-pagination.ant-pagination-mini')).toHaveLength(1); + expect(container.querySelectorAll('.ant-pagination.ant-pagination-mini')).toHaveLength(1); }); it('should scroll to first row when page change', () => { scrollTo.mockReturnValue(null); - const wrapper = mount( + const { container } = render( createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }), ); expect(scrollTo).toHaveBeenCalledTimes(0); - wrapper.find('Pager').last().simulate('click'); + fireEvent.click(container.querySelector('.ant-pagination-next')); expect(scrollTo).toHaveBeenCalledTimes(1); - wrapper.find('.ant-select-selector').simulate('mousedown'); - wrapper.find('.ant-select-item').last().simulate('click'); + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + fireEvent.click(container.querySelectorAll('.ant-select-item')[1]); expect(scrollTo).toHaveBeenCalledTimes(2); }); @@ -134,24 +145,23 @@ describe('Table.pagination', () => { expect(top).toBe(0); expect(getContainer().className).toBe('ant-table-body'); }); - const wrapper = mount( + const { container } = render( createTable({ scroll: { y: 20 }, pagination: { showSizeChanger: true, pageSize: 2 } }), ); - wrapper.find('Pager').last().simulate('click'); + fireEvent.click(container.querySelector('.ant-pagination-next')); }); it('fires change event', () => { const handleChange = jest.fn(); const handlePaginationChange = jest.fn(); const noop = () => {}; - const wrapper = mount( + const { container } = render( createTable({ pagination: { ...pagination, onChange: handlePaginationChange, onShowSizeChange: noop }, onChange: handleChange, }), ); - - wrapper.find('Pager').last().simulate('click'); + fireEvent.click(container.querySelector('.ant-pagination-next')); expect(handleChange).toHaveBeenCalledWith( { @@ -178,50 +188,56 @@ describe('Table.pagination', () => { // https://github.com/ant-design/ant-design/issues/4532 // https://codepen.io/afc163/pen/dVeNoP?editors=001 it('should have pager when change pagination from false to undefined', () => { - const wrapper = mount(createTable({ pagination: false })); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination: undefined }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - expect(wrapper.find('.ant-pagination-item-active')).toHaveLength(1); + const { container, rerender } = render(createTable({ pagination: false })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + + rerender(createTable({ pagination: undefined })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + expect(container.querySelectorAll('.ant-pagination-item-active')).toHaveLength(1); }); // https://github.com/ant-design/ant-design/issues/4532 // https://codepen.io/afc163/pen/pWVRJV?editors=001 it('should display pagination as prop pagination change between true and false', () => { - const wrapper = mount(createTable()); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); - wrapper.setProps({ pagination: false }); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination }); - wrapper.update(); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); - wrapper.find('.ant-pagination-item-2').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); - wrapper.setProps({ pagination: false }); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination: undefined }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(2); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Jerry']); + const { container, rerender } = render(createTable()); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2); + + rerender(createTable({ pagination: false })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + + rerender(createTable({ pagination })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2); + fireEvent.click(container.querySelector('.ant-pagination-item-2')); + expect(renderedNames(container)).toEqual(['Tom', 'Jerry']); + + rerender(createTable({ pagination: false })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + + rerender(createTable({ pagination: undefined })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(2); + expect(renderedNames(container)).toEqual(['Tom', 'Jerry']); }); // https://github.com/ant-design/ant-design/issues/5259 it('change to correct page when data source changes', () => { - const wrapper = mount(createTable({ pagination: { pageSize: 1 } })); - wrapper.find('.ant-pagination-item-3').simulate('click'); - wrapper.setProps({ dataSource: [data[0]] }); - expect(wrapper.find('.ant-pagination-item-1').hasClass('ant-pagination-item-active')).toBe( - true, - ); + const { container, rerender } = render(createTable({ pagination: { pageSize: 1 } })); + fireEvent.click(container.querySelector('.ant-pagination-item-3')); + rerender(createTable({ dataSource: [data[0]] })); + expect( + container + .querySelector('.ant-pagination-item-1') + .className.includes('ant-pagination-item-active'), + ).toBe(true); }); // https://github.com/ant-design/ant-design/issues/24913 it('should called onChange when pageSize change', () => { const onChange = jest.fn(); const onShowSizeChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { current: 1, @@ -232,28 +248,34 @@ describe('Table.pagination', () => { }, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - expect(wrapper.find('.ant-select-item-option').length).toBe(4); - wrapper.find('.ant-select-item-option').at(1).simulate('click'); + + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]); expect(onChange).toHaveBeenCalledWith(1, 20); }); it('should not change page when pagination current is specified', () => { - const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } })); - expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe( - true, - ); - wrapper.find('.ant-pagination-item-3').simulate('click'); - expect(wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active')).toBe( - true, - ); + const { container } = render(createTable({ pagination: { current: 2, pageSize: 1 } })); + + expect( + container + .querySelector('.ant-pagination-item-2') + .className.includes('ant-pagination-item-active'), + ).toBe(true); + fireEvent.click(container.querySelector('.ant-pagination-item-3')); + expect( + container + .querySelector('.ant-pagination-item-2') + .className.includes('ant-pagination-item-active'), + ).toBe(true); }); // https://github.com/ant-design/ant-design/issues/29175 it('should change page to max page count when pageSize change without pagination.total', () => { const onChange = jest.fn(); const onShowSizeChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { current: 10, @@ -264,10 +286,13 @@ describe('Table.pagination', () => { dataSource: longData, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - expect(wrapper.find('.ant-select-item-option').length).toBe(4); - wrapper.find('.ant-select-item-option').at(1).simulate('click'); - const newPageSize = parseInt(wrapper.find('.ant-select-item-option').at(1).text(), 10); + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]); + const newPageSize = parseInt( + container.querySelectorAll('.ant-select-item-option')[1].textContent, + 10, + ); expect(onChange).toHaveBeenCalledWith(longData.length / newPageSize, 20); }); @@ -275,7 +300,7 @@ describe('Table.pagination', () => { const onChange = jest.fn(); const onShowSizeChange = jest.fn(); const total = 20000; - const wrapper = mount( + const { container } = render( createTable({ pagination: { current: total / 10, @@ -287,10 +312,14 @@ describe('Table.pagination', () => { dataSource: longData, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - expect(wrapper.find('.ant-select-item-option').length).toBe(4); - wrapper.find('.ant-select-item-option').at(1).simulate('click'); - const newPageSize = parseInt(wrapper.find('.ant-select-item-option').at(1).text(), 10); + + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]); + const newPageSize = parseInt( + container.querySelectorAll('.ant-select-item-option')[1].textContent, + 10, + ); expect(onChange).toHaveBeenCalledWith(total / newPageSize, 20); }); @@ -298,7 +327,7 @@ describe('Table.pagination', () => { it('should not change page to max page if current is not greater max page when pageSize change', () => { const onChange = jest.fn(); const onShowSizeChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { current: 4, @@ -309,15 +338,15 @@ describe('Table.pagination', () => { dataSource: longData, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - expect(wrapper.find('.ant-select-item-option').length).toBe(4); - wrapper.find('.ant-select-item-option').at(1).simulate('click'); + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[1]); expect(onChange).toHaveBeenCalledWith(4, 20); }); it('should reset current to max page when data length is cut', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container, rerender } = render( createTable({ pagination: { current: 10, @@ -327,30 +356,59 @@ describe('Table.pagination', () => { dataSource: longData, }), ); - expect(wrapper.find('.ant-pagination-item-active').text()).toBe('10'); - wrapper.setProps({ - dataSource: longData.filter(item => item.key < 60), - }); - expect(wrapper.find('.ant-pagination-item-active').text()).toBe('6'); + expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('10'); + rerender( + createTable({ + pagination: { + current: 10, + pageSize: 10, + onChange, + }, + dataSource: longData.filter(item => item.key < 60), + }), + ); + + expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('6'); }); it('specify the position of pagination', () => { - const wrapper = mount(createTable({ pagination: { position: ['topLeft'] } })); - expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2); - expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { position: ['bottomRight'] } }); - expect(wrapper.find('.ant-spin-container').children()).toHaveLength(2); - expect(wrapper.find('.ant-spin-container').childAt(1).find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { position: ['topLeft', 'bottomRight'] } }); - expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3); - expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1); - expect(wrapper.find('.ant-spin-container').childAt(2).find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { position: ['none', 'none'] } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(0); - wrapper.setProps({ pagination: { position: ['invalid'] } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); - wrapper.setProps({ pagination: { position: ['invalid', 'invalid'] } }); - expect(wrapper.find('.ant-pagination')).toHaveLength(1); + const { container, rerender } = render(createTable({ pagination: { position: ['topLeft'] } })); + expect(container.querySelector('.ant-spin-container').children).toHaveLength(2); + expect( + container + .querySelector('.ant-spin-container') + .children[0].className.includes('ant-pagination'), + ).toBe(true); + + rerender(createTable({ pagination: { position: ['bottomRight'] } })); + expect(container.querySelector('.ant-spin-container').children).toHaveLength(2); + expect( + container + .querySelector('.ant-spin-container') + .children[1].className.includes('ant-pagination'), + ).toBe(true); + + rerender(createTable({ pagination: { position: ['topLeft', 'bottomRight'] } })); + expect(container.querySelector('.ant-spin-container').children).toHaveLength(3); + expect( + container + .querySelector('.ant-spin-container') + .children[0].className.includes('ant-pagination'), + ).toBe(true); + expect( + container + .querySelector('.ant-spin-container') + .children[2].className.includes('ant-pagination'), + ).toBe(true); + + rerender(createTable({ pagination: { position: ['none', 'none'] } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(0); + + rerender(createTable({ pagination: { position: ['invalid'] } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); + + rerender(createTable({ pagination: { position: ['invalid', 'invalid'] } })); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(1); }); /** @@ -358,15 +416,15 @@ describe('Table.pagination', () => { * to `pagination`, since they misunderstand that `pagination` can accept a boolean value. */ it('Accepts pagination as true', () => { - const wrapper = mount(createTable({ pagination: true })); - expect(wrapper.render()).toMatchSnapshot(); + const { asFragment } = render(createTable({ pagination: true })); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('ajax render should keep display by the dataSource', () => { const onChange = jest.fn(); const onPaginationChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ onChange, pagination: { @@ -376,9 +434,11 @@ describe('Table.pagination', () => { }), ); - expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length); + expect(container.querySelectorAll('.ant-table-tbody tr.ant-table-row')).toHaveLength( + data.length, + ); - wrapper.find('.ant-pagination .ant-pagination-item-2').simulate('click'); + fireEvent.click(container.querySelector('.ant-pagination .ant-pagination-item-2')); expect(onChange.mock.calls[0][0].current).toBe(2); expect(onChange).toHaveBeenCalledWith( { current: 2, pageSize: 10, total: 200 }, @@ -396,14 +456,16 @@ describe('Table.pagination', () => { ); expect(onPaginationChange).toHaveBeenCalledWith(2, 10); - expect(wrapper.find('.ant-table-tbody tr.ant-table-row')).toHaveLength(data.length); + expect(container.querySelectorAll('.ant-table-tbody tr.ant-table-row')).toHaveLength( + data.length, + ); }); it('onShowSizeChange should trigger once', () => { jest.useFakeTimers(); const onShowSizeChange = jest.fn(); const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { total: 200, @@ -413,11 +475,14 @@ describe('Table.pagination', () => { onChange, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - jest.runAllTimers(); - const dropdownWrapper = wrapper.find('Trigger'); - expect(wrapper.find('.ant-select-item-option').length).toBe(4); - dropdownWrapper.find('.ant-select-item-option').at(3).simulate('click'); + + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + // resolve Warning: An update to Align ran an effect, but was not wrapped in act(...) + act(() => { + jest.runAllTimers(); + }); + expect(container.querySelectorAll('.ant-select-item-option').length).toBe(4); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[3]); expect(onShowSizeChange).toHaveBeenCalledTimes(1); expect(onShowSizeChange).toHaveBeenLastCalledWith(1, 100); expect(onChange).toHaveBeenCalled(); @@ -425,44 +490,47 @@ describe('Table.pagination', () => { }); it('should support current in pagination', () => { - const wrapper = mount(createTable({ pagination: { current: 2, pageSize: 1 } })); - expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2'); + const { container } = render(createTable({ pagination: { current: 2, pageSize: 1 } })); + expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2'); }); it('should support defaultCurrent in pagination', () => { - const wrapper = mount(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } })); - expect(wrapper.find('.ant-pagination-item-active').text()).toBe('2'); + const { container } = render(createTable({ pagination: { defaultCurrent: 2, pageSize: 1 } })); + expect(container.querySelector('.ant-pagination-item-active').textContent).toBe('2'); }); it('should support defaultPageSize in pagination', () => { - const wrapper = mount(createTable({ pagination: { defaultPageSize: 1 } })); - expect(wrapper.find('.ant-pagination-item')).toHaveLength(4); + const { container } = render(createTable({ pagination: { defaultPageSize: 1 } })); + expect(container.querySelectorAll('.ant-pagination-item')).toHaveLength(4); }); // https://github.com/ant-design/ant-design/issues/19957 it('ajax should work with pagination', () => { - const wrapper = mount(createTable({ pagination: { total: 100 } })); - wrapper.find('.ant-pagination-item-2').simulate('click'); - wrapper.setProps({ pagination: { current: 2, total: 100 } }); + const { container, rerender } = render(createTable({ pagination: { total: 100 } })); + + fireEvent.click(container.querySelector('.ant-pagination-item-2')); + rerender(createTable({ pagination: { current: 2, total: 100 } })); expect( - wrapper.find('.ant-pagination-item-2').hasClass('ant-pagination-item-active'), + container + .querySelector('.ant-pagination-item-2') + .className.includes('ant-pagination-item-active'), ).toBeTruthy(); }); it('pagination should ignore invalidate total', () => { - const wrapper = mount(createTable({ pagination: { total: null } })); - expect(wrapper.find('.ant-pagination-item-1').length).toBeTruthy(); + const { container } = render(createTable({ pagination: { total: null } })); + expect(container.querySelectorAll('.ant-pagination-item-1').length).toBeTruthy(); }); it('renders pagination topLeft and bottomRight', () => { - const wrapper = mount(createTable({ pagination: ['topLeft', 'bottomRight'] })); - expect(wrapper.render()).toMatchSnapshot(); + const { asFragment } = render(createTable({ pagination: ['topLeft', 'bottomRight'] })); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('should call onChange when change pagination size', () => { const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { total: 200, @@ -471,10 +539,8 @@ describe('Table.pagination', () => { onChange, }), ); - wrapper.find('.ant-select-selector').simulate('mousedown'); - const dropdownWrapper = wrapper.find('Trigger'); - dropdownWrapper.find('.ant-select-item-option').at(2).simulate('click'); - + fireEvent.mouseDown(container.querySelector('.ant-select-selector')); + fireEvent.click(container.querySelectorAll('.ant-select-item-option')[2]); expect(onChange).toBeCalledTimes(1); }); @@ -490,14 +556,14 @@ describe('Table.pagination', () => { }); } - const wrapper = mount( + const { container } = render( createTable({ dataSource: dynamicData, pagination: { total: 100, pageSize: 10, current: 2 }, }), ); - expect(wrapper.find('tbody tr')).toHaveLength(5); + expect(container.querySelectorAll('tbody tr')).toHaveLength(5); expect(errorSpy).toHaveBeenCalledWith( 'Warning: [antd: Table] `dataSource` length is less than `pagination.total` but large than `pagination.pageSize`. Please make sure your config correct data with async mode.', @@ -512,17 +578,19 @@ describe('Table.pagination', () => { current: total, position: ['topLeft', 'bottomLeft'], }; - const wrapper = mount( + const { container, rerender } = render( createTable({ pagination: paginationProp, }), ); + rerender( + createTable({ + dataSource: data.slice(total - 1), + pagination: { ...paginationProp, total: total - 1 }, + }), + ); - wrapper.setProps({ - dataSource: data.slice(total - 1), - pagination: { ...paginationProp, total: total - 1 }, - }); - expect(wrapper.find('.ant-pagination')).toHaveLength(2); + expect(container.querySelectorAll('.ant-pagination')).toHaveLength(2); }); it('showTotal should hide when removed', () => { @@ -549,16 +617,16 @@ describe('Table.pagination', () => { ); }; - const wrapper = mount(); - expect(wrapper.find('.ant-pagination-total-text').text()).toEqual('>200<'); + const { container } = render(); + expect(container.querySelector('.ant-pagination-total-text').textContent).toEqual('>200<'); // Should hide - wrapper.find('.ant-pagination-item-2').simulate('click'); - expect(wrapper.find('.ant-pagination-total-text')).toHaveLength(0); + fireEvent.click(container.querySelector('.ant-pagination-item-2')); + expect(container.querySelectorAll('.ant-pagination-total-text')).toHaveLength(0); }); it('should preserve table pagination className', () => { - const wrapper = mount( + const { container } = render(
{ }} />, ); - expect(wrapper.find('.ant-pagination').prop('className')).toEqual( + expect(container.querySelector('.ant-pagination').className).toEqual( 'ant-pagination ant-table-pagination ant-table-pagination-right pagination', ); }); diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js index d813c2ff4b..ed1623ec3f 100644 --- a/components/table/__tests__/Table.sorter.test.js +++ b/components/table/__tests__/Table.sorter.test.js @@ -1,6 +1,6 @@ /* eslint-disable react/no-multi-comp */ import React from 'react'; -import { render, mount } from 'enzyme'; +import { render, fireEvent, act } from '../../../tests/utils'; import Table from '..'; describe('Table.sorter', () => { @@ -20,7 +20,7 @@ describe('Table.sorter', () => { { key: 3, name: 'Jerry' }, ]; - function createTable(tableProps, columnProps = {}) { + function createTable(tableProps = {}, columnProps = {}) { return (
{ ); } - function renderedNames(wrapper) { - return wrapper.find('BodyRow').map(row => row.props().record.name); + function renderedNames(contain) { + const namesList = []; + contain + .querySelector('.ant-table-tbody') + .querySelectorAll('tr') + .forEach(tr => { + namesList.push(tr.querySelector('td').textContent); + }); + return namesList; } it('renders sorter icon correctly', () => { - const wrapper = render(createTable()); - expect(wrapper.find('thead')).toMatchSnapshot(); + const { container } = render(createTable()); + expect(container.querySelector('thead')).toMatchSnapshot(); }); it('default sort order ascend', () => { - const wrapper = mount( + const { container } = render( createTable( {}, { @@ -55,11 +62,11 @@ describe('Table.sorter', () => { ), ); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); }); it('default sort order descend', () => { - const wrapper = mount( + const { container } = render( createTable( {}, { @@ -68,14 +75,12 @@ describe('Table.sorter', () => { ), ); - const getNameColumn = () => wrapper.find('th').at(0); - - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(container.querySelector('th').getAttribute('aria-sort')).toEqual('descending'); }); it('should change aria-sort when default sort order is set to descend', () => { - const wrapper = mount( + const { container } = render( createTable( { sortDirections: ['descend', 'ascend'], @@ -86,63 +91,62 @@ describe('Table.sorter', () => { ), ); - const getNameColumn = () => wrapper.find('th').at(0); + const getNameColumn = () => container.querySelector('th'); // Test that it cycles through the order of sortDirections - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); it('sort records', () => { - const wrapper = mount(createTable()); - - const getNameColumn = () => wrapper.find('th').at(0); + const { container } = render(createTable()); + const getNameColumn = () => container.querySelector('th'); // first assert default state - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); // ascend - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); // descend - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); }); it('sort records with keydown', () => { - const wrapper = mount(createTable()); + const { container } = render(createTable()); // ascend - wrapper.find('.ant-table-column-sorters').simulate('keydown', { keyCode: 13 }); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 }); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); // descend - wrapper.find('.ant-table-column-sorters').simulate('keydown', { keyCode: 13 }); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + fireEvent.keyDown(container.querySelector('.ant-table-column-sorters'), { keyCode: 13 }); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); }); describe('can be controlled by sortOrder', () => { it('single', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [{ ...column, sortOrder: 'ascend' }], }), ); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); }); it('invalidate mix with single & multiple sorters', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -163,13 +167,13 @@ describe('Table.sorter', () => { }), ); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); }); }); it('provides sortOrder in the sorterFn', () => { let actualSortOrder; - mount( + render( createTable( {}, { @@ -185,39 +189,40 @@ describe('Table.sorter', () => { }); it('can update column sortOrder', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ columns: [column], }), ); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - wrapper.setProps({ - columns: [{ ...column, sortOrder: 'ascend' }], - }); - wrapper.update(); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + rerender( + createTable({ + columns: [{ ...column, sortOrder: 'ascend' }], + }), + ); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); }); it('fires change event', () => { const handleChange = jest.fn(); - const wrapper = mount(createTable({ onChange: handleChange })); + const { container } = render(createTable({ onChange: handleChange })); // ascent - wrapper.find('.ant-table-column-sorters').simulate('click'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); const sorter1 = handleChange.mock.calls[0][2]; expect(sorter1.column.dataIndex).toBe('name'); expect(sorter1.order).toBe('ascend'); expect(sorter1.field).toBe('name'); expect(sorter1.columnKey).toBe('name'); - wrapper.find('.ant-table-column-sorters').simulate('click'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); const sorter2 = handleChange.mock.calls[1][2]; expect(sorter2.column.dataIndex).toBe('name'); expect(sorter2.order).toBe('descend'); expect(sorter2.field).toBe('name'); expect(sorter2.columnKey).toBe('name'); - wrapper.find('.ant-table-column-sorters').simulate('click'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); const sorter3 = handleChange.mock.calls[2][2]; expect(sorter3.column).toBe(undefined); expect(sorter3.order).toBe(undefined); @@ -228,71 +233,98 @@ describe('Table.sorter', () => { it('hover header show sorter tooltip', () => { // tooltip has delay jest.useFakeTimers(); - const wrapper = mount(createTable({})); + const { container, rerender } = render(createTable()); + // default show sorter tooltip - wrapper.find('.ant-table-column-sorters').simulate('mouseenter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy(); - wrapper.find('.ant-table-column-sorters').simulate('mouseout'); + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); + }); + + expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); // set table props showSorterTooltip is false - wrapper.setProps({ showSorterTooltip: false }); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0); + rerender(createTable({ showSorterTooltip: false })); + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); + }); + expect(container.querySelector('.ant-tooltip-open')).toBeFalsy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); + // set table props showSorterTooltip is false, column showSorterTooltip is true - wrapper.setProps({ - showSorterTooltip: false, - columns: [{ ...column, showSorterTooltip: true }], + rerender( + createTable({ showSorterTooltip: true, columns: [{ ...column, showSorterTooltip: true }] }), + ); + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); }); - wrapper.find('.ant-table-column-sorters').simulate('mouseenter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy(); - wrapper.find('.ant-table-column-sorters').simulate('mouseout'); + expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); + // set table props showSorterTooltip is true, column showSorterTooltip is false - wrapper.setProps({ - showSorterTooltip: true, - columns: [{ ...column, showSorterTooltip: false }], + rerender( + createTable({ + showSorterTooltip: true, + columns: [{ ...column, showSorterTooltip: false }], + }), + ); + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); }); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0); + expect(container.querySelector('.ant-tooltip-open')).toBeFalsy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); }); it('should show correct tooltip when showSorterTooltip is an object', () => { // basically copied from 'hover header show sorter tooltip' jest.useFakeTimers(); - const wrapper = mount( + const { container, rerender } = render( createTable({ showSorterTooltip: { placement: 'bottom', title: 'static title' } }), ); - wrapper.find('.ant-table-column-sorters').simulate('mouseenter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy(); - wrapper.find('.ant-table-column-sorters').simulate('mouseout'); - wrapper.setProps({ showSorterTooltip: false }); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0); - wrapper.setProps({ - showSorterTooltip: false, - columns: [{ ...column, showSorterTooltip: true }], + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); }); - wrapper.find('.ant-table-column-sorters').simulate('mouseenter'); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open').length).toBeTruthy(); - wrapper.find('.ant-table-column-sorters').simulate('mouseout'); - wrapper.setProps({ - showSorterTooltip: true, - columns: [{ ...column, showSorterTooltip: false }], + expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); + + // Root to false + rerender(createTable({ showSorterTooltip: false })); + act(() => { + jest.runAllTimers(); }); - jest.runAllTimers(); - wrapper.update(); - expect(wrapper.find('.ant-tooltip-open')).toHaveLength(0); + expect(container.querySelector('.ant-tooltip-open')).toBeFalsy(); + + // Column to true + rerender( + createTable({ + showSorterTooltip: false, + columns: [{ ...column, showSorterTooltip: true }], + }), + ); + fireEvent.mouseEnter(container.querySelector('.ant-table-column-sorters')); + act(() => { + jest.runAllTimers(); + }); + expect(container.querySelector('.ant-tooltip-open')).toBeTruthy(); + fireEvent.mouseOut(container.querySelector('.ant-table-column-sorters')); + + // Column to false + rerender( + createTable({ + showSorterTooltip: true, + columns: [{ ...column, showSorterTooltip: false }], + }), + ); + act(() => { + jest.runAllTimers(); + }); + expect(container.querySelector('.ant-tooltip-open')).toBeFalsy(); }); it('works with grouping columns in controlled mode', () => { @@ -322,9 +354,9 @@ describe('Table.sorter', () => { { key: 2, name: 'Tom', age: 21 }, { key: 3, name: 'Jerry', age: 22 }, ]; - const wrapper = mount(
); + const { container } = render(
); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); }); // https://github.com/ant-design/ant-design/issues/11246#issuecomment-405009167 @@ -343,12 +375,12 @@ describe('Table.sorter', () => { { key: 2, name: 'Tom', age: 21 }, { key: 3, name: 'Jerry', age: 22 }, ]; - const wrapper = mount(
); - expect(wrapper.find('.custom-title').text()).toEqual(''); - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(wrapper.find('.custom-title').text()).toEqual('ascend'); - wrapper.find('.ant-table-column-sorters').simulate('click'); - expect(wrapper.find('.custom-title').text()).toEqual('descend'); + const { container } = render(
); + expect(container.querySelector('.custom-title').textContent).toEqual(''); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(container.querySelector('.custom-title').textContent).toEqual('ascend'); + fireEvent.click(container.querySelector('.ant-table-column-sorters')); + expect(container.querySelector('.custom-title').textContent).toEqual('descend'); }); // https://github.com/ant-design/ant-design/pull/12264#discussion_r218053034 @@ -371,26 +403,26 @@ describe('Table.sorter', () => { { key: 2, name: 'Tom', age: 21 }, { key: 3, name: 'Jerry', age: 22 }, ]; - const wrapper = mount(
); + const { container } = render(
); - const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0); - const getAgeColumn = () => wrapper.find('.ant-table-column-has-sorters').at(1); - const getNameIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first(); - const getAgeIcon = name => getAgeColumn().find(`.ant-table-column-sorter-${name}`).first(); + const getNameColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[0]; + const getAgeColumn = () => container.querySelectorAll('.ant-table-column-has-sorters')[1]; + const getNameIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`); + const getAgeIcon = name => getAgeColumn().querySelector(`.ant-table-column-sorter-${name}`); // sort name - getNameColumn().simulate('click'); - expect(getNameIcon('up').hasClass('active')).toBeTruthy(); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); - expect(getAgeIcon('up').hasClass('active')).toBeFalsy(); - expect(getAgeColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(getNameIcon('up').className.includes('active')).toBeTruthy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); + expect(getAgeIcon('up').className.includes('active')).toBeFalsy(); + expect(getAgeColumn().getAttribute('aria-sort')).toEqual(null); // sort age - getAgeColumn().simulate('click'); - expect(getNameIcon('up').hasClass('active')).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); - expect(getAgeIcon('up').hasClass('active')).toBeTruthy(); - expect(getAgeColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(getAgeColumn()); + expect(getNameIcon('up').className.includes('active')).toBeFalsy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); + expect(getAgeIcon('up').className.includes('active')).toBeTruthy(); + expect(getAgeColumn().getAttribute('aria-sort')).toEqual('ascending'); }); // https://github.com/ant-design/ant-design/issues/12571 @@ -430,31 +462,31 @@ describe('Table.sorter', () => { } } - const wrapper = mount(); + const { container } = render(); - const getNameColumn = () => wrapper.find('th').at(0); - const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first(); + const getNameColumn = () => container.querySelector('th'); + const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeTruthy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeTruthy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeTruthy(); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeTruthy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); // https://github.com/ant-design/ant-design/issues/12737 @@ -497,31 +529,31 @@ describe('Table.sorter', () => { } } - const wrapper = mount(); + const { container } = render(); - const getNameColumn = () => wrapper.find('th').at(0); - const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first(); + const getNameColumn = () => container.querySelector('th'); + const getIcon = name => getNameColumn().querySelector(`.ant-table-column-sorter-${name}`); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeTruthy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeTruthy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeTruthy(); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeTruthy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // sort name - getNameColumn().simulate('click'); - expect(getIcon('up').hasClass('active')).toBeFalsy(); - expect(getIcon('down').hasClass('active')).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(getIcon('up').className.includes('active')).toBeFalsy(); + expect(getIcon('down').className.includes('active')).toBeFalsy(); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); // https://github.com/ant-design/ant-design/issues/12870 @@ -565,96 +597,96 @@ describe('Table.sorter', () => { } } - const wrapper = mount(); - const getNameColumn = () => wrapper.find('th').at(0); + const { container } = render(); + const getNameColumn = () => container.querySelector('th'); expect( - getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'), ).toBeFalsy(); expect( - getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'), ).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); // sort name - getNameColumn().simulate('click'); + fireEvent.click(getNameColumn()); expect( - getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'), ).toBeTruthy(); expect( - getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'), ).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); // sort name - getNameColumn().simulate('click'); + fireEvent.click(getNameColumn()); expect( - getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'), ).toBeFalsy(); expect( - getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'), ).toBeTruthy(); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // sort name - getNameColumn().simulate('click'); + fireEvent.click(getNameColumn()); expect( - getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-up').className.includes('active'), ).toBeFalsy(); expect( - getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'), + getNameColumn().querySelector('.ant-table-column-sorter-down').className.includes('active'), ).toBeFalsy(); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); it('should first sort by descend, then ascend, then cancel sort', () => { - const wrapper = mount( + const { container } = render( createTable({ sortDirections: ['descend', 'ascend'], }), ); - const getNameColumn = () => wrapper.find('th').at(0); + const getNameColumn = () => container.querySelector('th'); // descend - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // ascend - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); // cancel sort - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); it('should first sort by descend, then cancel sort', () => { - const wrapper = mount( + const { container } = render( createTable({ sortDirections: ['descend'], }), ); - const getNameColumn = () => wrapper.find('th').at(0); + const getNameColumn = () => container.querySelector('th'); // default - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); // descend - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // cancel sort - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); it('should first sort by descend, then cancel sort. (column prop)', () => { - const wrapper = mount( + const { container } = render( createTable( {}, { @@ -663,27 +695,27 @@ describe('Table.sorter', () => { ), ); - const getNameColumn = () => wrapper.find('th').at(0); + const getNameColumn = () => container.querySelector('th'); // default - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); // descend - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual('descending'); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('descending'); // cancel sort - getNameColumn().simulate('click'); - expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + fireEvent.click(getNameColumn()); + expect(renderedNames(container)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); }); it('pagination back', () => { const onPageChange = jest.fn(); const onChange = jest.fn(); - const wrapper = mount( + const { container } = render( createTable({ pagination: { pageSize: 2, @@ -694,27 +726,27 @@ describe('Table.sorter', () => { }), ); - const getNameColumn = () => wrapper.find('th').at(0); + const getNameColumn = () => container.querySelector('th'); - expect(getNameColumn().prop('aria-sort')).toEqual(undefined); + expect(getNameColumn().getAttribute('aria-sort')).toEqual(null); - getNameColumn().simulate('click'); + fireEvent.click(getNameColumn()); expect(onChange.mock.calls[0][0].current).toBe(2); expect(onPageChange).not.toHaveBeenCalled(); - expect(getNameColumn().prop('aria-sort')).toEqual('ascending'); + expect(getNameColumn().getAttribute('aria-sort')).toEqual('ascending'); }); it('should support onHeaderCell in sort column', () => { const onClick = jest.fn(); - const wrapper = mount( + const { container } = render(
({ onClick }), sorter: true }]} />, ); - wrapper.find('th').simulate('click'); + fireEvent.click(container.querySelector('th')); expect(onClick).toHaveBeenCalled(); }); it('could sort data with children', () => { - const wrapper = mount( + const { container } = render( createTable( { defaultExpandAllRows: true, @@ -755,7 +787,7 @@ describe('Table.sorter', () => { ), ); - expect(renderedNames(wrapper)).toEqual(['Brown', 'Green', 'Mike', 'Alex', 'Petter', 'Zoe']); + expect(renderedNames(container)).toEqual(['Brown', 'Green', 'Mike', 'Alex', 'Petter', 'Zoe']); }); // https://github.com/ant-design/ant-design/issues/19443 @@ -774,22 +806,22 @@ describe('Table.sorter', () => { } } expect(() => { - mount(); + render(); }).not.toThrow(); }); it('should support defaultOrder in Column', () => { - const wrapper = mount( + const { asFragment } = render(
, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); // https://github.com/ant-design/ant-design/issues/20096 it('invalidate sorter should not display sorter button', () => { - const wrapper = mount( + const { container } = render( { />, ); - expect(wrapper.find('.ant-table-column-sorter-inner')).toHaveLength(0); + expect(container.querySelectorAll('.ant-table-column-sorter-inner')).toHaveLength(0); }); // https://github.com/ant-design/ant-design/issues/21193 it('table with sugar column', () => { - const wrapper = mount( + const { container } = render(
{
, ); - wrapper.find('th').first().simulate('click'); + fireEvent.click(container.querySelector('th')); - expect(wrapper.find('th.ant-table-column-sort')).toHaveLength(1); + expect(container.querySelectorAll('th.ant-table-column-sort')).toHaveLength(1); }); it('surger should support sorterOrder', () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.find('.ant-table-column-sorter-up').last().hasClass('active')).toBeTruthy(); - expect(wrapper.find('.ant-table-column-sorter-down').last().hasClass('active')).toBeFalsy(); + expect( + container.querySelector('.ant-table-column-sorter-up').className.includes('active'), + ).toBeTruthy(); + expect( + container.querySelector('.ant-table-column-sorter-down').className.includes('active'), + ).toBeFalsy(); }); it('controlled multiple group', () => { @@ -888,23 +924,19 @@ describe('Table.sorter', () => { }, ]; - const wrapper = mount(); - wrapper.update(); + const { container } = render(
); + expect( - wrapper - .find('.ant-table-column-sorter-full') - .first() - .find('.ant-table-column-sorter-up') - .first() - .hasClass('active'), + container + .querySelectorAll('.ant-table-column-sorter-full')[0] + .querySelector('.ant-table-column-sorter-up') + .className.includes('active'), ).toBeTruthy(); expect( - wrapper - .find('.ant-table-column-sorter-full') - .last() - .find('.ant-table-column-sorter-down') - .first() - .hasClass('active'), + container + .querySelectorAll('.ant-table-column-sorter-full')[1] + .querySelector('.ant-table-column-sorter-down') + .className.includes('active'), ).toBeTruthy(); }); @@ -933,10 +965,12 @@ describe('Table.sorter', () => { ]; const onChange = jest.fn(); - const wrapper = mount(
); + const { container } = render( +
, + ); function clickToMatchExpect(index, sorter) { - wrapper.find('.ant-table-column-sorters').at(index).simulate('click'); + fireEvent.click(container.querySelectorAll('.ant-table-column-sorters')[index]); expect(onChange).toHaveBeenCalledWith( expect.anything(), diff --git a/components/table/__tests__/Table.test.js b/components/table/__tests__/Table.test.js index 789fd99210..c01015869e 100644 --- a/components/table/__tests__/Table.test.js +++ b/components/table/__tests__/Table.test.js @@ -1,9 +1,8 @@ import React from 'react'; -import { mount } from 'enzyme'; import Table from '..'; import mountTest from '../../../tests/shared/mountTest'; import rtlTest from '../../../tests/shared/rtlTest'; -import { sleep, render } from '../../../tests/utils'; +import { sleep, render, fireEvent } from '../../../tests/utils'; const { Column, ColumnGroup } = Table; @@ -33,7 +32,7 @@ describe('Table', () => { }, ]; - const wrapper = mount( + const { asFragment } = render(
@@ -45,7 +44,7 @@ describe('Table', () => {
, ); - expect(wrapper.render()).toMatchSnapshot(); + expect(asFragment().firstChild).toMatchSnapshot(); }); it('updates columns when receiving props', () => { @@ -56,7 +55,8 @@ describe('Table', () => { dataIndex: 'name', }, ]; - const wrapper = mount(); + const { container, rerender } = render(
); + const newColumns = [ { title: 'Title', @@ -64,9 +64,8 @@ describe('Table', () => { dataIndex: 'title', }, ]; - wrapper.setProps({ columns: newColumns }); - - expect(wrapper.find('th').text()).toEqual('Title'); + rerender(
); + expect(container.querySelector('th').textContent).toEqual('Title'); }); it('loading with Spin', async () => { @@ -74,32 +73,34 @@ describe('Table', () => { spinning: false, delay: 500, }; - const wrapper = mount(
); - expect(wrapper.find('.ant-spin')).toHaveLength(0); - expect(wrapper.find('.ant-table-placeholder').hostNodes().text()).not.toEqual(''); + const { container, rerender } = render(
); + expect(container.querySelectorAll('.ant-spin')).toHaveLength(0); + expect(container.querySelector('.ant-table-placeholder').textContent).not.toEqual(''); loading.spinning = true; - wrapper.setProps({ loading }); - expect(wrapper.find('.ant-spin')).toHaveLength(0); + rerender(
); + expect(container.querySelectorAll('.ant-spin')).toHaveLength(0); await sleep(500); - wrapper.update(); - expect(wrapper.find('.ant-spin')).toHaveLength(1); + rerender(
); + expect(container.querySelectorAll('.ant-spin')).toHaveLength(1); }); // https://github.com/ant-design/ant-design/issues/22733 it('support loading tip', async () => { - const wrapper = mount(
); + const { container, rerender } = render(
); await sleep(500); - wrapper.update(); - expect(wrapper.find('.ant-spin')).toHaveLength(1); + rerender(
); + expect(container.querySelectorAll('.ant-spin')).toHaveLength(1); }); it('renders custom components correctly when it changes', () => { const BodyWrapper1 = props => ; const BodyWrapper2 = props => ; - const wrapper = mount(
); - wrapper.setProps({ components: { body: { wrapper: BodyWrapper2 } } }); - expect(wrapper.find('tbody').props().id).toBe('wrapper2'); + const { container, rerender } = render( +
, + ); + rerender(
); + expect(container.querySelector('tbody').id).toBe('wrapper2'); }); it('props#columnsPageRange and props#columnsPageSize do not warn anymore', () => { @@ -118,7 +119,7 @@ describe('Table', () => { const columnsPageRange = jest.fn(); const columnsPageSize = jest.fn(); - mount( + render(
{ it('support onHeaderCell', () => { const onClick = jest.fn(); - const wrapper = mount( + const { container } = render(
({ onClick }) }]} />, ); - wrapper.find('th').simulate('click'); + fireEvent.click(container.querySelector('th')); expect(onClick).toHaveBeenCalled(); }); it('should not crash when column children is empty', () => { - mount( + render(
{ }); it('should not crash when dataSource is array with none-object items', () => { - mount( + render(
{ }); it('prevent touch event', () => { - const wrapper = mount( + // prevent touch event, 原来的用例感觉是少了 touchmove 调用判断 + const touchmove = jest.fn(); + const { container } = render(
{ dataSource={[]} />, ); - wrapper.simulate('touchmove'); + fireEvent.touchMove(container.querySelector('.ant-table')); + expect(touchmove).not.toHaveBeenCalled(); }); it('renders ellipsis by showTitle option', () => { @@ -203,9 +207,9 @@ describe('Table', () => { { title: 'id', dataKey: 'id', ellipsis: { showTitle: false } }, { title: 'age', dataKey: 'age', ellipsis: { showTitle: false } }, ]; - const wrapper = mount(
); - wrapper.find('td').forEach(td => { - expect(td.hasClass('ant-table-cell-ellipsis')).toBeTruthy(); + const { container } = render(
); + container.querySelectorAll('td').forEach(td => { + expect(td.className.includes('ant-table-cell-ellipsis')).toBe(true); }); }); @@ -224,14 +228,13 @@ describe('Table', () => { { title: 'id', dataKey: 'id', ellipsis: { showTitle: true } }, { title: 'age', dataKey: 'age', ellipsis: { showTitle: true } }, ]; - const wrapper = mount(
); - wrapper.find('.ant-table-thead th').forEach(td => { - expect(td.getDOMNode().attributes.getNamedItem('title')).toBeTruthy(); + const { container } = render(
); + container.querySelectorAll('.ant-table-thead th').forEach(td => { + expect(td.attributes.title).toBeTruthy(); }); - - wrapper.find('.ant-table-tbody td').forEach(td => { - expect(td.getDOMNode().attributes.getNamedItem('title')).toBeFalsy(); + container.querySelectorAll('.ant-table-tbody td').forEach(td => { + expect(td.attributes.title).toBeFalsy(); }); }); @@ -244,7 +247,7 @@ describe('Table', () => { dataIndex: 'name', }, ]; - mount(
record + index} />); + render(
record + index} />); expect(warnSpy).toBeCalledWith( 'Warning: [antd: Table] `index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.', ); diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap index ef090d042c..52417d5f30 100644 --- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap +++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap @@ -2,54 +2,46 @@ exports[`Table.filter clearFilters should support params 1`] = `
setSelectedKeys Reset setSelectedKeys Reset setSelectedKeys Reset setSelectedKeys Reset @@ -58,37 +50,43 @@ exports[`Table.filter clearFilters should support params 1`] = ` exports[`Table.filter override custom filter correctly 1`] = `
setSelectedKeys Confirm Reset SimulateOnSelect
`; -exports[`Table.filter renders custom content correctly 1`] = `
`; +exports[`Table.filter renders custom content correctly 1`] = ` +
+
+ custom filter +
+
+`; exports[`Table.filter renders custom filter icon as ReactNode 1`] = `
`; -exports[`Table.filter renders custom filter icon correctly 2`] = ` - - unfiltered - -`; - exports[`Table.filter renders custom filter icon with right Tooltip title 1`] = `
`; -exports[`Table.filter renders menu correctly 1`] = `
`; +exports[`Table.filter renders menu correctly 1`] = ` +
+ + +`; -exports[`Table.filter renders radio filter correctly 1`] = `
`; +exports[`Table.filter renders radio filter correctly 1`] = ` +
+ + +`; diff --git a/components/table/__tests__/__snapshots__/empty.test.js.snap b/components/table/__tests__/__snapshots__/empty.test.js.snap index 2b41d2ddc2..ce90c11240 100644 --- a/components/table/__tests__/__snapshots__/empty.test.js.snap +++ b/components/table/__tests__/__snapshots__/empty.test.js.snap @@ -20,7 +20,7 @@ exports[`Table renders empty table 1`] = ` class="ant-table-content" >
@@ -268,7 +268,7 @@ exports[`Table renders empty table with fixed columns 1`] = ` @@ -329,7 +329,7 @@ exports[`Table renders empty table with fixed columns 1`] = ` @@ -341,103 +341,103 @@ exports[`Table renders empty table with fixed columns 1`] = `
Full Name Age Action