From 3c7b3f3caff5563d0f13b0076294a64e8e330f41 Mon Sep 17 00:00:00 2001 From: Rain <958414905@qq.com> Date: Sat, 29 Jul 2023 18:07:00 +0800 Subject: [PATCH] refactor: make testing more stable --- .../__tests__/date-picker.test.tsx | 29 ++++++++++++++++++- .../form-item/__tests__/form-item.test.tsx | 8 +++-- .../antd/form-item/demos/demo1.tsx | 25 +++++++++++++--- .../antd/form-v2/__tests__/form-v2.test.tsx | 15 +++++----- .../antd/form-v2/demos/demo1.tsx | 16 ++++++---- .../antd/form-v2/demos/demo2.tsx | 24 +++++++++------ .../antd/form-v2/demos/demo3.tsx | 25 ++++++++++------ .../antd/grid/__tests__/grid.test.tsx | 11 +++---- .../antd/grid/demos/demo2.tsx | 28 +++++++++++++++--- .../antd/kanban/demos/demo1.tsx | 24 +++++++++------ .../__tests__/record-picker.test.tsx | 15 ++++++---- .../antd/record-picker/demos/demo1.tsx | 16 ++++++---- .../schema-component/common/utils/uitls.tsx | 6 ++-- .../src/client/hooks/useThemeSettings.tsx | 5 ---- 14 files changed, 172 insertions(+), 75 deletions(-) diff --git a/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx b/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx index 920d9b85f..95ab97a60 100644 --- a/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx +++ b/packages/core/client/src/schema-component/antd/date-picker/__tests__/date-picker.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen, userEvent, waitFor } from 'testUtils'; +import { render, screen, sleep, userEvent, waitFor } from 'testUtils'; import App1 from '../demos/demo1'; import App2 from '../demos/demo2'; import App3 from '../demos/demo3'; @@ -13,6 +13,9 @@ import App9 from '../demos/demo9'; describe('DatePicker', () => { it('basic', async () => { const { container, getByText } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const input = container.querySelector('input') as HTMLElement; @@ -35,6 +38,9 @@ describe('DatePicker', () => { it('GMT', async () => { const { container, getByText } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const input = container.querySelector('input') as HTMLElement; @@ -53,6 +59,9 @@ describe('DatePicker', () => { it('non-UTC', async () => { const { container } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const input = container.querySelector('input') as HTMLElement; @@ -74,6 +83,9 @@ describe('DatePicker', () => { describe('RangePicker', () => { it('GMT', async () => { const { container, getByPlaceholderText } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const startInput = getByPlaceholderText('Start date'); const endInput = getByPlaceholderText('End date'); @@ -92,6 +104,9 @@ describe('RangePicker', () => { it('non-GMT', async () => { const { container, getByPlaceholderText } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const startInput = getByPlaceholderText('Start date'); const endInput = getByPlaceholderText('End date'); @@ -115,6 +130,9 @@ describe('RangePicker', () => { it('non-UTC', async () => { const { container, getByPlaceholderText } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const startInput = getByPlaceholderText('Start date'); const endInput = getByPlaceholderText('End date'); @@ -133,6 +151,9 @@ describe('RangePicker', () => { it('showTime=false,gmt=true,utc=true', async () => { const { container } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const input = container.querySelector('input') as HTMLElement; @@ -152,6 +173,9 @@ describe('RangePicker', () => { it('showTime=false,gmt=false,utc=true', async () => { const { container } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; const input = container.querySelector('input') as HTMLElement; @@ -175,6 +199,9 @@ describe('RangePicker', () => { it('showTime=false,gmt=true,utc=true & not input', async () => { const currentDateString = new Date().toISOString().split('T')[0]; const { container } = render(); + + await sleep(); + const picker = container.querySelector('.ant-picker') as HTMLElement; await userEvent.click(picker); diff --git a/packages/core/client/src/schema-component/antd/form-item/__tests__/form-item.test.tsx b/packages/core/client/src/schema-component/antd/form-item/__tests__/form-item.test.tsx index 8c8258339..00f093a18 100644 --- a/packages/core/client/src/schema-component/antd/form-item/__tests__/form-item.test.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/__tests__/form-item.test.tsx @@ -1,11 +1,13 @@ import React from 'react'; -import { render, screen } from 'testUtils'; +import { render, screen, waitFor } from 'testUtils'; import App1 from '../demos/demo1'; describe('FormItem', () => { - it('should render correctly', () => { + it('should render correctly', async () => { render(); - expect(screen.getByText('title')).toBeInTheDocument(); + await waitFor(() => { + expect(screen.getByText('title')).toBeInTheDocument(); + }); }); }); diff --git a/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx index 0504a3ad8..8c970f3e3 100644 --- a/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/form-item/demos/demo1.tsx @@ -1,5 +1,18 @@ -import { FormItem, FormProvider, Input, SchemaComponent } from '@nocobase/client'; +import { + APIClientProvider, + CurrentUserProvider, + FormItem, + FormProvider, + Input, + SchemaComponent, +} from '@nocobase/client'; import React from 'react'; +import { mockAPIClient } from '../../../../test'; + +const { apiClient, mockRequest } = mockAPIClient(); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); const schema = { type: 'object', @@ -15,8 +28,12 @@ const schema = { export default () => { return ( - - - + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/antd/form-v2/__tests__/form-v2.test.tsx b/packages/core/client/src/schema-component/antd/form-v2/__tests__/form-v2.test.tsx index 6f863d02f..69822a2dd 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/__tests__/form-v2.test.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/__tests__/form-v2.test.tsx @@ -8,11 +8,13 @@ describe('FormV2', () => { it('basic', async () => { render(); - const input = document.querySelector('.ant-input') as HTMLInputElement; - const submit = screen.getByText('Submit'); - - expect(input).toBeInTheDocument(); - expect(screen.getByText('Nickname')).toBeInTheDocument(); + let input, submit; + await waitFor(() => { + input = document.querySelector('.ant-input') as HTMLInputElement; + submit = screen.getByText('Submit'); + expect(input).toBeInTheDocument(); + expect(screen.queryByText('Nickname')).toBeInTheDocument(); + }); await userEvent.type(input, '李四'); await userEvent.click(submit); @@ -41,8 +43,7 @@ describe('FormV2', () => { }); }); - // TODO: 等 @Testing-Library 升级到 14.x - it.skip('read pretty', async () => { + it('read pretty', async () => { render(); await waitFor(() => { diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx index e44e8217d..ce56edbff 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo1.tsx @@ -4,6 +4,7 @@ import { Action, CollectionField, CollectionManagerProvider, + CurrentUserProvider, FormBlockProvider, FormItem, FormV2, @@ -26,6 +27,9 @@ mockRequest.onPost('/users:update').reply((params) => { }); return [200, JSON.parse(params.data)]; }); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); function useAction() { const ctx = useFormBlockContext(); @@ -82,11 +86,13 @@ const schema: ISchema = { export default () => { return ( - - - - - + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx index 42d7cb471..a1179c877 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo2.tsx @@ -5,6 +5,7 @@ import { BlockSchemaComponentProvider, CollectionField, CollectionManagerProvider, + CurrentUserProvider, FormBlockProvider, FormItem, FormV2, @@ -36,6 +37,9 @@ mockRequest.onPost('/users:update').reply((params) => { }); return [200, JSON.parse(params.data)]; }); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); const useAction = () => { const ctx = useFormBlockContext(); @@ -107,15 +111,17 @@ const schema: ISchema = { export default () => { return ( - - - - - - - + + + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx index 20dca3607..38a9c352e 100644 --- a/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx +++ b/packages/core/client/src/schema-component/antd/form-v2/demos/demo3.tsx @@ -5,9 +5,11 @@ import { BlockSchemaComponentProvider, CollectionField, CollectionManagerProvider, + CurrentUserProvider, FormBlockProvider, FormItem, FormV2, + Grid, Input, Password, SchemaComponent, @@ -26,6 +28,9 @@ mockRequest.onGet('/users:get').reply(200, { password: '123456', }, }); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); const schema: ISchema = { type: 'object', @@ -93,15 +98,17 @@ const schema: ISchema = { export default () => { return ( - - - - - - - + + + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/antd/grid/__tests__/grid.test.tsx b/packages/core/client/src/schema-component/antd/grid/__tests__/grid.test.tsx index bb0ace2a6..efab59122 100644 --- a/packages/core/client/src/schema-component/antd/grid/__tests__/grid.test.tsx +++ b/packages/core/client/src/schema-component/antd/grid/__tests__/grid.test.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { render, screen } from 'testUtils'; +import { render, screen, waitFor } from 'testUtils'; import App1 from '../demos/demo1'; import App2 from '../demos/demo2'; import App3 from '../demos/demo3'; @@ -14,12 +14,13 @@ describe('Grid', () => { expect(screen.getByText('Block 1')).toBeInTheDocument(); }); - it('input', () => { + it('input', async () => { render(); - const inputs = document.querySelectorAll('.ant-input'); - - expect(inputs.length).toBe(3); + await waitFor(() => { + const inputs = document.querySelectorAll('.ant-input'); + expect(inputs.length).toBe(3); + }); }); it('initializer', () => { diff --git a/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx b/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx index 4f6055acd..52b01236f 100644 --- a/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx +++ b/packages/core/client/src/schema-component/antd/grid/demos/demo2.tsx @@ -1,8 +1,24 @@ import { ISchema } from '@formily/react'; import { uid } from '@formily/shared'; -import { Form, FormItem, Grid, Input, SchemaComponent, SchemaComponentProvider } from '@nocobase/client'; +import { + APIClientProvider, + CurrentUserProvider, + Form, + FormItem, + Grid, + Input, + SchemaComponent, + SchemaComponentProvider, +} from '@nocobase/client'; import React from 'react'; +import { mockAPIClient } from '../../../../test'; + +const { apiClient, mockRequest } = mockAPIClient(); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); + const schema: ISchema = { type: 'void', name: 'grid1', @@ -54,8 +70,12 @@ const schema: ISchema = { export default function App() { return ( - - - + + + + + + + ); } diff --git a/packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx index 9535c96c7..89ca547e6 100644 --- a/packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/kanban/demos/demo1.tsx @@ -4,6 +4,7 @@ import { APIClientProvider, BlockSchemaComponentProvider, CollectionManagerProvider, + CurrentUserProvider, SchemaComponent, SchemaComponentProvider, } from '@nocobase/client'; @@ -19,6 +20,9 @@ mockRequest.onGet('/t_j6omof6tza8:list').reply(async (config) => { await sleep(200); return [200, data]; }); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); const schema: ISchema = { type: 'object', @@ -69,15 +73,17 @@ const schema: ISchema = { export default () => { return ( - - - - - - - - - + + + + + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/antd/record-picker/__tests__/record-picker.test.tsx b/packages/core/client/src/schema-component/antd/record-picker/__tests__/record-picker.test.tsx index a73b04ec4..04deedeb6 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/__tests__/record-picker.test.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/__tests__/record-picker.test.tsx @@ -6,15 +6,18 @@ describe('RecordPicker', () => { it('should show selected options', async () => { render(); - const selector = document.querySelector('.ant-select-selector') as HTMLElement; - expect(selector).toBeInTheDocument(); + let selector; + await waitFor(() => { + selector = document.querySelector('.ant-select-selector') as HTMLElement; + expect(selector).toBeInTheDocument(); + }); await userEvent.click(selector); - await waitFor(() => { // 弹窗标题 - expect(screen.getByText(/select record/i)).toBeInTheDocument(); + expect(screen.queryByText(/select record/i)).toBeInTheDocument(); }); + const checkboxes = document.querySelectorAll('.ant-checkbox'); // 第 3 个选项的内容是： “软件开发” @@ -22,8 +25,8 @@ describe('RecordPicker', () => { await userEvent.click(screen.getByText(/submit/i)); await waitFor(() => { - expect(within(selector).getByText(/软件开发/i)).toBeInTheDocument(); - expect(screen.getByText(/软件开发/i, { selector: '.test-record-picker-read-pretty-item' })).toBeInTheDocument(); + expect(within(selector).queryByText(/软件开发/i)).toBeInTheDocument(); + expect(screen.queryByText(/软件开发/i, { selector: '.test-record-picker-read-pretty-item' })).toBeInTheDocument(); }); }); }); diff --git a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx index 19421043d..54978e8be 100644 --- a/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx +++ b/packages/core/client/src/schema-component/antd/record-picker/demos/demo1.tsx @@ -9,6 +9,7 @@ import { BlockItem, CollectionField, CollectionManagerProvider, + CurrentUserProvider, FormItem, Input, RecordPicker, @@ -23,6 +24,9 @@ import data from './mockData'; const { apiClient, mockRequest } = mockAPIClient(); +mockRequest.onGet('/auth:check').reply(() => { + return [200, { data: {} }]; +}); mockRequest.onGet('/tt_bd_range:list').reply(({ params }) => { // 已选中的 id const ids = JSON.parse(params.filter).$and?.[0]?.['id.$ne'] || []; @@ -172,11 +176,13 @@ export default () => { return ( - - - - - + + + + + + + ); }; diff --git a/packages/core/client/src/schema-component/common/utils/uitls.tsx b/packages/core/client/src/schema-component/common/utils/uitls.tsx index fcf584efd..1512549a3 100644 --- a/packages/core/client/src/schema-component/common/utils/uitls.tsx +++ b/packages/core/client/src/schema-component/common/utils/uitls.tsx @@ -14,18 +14,18 @@ type VariablesCtx = { }; export const useVariablesCtx = (): VariablesCtx => { - const { data } = useCurrentUserContext() || {}; + const currentUser = useCurrentUserContext(); const { field, service, rowKey } = useTableBlockContext(); const contextData = service?.data?.data?.filter((v) => (field?.data?.selectedRowKeys || [])?.includes(v[rowKey])); return useMemo(() => { return { - $user: data?.data || {}, + $user: currentUser?.data?.data || {}, $date: { now: () => dayjs().toISOString(), }, $context: contextData, }; - }, [data]); + }, [contextData, currentUser?.data?.data]); }; export const isVariable = (str: unknown) => { diff --git a/packages/plugins/theme-editor/src/client/hooks/useThemeSettings.tsx b/packages/plugins/theme-editor/src/client/hooks/useThemeSettings.tsx index 4322b1357..914d8864b 100644 --- a/packages/plugins/theme-editor/src/client/hooks/useThemeSettings.tsx +++ b/packages/plugins/theme-editor/src/client/hooks/useThemeSettings.tsx @@ -68,11 +68,6 @@ function Label() { return null; } - if (!currentUser) { - error('Please check if provide `CurrentUserProvider` in your app.'); - throw new Error('Please check if provide `CurrentUserProvider` in your app.'); - } - if (!systemSettings) { error('Please check if provide `SystemSettingsProvider` in your app.'); throw new Error('Please check if provide `SystemSettingsProvider` in your app.');