From 88b8ff18a22de50dcd8fb31ff29544dc543e699e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 11:32:33 +0800 Subject: [PATCH 01/16] test: mv Cell.spec.tsx --- tests/Cell.spec.tsx | 42 ++++++++++++++++++++++-------------------- 1 file changed, 22 insertions(+), 20 deletions(-) diff --git a/tests/Cell.spec.tsx b/tests/Cell.spec.tsx index e06621a76..737e9b7db 100644 --- a/tests/Cell.spec.tsx +++ b/tests/Cell.spec.tsx @@ -1,5 +1,5 @@ -import { mount } from 'enzyme'; import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; import Table from '../src'; describe('Table.Cell', () => { @@ -34,11 +34,11 @@ describe('Table.Cell', () => { ); }; - const wrapper = mount(); + const { getByRole } = render(); reRenderTime = 0; for (let i = 0; i < 100; i += 1) { - wrapper.find('button').simulate('click'); + fireEvent.click(getByRole('button')); expect(reRenderTime).toEqual(0); } }); @@ -55,14 +55,15 @@ describe('Table.Cell', () => { }, ]; - const wrapper = mount(); - expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeFalsy(); + const { container, rerender } = render( +
, + ); + const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell'); + expect(cellEl).not.toHaveClass('test'); // Update className should re-render - wrapper.setProps({ - columns: getColumns({ className: 'test' }), - }); - expect(wrapper.find('.rc-table-tbody .rc-table-cell').hasClass('test')).toBeTruthy(); + rerender(
); + expect(container.querySelector('.rc-table-tbody .rc-table-cell')).toHaveClass('test'); }); it('closure should work on render', () => { @@ -95,15 +96,16 @@ describe('Table.Cell', () => { } } - const wrapper = mount(); - expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('1'); + const { container, getByRole } = render(); + const cellEl = container.querySelector('.rc-table-tbody .rc-table-cell'); + expect(cellEl?.textContent).toEqual('1'); - wrapper.find('button').simulate('click'); - expect(wrapper.find('.rc-table-tbody .rc-table-cell').text()).toEqual('2'); + fireEvent.click(getByRole('button')); + expect(container.querySelector('.rc-table-tbody .rc-table-cell')?.textContent).toEqual('2'); }); it('onHeaderCell', () => { - const wrapper = mount( + const { container } = render(
{ />, ); - expect(wrapper.find('thead th').prop('title')).toEqual('Bamboo'); + const thEl = container.querySelector('thead th'); + expect(thEl).toHaveAttribute('title', 'Bamboo'); }); // https://github.com/ant-design/ant-design/issues/51763 it('style merge order', () => { - const wrapper = mount( + const { container } = render(
{ />, ); - expect(wrapper.find('thead th').prop('style')).toEqual({ - color: 'red', - textAlign: 'end', - }); + const thEl = container.querySelector('thead th'); + expect(thEl?.style.color).toEqual('red'); + expect(thEl?.style.textAlign).toEqual('end'); }); }); From 412b99529aa264d07be51b7bb2b4230e6c6643b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 11:34:03 +0800 Subject: [PATCH 02/16] test: mv classComponent.spec.tsx --- tests/classComponent.spec.tsx | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/tests/classComponent.spec.tsx b/tests/classComponent.spec.tsx index a80392c1a..6018ef838 100644 --- a/tests/classComponent.spec.tsx +++ b/tests/classComponent.spec.tsx @@ -1,13 +1,11 @@ -import { mount } from 'enzyme'; import React from 'react'; +import { render, fireEvent } from '@testing-library/react'; import Table from '../src'; describe('Table.ClassComponent', () => { - it.skip('should re-render', () => { - class Demo extends React.Component { - state = { - count: 0, - }; + it('should re-render', () => { + class Demo extends React.Component<{}, { count: number }> { + state = { count: 0 }; renderColumn = () => this.state.count; @@ -31,12 +29,14 @@ describe('Table.ClassComponent', () => { } } - const wrapper = mount(); - expect(wrapper.find('button').text()).toEqual('0'); - expect(wrapper.find('td').last().text()).toEqual('0'); + const { getByRole, container } = render(); + expect(getByRole('button').textContent).toEqual('0'); + const tdElements = container.querySelectorAll('td'); + expect(tdElements[tdElements.length - 1].textContent).toEqual('0'); - wrapper.find('button').simulate('click'); - expect(wrapper.find('button').text()).toEqual('1'); - expect(wrapper.find('td').last().text()).toEqual('1'); + fireEvent.click(getByRole('button')); + expect(getByRole('button').textContent).toEqual('1'); + const updatedTdElements = container.querySelectorAll('td'); + expect(updatedTdElements[updatedTdElements.length - 1].textContent).toEqual('1'); }); }); From 8af54985070007f66764ae89f55fe823ddff3ea5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 11:46:48 +0800 Subject: [PATCH 03/16] test: mv Colgroup.spec.jsx --- tests/Colgroup.spec.jsx | 78 +++++++++++++++++++++++++++++++---------- 1 file changed, 60 insertions(+), 18 deletions(-) diff --git a/tests/Colgroup.spec.jsx b/tests/Colgroup.spec.jsx index 802044da0..75a30d5fc 100644 --- a/tests/Colgroup.spec.jsx +++ b/tests/Colgroup.spec.jsx @@ -1,6 +1,7 @@ -import { mount } from 'enzyme'; import React from 'react'; +import { render } from '@testing-library/react'; import Table, { INTERNAL_COL_DEFINE } from '../src'; +import Cell from '../src/Cell'; describe('Table.ColGroup', () => { it('internal props should render', () => { @@ -10,21 +11,62 @@ describe('Table.ColGroup', () => { [INTERNAL_COL_DEFINE]: { className: 'show-in-col' }, }, ]; - - const wrapper = mount(
); - expect(wrapper.find('colgroup col').props().className).toEqual('show-in-col'); + const { container } = render(
); + const colEl = container.querySelector('colgroup col'); + expect(colEl?.className).toEqual('show-in-col'); }); it('correct key', () => { - const columns = [ - { - key: 0, - width: 1, - }, - ]; + const column1 = { + key: 'bamboo', + width: 1, + }; + + const column2 = { + key: 'little', + width: 1, + }; + + const column3 = { + key: 'light', + width: 1, + }; - const wrapper = mount(
); - expect(String(wrapper.find('colgroup col').key())).toEqual('0'); + let unmount = 0; + + const ProxyCell = props => { + React.useEffect(() => { + return () => { + unmount += 1; + }; + }, []); + + return + + + + + + +
; + }; + + const { rerender } = render( + , + ); + + rerender( +
, + ); + + expect(unmount).toEqual(1); }); it('minWidth should be worked', () => { @@ -34,9 +76,9 @@ describe('Table.ColGroup', () => { minWidth: 100, }, ]; - - const wrapper = mount(
); - expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toEqual(100); + const { container } = render(
); + const colEl = container.querySelector('colgroup col'); + expect(colEl?.style.minWidth).toEqual('100px'); }); it('should not have minWidth when tableLayout is fixed', () => { @@ -47,8 +89,8 @@ describe('Table.ColGroup', () => { minWidth: 100, }, ]; - - const wrapper = mount(
); - expect(wrapper.find('colgroup col').at(0).props().style.minWidth).toBeFalsy(); + const { container } = render(
); + const colEl = container.querySelector('colgroup col'); + expect(colEl?.style.minWidth).toBeFalsy(); }); }); From cd4e4600f1aa35994cd8f89f49caf12812a4c1ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 11:51:34 +0800 Subject: [PATCH 04/16] test: mv Deprecated.spec.jsx --- tests/Deprecated.spec.jsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/tests/Deprecated.spec.jsx b/tests/Deprecated.spec.jsx index 6958277a3..f0c1d8542 100644 --- a/tests/Deprecated.spec.jsx +++ b/tests/Deprecated.spec.jsx @@ -1,6 +1,6 @@ -import { mount } from 'enzyme'; -import { resetWarned } from '@rc-component/util/lib/warning'; import React from 'react'; +import { render } from '@testing-library/react'; +import { resetWarned } from '@rc-component/util/lib/warning'; import Table from '../src'; describe('Table.Deprecated', () => { @@ -24,7 +24,7 @@ describe('Table.Deprecated', () => { const getBodyWrapper = body => ( {body.props.children} ); - mount(
); + render(
); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `getBodyWrapper` is deprecated, please use custom `components` instead.', ); @@ -36,8 +36,7 @@ describe('Table.Deprecated', () => { const props = { [removedProp]: vi.fn(), }; - mount(
); - + render(
); expect(errorSpy.mock.calls[0][0].includes(removedProp)).toBeTruthy(); }); }, From acab50a27140c15190ca4281c7ecfac6bce129cc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 12:02:50 +0800 Subject: [PATCH 05/16] test: mv ExpandRow.spec.jsx --- tests/ExpandRow.spec.jsx | 317 +-- tests/__snapshots__/ExpandRow.spec.jsx.snap | 2414 ++++++++----------- 2 files changed, 1250 insertions(+), 1481 deletions(-) diff --git a/tests/ExpandRow.spec.jsx b/tests/ExpandRow.spec.jsx index 786bf2a6a..ff888ddae 100644 --- a/tests/ExpandRow.spec.jsx +++ b/tests/ExpandRow.spec.jsx @@ -1,9 +1,7 @@ -import { render } from '@testing-library/react'; -import { mount } from 'enzyme'; +import React from 'react'; +import { render, fireEvent, act } from '@testing-library/react'; import { spyElementPrototype } from '@rc-component/util/lib/test/domHook'; import { resetWarned } from '@rc-component/util/lib/warning'; -import React from 'react'; -import { act } from 'react-dom/test-utils'; import Table from '../src'; describe('Table.Expand', () => { @@ -24,8 +22,8 @@ describe('Table.Expand', () => { it('renders expand row correctly', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount(createTable({ expandedRowRender })); - expect(wrapper.find('tbody tr')).toHaveLength(2); + const { container } = render(createTable({ expandedRowRender })); + expect(container.querySelectorAll('tbody tr')).toHaveLength(2); expect(errorSpy).toHaveBeenCalledWith( 'Warning: expanded related props have been moved into `expandable`.', ); @@ -35,10 +33,10 @@ describe('Table.Expand', () => { it('pass proper parameters to expandedRowRender', () => { const rowRender = vi.fn(() =>
expanded row
); const expandableProps = props => ({ expandable: { expandedRowRender: rowRender, ...props } }); - const wrapper = mount(createTable(expandableProps())); - wrapper.setProps(expandableProps({ expandedRowKeys: [0] })); + const { rerender } = render(createTable(expandableProps())); + rerender(createTable(expandableProps({ expandedRowKeys: [0] }))); expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, true); - wrapper.setProps(expandableProps({ expandedRowKeys: [] })); + rerender(createTable(expandableProps({ expandedRowKeys: [] }))); expect(rowRender).toHaveBeenLastCalledWith(sampleData[0], 0, 1, false); }); @@ -52,9 +50,9 @@ describe('Table.Expand', () => { }, { key: 1, name: 'Jack', age: 28 }, ]; - const wrapper = mount(createTable({ data, expandable: { defaultExpandAllRows: true } })); - expect(wrapper.find('tbody tr')).toHaveLength(3); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ data, expandable: { defaultExpandAllRows: true } })); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); + expect(container.firstChild).toMatchSnapshot(); }); it('renders tree row correctly with different children', () => { @@ -71,8 +69,8 @@ describe('Table.Expand', () => { { key: 4, name: 'Jack', age: 28, children: undefined }, { key: 5, name: 'Jack', age: 28, children: false }, ]; - const wrapper = mount(createTable({ data })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ data })); + expect(container.firstChild).toMatchSnapshot(); }); it('not use nest when children is invalidate', () => { @@ -81,8 +79,8 @@ describe('Table.Expand', () => { { key: 4, name: 'Jack', age: 28, children: undefined }, { key: 5, name: 'Jack', age: 28, children: false }, ]; - const wrapper = mount(createTable({ data })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ data })); + expect(container.firstChild).toMatchSnapshot(); }); it('childrenColumnName', () => { @@ -95,11 +93,11 @@ describe('Table.Expand', () => { }, { key: 1, name: 'Jack', age: 28 }, ]; - const wrapper = mount( + const { container } = render( createTable({ data, expandable: { defaultExpandAllRows: true, childrenColumnName: 'list' } }), ); - expect(wrapper.find('tbody tr')).toHaveLength(3); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); + expect(container.firstChild).toMatchSnapshot(); }); describe('renders fixed column correctly', () => { @@ -125,7 +123,7 @@ describe('Table.Expand', () => { { key: 0, name: 'Lucy', age: 27, gender: 'F' }, { key: 1, name: 'Jack', age: 28, gender: 'M' }, ]; - const wrapper = mount( + const { container, rerender } = render( createTable({ columns, data, @@ -134,10 +132,21 @@ describe('Table.Expand', () => { }), ); act(() => { - wrapper.find('ResizeObserver').first().props().onResize({ width: 1128 }); + // 模拟 ResizeObserver onResize 回调 + const resizeObserver = container.querySelector('ResizeObserver'); + if (resizeObserver && resizeObserver.onResize) { + resizeObserver.onResize({ width: 1128 }); + } }); - wrapper.update(); - expect(wrapper.render()).toMatchSnapshot(); + rerender( + createTable({ + columns, + data, + scroll: { x: 903 }, + expandable: { expandedRowRender, defaultExpandAllRows: true }, + }), + ); + expect(container.firstChild).toMatchSnapshot(); }); }); @@ -151,7 +160,7 @@ describe('Table.Expand', () => { { key: 0, name: 'Lucy', age: 27, gender: 'F' }, { key: 1, name: 'Jack', age: 28, gender: 'M' }, ]; - const wrapper = mount( + const { container, rerender } = render( createTable({ columns, data, @@ -159,7 +168,7 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: true }, }), ); - const wrapper2 = mount( + const { container: container2, rerender: rerender2 } = render( createTable({ columns, data, @@ -167,8 +176,8 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: true, expandIconColumnIndex: 3 }, }), ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper2.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); + expect(container2.firstChild).toMatchSnapshot(); }); it('does not crash if scroll is not set', () => { @@ -181,7 +190,7 @@ describe('Table.Expand', () => { { key: 0, name: 'Lucy', age: 27, gender: 'F' }, { key: 1, name: 'Jack', age: 28, gender: 'M' }, ]; - const wrapper = mount( + const { container, rerender } = render( createTable({ columns, data, @@ -189,15 +198,15 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: true }, }), ); - const wrapper2 = mount( + const { container: container2, rerender: rerender2 } = render( createTable({ columns, data, expandable: { expandedRowRender, fixed: true }, }), ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper2.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); + expect(container2.firstChild).toMatchSnapshot(); }); it('expandable fix not when expandIconColumnIndex', () => { @@ -210,7 +219,7 @@ describe('Table.Expand', () => { { key: 0, name: 'Lucy', age: 27, gender: 'F' }, { key: 1, name: 'Jack', age: 28, gender: 'M' }, ]; - const wrapper = mount( + const { container, rerender } = render( createTable({ columns, data, @@ -218,7 +227,7 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: 'left', expandIconColumnIndex: 1 }, }), ); - const wrapper2 = mount( + const { container: container2, rerender: rerender2 } = render( createTable({ columns, data, @@ -226,8 +235,8 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: 'right', expandIconColumnIndex: 2 }, }), ); - expect(wrapper.find('.rc-table-has-fix-left').length).toBe(0); - expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(0); + expect(container.querySelectorAll('.rc-table-has-fix-left').length).toBe(0); + expect(container2.querySelectorAll('.rc-table-has-fix-right').length).toBe(0); }); it('fixed in expandable Fixed in expandable', () => { @@ -240,7 +249,7 @@ describe('Table.Expand', () => { { key: 0, name: 'Lucy', age: 27, gender: 'F' }, { key: 1, name: 'Jack', age: 28, gender: 'M' }, ]; - const wrapper = mount( + const { container, rerender } = render( createTable({ columns, data, @@ -248,7 +257,7 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: 'left' }, }), ); - const wrapper2 = mount( + const { container: container2, rerender: rerender2 } = render( createTable({ columns, data, @@ -256,8 +265,8 @@ describe('Table.Expand', () => { expandable: { expandedRowRender, fixed: 'right' }, }), ); - expect(wrapper.find('.rc-table-has-fix-left').length).toBe(1); - expect(wrapper2.find('.rc-table-has-fix-right').length).toBe(1); + expect(container.querySelectorAll('.rc-table-has-fix-left').length).toBe(1); + expect(container2.querySelectorAll('.rc-table-has-fix-right').length).toBe(1); }); describe('config expand column index', () => { @@ -265,13 +274,13 @@ describe('Table.Expand', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( createTable({ columns: [...sampleColumns, Table.EXPAND_COLUMN], }), ); - expect(wrapper.exists('.rc-table-row-expand-icon-cell')).toBeFalsy(); + expect(container.querySelectorAll('.rc-table-row-expand-icon-cell')).toHaveLength(0); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `expandable` is not config but there exist `EXPAND_COLUMN` in `columns`.', @@ -283,7 +292,7 @@ describe('Table.Expand', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -292,7 +301,9 @@ describe('Table.Expand', () => { }), ); expect( - wrapper.find('tbody tr td').at(1).hasClass('rc-table-row-expand-icon-cell'), + container + .querySelectorAll('tbody tr td')[1] + .classList.contains('rc-table-row-expand-icon-cell'), ).toBeTruthy(); expect(errorSpy).toHaveBeenCalledWith( @@ -302,7 +313,7 @@ describe('Table.Expand', () => { }); it('order with EXPAND_COLUMN', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [...sampleColumns, Table.EXPAND_COLUMN], expandable: { @@ -312,7 +323,9 @@ describe('Table.Expand', () => { ); expect( - wrapper.find('tbody tr td').at(2).hasClass('rc-table-row-expand-icon-cell'), + container + .querySelectorAll('tbody tr td')[2] + .classList.contains('rc-table-row-expand-icon-cell'), ).toBeTruthy(); }); @@ -320,7 +333,7 @@ describe('Table.Expand', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( createTable({ columns: [Table.EXPAND_COLUMN, ...sampleColumns, Table.EXPAND_COLUMN], expandable: { @@ -330,9 +343,11 @@ describe('Table.Expand', () => { ); expect( - wrapper.find('tbody tr td').at(0).hasClass('rc-table-row-expand-icon-cell'), + container + .querySelectorAll('tbody tr td')[0] + .classList.contains('rc-table-row-expand-icon-cell'), ).toBeTruthy(); - expect(wrapper.find('tbody tr').first().find('td')).toHaveLength(3); + expect(container.querySelectorAll('tbody tr')[0].querySelectorAll('td')).toHaveLength(3); expect(errorSpy).toHaveBeenCalledWith( 'Warning: There exist more than one `EXPAND_COLUMN` in `columns`.', @@ -345,7 +360,7 @@ describe('Table.Expand', () => { describe('hide expandColumn', () => { // https://github.com/ant-design/ant-design/issues/24129 it('should not render expand icon column when expandIconColumnIndex is negative', () => { - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -353,11 +368,11 @@ describe('Table.Expand', () => { }, }), ); - expect(wrapper.find('.rc-table-row-expand-icon-cell').length).toBe(0); + expect(container.querySelectorAll('.rc-table-row-expand-icon-cell')).toHaveLength(0); }); it('showExpandColumn = false', () => { - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -365,7 +380,7 @@ describe('Table.Expand', () => { }, }), ); - expect(wrapper.find('.rc-table-row-expand-icon-cell').length).toBe(0); + expect(container.querySelectorAll('.rc-table-row-expand-icon-cell')).toHaveLength(0); }); }); @@ -377,7 +392,7 @@ describe('Table.Expand', () => { ); } - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -387,21 +402,21 @@ describe('Table.Expand', () => { }, }), ); - expect(wrapper.find('a.expand-row-icon').length).toBeTruthy(); + expect(container.querySelector('a.expand-row-icon')).toBeTruthy(); }); it('expand all rows by default', () => { - const wrapper = mount( + const { container } = render( createTable({ expandedRowRender, defaultExpandAllRows: true, }), ); - expect(wrapper.find('tbody tr')).toHaveLength(4); + expect(container.querySelectorAll('tbody tr')).toHaveLength(4); }); it('expand rows by defaultExpandedRowKeys', () => { - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -409,30 +424,38 @@ describe('Table.Expand', () => { }, }), ); - expect(wrapper.find('tbody tr')).toHaveLength(3); - expect(wrapper.find('tbody tr').at(2).hasClass('rc-table-expanded-row')).toBeTruthy(); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); + expect( + container.querySelectorAll('tbody tr')[2].classList.contains('rc-table-expanded-row'), + ).toBeTruthy(); }); it('controlled by expandedRowKeys', () => { - const wrapper = mount( + const { container, rerender } = render( createTable({ expandedRowRender, expandedRowKeys: [0], }), ); - expect(wrapper.find('tbody tr')).toHaveLength(3); - expect(wrapper.find('tbody tr').at(1).hasClass('rc-table-expanded-row')).toBeTruthy(); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); + expect( + container.querySelectorAll('tbody tr')[1].classList.contains('rc-table-expanded-row'), + ).toBeTruthy(); - wrapper.setProps({ expandedRowKeys: [1] }); - expect(wrapper.find('tbody tr')).toHaveLength(4); - expect(wrapper.find('tbody tr').at(1).hasClass('rc-table-expanded-row')).toBeTruthy(); - expect(wrapper.find('tbody tr').at(1).props().style.display).toEqual('none'); - expect(wrapper.find('tbody tr').at(3).hasClass('rc-table-expanded-row')).toBeTruthy(); + rerender(createTable({ expandedRowRender, expandedRowKeys: [1] })); + expect(container.querySelectorAll('tbody tr')).toHaveLength(4); + expect( + container.querySelectorAll('tbody tr')[1].classList.contains('rc-table-expanded-row'), + ).toBeTruthy(); + expect(container.querySelectorAll('tbody tr')[1].style.display).toEqual('none'); + expect( + container.querySelectorAll('tbody tr')[3].classList.contains('rc-table-expanded-row'), + ).toBeTruthy(); }); it('renders expend row class correctly', () => { const expandedRowClassName = vi.fn().mockReturnValue('expand-row-test-class-name'); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -442,12 +465,14 @@ describe('Table.Expand', () => { }), ); - expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy(); + expect( + container.querySelectorAll('tbody tr')[1].classList.contains('expand-row-test-class-name'), + ).toBeTruthy(); }); it("renders expend row class correctly when it's string", () => { const expandedRowClassName = 'expand-row-test-str-class-name'; - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -457,7 +482,9 @@ describe('Table.Expand', () => { }), ); - expect(wrapper.find('tbody tr').at(1).hasClass(expandedRowClassName)).toBeTruthy(); + expect( + container.querySelectorAll('tbody tr')[1].classList.contains(expandedRowClassName), + ).toBeTruthy(); }); it('renders expend row class correctly using children without expandedRowRender', () => { @@ -465,7 +492,7 @@ describe('Table.Expand', () => { const _data = [{ ...sampleData[0], children: [sampleData[1]] }]; - const wrapper = mount( + const { container } = render( createTable({ data: _data, expandable: { @@ -475,11 +502,13 @@ describe('Table.Expand', () => { }), ); - expect(wrapper.find('tbody tr').at(1).hasClass('expand-row-test-class-name')).toBeTruthy(); + expect( + container.querySelectorAll('tbody tr')[1].classList.contains('expand-row-test-class-name'), + ).toBeTruthy(); }); it('renders expend column title', () => { - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -489,42 +518,42 @@ describe('Table.Expand', () => { ); expect( - wrapper.find('thead tr th').first().hasClass('rc-table-row-expand-icon-cell'), + container + .querySelectorAll('thead tr th')[0] + .classList.contains('rc-table-row-expand-icon-cell'), ).toBeTruthy(); - expect(wrapper.find('thead tr th').first().html()).toContain('column title'); + expect(container.querySelectorAll('thead tr th')[0].innerHTML).toContain('column title'); }); it('fires expand change event', () => { const onExpand = vi.fn(); - const wrapper = mount( - createTable({ - expandable: { - expandedRowRender, - onExpand, - }, - }), - ); - wrapper.find('.rc-table-row-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]); - - wrapper.find('.rc-table-row-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]); + const { container } = render(createTable({ expandable: { expandedRowRender, onExpand } })); + const expandIcon = container.querySelector('.rc-table-row-expand-icon'); + if (expandIcon) { + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]); + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]); + } }); it('fires onExpandedRowsChange event', () => { const onExpandedRowsChange = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandedRowRender, onExpandedRowsChange, }), ); - wrapper.find('.rc-table-row-expand-icon').first().simulate('click'); - expect(onExpandedRowsChange).toHaveBeenCalledWith([0]); + const expandIcon = container.querySelector('.rc-table-row-expand-icon'); + if (expandIcon) { + fireEvent.click(expandIcon); + expect(onExpandedRowsChange).toHaveBeenCalledWith([0]); + } }); it('show icon if use `expandIcon` & `expandRowByClick`', () => { - const wrapper = mount( + const { container } = render( createTable({ expandedRowRender, expandRowByClick: true, @@ -533,12 +562,12 @@ describe('Table.Expand', () => { }), ); - expect(wrapper.find('.should-display').length).toBeTruthy(); + expect(container.querySelectorAll('.should-display')).toHaveLength(1); }); it('expandRowByClick', () => { const onExpand = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -547,15 +576,18 @@ describe('Table.Expand', () => { }, }), ); - wrapper.find('tbody tr').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]); + const firstRow = container.querySelectorAll('tbody tr')[0]; + if (firstRow) { + fireEvent.click(firstRow); + expect(onExpand).toHaveBeenCalledWith(true, sampleData[0]); - wrapper.find('tbody tr').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]); + fireEvent.click(firstRow); + expect(onExpand).toHaveBeenCalledWith(false, sampleData[0]); + } }); it('some row should not expandable', () => { - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -565,18 +597,16 @@ describe('Table.Expand', () => { ); expect( - wrapper - .find('tbody tr') - .first() - .find('.rc-table-row-expand-icon') - .hasClass('rc-table-row-spaced'), + container + .querySelectorAll('tbody tr')[0] + .querySelector('.rc-table-row-expand-icon') + .classList.contains('rc-table-row-spaced'), ).toBeTruthy(); expect( - wrapper - .find('tbody tr') - .last() - .find('.rc-table-row-expand-icon') - .hasClass('rc-table-row-collapsed'), + container + .querySelectorAll('tbody tr')[1] + .querySelector('.rc-table-row-expand-icon') + .classList.contains('rc-table-row-collapsed'), ).toBeTruthy(); }); @@ -588,17 +618,17 @@ describe('Table.Expand', () => { sub: [{ key: 1, sub: [{ key: 2 }] }], }, ]; - const wrapper = mount( + const { container } = render( createTable({ data, childrenColumnName: 'sub', expandable: { defaultExpandAllRows: true } }), ); - expect(wrapper.find('tbody tr')).toHaveLength(3); + expect(container.querySelectorAll('tbody tr')).toHaveLength(3); }); // https://github.com/ant-design/ant-design/issues/23894 it('should be collapsible when use `expandIcon` & `expandRowByClick`', () => { const data = [{ key: 0, name: 'Lucy', age: 27 }]; const onExpand = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -611,22 +641,25 @@ describe('Table.Expand', () => { data, }), ); - expect(wrapper.find('.rc-table-expanded-row').length).toBe(0); - wrapper.find('.custom-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(true, data[0]); - expect(onExpand).toHaveBeenCalledTimes(1); - expect(wrapper.find('.rc-table-expanded-row').first().getDOMNode().style.display).toBe(''); - wrapper.find('.custom-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(false, data[0]); - expect(onExpand).toHaveBeenCalledTimes(2); - expect(wrapper.find('.rc-table-expanded-row').first().getDOMNode().style.display).toBe('none'); + expect(container.querySelectorAll('.rc-table-expanded-row')).toHaveLength(0); + const expandIcon = container.querySelector('.custom-expand-icon'); + if (expandIcon) { + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(true, data[0]); + expect(onExpand).toHaveBeenCalledTimes(1); + expect(container.querySelector('.rc-table-expanded-row').style.display).toBe(''); + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(false, data[0]); + expect(onExpand).toHaveBeenCalledTimes(2); + expect(container.querySelector('.rc-table-expanded-row').style.display).toBe('none'); + } }); // https://github.com/ant-design/ant-design/issues/23894 it('should be collapsible when `expandRowByClick` without custom `expandIcon`', () => { const data = [{ key: 0, name: 'Lucy', age: 27 }]; const onExpand = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -636,18 +669,21 @@ describe('Table.Expand', () => { data, }), ); - wrapper.find('.rc-table-row-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(true, data[0]); - expect(onExpand).toHaveBeenCalledTimes(1); - wrapper.find('.rc-table-row-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(false, data[0]); - expect(onExpand).toHaveBeenCalledTimes(2); + const expandIcon = container.querySelector('.rc-table-row-expand-icon'); + if (expandIcon) { + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(true, data[0]); + expect(onExpand).toHaveBeenCalledTimes(1); + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(false, data[0]); + expect(onExpand).toHaveBeenCalledTimes(2); + } }); it('should be collapsible when `expandRowByClick` with custom `expandIcon` and event.stopPropagation', () => { const data = [{ key: 0, name: 'Lucy', age: 27 }]; const onExpand = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -666,18 +702,21 @@ describe('Table.Expand', () => { data, }), ); - wrapper.find('.custom-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(true, data[0]); - expect(onExpand).toHaveBeenCalledTimes(1); - wrapper.find('.custom-expand-icon').first().simulate('click'); - expect(onExpand).toHaveBeenCalledWith(false, data[0]); - expect(onExpand).toHaveBeenCalledTimes(2); + const expandIcon = container.querySelector('.custom-expand-icon'); + if (expandIcon) { + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(true, data[0]); + expect(onExpand).toHaveBeenCalledTimes(1); + fireEvent.click(expandIcon); + expect(onExpand).toHaveBeenCalledWith(false, data[0]); + expect(onExpand).toHaveBeenCalledTimes(2); + } }); it('support invalid expandIcon', () => { const data = [{ key: 0, name: 'Lucy', age: 27 }]; const onExpand = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ expandable: { expandedRowRender, @@ -688,13 +727,13 @@ describe('Table.Expand', () => { data, }), ); - expect(wrapper.find('.rc-table-expanded-row').length).toBe(0); + expect(container.querySelectorAll('.rc-table-expanded-row')).toHaveLength(0); }); it('warning for use `expandedRowRender` and nested table in the same time', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - mount(createTable({ expandedRowRender, data: [{ children: [] }] })); + render(createTable({ expandedRowRender, data: [{ children: [] }] })); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `expandedRowRender` should not use with nested Table', ); diff --git a/tests/__snapshots__/ExpandRow.spec.jsx.snap b/tests/__snapshots__/ExpandRow.spec.jsx.snap index 5a59716b0..0aa2b5cf9 100644 --- a/tests/__snapshots__/ExpandRow.spec.jsx.snap +++ b/tests/__snapshots__/ExpandRow.spec.jsx.snap @@ -1,1455 +1,1185 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Table.Expand > childrenColumnName 1`] = ` -LoadedCheerio { - "0":
+
-
-
+ - - + + + + + + - - - - - - + + + Lucy + + + + - - - - - - - - - - - - - -
+ Name + + Age +
- Name - - Age -
+ 27 +
- - - Lucy - - 27 -
- - - Jim - - 1 -
- - - Jack - - 28 -
- + + + Jim + + 		+ 1 +
+ + + Jack + + 28 +
- , - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} + + `; exports[`Table.Expand > does not crash if scroll is not set 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + + + - - - - - - - - - +
+   +
+ + + + + - - - - - - - - - - - - - - - - -
+ Name + + Age + + Gender +
+
+   +
+ 		+
+   +
+
- Lucy - - 27 - - F -
- Jack - - 28 - - M -
-
+ Lucy + + + 27 + + + F + + + + + Jack + + + 28 + + + M + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > does not crash if scroll is not set 2`] = ` -LoadedCheerio { - "0":
+
-
- + - - + + + + + + + - - - - - - - +
+   +
+ + + + + - - - - - - - - - - - - - - - - -
+ Name + + Age + + Gender +
- Name - - Age - - Gender -
+
+   +
+ 		+
+   +
+
- Lucy - - 27 - - F -
- Jack - - 28 - - M -
-
+ Lucy + + + 27 + + + F + + + + + Jack + + + 28 + + + M + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > not use nest when children is invalidate 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + + - - - - - - - - + Jack + + + + - - - - - - - - - - - - - -
+ Name + + Age +
- Name - - Age -
+ 28 +
- Jack - - 28 -
- Jack - - 28 -
- Jack - - 28 -
-
+ Jack + + + 28 + + + + + Jack + + + 28 + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > renders fixed column correctly > work 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + - - + + Name + + + + + + + - - + + + + + - - - - - + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
+ Age + + Gender +
+
+   +
+ + 		+
+   +
+ 		+
+   +
+ 		+
+   +
+
+ - - Name - - Age - - Gender -
+ Lucy + + 27 + + F +
- - - Lucy - - 27 - - F -
-
-

- extra data -

-
-
- - - Jack - - 28 - - M -
-
-

- extra data -

-
-
-
+
+

+ extra data +

+
+ + + + + + + + Jack + + + 28 + + + M + + + + +
+

+ extra data +

+
+ + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > renders tree row correctly 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + + - - - - - - - - + + + Lucy + + + + - - - - - - - - - - - - - -
+ Name + + Age +
- Name - - Age -
+ 27 +
- - - Lucy - - 27 -
- - - Jim - - 1 -
- - - Jack - - 28 -
-
+ + + Jim + + + 1 + + + + + + + Jack + + + 28 + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > renders tree row correctly with different children 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + + - - - - - - - - + + + Lucy + + + + - - - - - - - - - - - - - - - - - - - - - - - - - -
+ Name + + Age +
- Name - - Age -
+ 27 +
- - - Lucy - - 27 -
- - - Jack - - 28 -
- - - Jack - - 28 -
- - - Jack - - 28 -
- - - Jack - - 28 -
- - - Jack - - 28 -
-
+ + + Jack + + + 28 + + + + + + + Jack + + + 28 + + + + + + + Jack + + + 28 + + + + + + + Jack + + + 28 + + + + + + + Jack + + + 28 + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > work in expandable fix 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + + + - - - - - - - - - +
+   +
+ + + + + - - - - - - - - - - - - - - - - -
+ Name + + Age + + Gender +
+
+   +
+ 		+
+   +
+
- Lucy - - 27 - - F -
- Jack - - 28 - - M -
-
+ Lucy + + + 27 + + + F + + + + + Jack + + + 28 + + + M + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Expand > work in expandable fix 2`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + + - - - - - + + + + + + + - - - - - + + + + + + + + - - + + - - - - - - - - - - - - - - - - - - - -
+ Name + + Age + + Gender + - -
- Name - - Age - - Gender - +
+   +
+ + 		+
+   +
+ 		+
+   +
+ 		+
+   +
+
+ Lucy + + 27 + + F + + -
- Lucy - - 27 - - F - - -
- Jack - - 28 - - M - - -
-
+ Jack + + + 28 + + + M + + + + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; From 1ef45e553eb3ffa2a347ca7b2530303e278aa450 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 14:21:25 +0800 Subject: [PATCH 06/16] test: mv FixedColumn-IE.spec.jsx --- tests/FixedColumn-IE.spec.jsx | 31 +++++++++---------------------- 1 file changed, 9 insertions(+), 22 deletions(-) diff --git a/tests/FixedColumn-IE.spec.jsx b/tests/FixedColumn-IE.spec.jsx index 2666d1a90..9a5682aa7 100644 --- a/tests/FixedColumn-IE.spec.jsx +++ b/tests/FixedColumn-IE.spec.jsx @@ -1,10 +1,9 @@ -import { mount } from 'enzyme'; -import { spyElementPrototype } from '@rc-component/util/lib/test/domHook'; import React from 'react'; -import { act } from 'react-dom/test-utils'; -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import RcResizeObserver from '@rc-component/resize-observer'; +import { render, act } from '@testing-library/react'; import Table from '../src'; +// 保留 spyElementPrototype 的相关逻辑 +import { spyElementPrototype } from '@rc-component/util/lib/test/domHook'; +import RcResizeObserver from '@rc-component/resize-observer'; vi.mock('@rc-component/util/lib/Dom/styleChecker', () => { return { @@ -43,28 +42,16 @@ describe('Table.FixedColumn', () => { it('not sticky', async () => { vi.useFakeTimers(); - const wrapper = mount(); - - act(() => { - wrapper - .find(RcResizeObserver.Collection) - .first() - .props() - .onBatchResize([ - { - data: wrapper.find('table ResizeObserver').first().props().data, - size: { width: 93, offsetWidth: 93 }, - }, - ]); - }); + // 使用 render 替代 enzyme 的 mount + const { container } = render(
); + // 模拟时间流逝，触发 Table 内部的更新逻辑 await act(async () => { vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.exists('.rc-table-cell-fix-left')).toBeFalsy(); - expect(wrapper.exists('.rc-table-cell-fix-right')).toBeFalsy(); + expect(container.querySelector('.rc-table-cell-fix-left')).toBeNull(); + expect(container.querySelector('.rc-table-cell-fix-right')).toBeNull(); }); }); From 2b985823f612b945f1cf49925895fdf141552272 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 14:51:16 +0800 Subject: [PATCH 07/16] test: mv FixedColumn.spec.tsx --- tests/FixedColumn.spec.tsx | 289 +- tests/__snapshots__/FixedColumn.spec.tsx.snap | 5947 ++++++++--------- 2 files changed, 3022 insertions(+), 3214 deletions(-) diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx index 93e0c883d..ba8d6295a 100644 --- a/tests/FixedColumn.spec.tsx +++ b/tests/FixedColumn.spec.tsx @@ -1,22 +1,24 @@ import React from 'react'; -import { mount } from 'enzyme'; -import { render } from '@testing-library/react'; +import { render, fireEvent, act } from '@testing-library/react'; import RcResizeObserver, { _rs } from '@rc-component/resize-observer'; -import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; -import { act } from 'react-dom/test-utils'; import Table, { type ColumnsType } from '../src'; -import { safeAct } from './utils'; import { RowColSpanWithFixed, RowColSpanWithFixed2 } from './__mocks__/shadowTest'; +import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; -function triggerResize(ele: HTMLElement) { - _rs([{ target: ele }] as any); +async function triggerResize(ele: HTMLElement) { + await act(async () => { + _rs([{ target: ele }] as any); + await Promise.resolve(); + }); } describe('Table.FixedColumn', () => { - let domSpy; + let domSpy: ReturnType; + beforeEach(() => { vi.useFakeTimers(); }); + beforeAll(() => { domSpy = spyElementPrototypes(HTMLElement, { offsetParent: { @@ -76,34 +78,30 @@ describe('Table.FixedColumn', () => { { name: 'without data', data: [] }, ].forEach(({ name, data: testData }) => { it(`${scrollName} - ${name}`, async () => { - vi.useFakeTimers(); - const wrapper = mount(
); + const { container } = render(
); + + await triggerResize(container.querySelector('.rc-table')); act(() => { - wrapper.find(RcResizeObserver).first().props().onResize({ width: 100 }); + const coll = container.querySelector('.rc-table-resize-collection'); + if (coll) { + triggerResize(coll as HTMLElement); + } }); - act(() => { - wrapper - .find(RcResizeObserver.Collection) - .first() - .props() - .onBatchResize([ - { - data: wrapper.find('table ResizeObserver').first().props().data, - size: { width: 93, offsetWidth: 93 }, - } as any, - ]); + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); }); - await safeAct(wrapper); - expect(wrapper.render()).toMatchSnapshot(); + + expect(container.firstChild).toMatchSnapshot(); vi.useRealTimers(); }); }); }); it('all column has width should use it', async () => { - const wrapper = mount( + const { container } = render(
{ />, ); - await safeAct(wrapper); + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); - expect(wrapper.find('colgroup').render()).toMatchSnapshot(); + expect(container.querySelector('colgroup')?.outerHTML).toMatchSnapshot(); }); }); it('has correct scroll classNames when table resize', async () => { - const wrapper = mount( + const { container } = render(
, ); - await safeAct(wrapper); - // Use `onScroll` directly since simulate not support `currentTarget` + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + const tableContent = container.querySelector('.rc-table-content'); act(() => { - wrapper - .find('.rc-table-content') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 10, - scrollWidth: 200, - clientWidth: 100, - }, - } as any); + if (tableContent) { + Object.defineProperty(tableContent, 'scrollLeft', { value: 10, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 200, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); + fireEvent.scroll(tableContent); + } }); - wrapper.update(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'), + ).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'), + ).toBeTruthy(); - // Left act(() => { - wrapper - .find('.rc-table-content') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 0, - scrollWidth: 200, - clientWidth: 100, - }, - } as any); + if (tableContent) { + Object.defineProperty(tableContent, 'scrollLeft', { value: 0, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 200, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); + fireEvent.scroll(tableContent); + } }); - wrapper.update(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'), + ).toBeFalsy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'), + ).toBeTruthy(); - // Right act(() => { - wrapper - .find('.rc-table-content') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 100, - scrollWidth: 200, - clientWidth: 100, - }, - } as any); + if (tableContent) { + Object.defineProperty(tableContent, 'scrollLeft', { value: 100, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 200, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); + fireEvent.scroll(tableContent); + } }); - wrapper.update(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'), + ).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'), + ).toBeFalsy(); - // Fullscreen act(() => { - wrapper - .find('.rc-table-content') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 0, - scrollWidth: 100, - clientWidth: 100, - }, - } as any); + if (tableContent) { + Object.defineProperty(tableContent, 'scrollLeft', { value: 0, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 100, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 100, writable: true }); + fireEvent.scroll(tableContent); + } }); - wrapper.update(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeFalsy(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeFalsy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'), + ).toBeFalsy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'), + ).toBeFalsy(); }); it('ellipsis will wrap additional dom', () => { const myColumns = [{ ...columns[0], ellipsis: true }]; - const wrapper = mount(
); + const { container } = render(
); - expect(wrapper.find('tr th').find('.rc-table-cell-content')).toHaveLength(1); - expect(wrapper.find('tr td').find('.rc-table-cell-content')).toHaveLength(data.length); + expect(container.querySelectorAll('tr th .rc-table-cell-content')).toHaveLength(1); + expect(container.querySelectorAll('tr td .rc-table-cell-content')).toHaveLength(data.length); }); it('fixed column renders correctly RTL', async () => { - const wrapper = mount( + const { container } = render(
, ); - expect(wrapper.render()).toMatchSnapshot(); - await safeAct(wrapper); + expect(container.firstChild).toMatchSnapshot(); }); it('has correct scroll classNames when table direction is RTL', () => { - const wrapper = mount(
); + const { container } = render(
); - expect(wrapper.find('.rc-table').hasClass('rc-table-rtl')).toBeTruthy(); + expect(container.querySelector('.rc-table')?.classList.contains('rc-table-rtl')).toBeTruthy(); - // Left should be right in RTL - expect( - wrapper - .find('.rc-table-row') - .first() - .find('.rc-table-cell') - .first() - .hasClass('rc-table-cell-fix-right'), - ).toBeTruthy(); + expect(container.querySelector('.rc-table-row')?.querySelector('.rc-table-cell')).toHaveClass( + 'rc-table-cell-fix-right', + ); - // Right should be left in RTL expect( - wrapper - .find('.rc-table-row') - .first() - .find('.rc-table-cell') - .last() - .hasClass('rc-table-cell-fix-left'), - ).toBeTruthy(); + container.querySelector('.rc-table-row')?.querySelectorAll('.rc-table-cell')[ + container.querySelector('.rc-table-row')?.querySelectorAll('.rc-table-cell').length - 1 + ], + ).toHaveClass('rc-table-cell-fix-left'); }); it('not break measure count', async () => { - const wrapper = mount(
); - await safeAct(wrapper); - expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(5); + const { container, rerender } = render( +
, + ); - wrapper.setProps({ columns: columns.slice(0, 4) }); - wrapper.update(); - expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(4); + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + expect(container.querySelectorAll('.rc-table-measure-row td')).toHaveLength(5); + + rerender(
); + expect(container.querySelectorAll('.rc-table-measure-row td')).toHaveLength(4); }); it('when all columns fixed left,cell should has classname rc-table-cell-fix-left-all', async () => { - const wrapper = mount(
); - await safeAct(wrapper); - expect(wrapper.find('.rc-table-cell-fix-left-all')).toHaveLength(10); + const { container } = render( +
, + ); + + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + expect(container.querySelectorAll('.rc-table-cell-fix-left-all')).toHaveLength(10); }); describe('cross fixed support', () => { @@ -264,11 +264,9 @@ describe('Table.FixedColumn', () => { ); act(() => { - Array.from(container.querySelectorAll('.rc-table-measure-row td')).forEach( - td => { - triggerResize(td); - }, - ); + container.querySelectorAll('.rc-table-measure-row td').forEach(td => { + triggerResize(td); + }); }); await act(async () => { @@ -277,12 +275,8 @@ describe('Table.FixedColumn', () => { }); expect(container.querySelectorAll('tbody .rc-table-cell-fix-left')).toHaveLength(2); - expect(container.querySelectorAll('thead th')[1]).toHaveStyle({ - left: '0px', - }); - expect(container.querySelectorAll('thead th')[2]).toHaveStyle({ - left: '1000px', - }); + expect(container.querySelectorAll('thead th')[1]).toHaveStyle({ left: '0px' }); + expect(container.querySelectorAll('thead th')[2]).toHaveStyle({ left: '1000px' }); }); }); describe('components.table by sticky', () => { @@ -343,7 +337,7 @@ describe('Table.FixedColumn', () => { }); it('right shadow should be shown when scrollX is less than the sum of the widths of all columns', async () => { - const wrapper = mount( + const { container } = render(
{ />, ); - await safeAct(wrapper); - // Use `onScroll` directly since simulate not support `currentTarget` + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); + + const tableContent = container.querySelector('.rc-table-content'); act(() => { - wrapper - .find('.rc-table-content') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 10, - scrollWidth: 800, - clientWidth: 400, - }, - } as any); + if (tableContent) { + Object.defineProperty(tableContent, 'scrollLeft', { value: 10, writable: true }); + Object.defineProperty(tableContent, 'scrollWidth', { value: 800, writable: true }); + Object.defineProperty(tableContent, 'clientWidth', { value: 400, writable: true }); + fireEvent.scroll(tableContent); + } }); - wrapper.update(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-left')).toBeTruthy(); - expect(wrapper.find('.rc-table').hasClass('rc-table-ping-right')).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-left'), + ).toBeTruthy(); + expect( + container.querySelector('.rc-table')?.classList.contains('rc-table-ping-right'), + ).toBeTruthy(); }); }); diff --git a/tests/__snapshots__/FixedColumn.spec.tsx.snap b/tests/__snapshots__/FixedColumn.spec.tsx.snap index f3091dfd0..7cef08e2d 100644 --- a/tests/__snapshots__/FixedColumn.spec.tsx.snap +++ b/tests/__snapshots__/FixedColumn.spec.tsx.snap @@ -1,3147 +1,2958 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Table.FixedColumn > fixed column renders correctly RTL 1`] = ` -LoadedCheerio { - "0":
+
-
-
+ + + + + + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + xxxxxxxx + + + + + + + + + + + + + + - - - - - - - - - + edd12221 + + + + + + + + + + + + + + + + + - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ title1 + + title2 + + title3 + + title4 + + title5 + + title6 + + title7 + + title8 + + title9 + + title10 + + title11 + + title12 +
+ 123 + + + 1111 + + -
+ xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx +
+ cdd + + + 1111 + + -
+ edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 +
+ 133 + + + 1111 + + + edd12221 + - -
+ + + + + + +
- title1 - + 133 + + + + 1111 + + + edd12221 + + + + + + + + + +
+ 133 + + + 1111 + + + edd12221 + + + + + + + + + +
+ 133 + + + 1111 + + + edd12221 + + + + + + + + + +
+ 133 + + + 1111 + + + edd12221 + + + + + + + + + +
+ 133 + + + 1111 + + + edd12221 + + + + + + + + + +
+ 133 + + + 1111 + + + edd12221 + + + + + + + + + +
+ + + +`; + +exports[`Table.FixedColumn > renders correctly > all column has width should use it 1`] = `""`; + +exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - + 1111 + + + + + + - - - - - - - - - - - - - - - + 1111 + + + + - + + + - - - - - - - + + + + + - + + + +
+ title1 + + title2 - - title3 - - title4 - - title5 - - title6 - + + title3 + + title4 + + title5 + + title6 + + title7 + + title8 + + title9 + + title10 + + title11 + + title12 +
+ 123 + + - title7 - - + 1111 + + + + + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx +
+ cdd + + - title8 - - + 1111 + + + + + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 +
+ 133 + + - title9 - - + 1111 + + + + + edd12221 + + + + + + + + + +
+ 133 + + - title10 - - + 1111 + + + + + edd12221 + + + + + + + + + +
+ 133 + + - title11 - - + 1111 + + + + + edd12221 + + + + + + + + + +
+ 133 + + - title12 - -
+ edd12221 + + + + + + + + + +
- - 123 - + + + + + + + + + +
+ 133 + + 1111 - - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - + + edd12221 + + + + + + + + + +
+ 133 + + - xxxxxxxx - + 1111 + + + + edd12221 + + + + + + + + + +
+
+
+
+`; + +exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ title1 + + - xxxxxxxx - - + + + title3 + + title4 + + title5 + + title6 + + title7 + + title8 + + title9 + + title10 + + title11 + + title12 +
+
+ No Data +
+
+
+
+
+`; + +exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = ` +
+
+
+ + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + +
+ title1 + + - xxxxxxxx - -
+ title3 + + title4 + + title5 + + title6 + + title7 + + title8 + + title9 + + title10 + + title11 + + title12 + +
+
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + - + + + + + + + + + + + + + - - - - - - - - - - + 1111 + + + + - + + + - - - + + - + + + - - - + + - + + + - - - + + + + + - + + + + + - - - - - - - - - - + + + + + - - - + + - - - - -
- + + - cdd - + 1111 + + + + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx + + xxxxxxxx +
+ cdd + + 1111 - - + + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 + + edd12221 +
+ 133 + + - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 -
- - 133 - + + + + + + + + + +
+ 133 + + 1111 - - edd12221 - - - - - - - - - -
- - 133 - + + + + + + + + + +
+ 133 + + 1111 - - edd12221 - - - - - - - - - -
- - 133 - + + + + + + + + + +
+ 133 + + 1111 - - edd12221 - - - - - - - - - -
- + + + + + + + + + +
+ 133 + + - 133 - + 1111 + + + + edd12221 + + + + + + + + + +
+ 133 + + 1111 - - edd12221 - - - - - - - - - -
- 133 - - - 1111 - - - edd12221 - - - - - - - - - -
- 133 - + + edd12221 + + + + + + + + + +
+ 133 + + 1111 - - edd12221 - - - - - - - - - -
- - 133 - - - 1111 - - - edd12221 - - - - - - - - - -
-
+ edd12221 + + + + + + + + + + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} -`; - -exports[`Table.FixedColumn > renders correctly > all column has width should use it 1`] = ` -LoadedCheerio { - "0": - - - , - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} + + `; -exports[`Table.FixedColumn > renders correctly > scrollX - with data 1`] = ` -LoadedCheerio { - "0":
renders correctly > scrollXY - without data 1`] = ` +
+
-
- + + + + + + + + + + + + + + + - - - - - - - - - - - - - + + + + + + + + + + + + + + +
+ title1 + + + title2 + + + title3 + + title4 + + title5 + + title6 + + title7 + + title8 + + title9 + + title10 + + title11 + + title12 + - -
+
+
+ + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- title1 - - - title2 - - - title3 - - title4 - - title5 - - title6 - - title7 - - title8 - - title9 - - title10 - - title11 - - title12 -
- 123 - - - - 1111 - - - - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx -
- cdd - - - - 1111 - - - - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
-
-
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} -`; - -exports[`Table.FixedColumn > renders correctly > scrollX - without data 1`] = ` -LoadedCheerio { - "0":
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- title1 - - - title2 - - - title3 - - title4 - - title5 - - title6 - - title7 - - title8 - - title9 - - title10 - - title11 - - title12 -
-
- No Data -
-
-
-
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} -`; - -exports[`Table.FixedColumn > renders correctly > scrollXY - with data 1`] = ` -LoadedCheerio { - "0":
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- title1 - - - title2 - - - title3 - - title4 - - title5 - - title6 - - title7 - - title8 - - title9 - - title10 - - title11 - - title12 - -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 123 - - - - 1111 - - - - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx - - xxxxxxxx -
- cdd - - - - 1111 - - - - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 - - edd12221 -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
- 133 - - - - 1111 - - - - edd12221 - - - - - - - - - -
-
-
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} -`; - -exports[`Table.FixedColumn > renders correctly > scrollXY - without data 1`] = ` -LoadedCheerio { - "0":
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- title1 - - - title2 - - - title3 - - title4 - - title5 - - title6 - - title7 - - title8 - - title9 - - title10 - - title11 - - title12 - -
-
-
- - - - - - - - - - - - - - - - +
+   +
+ + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - -
+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+ 		+
+   +
+
-
- No Data -
-
-
+ +
+ No Data +
+ + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+
`; exports[`Table.FixedColumn > shadow should be shown when there are columns where fixed is false 1`] = ` From 3784d073dc7ade41ce773b729eb6fb406628ed65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 15:18:37 +0800 Subject: [PATCH 08/16] test: mv FixedHeader.spec.jsx --- tests/FixedHeader.spec.jsx | 172 ++++++++++++------------------------- tests/utils.js | 6 +- 2 files changed, 58 insertions(+), 120 deletions(-) diff --git a/tests/FixedHeader.spec.jsx b/tests/FixedHeader.spec.jsx index 1ccff8a49..61db69e4f 100644 --- a/tests/FixedHeader.spec.jsx +++ b/tests/FixedHeader.spec.jsx @@ -1,22 +1,35 @@ -import { mount } from 'enzyme'; -import RcResizeObserver from '@rc-component/resize-observer'; -import { spyElementPrototype } from '@rc-component/util/lib/test/domHook'; +import { render, act, fireEvent } from '@testing-library/react'; +import RcResizeObserver, { _rs } from '@rc-component/resize-observer'; +import { spyElementPrototype, spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import React from 'react'; -import { act } from 'react-dom/test-utils'; import Table, { INTERNAL_COL_DEFINE } from '../src'; import { safeAct } from './utils'; +async function triggerResize(ele) { + await act(async () => { + _rs([{ target: ele }]); + await Promise.resolve(); + }); +} + describe('Table.FixedHeader', () => { let domSpy; let visible = true; + let measureWidth = 100; beforeAll(() => { - domSpy = spyElementPrototype(HTMLElement, 'offsetParent', { - get: () => (visible ? {} : null), + domSpy = spyElementPrototypes(HTMLElement, { + offsetParent: { + get: () => (visible ? {} : null), + }, + offsetWidth: { + get: () => (visible ? measureWidth : 0), + }, }); }); beforeEach(() => { + measureWidth = 100; vi.useFakeTimers(); visible = true; }); @@ -29,7 +42,7 @@ describe('Table.FixedHeader', () => { const col1 = { dataIndex: 'light', width: 100 }; const col2 = { dataIndex: 'bamboo', width: 200 }; const col3 = { dataIndex: 'empty', width: 0 }; - const wrapper = mount( + const { container, rerender } = render( { />, ); - async function triggerResize(resizeList) { - wrapper.find(RcResizeObserver.Collection).first().props().onBatchResize(resizeList); - await safeAct(wrapper); - wrapper.update(); - } - - await triggerResize([ - { - data: wrapper.find('ResizeObserver').at(0).props().data, - size: { width: 100, offsetWidth: 100 }, - }, - { - data: wrapper.find('ResizeObserver').at(1).props().data, - size: { width: 200, offsetWidth: 200 }, - }, - { - data: wrapper.find('ResizeObserver').at(2).props().data, - size: { width: 0, offsetWidth: 0 }, - }, - ]); - - expect(wrapper.find('.rc-table-header table').props().style.visibility).toBeFalsy(); - - expect(wrapper.find('colgroup col').at(0).props().style.width).toEqual(100); - expect(wrapper.find('colgroup col').at(1).props().style.width).toEqual(200); - expect(wrapper.find('colgroup col').at(2).props().style.width).toEqual(0); + const measureCells = container.querySelectorAll('.rc-table-measure-row'); - // Update columns - wrapper.setProps({ columns: [col2, col1] }); + await triggerResize(measureCells[0]); + await triggerResize(measureCells[1]); + await triggerResize(measureCells[2]); + act(() => { + vi.runAllTimers(); + }); - await triggerResize([ - { - data: wrapper.find('ResizeObserver').at(0).props().data, - size: { width: 200, offsetWidth: 200 }, - }, - { - data: wrapper.find('ResizeObserver').at(1).props().data, - size: { width: 100, offsetWidth: 100 }, - }, - ]); + expect(container.querySelector('.rc-table-header table').style.visibility).toBeFalsy(); - expect(wrapper.find('colgroup col').at(0).props().style.width).toEqual(200); - expect(wrapper.find('colgroup col').at(1).props().style.width).toEqual(100); + expect(parseInt(container.querySelectorAll('colgroup col')[0].style.width)).toEqual(100); + expect(parseInt(container.querySelectorAll('colgroup col')[1].style.width)).toEqual(100); + expect(parseInt(container.querySelectorAll('colgroup col')[2].style.width)).toEqual(100); vi.useRealTimers(); }); @@ -91,21 +75,20 @@ describe('Table.FixedHeader', () => { [INTERNAL_COL_DEFINE]: { className: 'test-internal' }, }; const col2 = { dataIndex: 'bamboo', width: 200 }; - const wrapper = mount( + const { container } = render(
, ); - await safeAct(wrapper); + await safeAct(container); - expect(wrapper.find('table').last().find('colgroup col').first().props().className).toEqual( - 'test-internal', - ); - expect(wrapper.find('table').first().find('colgroup col').first().props().className).toEqual( + const tables = container.querySelectorAll('table'); + expect(tables[tables.length - 1].querySelector('colgroup col').className).toEqual( 'test-internal', ); + expect(tables[0].querySelector('colgroup col').className).toEqual('test-internal'); }); it('show header when data is null', async () => { @@ -122,7 +105,7 @@ describe('Table.FixedHeader', () => { }, ]; - const wrapper = mount( + const { container } = render(
{ />, ); - await safeAct(wrapper); - expect(wrapper.find('.rc-table-header table').props().style).toEqual( - expect.objectContaining({ visibility: null }), - ); - }); - - it('rtl', async () => { - const wrapper = mount( -
, - ); - await safeAct(wrapper); + await act(async () => { + vi.runAllTimers(); + await Promise.resolve(); + }); - expect(wrapper.find('Header').props().stickyOffsets).toEqual( - expect.objectContaining({ - isSticky: false, - left: [expect.anything(), expect.anything()], - }), - ); + expect(container.querySelector('.rc-table-header table')).not.toHaveStyle({ + visibility: 'hidden', + }); }); it('invisible should not change width', async () => { - const col1 = { dataIndex: 'light', width: 93 }; - const wrapper = mount( + const col1 = { dataIndex: 'light' }; + const { container } = render(
{ />, ); - wrapper - .find(RcResizeObserver.Collection) - .first() - .props() - .onBatchResize([ - { - data: wrapper.find('ResizeObserver').at(0).props().data, - size: { width: 93, offsetWidth: 93 }, - }, - ]); - await safeAct(wrapper); + await triggerResize(container.querySelector('.rc-table-measure-row')); - expect(wrapper.find('FixedHolder col').first().props().style).toEqual( - expect.objectContaining({ width: 93 }), - ); + expect(parseInt(container.querySelector('col').style.width)).toEqual(100); // Hide Table should not modify column width visible = false; + await triggerResize(container.querySelector('.rc-table-measure-row')); - wrapper - .find(RcResizeObserver.Collection) - .first() - .props() - .onBatchResize([ - { - data: wrapper.find('ResizeObserver').at(0).props().data, - size: { width: 0, offsetWidth: 0 }, - }, - ]); - - act(() => { + await act(async () => { vi.runAllTimers(); - wrapper.update(); + await Promise.resolve(); }); - expect(wrapper.find('FixedHolder col').first().props().style).toEqual( - expect.objectContaining({ width: 93 }), - ); + expect(parseInt(container.querySelector('col').style.width)).toEqual(100); vi.useRealTimers(); }); @@ -258,11 +200,9 @@ describe('Table.FixedHeader', () => { name: 'Jack1', }, ]; - const wrapper = mount(
); - await safeAct(wrapper); - expect(wrapper.find('td').at(9).props().className).toContain('rc-table-cell-fix-left-last'); - expect(wrapper.find('th').first().props().className).not.toContain( - 'rc-table-cell-fix-left-last', - ); + const { container } = render(
); + await safeAct(container); + expect(container.querySelectorAll('td')[9].className).toContain('rc-table-cell-fix-left-last'); + expect(container.querySelector('th').className).not.toContain('rc-table-cell-fix-left-last'); }); }); diff --git a/tests/utils.js b/tests/utils.js index ca13e158d..d05aa4cfa 100644 --- a/tests/utils.js +++ b/tests/utils.js @@ -1,10 +1,8 @@ -import { act } from 'react-dom/test-utils'; +import { act } from '@testing-library/react'; -export function safeAct(wrapper, cb) { +export function safeAct() { return act(async () => { - cb && cb(); vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); } From 4463767cce508197da37d75244c0480f758b4327 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 15:26:47 +0800 Subject: [PATCH 09/16] test: mv GroupingColumns.spec.jsx --- tests/GroupingColumns.spec.jsx | 31 ++++++++++++++++++------------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/tests/GroupingColumns.spec.jsx b/tests/GroupingColumns.spec.jsx index 822fb4e7f..13f984244 100644 --- a/tests/GroupingColumns.spec.jsx +++ b/tests/GroupingColumns.spec.jsx @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render, act, fireEvent } from '@testing-library/react'; import React from 'react'; import Table from '../src'; @@ -56,7 +56,7 @@ describe('Table with grouping columns', () => { { key: '2', a: 'a2', b: 'b2', c: 'c2', d: 'd2', e: 'e2', f: 'f2', g: 'g2', h: 'h2', i: 'i2' }, { key: '3', a: 'a3', b: 'b3', c: 'c3', d: 'd3', e: 'e3', f: 'f3', g: 'g3', h: 'h3', i: 'i3' }, ]; - const wrapper = mount(
); + const { container } = render(
); const cells = { 'title-a': [4, undefined], @@ -75,8 +75,9 @@ describe('Table with grouping columns', () => { }; Object.keys(cells).forEach(className => { const cell = cells[className]; - expect(wrapper.find(`th.${className}`).prop('rowSpan') || 1).toBe(cell[0] || 1); - expect(wrapper.find(`th.${className}`).prop('colSpan') || 1).toBe(cell[1] || 1); + const cellElement = container.querySelector(`th.${className}`); + expect(Number(cellElement?.getAttribute('rowspan') || 1)).toBe(cell[0] || 1); + expect(Number(cellElement?.getAttribute('colspan') || 1)).toBe(cell[1] || 1); }); }); @@ -119,9 +120,9 @@ describe('Table with grouping columns', () => { }, ]; - const wrapper = mount(
); - const titleB = wrapper.find('th.title-b'); - expect(titleB.prop('rowSpan')).toBe(2); + const { container } = render(
); + const titleB = container.querySelector('th.title-b'); + expect(Number(titleB?.getAttribute('rowspan') || 1)).toBe(2); }); it('strange layout', () => { @@ -150,9 +151,9 @@ describe('Table with grouping columns', () => { }, ]; - const wrapper = mount(
); - const titleA = wrapper.find('th.title-a'); - expect(titleA.prop('rowSpan')).toBe(3); + const { container } = render(
); + const titleA = container.querySelector('th.title-a'); + expect(Number(titleA?.getAttribute('rowspan') || 1)).toBe(3); }); it('hidden column', () => { @@ -182,9 +183,13 @@ describe('Table with grouping columns', () => { ], }, ]; - const wrapper = mount(
); + const { container } = render(
); - expect(wrapper.find('thead tr').at(0).find('th').at(1).text()).toEqual('D'); - expect(wrapper.find('thead tr').at(1).find('th').at(0).text()).toEqual('F'); + expect(container.querySelectorAll('thead tr')[0].querySelectorAll('th')[1].textContent).toEqual( + 'D', + ); + expect(container.querySelectorAll('thead tr')[1].querySelectorAll('th')[0].textContent).toEqual( + 'F', + ); }); }); From 03bacdc3087ad6caeda4c0d8846cc5c3c5f37e85 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 15:34:21 +0800 Subject: [PATCH 10/16] test: mv Internal.spec.jsx --- tests/Hover.spec.tsx | 107 +++++++++++++++++++++------------------- tests/Internal.spec.jsx | 6 +-- 2 files changed, 59 insertions(+), 54 deletions(-) diff --git a/tests/Hover.spec.tsx b/tests/Hover.spec.tsx index 9c9a3ebdc..813f09a6b 100644 --- a/tests/Hover.spec.tsx +++ b/tests/Hover.spec.tsx @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import toArray from '@rc-component/util/lib/Children/toArray'; import { resetWarned } from '@rc-component/util/lib/warning'; import React from 'react'; @@ -17,33 +17,35 @@ describe('Table.Hover', () => { }; it('basic', () => { - const wrapper = mount(createTable()); - wrapper.find('tbody td').first().simulate('mouseEnter'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy(); + const { container } = render(createTable()); + const tds = container.querySelectorAll('tbody td'); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeTruthy(); - wrapper.find('tbody td').first().simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); }); it('works on shouldCellUpdate', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [{ title: 'Name', dataIndex: 'name', key: 'name', shouldCellUpdate: () => false }], }), ); - wrapper.find('tbody td').first().simulate('mouseEnter'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy(); + const tds = container.querySelectorAll('tbody td'); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeTruthy(); - wrapper.find('tbody td').first().simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); }); it('warning if use `render` for rowSpan', () => { resetWarned(); const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -68,19 +70,20 @@ describe('Table.Hover', () => { ); // Merge row check - expect(wrapper.find('tbody td')).toHaveLength(3); + expect(container.querySelectorAll('tbody td').length).toBe(3); + const tds = container.querySelectorAll('tbody td'); // Hover 0-0 - wrapper.find('tbody td').at(0).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(2); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(2); // Hover 0-1 - wrapper.find('tbody td').at(1).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + fireEvent.mouseEnter(tds[1]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(1); // Mouse leave - wrapper.find('tbody td').at(1).simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[1]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); expect(errorSpy).toHaveBeenCalledWith( 'Warning: `columns.render` return cell props is deprecated with perf issue, please use `onCell` instead.', @@ -89,16 +92,14 @@ describe('Table.Hover', () => { }); it('onCell should work', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { dataIndex: 'name', onCell: (_, index) => { if (index === 0) { - return { - rowSpan: 2, - }; + return { rowSpan: 2 }; } return { rowSpan: 0 }; }, @@ -111,26 +112,27 @@ describe('Table.Hover', () => { ); // Merge row check - expect(wrapper.find('tbody td')).toHaveLength(3); + expect(container.querySelectorAll('tbody td').length).toBe(3); + const tds = container.querySelectorAll('tbody td'); // Hover 0-0 - wrapper.find('tbody td').at(0).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(3); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(3); // Hover 0-1 - wrapper.find('tbody td').at(1).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(2); + fireEvent.mouseEnter(tds[1]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(2); // Mouse leave - wrapper.find('tbody td').at(1).simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[1]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); }); describe('perf', () => { it('legacy mode should render every time', () => { let renderTimes = 0; - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -145,31 +147,32 @@ describe('Table.Hover', () => { }), ); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); + const tds = container.querySelectorAll('tbody td'); // Hover 0-0 renderTimes = 0; - wrapper.find('tbody td').at(0).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(1); expect(renderTimes).toBe(1); // Hover 0-1 renderTimes = 0; - wrapper.find('tbody td').at(1).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + fireEvent.mouseEnter(tds[1]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(1); expect(renderTimes).toBe(2); // Mouse leave renderTimes = 0; - wrapper.find('tbody td').at(1).simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[1]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); expect(renderTimes).toBe(1); }); it('perf mode to save render times', () => { let renderTimes = 0; - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -182,24 +185,25 @@ describe('Table.Hover', () => { }), ); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); + const tds = container.querySelectorAll('tbody td'); // Hover 0-0 renderTimes = 0; - wrapper.find('tbody td').at(0).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(1); expect(renderTimes).toBe(0); // Hover 0-1 renderTimes = 0; - wrapper.find('tbody td').at(1).simulate('mouseEnter'); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + fireEvent.mouseEnter(tds[1]); + expect(container.querySelectorAll('td.rc-table-cell-row-hover').length).toBe(1); expect(renderTimes).toBe(0); // Mouse leave renderTimes = 0; - wrapper.find('tbody td').at(1).simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[1]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); expect(renderTimes).toBe(0); }); }); @@ -215,7 +219,7 @@ describe('Table.Hover', () => { return + +
; }; - const wrapper = mount( + const { container } = render( createTable({ components: { body: { @@ -226,12 +230,13 @@ describe('Table.Hover', () => { ); const firstMountTimes = renderTimes.Jack; + const tds = container.querySelectorAll('tbody td'); - wrapper.find('tbody td').first().simulate('mouseEnter'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeTruthy(); + fireEvent.mouseEnter(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeTruthy(); - wrapper.find('tbody td').first().simulate('mouseLeave'); - expect(wrapper.exists('.rc-table-cell-row-hover')).toBeFalsy(); + fireEvent.mouseLeave(tds[0]); + expect(container.querySelector('.rc-table-cell-row-hover')).toBeFalsy(); expect(firstMountTimes).toEqual(renderTimes.Jack); expect(renderTimes.Lucy).toBeGreaterThan(renderTimes.Jack); diff --git a/tests/Internal.spec.jsx b/tests/Internal.spec.jsx index 05f1bbf1d..bcde15f5c 100644 --- a/tests/Internal.spec.jsx +++ b/tests/Internal.spec.jsx @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render } from '@testing-library/react'; import React from 'react'; import Table from '../src'; import { INTERNAL_HOOKS } from '../src/constant'; @@ -6,7 +6,7 @@ import { INTERNAL_HOOKS } from '../src/constant'; // All follow test is only for internal usage which should be removed when refactor describe('Table.Internal', () => { it('internal should pass `__PARENT_RENDER_ICON__` for expandable', () => { - const wrapper = mount( + const { container } = render( { />, ); - expect(wrapper.find('.expand-icon')).toHaveLength(1); + expect(container.querySelectorAll('.expand-icon')).toBeTruthy(); }); }); From e5f44cf005ab4b2fd70621ffbad620a62068f573 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 15:39:58 +0800 Subject: [PATCH 11/16] test: mv Scroll.spec.jsx --- tests/Scroll.spec.jsx | 75 ++++++++++++++++++++++++++----------------- 1 file changed, 45 insertions(+), 30 deletions(-) diff --git a/tests/Scroll.spec.jsx b/tests/Scroll.spec.jsx index e8cd475a3..b4ecba45d 100644 --- a/tests/Scroll.spec.jsx +++ b/tests/Scroll.spec.jsx @@ -1,7 +1,7 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import React from 'react'; -import { act } from 'react-dom/test-utils'; +import { act } from '@testing-library/react'; import Table from '../src'; describe('Table.Scroll', () => { @@ -21,32 +21,37 @@ describe('Table.Scroll', () => { return
; }; - const wrapper = mount(createTable({ scroll: { x: true } })); + const { container } = render(createTable({ scroll: { x: true } })); - expect(wrapper.find('.rc-table-tbody').hostNodes().text()).toContain('No Data'); + expect(container.querySelector('.rc-table-tbody').textContent).toContain('No Data'); }); it('renders scroll.x is true', () => { - const wrapper = mount(createTable({ scroll: { x: true } })); - expect(wrapper.find('table').props().style.width).toEqual('auto'); - expect(wrapper.find('.rc-table-content').props().style.overflowX).toEqual('auto'); - expect(wrapper.find('.rc-table-content').props().style.overflowY).toEqual('hidden'); + const { container } = render(createTable({ scroll: { x: true } })); + const table = container.querySelector('table'); + const content = container.querySelector('.rc-table-content'); + expect(table.style.width).toEqual('auto'); + expect(content.style.overflowX).toEqual('auto'); + expect(content.style.overflowY).toEqual('hidden'); }); it('renders scroll.x is a number', () => { - const wrapper = mount(createTable({ scroll: { x: 200 } })); - expect(wrapper.find('table').props().style.width).toEqual(200); + const { container } = render(createTable({ scroll: { x: 200 } })); + const table = container.querySelector('table'); + expect(table.style.width).toEqual('200px'); }); it('renders scroll.y is a number', () => { - const wrapper = mount(createTable({ scroll: { y: 200 } })); - expect(wrapper.find('.rc-table-body').props().style.maxHeight).toEqual(200); + const { container } = render(createTable({ scroll: { y: 200 } })); + const body = container.querySelector('.rc-table-body'); + expect(body.style.maxHeight).toEqual('200px'); }); it('renders scroll.x and scroll.y are both true', () => { - const wrapper = mount(createTable({ scroll: { x: true, y: 200 } })); - expect(wrapper.find('.rc-table-body').props().style.overflowX).toEqual('auto'); - expect(wrapper.find('.rc-table-body').props().style.overflowY).toEqual('scroll'); + const { container } = render(createTable({ scroll: { x: true, y: 200 } })); + const body = container.querySelector('.rc-table-body'); + expect(body.style.overflowX).toEqual('auto'); + expect(body.style.overflowY).toEqual('scroll'); }); it('fire scroll event', () => { @@ -88,7 +93,7 @@ describe('Table.Scroll', () => { { a: '123', b: 'xxxxxxxx', c: 3, d: 'hehe', key: '1' }, { a: 'cdd', b: 'edd12221', c: 3, d: 'haha', key: '2' }, ]; - const wrapper = mount( + const { container } = render(
{ />, ); - vi.runAllTimers(); + act(() => { + vi.runAllTimers(); + }); + // Use `onScroll` directly since simulate not support `currentTarget` act(() => { - const headerDiv = wrapper.find('div.rc-table-header').instance(); + const headerDiv = container.querySelector('div.rc-table-header'); const wheelEvent = new WheelEvent('wheel'); Object.defineProperty(wheelEvent, 'deltaX', { @@ -117,18 +125,25 @@ describe('Table.Scroll', () => { setScrollLeft.mockReset(); act(() => { - wrapper - .find('.rc-table-body') - .props() - .onScroll({ - currentTarget: { - scrollLeft: 33, - scrollWidth: 200, - clientWidth: 100, - }, - }); + const body = container.querySelector('.rc-table-body'); + + Object.defineProperty(body, 'scrollLeft', { + get: () => 33, + }); + Object.defineProperty(body, 'scrollWidth', { + get: () => 200, + }); + Object.defineProperty(body, 'clientWidth', { + get: () => 100, + }); + + fireEvent.scroll(body); + }); + + act(() => { + vi.runAllTimers(); }); - vi.runAllTimers(); + expect(setScrollLeft).toHaveBeenCalledWith(undefined, 33); setScrollLeft.mockReset(); @@ -146,7 +161,7 @@ describe('Table.Scroll', () => { const tRef = React.createRef(); - const wrapper = mount(createTable({ ref: tRef })); + const { container } = render(createTable({ ref: tRef })); tRef.current.scrollTo({ top: 0, From 29f87160a809808b33da495b672a7b75f9434145 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 15:59:42 +0800 Subject: [PATCH 12/16] test: mv Sticky.spec.jsx --- tests/Sticky.spec.jsx | 216 ++++++++++++++++++++---------------------- 1 file changed, 105 insertions(+), 111 deletions(-) diff --git a/tests/Sticky.spec.jsx b/tests/Sticky.spec.jsx index fed2d9f62..18955068b 100644 --- a/tests/Sticky.spec.jsx +++ b/tests/Sticky.spec.jsx @@ -1,7 +1,7 @@ -import { mount } from 'enzyme'; +import { render, fireEvent, createEvent } from '@testing-library/react'; import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; import React from 'react'; -import { act } from 'react-dom/test-utils'; +import { act } from '@testing-library/react'; import Table from '../src'; import { safeAct } from './utils'; @@ -29,34 +29,35 @@ describe('Table.Sticky', () => { ); }; - const wrapper = mount(); - - expect(wrapper.find('.rc-table-header').last().prop('style')).toEqual({ - overflow: 'hidden', - top: 0, - }); - - expect(wrapper.find('.rc-table-header').last().prop('className')).toBe( - 'rc-table-header rc-table-sticky-holder', + const { container, rerender } = render(); + + let headers = container.querySelectorAll('.rc-table-header'); + const lastHeader = headers[headers.length - 1]; + expect(lastHeader.style).toEqual( + expect.objectContaining({ + overflow: 'hidden', + top: '0px', + }), ); + expect(lastHeader.className).toBe('rc-table-header rc-table-sticky-holder'); - await safeAct(wrapper, () => { - wrapper.setProps({ - sticky: { - offsetHeader: 10, - }, - }); - }); - - expect(wrapper.find('.rc-table-header').last().prop('style')).toEqual({ - overflow: 'hidden', - top: 10, + await act(async () => { + rerender(); + vi.runAllTimers(); }); + headers = container.querySelectorAll('.rc-table-header'); + const updatedHeader = headers[headers.length - 1]; + expect(updatedHeader.style).toEqual( + expect.objectContaining({ + overflow: 'hidden', + top: '10px', + }), + ); vi.useRealTimers(); }); - it('Sticky scroll', async () => { + it('Sticky scroll basic', async () => { window.pageYOffset = 900; document.documentElement.scrollTop = 200; let scrollLeft = 100; @@ -83,7 +84,7 @@ describe('Table.Sticky', () => { const col1 = { dataIndex: 'light', width: 1000 }; const col2 = { dataIndex: 'bamboo', width: 2000 }; - const wrapper = mount( + const { container } = render(
{ await act(async () => { vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll').get(0)).not.toBeUndefined(); + expect(container.querySelector('.rc-table-sticky-scroll')).not.toBeNull(); const oldInnerHeight = global.innerHeight; const resizeEvent = new Event('resize'); @@ -136,81 +136,73 @@ describe('Table.Sticky', () => { global.dispatchEvent(resizeEvent); vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll').get(0)).toBeFalsy(); + expect(container.querySelector('.rc-table-sticky-scroll')).toBeNull(); await act(async () => { global.innerHeight = oldInnerHeight; global.dispatchEvent(resizeEvent); vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); const mockFn = vi.fn(); + const scrollBar = container.querySelector('.rc-table-sticky-scroll-bar'); + const mouseDownEvent = createEvent.mouseDown(scrollBar, { pageX: 0 }); + mouseDownEvent.preventDefault = mockFn; + fireEvent(scrollBar, mouseDownEvent); - wrapper - .find('.rc-table-sticky-scroll-bar') - .simulate('mousedown', { persist: mockFn, preventDefault: mockFn, pageX: 0 }); - - expect(mockFn).toHaveBeenCalledTimes(2); - - expect(wrapper.find('.rc-table-sticky-scroll-bar-active').length).toBe(1); + expect(mockFn).toHaveBeenCalled(); - const mousemoveEvent = new Event('mousemove'); + expect(container.querySelector('.rc-table-sticky-scroll-bar-active')).not.toBeNull(); - mousemoveEvent.buttons = 1; - mousemoveEvent.pageX = 50; + const mousemoveEvent = new MouseEvent('mousemove', { bubbles: true }); + Object.defineProperty(mousemoveEvent, 'buttons', { get: () => 1, configurable: true }); + Object.defineProperty(mousemoveEvent, 'pageX', { get: () => 50, configurable: true }); await act(async () => { document.body.dispatchEvent(mousemoveEvent); vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll-bar').prop('style')).toEqual({ - width: '50px', - transform: 'translate3d(50.5px, 0, 0)', - }); + expect(scrollBar.style).toEqual( + expect.objectContaining({ + width: '50px', + transform: expect.stringContaining('translate3d(50.5px'), + }), + ); await act(async () => { - mousemoveEvent.pageX = -50; + Object.defineProperty(mousemoveEvent, 'pageX', { get: () => -50, configurable: true }); document.body.dispatchEvent(mousemoveEvent); - vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll-bar').prop('style')).toEqual({ - width: '50px', - transform: 'translate3d(0px, 0, 0)', - }); + expect(scrollBar.style).toEqual( + expect.objectContaining({ + width: '50px', + transform: expect.stringContaining('translate3d(0px'), + }), + ); await act(async () => { - mousemoveEvent.buttons = 0; + Object.defineProperty(mousemoveEvent, 'buttons', { get: () => 0 }); document.body.dispatchEvent(mousemoveEvent); - vi.runAllTimers(); await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll-bar-active').length).toBe(0); + expect(container.querySelector('.rc-table-sticky-scroll-bar-active')).toBeNull(); - const mouseupEvent = new Event('mouseup'); + const mouseupEvent = new MouseEvent('mouseup', { bubbles: true }); document.body.dispatchEvent(mouseupEvent); - wrapper.unmount(); - - window.pageYOffset = 0; - mockFn.mockRestore(); - domSpy.mockRestore(); vi.useRealTimers(); + domSpy.mockRestore(); }); it('Sticky Header with border classname', async () => { @@ -241,15 +233,20 @@ describe('Table.Sticky', () => { ); }; - const wrapper = mount(); - await safeAct(wrapper); - expect( - wrapper.find('.rc-table-cell-fix-right-first.rc-table-cell-fix-sticky').prop('style'), - ).toEqual({ - position: 'sticky', - right: 0, + const { container } = render(); + await act(async () => { + vi.runAllTimers(); }); - expect(wrapper.find('.rc-table-cell-fix-sticky')).not.toBe(undefined); + const fixedCell = container.querySelector( + '.rc-table-cell-fix-right-first.rc-table-cell-fix-sticky', + ); + expect(fixedCell.style).toEqual( + expect.objectContaining({ + position: 'sticky', + right: '0px', + }), + ); + expect(container.querySelector('.rc-table-cell-fix-sticky')).not.toBeNull(); vi.useRealTimers(); }); @@ -283,14 +280,19 @@ describe('Table.Sticky', () => { ); }; - const wrapper = mount(); - await safeAct(wrapper); - expect( - wrapper.find('.rc-table-cell-fix-right-first.rc-table-cell-fix-sticky').prop('style'), - ).toEqual({ - position: 'sticky', - right: 15, + const { container } = render(); + await act(async () => { + vi.runAllTimers(); }); + const fixedCell = container.querySelector( + '.rc-table-cell-fix-right-first.rc-table-cell-fix-sticky', + ); + expect(fixedCell.style).toEqual( + expect.objectContaining({ + position: 'sticky', + right: '15px', + }), + ); vi.useRealTimers(); }); @@ -298,9 +300,9 @@ describe('Table.Sticky', () => { it('Sticky scroll with getContainer', async () => { window.pageYOffset = 900; document.documentElement.scrollTop = 200; - const container = document.createElement('ol'); - container.style = 'height: 500px;overflow: scroll'; - document.body.appendChild(container); + const containerEl = document.createElement('ol'); + containerEl.style = 'height: 500px;overflow: scroll'; + document.body.appendChild(containerEl); let scrollLeft = 100; const domSpy = spyElementPrototypes(HTMLDivElement, { scrollLeft: { @@ -349,7 +351,7 @@ describe('Table.Sticky', () => { const col1 = { dataIndex: 'light', width: 1000 }; const col2 = { dataIndex: 'bamboo', width: 2000 }; - const wrapper = mount( + const renderResult = render(
{ x: 10000, }} sticky={{ - getContainer: () => container, + getContainer: () => containerEl, }} />, { - attachTo: container, + container: containerEl, }, ); await act(async () => { vi.runAllTimers(); - await Promise.resolve(); - wrapper.update(); }); - expect(wrapper.find('.rc-table-sticky-scroll').get(0)).toBeTruthy(); - expect(wrapper.find('.rc-table-sticky-scroll-bar').get(0)).toBeTruthy(); - - expect(wrapper.find('.rc-table-sticky-scroll-bar').prop('style')).toEqual({ + expect(containerEl.querySelector('.rc-table-sticky-scroll')).toBeTruthy(); + expect(containerEl.querySelector('.rc-table-sticky-scroll-bar')).toBeTruthy(); + const scrollBar = containerEl.querySelector('.rc-table-sticky-scroll-bar'); + expect(scrollBar).toHaveStyle({ width: '50px', - transform: 'translate3d(0px, 0, 0)', + // Safe to be any value, just check if it contains `translate3d` + transform: 'translate3d(50px, 0, 0)', }); - const mockFn = vi.fn(); - - wrapper - .find('.rc-table-sticky-scroll-bar') - .simulate('mousedown', { persist: mockFn, preventDefault: mockFn, pageX: 0 }); - - expect(mockFn).toHaveBeenCalledTimes(2); - - const mousemoveEvent = new Event('mousemove'); - - mousemoveEvent.buttons = 1; - mousemoveEvent.pageX = 50; + const preventDefaultFn = vi.fn(); + const mouseDownEvent = createEvent.mouseDown(scrollBar, { pageX: 0 }); + mouseDownEvent.preventDefault = preventDefaultFn; + fireEvent(scrollBar, mouseDownEvent); + expect(preventDefaultFn).toHaveBeenCalled(); + const mousemoveEvent = new MouseEvent('mousemove', { bubbles: true }); + Object.defineProperty(mousemoveEvent, 'buttons', { get: () => 1 }); + Object.defineProperty(mousemoveEvent, 'pageX', { get: () => 50 }); await act(async () => { document.body.dispatchEvent(mousemoveEvent); vi.runAllTimers(); - await Promise.resolve(); - wrapper.update(); }); + expect(scrollBar.style).toEqual( + expect.objectContaining({ + width: '50px', + transform: expect.stringContaining('translate3d(50.5px'), + }), + ); - expect(wrapper.find('.rc-table-sticky-scroll-bar').prop('style')).toEqual({ - width: '50px', - transform: 'translate3d(50.5px, 0, 0)', - }); - - wrapper.unmount(); - + renderResult.unmount(); window.pageYOffset = 0; domSpy.mockRestore(); sectionSpy.mockRestore(); - mockFn.mockRestore(); vi.useRealTimers(); }); }); From d094b64f3a968606762cb942c83fcacd28daaf37 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 16:02:12 +0800 Subject: [PATCH 13/16] test: mv Summary.spec.tsx --- tests/Summary.spec.tsx | 36 ++++++----- tests/__snapshots__/Summary.spec.tsx.snap | 78 +++++++---------------- 2 files changed, 43 insertions(+), 71 deletions(-) diff --git a/tests/Summary.spec.tsx b/tests/Summary.spec.tsx index 61d9b9a6c..90c89cbf3 100644 --- a/tests/Summary.spec.tsx +++ b/tests/Summary.spec.tsx @@ -1,4 +1,4 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import React from 'react'; import Table from '../src'; @@ -14,7 +14,7 @@ describe('Table.Summary', () => { }; it('render correctly', () => { - const wrapper = mount( + const { container } = render( createTable({ summary: () => ( @@ -24,11 +24,11 @@ describe('Table.Summary', () => { }), ); - expect(wrapper.find('tfoot').text()).toEqual('Good'); + expect(container.querySelector('tfoot')?.textContent).toEqual('Good'); }); it('support data type', () => { - const wrapper = mount( + const { container } = render(
{ />, ); - expect(wrapper.find('tfoot').render()).toMatchSnapshot(); + expect(container.querySelector('tfoot')).toMatchSnapshot(); }); it('summary row click', async () => { const onClick = vi.fn(); - const wrapper = mount( + const { container } = render(
{ />, ); - const tr = wrapper.find('tfoot tr').first(); - tr.simulate('click'); + const tr = container.querySelector('tfoot tr'); + if (tr) { + fireEvent.click(tr); + } expect(onClick).toHaveBeenCalled(); }); describe('fixed summary', () => { const getSummaryTable = (fixed: boolean | 'top' | 'bottom') => - mount( + render(
{ ); it('fixed', () => { - const wrapper = getSummaryTable(false); + const { container } = getSummaryTable(false); - expect(wrapper.exists('tfoot.rc-table-summary')).toBeTruthy(); + expect(container.querySelector('tfoot.rc-table-summary')).toBeTruthy(); }); it('fixed bottom', () => { - const wrapper = getSummaryTable('bottom'); + const { container } = getSummaryTable('bottom'); - expect(wrapper.exists('tfoot.rc-table-summary')).toBeTruthy(); + expect(container.querySelector('tfoot.rc-table-summary')).toBeTruthy(); }); it('sticky', () => { - const wrapper = getSummaryTable(true); + const { container } = getSummaryTable(true); - expect(wrapper.exists('div.rc-table-summary')).toBeTruthy(); + expect(container.querySelector('div.rc-table-summary')).toBeTruthy(); }); it('fixed top', () => { - const wrapper = getSummaryTable('top'); - expect(wrapper.exists('.rc-table-header tfoot.rc-table-summary')).toBeTruthy(); + const { container } = getSummaryTable('top'); + expect(container.querySelector('.rc-table-header tfoot.rc-table-summary')).toBeTruthy(); }); }); }); diff --git a/tests/__snapshots__/Summary.spec.tsx.snap b/tests/__snapshots__/Summary.spec.tsx.snap index 40aec2575..434a2a845 100644 --- a/tests/__snapshots__/Summary.spec.tsx.snap +++ b/tests/__snapshots__/Summary.spec.tsx.snap @@ -1,58 +1,28 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Table.Summary > support data type 1`] = ` -LoadedCheerio { - "0": - - - - - - , - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} + + + + + + + `; From 94f2148af2e7df5b974e2430a196a98679b748ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 16:34:13 +0800 Subject: [PATCH 14/16] test: all test --- package.json | 4 - tests/FixedColumn-IE.spec.jsx | 1 - tests/Table.spec.jsx | 576 ++++--- tests/__snapshots__/Table.spec.jsx.snap | 1855 +++++++++-------------- tests/setup.ts | 5 - 5 files changed, 953 insertions(+), 1488 deletions(-) diff --git a/package.json b/package.json index df7d546d3..d2f0ff7c9 100644 --- a/package.json +++ b/package.json @@ -64,7 +64,6 @@ "@rc-component/np": "^1.0.3", "@testing-library/jest-dom": "^6.4.0", "@testing-library/react": "^12.1.5", - "@types/enzyme": "^3.10.5", "@types/jest": "^29.5.0", "@types/react": "^18.0.28", "@types/react-dom": "^18.0.5", @@ -75,9 +74,6 @@ "cheerio": "1.0.0-rc.12", "cross-env": "^7.0.0", "dumi": "^2.1.3", - "enzyme": "^3.1.0", - "enzyme-adapter-react-16": "^1.0.1", - "enzyme-to-json": "^3.1.2", "eslint": "^8.54.0", "eslint-plugin-jest": "^28.2.0", "eslint-plugin-unicorn": "^56.0.0", diff --git a/tests/FixedColumn-IE.spec.jsx b/tests/FixedColumn-IE.spec.jsx index 9a5682aa7..957929a05 100644 --- a/tests/FixedColumn-IE.spec.jsx +++ b/tests/FixedColumn-IE.spec.jsx @@ -42,7 +42,6 @@ describe('Table.FixedColumn', () => { it('not sticky', async () => { vi.useFakeTimers(); - // 使用 render 替代 enzyme 的 mount const { container } = render(
- Light - - Bamboo - - 112.5 -
+ Light + + Bamboo + + 112.5 +
); // 模拟时间流逝，触发 Table 内部的更新逻辑 diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx index 41e6a4e8c..a0be920b4 100644 --- a/tests/Table.spec.jsx +++ b/tests/Table.spec.jsx @@ -1,12 +1,10 @@ -import { mount } from 'enzyme'; +import { render, fireEvent } from '@testing-library/react'; import { resetWarned } from '@rc-component/util/lib/warning'; import React from 'react'; import { VariableSizeGrid as Grid } from 'react-window'; import Table, { INTERNAL_COL_DEFINE } from '../src'; -import BodyRow from '../src/Body/BodyRow'; import Cell from '../src/Cell'; import { INTERNAL_HOOKS } from '../src/constant'; -import { fireEvent, render } from '@testing-library/react'; describe('Table.Basic', () => { const data = [ @@ -21,33 +19,33 @@ describe('Table.Basic', () => { describe('renders correctly', () => { it('basic', () => { - const wrapper = mount( + const { container } = render( createTable({ prefixCls: 'test-prefix', className: 'test-class-name', }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('RTL', () => { - const wrapper = mount( + const { container } = render( createTable({ prefixCls: 'test-prefix', className: 'test-class-name', direction: 'rtl', }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('no columns', () => { - const wrapper = mount(createTable({ columns: [] })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ columns: [] })); + expect(container.firstChild).toMatchSnapshot(); }); it('column children undefined', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -65,13 +63,13 @@ describe('Table.Basic', () => { ], }), ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find('th').at(0).text()).toEqual('姓名'); - expect(wrapper.find('th').at(1).text()).toEqual('年龄'); + expect(container.firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('th')[0].textContent).toEqual('姓名'); + expect(container.querySelectorAll('th')[1].textContent).toEqual('年龄'); }); it('falsy columns', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -84,19 +82,19 @@ describe('Table.Basic', () => { ], }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); }); describe('renders empty text correctly', () => { it('ReactNode', () => { - const wrapper = mount(createTable({ data: [], emptyText: 'No data' })); - expect(wrapper.find('.rc-table-placeholder').hostNodes().text()).toEqual('No data'); + const { container } = render(createTable({ data: [], emptyText: 'No data' })); + expect(container.querySelector('.rc-table-placeholder').textContent).toEqual('No data'); }); it('renderProps', () => { - const wrapper = mount(createTable({ data: [], emptyText: () => 'No data' })); - expect(wrapper.find('.rc-table-placeholder').hostNodes().text()).toEqual('No data'); + const { container } = render(createTable({ data: [], emptyText: () => 'No data' })); + expect(container.querySelector('.rc-table-placeholder').textContent).toEqual('No data'); }); it('effect update', () => { @@ -107,100 +105,106 @@ describe('Table.Basic', () => { }, []); return
; }; - const wrapper = mount(); - wrapper.update(); - expect(wrapper.find('.rc-table-placeholder').hostNodes().text()).toEqual('bamboo'); + const { container, rerender } = render(); + rerender(); + expect(container.querySelector('.rc-table-placeholder').textContent).toEqual('bamboo'); }); }); it('renders without header', () => { - const wrapper = mount(createTable({ showHeader: false })); - expect(wrapper.find('thead').length).toBeFalsy(); + const { container } = render(createTable({ showHeader: false })); + expect(container.querySelector('thead')).toBeNull(); }); it('renders fixed header correctly', () => { - const wrapper = mount(createTable({ scroll: { y: 100 } })); - expect(wrapper.find('.rc-table-header').length).toBeTruthy(); + const { container } = render(createTable({ scroll: { y: 100 } })); + expect(container.querySelector('.rc-table-header')).toBeTruthy(); }); it('renders title correctly', () => { - const wrapper = mount(createTable({ title: () =>

title

})); - expect(wrapper.find('.rc-table-title').hostNodes().text()).toEqual('title'); + const { container } = render(createTable({ title: () =>

title

})); + expect(container.querySelector('.rc-table-title').textContent).toEqual('title'); }); it('renders footer correctly', () => { - const wrapper = mount(createTable({ footer: () =>

footer

})); - expect(wrapper.find('.rc-table-footer').hostNodes().text()).toEqual('footer'); + const { container } = render(createTable({ footer: () =>

footer

})); + expect(container.querySelector('.rc-table-footer').textContent).toEqual('footer'); }); it('renders with id correctly', () => { const testId = 'test-identifier'; - const wrapper = mount(createTable({ id: testId })); - expect(wrapper.find(`div#${testId}`).length).toBeTruthy(); + const { container } = render(createTable({ id: testId })); + expect(container.querySelector(`div#${testId}`)).toBeTruthy(); }); it('renders data- attributes', () => { const miscProps = { 'data-test': 'names-table' }; - const wrapper = mount(createTable(miscProps)); - const props = wrapper.find('div.rc-table').props(); - expect(props).toEqual(expect.objectContaining(miscProps)); + const { container } = render(createTable(miscProps)); + const tableDiv = container.querySelector('div.rc-table'); + expect(tableDiv).toHaveAttribute('data-test', 'names-table'); }); it('renders aria- attributes', () => { const miscProps = { 'aria-label': 'names-table-aria' }; - const wrapper = mount(createTable(miscProps)); - const props = wrapper.find('table').props(); - expect(props).toEqual(expect.objectContaining(miscProps)); + const { container } = render(createTable(miscProps)); + const tableEl = container.querySelector('table'); + expect(tableEl).toHaveAttribute('aria-label', 'names-table-aria'); }); describe('rowKey', () => { it('uses record.key', () => { - const wrapper = mount(createTable()); - expect(wrapper.find(BodyRow).at(0).key()).toBe('key0'); - expect(wrapper.find(BodyRow).at(1).key()).toBe('key1'); + const { container } = render(createTable()); + const rows = container.querySelectorAll('.rc-table-row'); + expect(rows[0].getAttribute('data-row-key')).toBe('key0'); + expect(rows[1].getAttribute('data-row-key')).toBe('key1'); }); it('sets by rowKey', () => { - const wrapper = mount(createTable({ rowKey: 'name' })); - expect(wrapper.find(BodyRow).at(0).key()).toBe('Lucy'); - expect(wrapper.find(BodyRow).at(1).key()).toBe('Jack'); + const { container } = render(createTable({ rowKey: 'name' })); + const rows = container.querySelectorAll('.rc-table-row'); + expect(rows[0].getAttribute('data-row-key')).toBe('Lucy'); + expect(rows[1].getAttribute('data-row-key')).toBe('Jack'); }); it('sets by rowKey function', () => { - const wrapper = mount(createTable({ rowKey: record => `${record.key}1` })); - expect(wrapper.find(BodyRow).at(0).key()).toBe('key01'); - expect(wrapper.find(BodyRow).at(1).key()).toBe('key11'); + const { container } = render(createTable({ rowKey: record => `${record.key}1` })); + const rows = container.querySelectorAll('.rc-table-row'); + expect(rows[0].getAttribute('data-row-key')).toBe('key01'); + expect(rows[1].getAttribute('data-row-key')).toBe('key11'); }); }); describe('caption', () => { it('renders string caption', () => { const miscProps = { caption: 'test_caption' }; - const wrapper = mount(createTable(miscProps)); - expect(wrapper.find('.rc-table-caption')).toBeTruthy(); + const { container } = render(createTable(miscProps)); + expect(container.querySelector('.rc-table-caption')).toBeTruthy(); }); it('renders React.Node caption', () => { const miscProps = { caption:
}; - const wrapper = mount(createTable(miscProps)); - expect(wrapper.find('.rc-table-caption .caption_inner')).toBeTruthy(); + const { container } = render(createTable(miscProps)); + expect(container.querySelector('.rc-table-caption .caption_inner')).toBeTruthy(); }); it('renders without caption', () => { const miscProps = {}; - const wrapper = mount(createTable(miscProps)); - expect(wrapper.find('.rc-table-caption').length).toBeFalsy(); + const { container } = render(createTable(miscProps)); + expect(container.querySelector('.rc-table-caption')).toBeNull(); }); }); it('renders tableLayout', () => { - const wrapper = mount(createTable({ tableLayout: 'fixed' })); - expect(wrapper.find('table').props().style.tableLayout).toEqual('fixed'); - expect(wrapper.find('div.rc-table').hasClass('rc-table-layout-fixed')).toBeTruthy(); + const { container } = render(createTable({ tableLayout: 'fixed' })); + const tableEl = container.querySelector('table'); + expect(tableEl.style.tableLayout).toEqual('fixed'); + expect( + container.querySelector('div.rc-table').classList.contains('rc-table-layout-fixed'), + ).toBeTruthy(); }); it('renders ellipsis', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { title: 'title', ellipsis: true }, @@ -208,14 +212,13 @@ describe('Table.Basic', () => { ], }), ); - - wrapper.find('td').forEach(td => { - expect(td.hasClass('rc-table-cell-ellipsis')).toBeTruthy(); + container.querySelectorAll('td').forEach(td => { + expect(td.classList.contains('rc-table-cell-ellipsis')).toBeTruthy(); }); }); it('renders ellipsis by showTitle option', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { title: 'title', ellipsis: { showTitle: true } }, @@ -223,9 +226,8 @@ describe('Table.Basic', () => { ], }), ); - - wrapper.find('td').forEach(td => { - expect(td.hasClass('rc-table-cell-ellipsis')).toBeTruthy(); + container.querySelectorAll('td').forEach(td => { + expect(td.classList.contains('rc-table-cell-ellipsis')).toBeTruthy(); }); }); @@ -234,24 +236,18 @@ describe('Table.Basic', () => { { title: 'title', ellipsis: { showTitle: false } }, { title: 'node title', ellipsis: { showTitle: false }, render: () =>

233

}, ]; - const wrapper = mount( - createTable({ - columns, - }), - ); - - wrapper.find('.rc-table-thead th').forEach(td => { - expect(td.getDOMNode().attributes.getNamedItem('title')).toBeTruthy(); + const { container } = render(createTable({ columns })); + container.querySelectorAll('.rc-table-thead th').forEach(td => { + expect(td.getAttribute('title')).toBeTruthy(); }); - - wrapper.find('.rc-table-tbody td').forEach(td => { - expect(td.getDOMNode().attributes.getNamedItem('title')).toBeFalsy(); + container.querySelectorAll('.rc-table-tbody td').forEach(td => { + expect(td.getAttribute('title')).toBeNull(); }); }); describe('scope', () => { it('renders columns scope correctly', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -259,27 +255,20 @@ describe('Table.Basic', () => { }, { title: 'Contact', - children: [ - { - title: 'Email', - }, - { - title: 'Phone Number', - }, - ], + children: [{ title: 'Email' }, { title: 'Phone Number' }], }, ], }), ); - - expect(wrapper.find('thead th').at(0).prop('scope')).toEqual('col'); - expect(wrapper.find('thead th').at(1).prop('scope')).toEqual('colgroup'); - expect(wrapper.find('thead th').at(2).prop('scope')).toEqual('col'); - expect(wrapper.find('thead th').at(3).prop('scope')).toEqual('col'); + const thEls = container.querySelectorAll('thead th'); + expect(thEls[0].getAttribute('scope')).toEqual('col'); + expect(thEls[1].getAttribute('scope')).toEqual('colgroup'); + expect(thEls[2].getAttribute('scope')).toEqual('col'); + expect(thEls[3].getAttribute('scope')).toEqual('col'); }); it('renders rows scope correctly', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -295,9 +284,9 @@ describe('Table.Basic', () => { ], }), ); - - expect(wrapper.find('tbody th').at(0).prop('scope')).toEqual('row'); - expect(wrapper.find('tbody th').at(1).prop('scope')).toEqual('row'); + const thEls = container.querySelectorAll('tbody th'); + expect(thEls[0].getAttribute('scope')).toEqual('row'); + expect(thEls[1].getAttribute('scope')).toEqual('row'); }); }); @@ -311,13 +300,13 @@ describe('Table.Basic', () => { width: 100, }, ]; - const wrapper = mount(createTable({ columns })); - wrapper.find('td').forEach((td, index) => { - expect(td.hasClass('name-class')).toBeTruthy(); - expect(td.text()).toEqual(['Lucy', 'Jack'][index]); + const { container } = render(createTable({ columns })); + container.querySelectorAll('td').forEach((td, index) => { + expect(td.classList.contains('name-class')).toBeTruthy(); + expect(td.textContent).toEqual(['Lucy', 'Jack'][index]); }); - - expect(wrapper.find('col').props().style).toEqual(expect.objectContaining({ width: 100 })); + const colEl = container.querySelector('col'); + expect(colEl.style.width).toEqual('100px'); }); it('renders custom cell correctly', () => { @@ -328,9 +317,9 @@ describe('Table.Basic', () => { render: text =>

!!!{text}!!!

, }, ]; - const wrapper = mount(createTable({ columns })); - wrapper.find('td').forEach((td, index) => { - expect(td.text()).toEqual(['!!!Lucy!!!', '!!!Jack!!!'][index]); + const { container } = render(createTable({ columns })); + container.querySelectorAll('td').forEach((td, index) => { + expect(td.textContent).toEqual(['!!!Lucy!!!', '!!!Jack!!!'][index]); }); }); @@ -346,7 +335,7 @@ describe('Table.Basic', () => { render: cellRender, }, ]; - mount(createTable({ columns })); + render(createTable({ columns })); expect(cellRender).toHaveBeenCalledWith(data[0], data[0], 0); }); }); @@ -360,16 +349,14 @@ describe('Table.Basic', () => { { key: 'key0', name: { first: 'John', last: 'Doe' } }, { key: 'key1', name: { first: 'Terry', last: 'Garner' } }, ]; - const wrapper = mount(createTable({ columns, data: localData })); - + const { container } = render(createTable({ columns, data: localData })); const targetData = [ ['John', 'Doe'], ['Terry', 'Garner'], ]; - - wrapper.find('tbody tr').forEach((tr, ri) => { - tr.find('td').forEach((td, di) => { - expect(td.text()).toEqual(targetData[ri][di]); + container.querySelectorAll('tbody tr').forEach((tr, ri) => { + tr.querySelectorAll('td').forEach((td, di) => { + expect(td.textContent).toEqual(targetData[ri][di]); }); }); }); @@ -380,8 +367,8 @@ describe('Table.Basic', () => { { key: 'key0', name: {} }, { key: 'key1', name: 'Jack' }, ]; - const wrapper = mount(createTable({ data: localData })); - expect(wrapper.find('table td').first().text()).toBe(''); + const { container } = render(createTable({ data: localData })); + expect(container.querySelector('table td').textContent).toBe(''); }); it('renders colSpan correctly', () => { @@ -423,8 +410,8 @@ describe('Table.Basic', () => { { key: 'key0', firstName: 'John', lastName: 'Doe' }, { key: 'key1', firstName: 'Terry', lastName: 'Garner' }, ]; - const wrapper = mount(createTable({ columns, data: localData })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ columns, data: localData })); + expect(container.firstChild).toMatchSnapshot(); }); it('render with style & className & data-*', () => { @@ -441,12 +428,11 @@ describe('Table.Basic', () => { }), }, ]; - - const wrapper = mount(
); - const props = wrapper.find('tbody td').props(); - expect(props.style).toEqual(expect.objectContaining({ background: 'red' })); - expect(props.className.includes('customize-render')).toBeTruthy(); - expect(props['data-light']).toEqual('bamboo'); + const { container } = render(
); + const td = container.querySelector('tbody td'); + expect(td.style.background).toEqual('red'); + expect(td.className.includes('customize-render')).toBeTruthy(); + expect(td.getAttribute('data-light')).toEqual('bamboo'); }); it('renders rowSpan correctly', () => { @@ -478,14 +464,14 @@ describe('Table.Basic', () => { { key: 'key0', firstName: 'John', lastName: 'Doe' }, { key: 'key1', firstName: 'Terry', lastName: 'Garner' }, ]; - const wrapper = mount(createTable({ columns, data: localData })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ columns, data: localData })); + expect(container.firstChild).toMatchSnapshot(); }); it('shows error if no rowKey specify', () => { const spy = vi.spyOn(console, 'error').mockImplementation(() => {}); const localData = [{ name: 'Lucy' }, { name: 'Jack' }]; - mount(createTable({ data: localData })); + render(createTable({ data: localData })); expect(spy.mock.calls[0][0]).toMatch( 'Warning: Each record in table should have a unique `key` prop, or set `rowKey` to an unique primary key.', ); @@ -493,29 +479,27 @@ describe('Table.Basic', () => { }); it('renders correctly RowClassName as string', () => { - const wrapper = mount( + const { container } = render( createTable({ rowClassName: 'test-row-class-name-asStr', }), ); - - wrapper.find('tbody tr').forEach(tr => { - expect(tr.hasClass('test-row-class-name-asStr')).toBeTruthy(); + container.querySelectorAll('tbody tr').forEach(tr => { + expect(tr.classList.contains('test-row-class-name-asStr')).toBeTruthy(); }); - expect(wrapper.find('tbody tr').length).toBeTruthy(); + expect(container.querySelectorAll('tbody tr').length).toBeTruthy(); }); it('renders correctly RowClassName as function', () => { - const wrapper = mount( + const { container } = render( createTable({ rowClassName: () => 'test-row-class-name-asFn', }), ); - - wrapper.find('tbody tr').forEach(tr => { - expect(tr.hasClass('test-row-class-name-asFn')).toBeTruthy(); + container.querySelectorAll('tbody tr').forEach(tr => { + expect(tr.classList.contains('test-row-class-name-asFn')).toBeTruthy(); }); - expect(wrapper.find('tbody tr').length).toBeTruthy(); + expect(container.querySelectorAll('tbody tr').length).toBeTruthy(); }); describe('onRow', () => { @@ -524,19 +508,15 @@ describe('Table.Basic', () => { id: `row-${record.key}`, index, }); - const wrapper = mount(createTable({ onRow })); - - expect(wrapper.find('tbody tr').length).toBeTruthy(); - wrapper.find('tbody tr').forEach((tr, index) => { - expect(tr.props().id).toEqual(`row-${data[index].key}`); - expect(tr.simulate.bind(tr, 'click')).not.toThrowError(); - }); + const { container } = render(createTable({ onRow })); + const tr = container.querySelector('tbody tr'); + expect(tr.id).toEqual(`row-${data[0].key}`); + fireEvent.click(tr); }); it('onRow should keep update', () => { const Test = () => { const [count, setCount] = React.useState(0); - return (
{ ); }; - const wrapper = mount(); + const { container, getByText } = render(); + const buttonTarget = container.querySelector('tbody tr td:last-child'); for (let i = 0; i < 10; i += 1) { - wrapper.find('tbody tr td').last().simulate('click'); - expect(wrapper.find('#count').text()).toEqual(String(i + 1)); + fireEvent.click(buttonTarget); + expect(getByText(String(i + 1))).toBeTruthy(); } }); }); @@ -565,11 +546,11 @@ describe('Table.Basic', () => { id: `cell-${record.name}`, }); const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', onCell }]; - const wrapper = mount(createTable({ columns })); - - expect(wrapper.find('tbody td')).toHaveLength(2); - wrapper.find('tbody td').forEach((td, index) => { - expect(td.props().id).toEqual(`cell-${data[index].name}`); + const { container } = render(createTable({ columns })); + const tds = container.querySelectorAll('tbody td'); + expect(tds).toHaveLength(2); + tds.forEach((td, index) => { + expect(td.getAttribute('id')).toEqual(`cell-${data[index].name}`); }); }); @@ -577,9 +558,9 @@ describe('Table.Basic', () => { const onHeaderRow = vi.fn((columns, index) => ({ id: `header-row-${index}`, })); - const wrapper = mount(createTable({ onHeaderRow })); - - expect(wrapper.find('thead tr').props().id).toEqual('header-row-0'); + const { container } = render(createTable({ onHeaderRow })); + const headerRow = container.querySelector('thead tr'); + expect(headerRow.id).toEqual('header-row-0'); expect(onHeaderRow).toHaveBeenCalledWith( [{ title: 'Name', dataIndex: 'name', key: 'name' }], 0, @@ -591,10 +572,9 @@ describe('Table.Basic', () => { id: `header-cell-${column.key}`, }); const columns = [{ title: 'Name', dataIndex: 'name', key: 'name', onHeaderCell }]; - const wrapper = mount(createTable({ columns })); - - expect(wrapper.find('thead th')).toHaveLength(1); - expect(wrapper.find('thead th').props().id).toEqual('header-cell-name'); + const { container } = render(createTable({ columns })); + const th = container.querySelector('thead th'); + expect(th.getAttribute('id')).toEqual('header-cell-name'); }); describe('custom components', () => { @@ -620,8 +600,8 @@ describe('Table.Basic', () => { }; it('renders correctly', () => { - const wrapper = mount(createTable({ components })); - expect(wrapper.render()).toMatchSnapshot(); + const { container } = render(createTable({ components })); + expect(container.firstChild).toMatchSnapshot(); }); it('renders fixed column and header correctly', () => { @@ -631,7 +611,7 @@ describe('Table.Basic', () => { { title: 'Gender', dataIndex: 'gender', key: 'gender', fixed: 'right' }, ]; const sampleData = [{ key: 0, name: 'Lucy', age: 27, gender: 'F' }]; - const wrapper = mount( + const { container } = render( createTable({ columns, data: sampleData, @@ -639,14 +619,14 @@ describe('Table.Basic', () => { scroll: { x: 100, y: 100 }, }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); describe('scroll content', () => { it('with scroll', () => { resetWarned(); const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - const wrapper = mount( + const { container } = render( createTable({ columns: [{ dataIndex: 'a' }, { dataIndex: 'b', width: 903 }], components: { @@ -655,7 +635,7 @@ describe('Table.Basic', () => { scroll: { x: 100, y: 100 }, }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); expect(errSpy).toHaveBeenCalledWith( 'Warning: When use `components.body` with render props. Each column should have a fixed `width` value.', @@ -667,7 +647,7 @@ describe('Table.Basic', () => { it('without warning - columns is empty', () => { resetWarned(); const errSpy = vi.spyOn(console, 'error').mockImplementation(() => {}); - mount( + render( createTable({ columns: [], components: { @@ -686,7 +666,7 @@ describe('Table.Basic', () => { const Looper = React.forwardRef(() => + + +
); Looper.looper = Looper; - mount( + render( createTable({ components: { body: { @@ -703,13 +683,13 @@ describe('Table.Basic', () => { { title: 'Name', dataIndex: 'name', key: 'name' }, { title: 'Age', dataIndex: 'age', key: 'age', align: 'center' }, ]; - const wrapper = mount(createTable({ columns })); - expect(wrapper.find('th').at(0).props().style.textAlign).toBeFalsy(); - expect(wrapper.find('th').at(1).props().style.textAlign).toEqual('center'); - expect(wrapper.find('tbody tr').first().find('td').at(0).props().style.textAlign).toBeFalsy(); - expect(wrapper.find('tbody tr').first().find('td').at(1).props().style.textAlign).toEqual( - 'center', - ); + const { container } = render(createTable({ columns })); + const thEls = container.querySelectorAll('th'); + expect(thEls[0].style.textAlign).toBeFalsy(); + expect(thEls[1].style.textAlign).toEqual('center'); + const tdEls = container.querySelectorAll('tbody tr:first-child td'); + expect(tdEls[0].style.textAlign).toBeFalsy(); + expect(tdEls[1].style.textAlign).toEqual('center'); }); it('align column should not override cell style', () => { @@ -723,19 +703,17 @@ describe('Table.Basic', () => { onHeaderCell: () => ({ style: { color: 'green' } }), }, ]; - const wrapper = mount(createTable({ columns })); - expect(wrapper.find('th').first().props().style).toEqual({ - color: 'green', - textAlign: 'center', - }); - expect(wrapper.find('td').first().props().style).toEqual({ - color: 'red', - textAlign: 'center', - }); + const { container } = render(createTable({ columns })); + const th = container.querySelector('th'); + expect(th.style.color).toEqual('green'); + expect(th.style.textAlign).toEqual('center'); + const td = container.querySelector('td'); + expect(td.style.color).toEqual('red'); + expect(td.style.textAlign).toEqual('center'); }); it('hidden columns', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [ { @@ -752,8 +730,8 @@ describe('Table.Basic', () => { ], }), ); - expect(wrapper.find('th').at(0).text()).toEqual('姓名'); - expect(wrapper.find('th').at(1)).toHaveLength(0); + expect(container.querySelectorAll('th')[0].textContent).toEqual('姓名'); + expect(container.querySelectorAll('th')).toHaveLength(1); }); describe('row events', () => { @@ -773,123 +751,100 @@ describe('Table.Basic', () => { it('fires row click event', () => { const onClick = vi.fn(); - const wrapper = mount(createTable({ onRow: () => ({ onClick }) })); - const tr = wrapper.find('tbody tr').first(); + const { container } = render(createTable({ onRow: () => ({ onClick }) })); + const tr = container.querySelector('tbody tr'); - tr.simulate('click'); - expect(onClick).toHaveBeenCalledWith( - expect.objectContaining({ - target: tr.instance(), - }), - ); + fireEvent.click(tr); + expect(onClick).toHaveBeenCalled(); }); it('fires double row click event', () => { const onDoubleClick = vi.fn(); - const wrapper = mount(createTable({ onRow: () => ({ onDoubleClick }) })); - const tr = wrapper.find('tbody tr').first(); + const { container } = render(createTable({ onRow: () => ({ onDoubleClick }) })); + const tr = container.querySelector('tbody tr'); - tr.first().simulate('doubleClick'); - expect(onDoubleClick).toHaveBeenCalledWith( - expect.objectContaining({ - target: tr.instance(), - }), - ); + fireEvent.doubleClick(tr); + expect(onDoubleClick).toHaveBeenCalled(); }); it('fires row contextmenu event', () => { const onContextMenu = vi.fn(); - const wrapper = mount(createTable({ onRow: () => ({ onContextMenu }) })); - const tr = wrapper.find('tbody tr').first(); + const { container } = render(createTable({ onRow: () => ({ onContextMenu }) })); + const tr = container.querySelector('tbody tr'); - tr.first().simulate('contextMenu'); - expect(onContextMenu).toHaveBeenCalledWith( - expect.objectContaining({ - target: tr.instance(), - }), - ); + fireEvent.contextMenu(tr); + expect(onContextMenu).toHaveBeenCalled(); }); it('fires onRowMouseEnter', () => { const onMouseEnter = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ onRow: () => ({ onMouseEnter }), }), ); - const tr = wrapper.find('.rc-table-row').first(); + const tr = container.querySelector('.rc-table-row'); - tr.simulate('mouseEnter'); - expect(onMouseEnter).toHaveBeenCalledWith( - expect.objectContaining({ - target: tr.instance(), - }), - ); + fireEvent.mouseEnter(tr); + expect(onMouseEnter).toHaveBeenCalled(); }); it('fires onRowMouseLeave', () => { const onMouseLeave = vi.fn(); - const wrapper = mount( + const { container } = render( createTable({ onRow: () => ({ onMouseLeave }), }), ); - const tr = wrapper.find('.rc-table-row').first(); + const tr = container.querySelector('.rc-table-row'); - tr.simulate('mouseLeave'); - expect(onMouseLeave).toHaveBeenCalledWith( - expect.objectContaining({ - target: tr.instance(), - }), - ); + fireEvent.mouseLeave(tr); + expect(onMouseLeave).toHaveBeenCalled(); }); }); it('columns without key', () => { - const wrapper = mount( + const { container } = render( createTable({ columns: [{ dataIndex: null }], }), ); - - expect(wrapper.find('tbody').find(Cell).first().key()).toBeTruthy(); + expect(container.querySelectorAll('tbody td')[0]).toBeTruthy(); }); it('syntactic sugar', () => { const { Column, ColumnGroup } = Table; expect( - mount( + render( Invalidate Column
, - ).render(), + ).container.firstChild, ).toMatchSnapshot(); }); describe('internal api', () => { describe('transformColumns', () => { it('basic', () => { - const wrapper = mount( + const { container } = render( createTable({ internalHooks: INTERNAL_HOOKS, transformColumns: columns => [{ title: 'before' }, ...columns, { title: 'after' }], }), ); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); - // Used for antd to check if is expand column - // We'd better to move selection into rc-table also it('internal columnType', () => { let existExpandColumn = false; - mount( + render( createTable({ expandable: { expandedRowRender: () => null, @@ -913,7 +868,7 @@ describe('Table.Basic', () => { body: React.createRef(), }; - mount( + render( createTable({ internalHooks: INTERNAL_HOOKS, internalRefs, @@ -927,17 +882,17 @@ describe('Table.Basic', () => { }); it('column render array', () => { - const wrapper = mount( + const { container } = render( [] }]} data={[{ key: 1 }]} />, ); - expect(wrapper.find('.test')).toHaveLength(1); + expect(container.querySelector('.test')).toBeTruthy(); }); it('component body should pass `data-row-key`', () => { - const wrapper = mount( + const { container } = render(
} }} @@ -945,7 +900,8 @@ describe('Table.Basic', () => { />, ); - expect(wrapper.find('tr').last().props()['data-row-key']).toEqual('light'); + const trs = container.querySelectorAll('tr'); + expect(trs[trs.length - 1].getAttribute('data-row-key')).toEqual('light'); }); it('render with state change', () => { @@ -954,7 +910,15 @@ describe('Table.Basic', () => { change: false, columns: [ { - render: () => String(this.state.change), + render: () => ( + + ), }, ], }; @@ -964,16 +928,16 @@ describe('Table.Basic', () => { } } - const wrapper = mount(); - expect(wrapper.find('tbody td').text()).toEqual('false'); + const { container } = render(); + expect(container.querySelector('button').textContent).toEqual('false'); - wrapper.setState({ change: true }); - expect(wrapper.find('tbody td').text()).toEqual('true'); + fireEvent.click(container.querySelector('button')); + expect(container.querySelector('button').textContent).toEqual('true'); }); it('not crash with raw data', () => { expect(() => { - mount( + render( createTable({ data: [122, null, '2333', true, undefined], }), @@ -1021,20 +985,18 @@ describe('Table.Basic', () => { ); }; - const wrapper = mount(); + const { container, rerender } = render(); renderTimes = 0; - wrapper.find('button').simulate('click'); + fireEvent.click(container.querySelector('button')); expect(renderTimes).toEqual(0); shouldUpdate = true; - wrapper.find('button').simulate('click'); + fireEvent.click(container.querySelector('button')); expect(renderTimes).toEqual(1); - // Should update match prev & next const newRecord = { ...record, next: true }; - wrapper.setProps({ records: [newRecord] }); - // wrapper.update(); + rerender(); expect(prev).toBe(record); expect(next).toBe(newRecord); }); @@ -1042,7 +1004,7 @@ describe('Table.Basic', () => { it('not block nest children', () => { const onExpandedRowsChange = vi.fn(); - const wrapper = mount( + const { container } = render(
false }]} expandable={{ onExpandedRowsChange }} @@ -1058,24 +1020,22 @@ describe('Table.Basic', () => { />, ); - // First Level - parent - wrapper.find('span.rc-table-row-expand-icon').first().simulate('click'); - expect( - wrapper.find('span.rc-table-row-expand-icon').first().hasClass('rc-table-row-expanded'), - ).toBeTruthy(); + const getExpandIcons = () => container.querySelectorAll('span.rc-table-row-expand-icon'); + + fireEvent.click(getExpandIcons()[0]); + expect(getExpandIcons()[0].classList.contains('rc-table-row-expanded')).toBeTruthy(); - // Second Level - light twice onExpandedRowsChange.mockReset(); - wrapper.find('span.rc-table-row-expand-icon').at(1).simulate('click'); + fireEvent.click(getExpandIcons()[1]); expect(onExpandedRowsChange).toHaveBeenCalledWith(['parent', 'light']); onExpandedRowsChange.mockReset(); - wrapper.find('span.rc-table-row-expand-icon').at(1).simulate('click'); + fireEvent.click(getExpandIcons()[1]); expect(onExpandedRowsChange).toHaveBeenCalledWith(['parent']); - // Second Level - bamboo onExpandedRowsChange.mockReset(); - wrapper.find('span.rc-table-row-expand-icon').last().simulate('click'); + const icons = getExpandIcons(); + fireEvent.click(icons[icons.length - 1]); expect(onExpandedRowsChange).toHaveBeenCalledWith(['parent', 'bamboo']); }); }); @@ -1097,18 +1057,18 @@ describe('Table.Basic', () => { { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] }, { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] }, ]; - const wrapper = mount( + const { container } = render(
, ); - const trs = wrapper.find('BodyRow'); + const trs = container.querySelectorAll('tbody tr'); - expect(trs.at(0).find(Cell).at(1).text()).toEqual('0'); - expect(trs.at(1).find(Cell).at(1).text()).toEqual('0'); - expect(trs.at(2).find(Cell).at(1).text()).toEqual('1'); - expect(trs.at(3).find(Cell).at(1).text()).toEqual('1'); - expect(trs.at(4).find(Cell).at(1).text()).toEqual('0'); - expect(trs.at(5).find(Cell).at(1).text()).toEqual('1'); + expect(trs[0].querySelectorAll('td')[1].textContent).toEqual('0'); + expect(trs[1].querySelectorAll('td')[1].textContent).toEqual('0'); + expect(trs[2].querySelectorAll('td')[1].textContent).toEqual('1'); + expect(trs[3].querySelectorAll('td')[1].textContent).toEqual('1'); + expect(trs[4].querySelectorAll('td')[1].textContent).toEqual('0'); + expect(trs[5].querySelectorAll('td')[1].textContent).toEqual('1'); }); it('hover the tree table', () => { @@ -1123,23 +1083,21 @@ describe('Table.Basic', () => { { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] }, { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] }, ]; - const wrapper = mount( + const { container } = render(
, ); - const trs = wrapper.find('tr.rc-table-row'); + const trs = container.querySelectorAll('tr.rc-table-row'); trs.forEach((tr, index) => { - tr.find('td.rc-table-cell').at(0).simulate('mouseEnter'); - const currentClassName = wrapper - .find('tr.rc-table-row') - .at(index) - .find('td.rc-table-cell') - .at(0) - .getElement().props.className; + fireEvent.mouseEnter(tr.querySelectorAll('td.rc-table-cell')[0]); + const currentClassName = container + .querySelectorAll('tr.rc-table-row') + [index].querySelectorAll('td.rc-table-cell')[0] + .getAttribute('class'); expect(currentClassName.includes('rc-table-cell-row-hover')).toEqual(true); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(1); + expect(container.querySelectorAll('td.rc-table-cell-row-hover')).toHaveLength(1); }); }); @@ -1155,7 +1113,7 @@ describe('Table.Basic', () => { { key: 'row0', children: [{ key: 'row0-0' }, { key: 'row0-1' }] }, { key: 'row1', children: [{ key: 'row1-0' }, { key: 'row1-1' }] }, ]; - const wrapper = mount( + const { container } = render(
{ />, ); - const trs = wrapper.find('tr.rc-table-row'); + const trs = container.querySelectorAll('tr.rc-table-row'); trs.forEach((tr, index) => { - tr.find('td.rc-table-cell').at(0).simulate('mouseEnter'); - const currentClassName = wrapper - .find('tr.rc-table-row') - .at(index) - .find('td.rc-table-cell') - .at(0) - .getElement().props.className; + fireEvent.mouseEnter(tr.querySelectorAll('td.rc-table-cell')[0]); + const currentClassName = container + .querySelectorAll('tr.rc-table-row') + [index].querySelectorAll('td.rc-table-cell')[0] + .getAttribute('class'); expect(currentClassName.includes('rc-table-cell-row-hover')).toEqual(false); - expect(wrapper.find('td.rc-table-cell-row-hover')).toHaveLength(0); + expect(container.querySelectorAll('td.rc-table-cell-row-hover')).toHaveLength(0); }); }); it('should get scrollbar size', () => { const tColumns = [{ title: 'Name', dataIndex: 'name', key: 'name', width: 100 }]; - const wrapper = mount( + const { container } = render( createTable({ columns: tColumns, scroll: { y: 100 }, @@ -1191,8 +1147,8 @@ describe('Table.Basic', () => { }, }), ); - expect(wrapper.render()).toMatchSnapshot(); - expect(wrapper.find('col')).toHaveLength(tColumns.length + 1); + expect(container.firstChild).toMatchSnapshot(); + expect(container.querySelectorAll('col')).toHaveLength(tColumns.length + 1); }); it('columns support JSX condition', () => { const Example = () => { @@ -1229,15 +1185,15 @@ describe('Table.Basic', () => { ); }; - const wrapper = mount(); + const { container } = render(); - wrapper.find('button').simulate('click'); - expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title2'); + fireEvent.click(container.querySelector('button')); + expect(container.querySelectorAll('.rc-table-cell')[1].textContent).toEqual('title2'); - wrapper.find('button').simulate('click'); - expect(wrapper.find('.rc-table-cell').at(1).text()).toEqual('title3'); + fireEvent.click(container.querySelector('button')); + expect(container.querySelectorAll('.rc-table-cell')[1].textContent).toEqual('title3'); - expect(wrapper.render()).toMatchSnapshot(); + expect(container.firstChild).toMatchSnapshot(); }); it('using both column children and component body simultaneously', () => { @@ -1350,25 +1306,31 @@ describe('Table.Basic', () => { /> ); }; - const wrapper = mount(); - expect( - wrapper - .find('col') - .at(noChildColLen + ChildColLen * 2 - 1) - .props().style.width + wrapper.find('col').last().props().style.width, - ).toEqual(width); + const { container } = render(); + + const last0ColWidth = + container.querySelectorAll('col')[noChildColLen + ChildColLen * 2 - 1].style.width; + const last1ColWidth = + container.querySelectorAll('col')[container.querySelectorAll('col').length - 1].style.width; + + expect(parseInt(last0ColWidth, 10) + parseInt(last1ColWidth, 10)).toEqual(width); }); it('onScroll event', () => { const onScroll = vi.fn(); - const wrapper = render( + const { container } = render( createTable({ onScroll, scroll: { x: 100, y: 100 }, }), ); - - fireEvent.scroll(wrapper.container.querySelector('.rc-table-body')); + const tableBody = container.querySelector('.rc-table-body'); + Object.defineProperty(tableBody, 'scrollLeft', { + get() { + return 100; + }, + }); + fireEvent.scroll(tableBody); expect(onScroll).toHaveBeenCalled(); }); }); diff --git a/tests/__snapshots__/Table.spec.jsx.snap b/tests/__snapshots__/Table.spec.jsx.snap index c3261a2ff..deca883ec 100644 --- a/tests/__snapshots__/Table.spec.jsx.snap +++ b/tests/__snapshots__/Table.spec.jsx.snap @@ -1,1336 +1,849 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Table.Basic > columns support JSX condition 1`] = ` -LoadedCheerio { - "0": , - "1":
+ Click + 2 + times + +`; + +exports[`Table.Basic > custom components > renders correctly 1`] = ` +
+
-
-
+ - - - - - - - - + Name + + + + + - - - - - + + + - - - -
- title - - title3 -
- 2 - - 3 -
- - 2 - - 3 -
- + Jack +
- , - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 2, - "options": { - "decodeEntities": true, - "xml": false, - }, -} + + `; -exports[`Table.Basic > custom components > renders correctly 1`] = ` -LoadedCheerio { - "0":
custom components > renders fixed column and header correctly 1`] = ` +
+
- + Gender + +
+
- , - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} -`; - -exports[`Table.Basic > custom components > renders fixed column and header correctly 1`] = ` -LoadedCheerio { - "0":
-
- + - - - - - - - - -
-
-
- - - +   + + + + + + - - - - - - + - - - - -
+
+   +
+ 		+
+   +
+
- - Lucy - - 27 - - F -
-
+ 27 + + + F + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} + + `; exports[`Table.Basic > custom components > scroll content > with scroll 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + - - + - - - - - - -
-
- - -
-
-

- Bamboo -

+ + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +

+ Bamboo +

+
+ `; exports[`Table.Basic > internal api > transformColumns > basic 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - - - + + + + + + + - + - - + + + - - -
- before - - Name - - after -
+ before + + Name + + after +
- - - Lucy - -
+
+ - - - Jack - -
-
+ Jack + + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders colSpan correctly 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - + + + + + - - - - - + John + + + - - - - + - - - -
+ Name +
- Name -
- John -
- - Terry - - Garner -
-
+ Garner + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders correctly > RTL 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - + + + + + - - - - + + + - - -
- Name -
+ Name +
- Lucy -
- - Jack -
-
+ Jack + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders correctly > basic 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - + + + + + - - - - + + + - - -
- Name -
+ Name +
- Lucy -
- - Jack -
-
+ Jack + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders correctly > column children undefined 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - - + + + + + + - - - - + + + - - -
- 姓名 - - 年龄 -
+ 姓名 + + 年龄 +
- Lucy - -
+
- - Jack - -
-
+ Jack + + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders correctly > falsy columns 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - + + + + + - - - - + + + - - -
- 姓名 -
+ 姓名 +
- Lucy -
- - Jack -
-
+ Jack + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders correctly > no columns 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + + - - - - - - + + - - - - - -
+
-
-
-
-
+ + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > renders rowSpan correctly 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - - + + + + + + - - - - - + - - -
- First Name - - Last Name -
+ First Name + + Last Name +
- John - - Doe -
- - Terry -
-
+ Doe + + + + + Terry + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > should get scrollbar size 1`] = ` -LoadedCheerio { - "0":
+
-
- + + + + - - - + + - - - - -
+ Name + - -
- Name - -
-
+ + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; exports[`Table.Basic > syntactic sugar 1`] = ` -LoadedCheerio { - "0":
+
-
- + - - - - - - - - - - + + + + + + + + - - - - -
- total -
- Name -
+ total +
+ Name +
- No Data -
-
+ No Data + + + +
-
, - "_root": LoadedCheerio { - "0": Document { - "children": [ - - - - , - ], - "endIndex": null, - "next": null, - "parent": null, - "prev": null, - "startIndex": null, - "type": "root", - "x-mode": "quirks", - }, - "_root": [Circular], - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, - }, - "length": 1, - "options": { - "decodeEntities": true, - "xml": false, - }, -} +
+ `; diff --git a/tests/setup.ts b/tests/setup.ts index d4de21086..624444377 100644 --- a/tests/setup.ts +++ b/tests/setup.ts @@ -9,11 +9,6 @@ require('regenerator-runtime'); vi.mock('@rc-component/util/lib/getScrollBarSize'); -const Enzyme = require('enzyme'); -const Adapter = require('enzyme-adapter-react-16'); - -Enzyme.configure({ adapter: new Adapter() }); - // Mock ResizeObserver global.ResizeObserver = class ResizeObserver implements ResizeObserver { callback: ResizeObserverCallback; From 408ef7361c6313336157b27ff11a61fe53f22e3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 16:37:44 +0800 Subject: [PATCH 15/16] chore: fix lint --- tests/FixedColumn.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx index ba8d6295a..d5dac8a99 100644 --- a/tests/FixedColumn.spec.tsx +++ b/tests/FixedColumn.spec.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { render, fireEvent, act } from '@testing-library/react'; -import RcResizeObserver, { _rs } from '@rc-component/resize-observer'; +import { _rs } from '@rc-component/resize-observer'; import Table, { type ColumnsType } from '../src'; import { RowColSpanWithFixed, RowColSpanWithFixed2 } from './__mocks__/shadowTest'; import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook'; From 786f25e36a15caa75d5b68cf97812466e844f8a3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?= Date: Fri, 7 Mar 2025 16:47:04 +0800 Subject: [PATCH 16/16] chore: fix lint --- tests/FixedColumn.spec.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/FixedColumn.spec.tsx b/tests/FixedColumn.spec.tsx index d5dac8a99..e5803fe25 100644 --- a/tests/FixedColumn.spec.tsx +++ b/tests/FixedColumn.spec.tsx @@ -264,7 +264,7 @@ describe('Table.FixedColumn', () => { ); act(() => { - container.querySelectorAll('.rc-table-measure-row td').forEach(td => { + container.querySelectorAll('.rc-table-measure-row td').forEach(td => { triggerResize(td); }); });