From 6c56810cd479ff1df660d1194a306af5a7342931 Mon Sep 17 00:00:00 2001 From: xinbinyan <404928130@qq.com> Date: Mon, 26 Feb 2024 15:12:43 +0800 Subject: [PATCH 1/2] case ColumnsSetting.tsx --- .../components/test/ColumnsSetting.test.tsx | 200 +++++- .../ColumnsSetting.test.tsx.snap | 596 +++++++++++++++++- .../components/test/mockHooks/data.ts | 22 + .../test/mockHooks/mockUseTableSettings.ts | 12 + 4 files changed, 806 insertions(+), 24 deletions(-) create mode 100644 packages/shared/lib/components/ActiontechTable/components/test/mockHooks/data.ts create mode 100644 packages/shared/lib/components/ActiontechTable/components/test/mockHooks/mockUseTableSettings.ts diff --git a/packages/shared/lib/components/ActiontechTable/components/test/ColumnsSetting.test.tsx b/packages/shared/lib/components/ActiontechTable/components/test/ColumnsSetting.test.tsx index e770569e3..da18e0dd6 100644 --- a/packages/shared/lib/components/ActiontechTable/components/test/ColumnsSetting.test.tsx +++ b/packages/shared/lib/components/ActiontechTable/components/test/ColumnsSetting.test.tsx @@ -1,9 +1,19 @@ -import { getBySelector } from '../../../../testUtil/customQuery'; +import { + getAllBySelector, + getBySelector +} from '../../../../testUtil/customQuery'; import { renderWithTheme } from '../../../../testUtil/customRender'; -import { fireEvent, act, cleanup } from '@testing-library/react'; +import { fireEvent, act, cleanup, screen } from '@testing-library/react'; import { ColumnsSettingProps } from '../../index.type'; import ColumnsSetting from '../ColumnsSetting'; +import { mockUseTableSettings } from './mockHooks/mockUseTableSettings'; +import { eventEmitter } from '../../../../utils/EventEmitter'; +import EmitterKey from '../../../../data/EmitterKey'; +import { mockUseTableSettingsData } from './mockHooks/data'; + +const tableNameMock = 'demo_list'; +const usernameMock = 'current-test'; describe('lib/ActiontechTable-ColumnsSetting', () => { beforeEach(() => { @@ -19,30 +29,176 @@ describe('lib/ActiontechTable-ColumnsSetting', () => { return renderWithTheme(); }; - it('render setting button', () => { - const { baseElement } = customRender({ - tableName: 'demo_list', - username: 'current-test' + describe('render icon setting snap when in diff scene', () => { + it('render icon setting when default scene', () => { + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + expect(baseElement).toMatchSnapshot(); + }); + + it('render popover cont empty when click icon setting', async () => { + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + expect( + getBySelector('.custom-icon-arrow-down', baseElement) + ).toBeInTheDocument(); + const btnEle = getBySelector('button.ant-btn'); + await act(async () => { + fireEvent.click(btnEle); + await jest.advanceTimersByTime(300); + }); + expect( + getBySelector('.custom-icon-arrow-up', baseElement) + ).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); }); - expect(baseElement).toMatchSnapshot(); }); - it('render ui change when click setting btn', async () => { - const { baseElement } = customRender({ - tableName: 'demo_list', - username: 'current-test' + describe('render icon popover ui snap when click icon setting', () => { + beforeEach(() => { + mockUseTableSettings(); + }); + + it('render popover cont has all column when click icon setting', async () => { + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + + const btnEle = getBySelector('button.ant-btn'); + await act(async () => { + fireEvent.click(btnEle); + await jest.advanceTimersByTime(300); + }); + + expect(screen.getByText('工单号')).toBeInTheDocument(); + expect(screen.getByText('工单描述')).toBeInTheDocument(); + expect(screen.getByText('创建时间')).toBeInTheDocument(); + expect(baseElement).toMatchSnapshot(); + }); + + it('render snap when click popover cont', async () => { + const eventEmitSpy = jest.spyOn(eventEmitter, 'emit'); + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + + const btnEle = getBySelector('button.ant-btn'); + await act(async () => { + fireEvent.click(btnEle); + await jest.advanceTimersByTime(300); + }); + + const checkBox = getAllBySelector('.ant-checkbox-input', baseElement); + expect(checkBox.length).toBe(3); + + const checkboxInput = checkBox[0]; + expect(checkboxInput.parentNode).toHaveClass('ant-checkbox-checked'); + await act(async () => { + fireEvent.click(checkboxInput); + await jest.advanceTimersByTime(300); + }); + expect(eventEmitSpy).toBeCalled(); + expect(eventEmitSpy).toBeCalledWith( + EmitterKey.UPDATE_LOCAL_COLUMNS, + { + workflow_id: { + ...mockUseTableSettingsData.localColumns.workflow_id, + show: false + } + }, + tableNameMock, + usernameMock + ); }); - expect( - getBySelector('.custom-icon-arrow-down', baseElement) - ).toBeInTheDocument(); - const btnEle = getBySelector('button.ant-btn'); - await act(async () => { - fireEvent.click(btnEle); - await jest.advanceTimersByTime(300); + + it('render snap when click fixed left icon', async () => { + const eventEmitSpy = jest.spyOn(eventEmitter, 'emit'); + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + + const btnEle = getBySelector('button.ant-btn'); + await act(async () => { + fireEvent.click(btnEle); + await jest.advanceTimersByTime(300); + }); + + const notFixedEle = getAllBySelector( + '.actiontech-table-setting-not-fixed .columns-setting-item-wrapper', + baseElement + ); + expect(notFixedEle.length).toBe(1); + + const iconTop = getAllBySelector( + '.anticon-vertical-align-top', + notFixedEle[0] + ); + expect(iconTop.length).toBe(1); + await act(async () => { + fireEvent.click(iconTop[0]); + await jest.advanceTimersByTime(300); + }); + expect(eventEmitSpy).toBeCalled(); + expect(eventEmitSpy).toBeCalledWith( + EmitterKey.UPDATE_LOCAL_COLUMNS, + { + workflow_id: { + ...mockUseTableSettingsData.localColumns.workflow_id + }, + create_time: { + ...mockUseTableSettingsData.localColumns.create_time, + fixed: 'left', + order: 2 + }, + desc: { + ...mockUseTableSettingsData.localColumns.desc, + order: 3 + } + }, + tableNameMock, + usernameMock + ); + }); + + it('render snap when drag column item', async () => { + const { baseElement } = customRender({ + tableName: tableNameMock, + username: usernameMock + }); + + const btnEle = getBySelector('button.ant-btn'); + await act(async () => { + fireEvent.click(btnEle); + await jest.advanceTimersByTime(300); + }); + + const dragEle = getAllBySelector( + '.columns-setting-item-wrapper', + baseElement + ); + expect(dragEle.length).toBe(3); + + await act(async () => { + fireEvent.pointerDown(dragEle[2], dragEle[0]); + await jest.advanceTimersByTime(500); + }); + + await act(async () => { + fireEvent.pointerMove(dragEle[2], dragEle[0]); + await jest.advanceTimersByTime(500); + }); + + await act(async () => { + fireEvent.pointerUp(dragEle[2], dragEle[0]); + await jest.advanceTimersByTime(500); + }); }); - expect( - getBySelector('.custom-icon-arrow-up', baseElement) - ).toBeInTheDocument(); - expect(baseElement).toMatchSnapshot(); }); }); diff --git a/packages/shared/lib/components/ActiontechTable/components/test/__snapshots__/ColumnsSetting.test.tsx.snap b/packages/shared/lib/components/ActiontechTable/components/test/__snapshots__/ColumnsSetting.test.tsx.snap index ba2d83638..584013cae 100644 --- a/packages/shared/lib/components/ActiontechTable/components/test/__snapshots__/ColumnsSetting.test.tsx.snap +++ b/packages/shared/lib/components/ActiontechTable/components/test/__snapshots__/ColumnsSetting.test.tsx.snap @@ -1,6 +1,598 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`lib/ActiontechTable-ColumnsSetting render setting button 1`] = ` +exports[`lib/ActiontechTable-ColumnsSetting render icon popover ui snap when click icon setting render popover cont has all column when click icon setting 1`] = ` + +
+ +
+
+
+
+ +
+
+ +`; + +exports[`lib/ActiontechTable-ColumnsSetting render icon setting snap when in diff scene render icon setting when default scene 1`] = `