From b73f79cbb12da14470cdaa3826c828dda7484e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?kiner-tang=28=E6=96=87=E8=BE=89=29?= <1127031143@qq.com> Date: Sun, 15 Jan 2023 15:32:06 +0800 Subject: [PATCH] chore: optimize test case (#935) --- tests/FixedColumn.spec.js | 29 +++++++++++++++++------------ tests/FixedHeader.spec.js | 33 +++++++++++++-------------------- tests/Sticky.spec.js | 33 +++++++++++++++++---------------- tests/utils.js | 10 ++++++++++ 4 files changed, 57 insertions(+), 48 deletions(-) create mode 100644 tests/utils.js diff --git a/tests/FixedColumn.spec.js b/tests/FixedColumn.spec.js index ac0b19491..18eb60451 100644 --- a/tests/FixedColumn.spec.js +++ b/tests/FixedColumn.spec.js @@ -3,11 +3,14 @@ import RcResizeObserver from 'rc-resize-observer'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import { resetWarned } from 'rc-util/lib/warning'; import { act } from 'react-dom/test-utils'; +import { safeAct } from './utils'; import Table from '../src'; describe('Table.FixedColumn', () => { let domSpy; - + beforeEach(() => { + jest.useFakeTimers(); + }); beforeAll(() => { domSpy = spyElementPrototypes(HTMLElement, { offsetParent: { @@ -86,18 +89,14 @@ describe('Table.FixedColumn', () => { }, ]); }); - await act(async () => { - jest.runAllTimers(); - await Promise.resolve(); - wrapper.update(); - }); + await safeAct(wrapper); expect(wrapper.render()).toMatchSnapshot(); jest.useRealTimers(); }); }); }); - it('all column has width should use it', () => { + it('all column has width should use it', async () => { const wrapper = mount( { scroll={{ x: 'max-content' }} />, ); + + await safeAct(wrapper); expect(wrapper.find('colgroup').render()).toMatchSnapshot(); }); }); - it('has correct scroll classNames when table resize', () => { + it('has correct scroll classNames when table resize', async () => { const wrapper = mount(
, ); + await safeAct(wrapper); // Use `onScroll` directly since simulate not support `currentTarget` act(() => { wrapper @@ -203,7 +205,7 @@ describe('Table.FixedColumn', () => { errorSpy.mockRestore(); }); - it('left', () => { + it('left', async () => { mount(
); expect(errorSpy).toHaveBeenCalledWith( "Warning: Index 0 of `columns` missing `fixed='left'` prop.", @@ -231,11 +233,12 @@ describe('Table.FixedColumn', () => { expect(wrapper.find('tr td').find('.rc-table-cell-content')).toHaveLength(data.length); }); - it('fixed column renders correctly RTL', () => { + it('fixed column renders correctly RTL', async () => { const wrapper = mount(
, ); expect(wrapper.render()).toMatchSnapshot(); + await safeAct(wrapper); }); it('has correct scroll classNames when table direction is RTL', () => { @@ -264,8 +267,9 @@ describe('Table.FixedColumn', () => { ).toBeTruthy(); }); - it('not break measure count', () => { + it('not break measure count', async () => { const wrapper = mount(
); + await safeAct(wrapper); expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(5); wrapper.setProps({ columns: columns.slice(0, 4) }); @@ -273,8 +277,9 @@ describe('Table.FixedColumn', () => { expect(wrapper.find('.rc-table-measure-row td')).toHaveLength(4); }); - it('when all columns fixed left,cell should has classname rc-table-cell-fix-left-all', () => { + 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); }); }); diff --git a/tests/FixedHeader.spec.js b/tests/FixedHeader.spec.js index edf093583..842c9f45e 100644 --- a/tests/FixedHeader.spec.js +++ b/tests/FixedHeader.spec.js @@ -3,6 +3,7 @@ import RcResizeObserver from 'rc-resize-observer'; import { spyElementPrototype } from 'rc-util/lib/test/domHook'; import React from 'react'; import { act } from 'react-dom/test-utils'; +import { safeAct } from './utils'; import Table, { INTERNAL_COL_DEFINE } from '../src'; describe('Table.FixedHeader', () => { @@ -16,6 +17,7 @@ describe('Table.FixedHeader', () => { }); beforeEach(() => { + jest.useFakeTimers(); visible = true; }); @@ -24,7 +26,6 @@ describe('Table.FixedHeader', () => { }); it('should work', async () => { - jest.useFakeTimers(); const col1 = { dataIndex: 'light', width: 100 }; const col2 = { dataIndex: 'bamboo', width: 200 }; const col3 = { dataIndex: 'empty', width: 0 }; @@ -35,7 +36,6 @@ describe('Table.FixedHeader', () => { scroll={{ y: 10 }} />, ); - wrapper .find(RcResizeObserver.Collection) .first() @@ -54,12 +54,7 @@ describe('Table.FixedHeader', () => { size: { width: 0, offsetWidth: 0 }, }, ]); - - await act(async () => { - jest.runAllTimers(); - await Promise.resolve(); - wrapper.update(); - }); + await safeAct(wrapper); expect(wrapper.find('.rc-table-header table').props().style.visibility).toBeFalsy(); @@ -78,7 +73,7 @@ describe('Table.FixedHeader', () => { jest.useRealTimers(); }); - it('INTERNAL_COL_DEFINE', () => { + it('INTERNAL_COL_DEFINE', async () => { const col1 = { dataIndex: 'light', width: 100, @@ -92,6 +87,7 @@ describe('Table.FixedHeader', () => { scroll={{ y: 10 }} />, ); + await safeAct(wrapper); expect(wrapper.find('table').last().find('colgroup col').first().props().className).toEqual( 'test-internal', @@ -101,7 +97,7 @@ describe('Table.FixedHeader', () => { ); }); - it('show header when data is null', () => { + it('show header when data is null', async () => { const columns = [ { title: 'Name', @@ -125,13 +121,14 @@ describe('Table.FixedHeader', () => { }} />, ); - + + await safeAct(wrapper); expect(wrapper.find('.rc-table-header table').props().style).toEqual( expect.objectContaining({ visibility: null }), ); }); - it('rtl', () => { + it('rtl', async () => { const wrapper = mount(
{ }} />, ); + await safeAct(wrapper); expect(wrapper.find('Header').props().stickyOffsets).toEqual( expect.objectContaining({ @@ -152,8 +150,6 @@ describe('Table.FixedHeader', () => { }); it('invisible should not change width', async () => { - jest.useFakeTimers(); - const col1 = { dataIndex: 'light', width: 93 }; const wrapper = mount(
{ size: { width: 93, offsetWidth: 93 }, }, ]); - await act(async () => { - jest.runAllTimers(); - await Promise.resolve(); - wrapper.update(); - }); + await safeAct(wrapper); expect(wrapper.find('FixedHolder col').first().props().style).toEqual( expect.objectContaining({ width: 93 }), @@ -209,7 +201,7 @@ describe('Table.FixedHeader', () => { jest.useRealTimers(); }); - it('do not mask as ant-table-cell-fix-left-last in nested table parent cell', () => { + it('do not mask as ant-table-cell-fix-left-last in nested table parent cell', async () => { const columns = [ { title: '父表头右侧的阴影导致整个表格最右侧有空隙', @@ -262,6 +254,7 @@ describe('Table.FixedHeader', () => { scroll={{ x: true }} />, ); + 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'); diff --git a/tests/Sticky.spec.js b/tests/Sticky.spec.js index 012e91fe1..f1ccbda2c 100644 --- a/tests/Sticky.spec.js +++ b/tests/Sticky.spec.js @@ -3,10 +3,13 @@ import { act } from 'react-dom/test-utils'; import { mount } from 'enzyme'; import { spyElementPrototypes } from 'rc-util/lib/test/domHook'; import Table from '../src'; +import { safeAct } from './utils'; describe('Table.Sticky', () => { - it('Sticky Header', () => { + beforeEach(() => { jest.useFakeTimers(); + }); + it('Sticky Header', async () => { const col1 = { dataIndex: 'light', width: 100 }; const col2 = { dataIndex: 'bamboo', width: 200 }; @@ -37,10 +40,12 @@ describe('Table.Sticky', () => { 'rc-table-header rc-table-sticky-holder', ); - wrapper.setProps({ - sticky: { - offsetHeader: 10, - }, + await safeAct(wrapper, () => { + wrapper.setProps({ + sticky: { + offsetHeader: 10, + }, + }); }); expect(wrapper.find('.rc-table-header').last().prop('style')).toEqual({ @@ -52,7 +57,6 @@ describe('Table.Sticky', () => { }); it('Sticky scroll', async () => { - jest.useFakeTimers(); window.pageYOffset = 900; document.documentElement.scrollTop = 200; let scrollLeft = 100; @@ -208,8 +212,7 @@ describe('Table.Sticky', () => { jest.useRealTimers(); }); - it('Sticky Header with border classname', () => { - jest.useFakeTimers(); + it('Sticky Header with border classname', async () => { const TableDemo = props => { return ( @@ -239,21 +242,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: 0, }); - expect(wrapper.find('.rc-table-cell-fix-sticky')).not.toBe(undefined); jest.useRealTimers(); }); - it('Sticky Header with scroll-y', () => { - jest.useFakeTimers(); + it('Sticky Header with scroll-y', async () => { const TableDemo = props => { return ( @@ -284,7 +285,7 @@ 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({ @@ -296,10 +297,10 @@ describe('Table.Sticky', () => { }); it('Sticky scroll with getContainer', async () => { - jest.useFakeTimers(); + window.pageYOffset = 900; document.documentElement.scrollTop = 200; - const container = document.createElement('p'); + const container = document.createElement('ol'); container.style = 'height: 500px;overflow: scroll'; document.body.appendChild(container); let scrollLeft = 100; @@ -324,7 +325,7 @@ describe('Table.Sticky', () => { }, }); - const sectionSpy = spyElementPrototypes(HTMLParagraphElement, { + const sectionSpy = spyElementPrototypes(HTMLOListElement, { scrollLeft: { get: () => scrollLeft, set: left => { diff --git a/tests/utils.js b/tests/utils.js new file mode 100644 index 000000000..8b6660ee0 --- /dev/null +++ b/tests/utils.js @@ -0,0 +1,10 @@ +import { act } from 'react-dom/test-utils'; + +export function safeAct(wrapper, cb) { + return act(async () => { + cb && cb(); + jest.runAllTimers(); + await Promise.resolve(); + wrapper.update(); + }); +}