diff --git a/packages/descriptions/src/index.tsx b/packages/descriptions/src/index.tsx index 3395dfbfe078..6e3200ae735b 100644 --- a/packages/descriptions/src/index.tsx +++ b/packages/descriptions/src/index.tsx @@ -28,8 +28,9 @@ import type { RequestData } from './useFetchData'; import useFetchData from './useFetchData'; import type { ProFieldFCMode } from '@ant-design/pro-provider'; -import { proTheme } from '@ant-design/pro-provider'; +import ProConfigContext, { ProConfigProvider, proTheme } from '@ant-design/pro-provider'; import type { DescriptionsItemType } from 'antd/es/descriptions'; +import ValueTypeToComponent from '../../field/src/ValueTypeToComponent'; // todo remove it export interface DescriptionsItemProps { @@ -496,6 +497,7 @@ const ProDescriptions = < ...rest } = props; + const proContext = useContext(ProConfigContext); const context = useContext(ConfigProvider.ConfigContext); const action = useFetchData( @@ -616,35 +618,37 @@ const ProDescriptions = < const className = context.getPrefixCls('pro-descriptions'); return ( - - - {options} - {rest.extra} - - ) : ( - options - ) - } - title={title} - items={children as DescriptionsItemType[]} - /> - + + + + {options} + {rest.extra} + + ) : ( + options + ) + } + title={title} + items={children as DescriptionsItemType[]} + /> + + ); }; diff --git a/packages/field/src/ValueTypeToComponent.tsx b/packages/field/src/ValueTypeToComponent.tsx index 35b24dd4c2dd..3ff5fedc1827 100644 --- a/packages/field/src/ValueTypeToComponent.tsx +++ b/packages/field/src/ValueTypeToComponent.tsx @@ -52,7 +52,7 @@ const ValueTypeToComponentMap: Record = { {...props} text={text} fieldProps={{ - status: props.status ? props.status : undefined, + ...props?.status && {status: props.status}, ...pickProProps(props.fieldProps), }} />, @@ -60,7 +60,7 @@ const ValueTypeToComponentMap: Record = { {...props} text={text} fieldProps={{ - status: props.status ? props.status : undefined, + ...props?.status && {status: props.status}, ...pickProProps(props.fieldProps), }} />, diff --git a/packages/form/src/components/Rate/index.tsx b/packages/form/src/components/Rate/index.tsx index de717ce8e87f..2a3193d39927 100644 --- a/packages/form/src/components/Rate/index.tsx +++ b/packages/form/src/components/Rate/index.tsx @@ -2,6 +2,8 @@ import type { RateProps } from 'antd'; import React from 'react'; import type { ProFormFieldItemProps } from '../../typing'; import ProField from '../Field'; +import { ProConfigProvider } from '@ant-design/pro-provider'; +import { FieldRate } from '@ant-design/pro-field'; /** * 评分组件 * @@ -12,16 +14,25 @@ const ProFormRate: React.ForwardRefRenderFunction< ProFormFieldItemProps > = ({ fieldProps, proFieldProps, ...rest }, ref) => { return ( - , + formItemRender: (text, props) => , + }, }} - {...rest} - /> + > + + ); }; diff --git a/packages/form/src/components/SchemaForm/index.tsx b/packages/form/src/components/SchemaForm/index.tsx index 0862c9e4cba6..6ed2cafc108c 100644 --- a/packages/form/src/components/SchemaForm/index.tsx +++ b/packages/form/src/components/SchemaForm/index.tsx @@ -12,6 +12,7 @@ import type { FormProps } from 'antd'; import { Form } from 'antd'; import React, { useCallback, + useContext, useImperativeHandle, useRef, useState, @@ -32,6 +33,8 @@ import type { ProFormRenderValueTypeHelpers, } from './typing'; import { renderValueType } from './valueType'; +import ProConfigContext, { ProConfigProvider } from '@ant-design/pro-provider'; +import ValueTypeToComponent from '../../../../field/src/ValueTypeToComponent'; export * from './typing'; @@ -217,24 +220,28 @@ function BetaSchemaForm( [formRef.current], ); + const context = useContext(ProConfigContext); + return ( - { - if (propsFormRef) { - (propsFormRef as React.MutableRefObject>).current = - initForm; - } - restProps?.onInit?.(_, initForm); - formRef.current = initForm; - }} - form={props.form || form} - formRef={formRef} - onValuesChange={onValuesChange} - > - {formChildrenDoms} - + + { + if (propsFormRef) { + (propsFormRef as React.MutableRefObject>).current = + initForm; + } + restProps?.onInit?.(_, initForm); + formRef.current = initForm; + }} + form={props.form || form} + formRef={formRef} + onValuesChange={onValuesChange} + > + {formChildrenDoms} + + ); } diff --git a/tests/descriptions/__snapshots__/index.test.tsx.snap b/tests/descriptions/__snapshots__/index.test.tsx.snap index 1e053638334e..fc53a0f63675 100644 --- a/tests/descriptions/__snapshots__/index.test.tsx.snap +++ b/tests/descriptions/__snapshots__/index.test.tsx.snap @@ -49,7 +49,34 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = ` class="ant-descriptions-item-content" style="min-width: 0;" > - 40 +
+
+
+
+
+ + 40% + +
+
@@ -69,7 +96,51 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = ` class="ant-descriptions-item-content" style="min-width: 0;" > - 100 +
+
+
+
+
+ + + + + +
+
@@ -93,7 +164,52 @@ exports[`descriptions > 🏊 ProDescriptions support order 1`] = ` class="ant-descriptions-item-content" style="min-width: 0;" > - -1 +
+
+
+
+
+ + + + + +
+
diff --git a/tests/field/field.test.tsx b/tests/field/field.test.tsx index 2dfa346daece..a002744f6b91 100644 --- a/tests/field/field.test.tsx +++ b/tests/field/field.test.tsx @@ -12,6 +12,7 @@ import React, { act, useState } from 'react'; import { waitForWaitTime, waitTime } from '../util'; import Demo from './fixtures/demo'; import { TreeSelectDemo } from './fixtures/treeSelectDemo'; +import userEvent from '@testing-library/user-event'; const domRef = React.createRef(); @@ -2024,57 +2025,26 @@ describe('Field', () => { valueType="select" mode="edit" light - options={[ - { label: '全部', value: 'all' }, - { label: '未解决', value: 'open' }, - { label: '已解决', value: 'closed' }, - { label: '解决中', value: 'processing' }, - ]} + fieldProps={{ + options: [ + { label: '全部', value: 'all' }, + { label: '未解决', value: 'open' }, + { label: '已解决', value: 'closed' }, + { label: '解决中', value: 'processing' }, + ] + }} />, ); await waitForWaitTime(100); - - act(() => { - // 点击label打开DatePicker - // jest环境下，click 不会触发mousedown和mouseup，需要手动触发以覆盖相关逻辑代码 - fireEvent.mouseDown( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - fireEvent.click( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - fireEvent.mouseUp( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - }); - await waitFor(() => { - expect( - html.baseElement.querySelectorAll('.ant-select-dropdown').length, - ).toEqual(1); - expect( - html.baseElement.querySelectorAll( - '.ant-select-dropdown.ant-select-dropdown-hidden', - ).length, - ).toEqual(0); - }); - act(() => { - fireEvent.mouseDown( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - fireEvent.click( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - fireEvent.mouseUp( - html.baseElement.querySelector('.ant-pro-core-field-label')!, - ); - }); - await waitFor(() => { - expect( - html.baseElement.querySelectorAll( - '.ant-select-dropdown.ant-select-dropdown-hidden', - ).length, - ).toEqual(1); - }); + await userEvent.click( + html.baseElement.querySelector('.ant-pro-core-field-label')!, + ); + await waitFor(() => expect(html.baseElement.querySelectorAll('.ant-select-dropdown.ant-slide-up-appear')[0]).toBeInTheDocument()); + await userEvent.click( + html.baseElement.querySelector('.ant-pro-core-field-label')!, + ); + // 第二次点击后组件没有到最终的隐藏态，这里检查动画的中间状态可通过 + await waitFor(() => expect(html.baseElement.querySelectorAll('.ant-select-dropdown.ant-slide-up-enter')[0]).toBeInTheDocument()); }); it(`🐴 FieldSelect support clear`, async () => { diff --git a/tests/form/__snapshots__/schemaForm.test.tsx.snap b/tests/form/__snapshots__/schemaForm.test.tsx.snap index 4a59542d4523..a40c38cced38 100644 --- a/tests/form/__snapshots__/schemaForm.test.tsx.snap +++ b/tests/form/__snapshots__/schemaForm.test.tsx.snap @@ -109,47 +109,98 @@ exports[`SchemaForm > 😊 SchemaForm support columns 1`] = `
- - - - + + + + 全部 +
+ - + + @@ -181,47 +232,70 @@ exports[`SchemaForm > 😊 SchemaForm support columns 1`] = `
- - - - + + + + 请选择 +
+ - + @@ -253,47 +327,45 @@ exports[`SchemaForm > 😊 SchemaForm support columns 1`] = `
- - - + - - +
+ diff --git a/tests/form/base.test.tsx b/tests/form/base.test.tsx index 378742f1ae9f..666d91012a13 100644 --- a/tests/form/base.test.tsx +++ b/tests/form/base.test.tsx @@ -1,3 +1,7 @@ +/** + * @vitest-environment jsdom + */ + import { FontSizeOutlined } from '@ant-design/icons'; import type { ProFormInstance } from '@ant-design/pro-components'; import { @@ -88,6 +92,7 @@ describe('ProForm', () => { }); }); + // need jsdom support it('📦 ProForm support sync form url', async () => { const fn = vi.fn(); const wrapper = render( @@ -121,7 +126,7 @@ describe('ProForm', () => { expect(fn).toHaveBeenCalledWith('realDark'); }); - + // need jsdom support it('📦 ProForm support sync form url as important', async () => { const fn = vi.fn(); const wrapper = render( @@ -156,7 +161,7 @@ describe('ProForm', () => { expect(fn).toHaveBeenCalledWith('realDark'); wrapper.unmount(); }); - + // need jsdom support it('📦 ProForm support sync form url and rest', async () => { const onFinish = vi.fn(); const wrapper = render( diff --git a/tests/form/drawerForm.test.tsx b/tests/form/drawerForm.test.tsx index 093ece28b7d6..8a557355c23c 100644 --- a/tests/form/drawerForm.test.tsx +++ b/tests/form/drawerForm.test.tsx @@ -1,8 +1,13 @@ -import { DrawerForm, ModalForm, ProFormText } from '@ant-design/pro-components'; +/** + * @vitest-environment jsdom + */ + +import { DrawerForm, ModalForm, ProFormText } from '@ant-design/pro-components'; import { act, cleanup, fireEvent, + getByText, render, waitFor, } from '@testing-library/react'; @@ -695,6 +700,7 @@ describe('DrawerForm', () => { props: 'modalProps', }, ]; + // need jsdom support tests.forEach((item) => { const { name, Comp, close, props } = item; it(`📦 ${name} resetFields when destroy`, async () => { @@ -732,9 +738,11 @@ describe('DrawerForm', () => { await waitForWaitTime(300); // 点击取消按钮后重置 act(() => { - html.baseElement.querySelectorAll('#new')[0].click(); + fireEvent.click(getByText(html.baseElement, '新 建')); }); - await waitForWaitTime(300); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toBeInTheDocument() + }) act(() => { fireEvent.change( html.baseElement.querySelector('input#name')!, @@ -745,22 +753,26 @@ describe('DrawerForm', () => { }, ); }); - await waitForWaitTime(300); - expect( - html.baseElement.querySelector('input#name')?.value, - ).toBe('12345'); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toHaveValue('12345') + }) act(() => { - html.baseElement - .querySelectorAll('.ant-btn-default')[0] - .click(); + fireEvent.click(getByText(html.baseElement, '取 消')); }); + + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).not.toBeInTheDocument() + }) act(() => { - html.baseElement.querySelectorAll('#new')[0].click(); + fireEvent.click(getByText(html.baseElement, '新 建')); }); - await waitForWaitTime(300); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toBeInTheDocument() + }) expect( html.baseElement.querySelector('input#name')?.value, ).toBeFalsy(); + // 点击关闭按钮后重置 act(() => { fireEvent.change( @@ -772,20 +784,26 @@ describe('DrawerForm', () => { }, ); }); - await waitForWaitTime(300); - expect( - html.baseElement.querySelector('input#name')?.value, - ).toBe('12345'); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toHaveValue('12345') + }) + act(() => { html.baseElement.querySelectorAll(close)[0].click(); }); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).not.toBeInTheDocument() + }) act(() => { - html.baseElement.querySelectorAll('#new')[0].click(); + fireEvent.click(getByText(html.baseElement, '新 建')); }); - await waitForWaitTime(300); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toBeInTheDocument() + }) expect( html.baseElement.querySelector('input#name')?.value, ).toBeFalsy(); + // 点击提交按钮后重置 act(() => { fireEvent.change( @@ -797,21 +815,22 @@ describe('DrawerForm', () => { }, ); }); - await waitForWaitTime(300); - expect( - html.baseElement.querySelector('input#name')?.value, - ).toBe('12345'); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toHaveValue('12345') + }) act(() => { - html.baseElement - .querySelectorAll('.ant-btn-primary')[0] - .click(); + fireEvent.click(getByText(html.baseElement, '确 认')); }); - await waitForWaitTime(300); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).not.toBeInTheDocument() + }) act(() => { - html.baseElement.querySelectorAll('#new')[0].click(); + fireEvent.click(getByText(html.baseElement, '新 建')); }); - await waitForWaitTime(300); + await waitFor(() => { + expect(html.baseElement.querySelector('input#name')).toBeInTheDocument() + }) expect( html.baseElement.querySelector('input#name')?.value, ).toBeFalsy(); diff --git a/tests/form/formList.test.tsx b/tests/form/formList.test.tsx index c57667f573fc..9146ab72ec52 100644 --- a/tests/form/formList.test.tsx +++ b/tests/form/formList.test.tsx @@ -22,6 +22,7 @@ import { import { Button, Form } from 'antd'; import type { NamePath } from 'antd/es/form/interface'; import moment from 'moment'; +import { pick } from 'lodash'; import React from 'react'; import { waitForWaitTime } from '../util'; diff --git a/tests/form/modalForm.test.tsx b/tests/form/modalForm.test.tsx index 7c71fe476868..92e23a89298d 100644 --- a/tests/form/modalForm.test.tsx +++ b/tests/form/modalForm.test.tsx @@ -1,4 +1,8 @@ -import { ModalForm, ProFormText } from '@ant-design/pro-components'; +/** + * @vitest-environment jsdom + */ + +import { ModalForm, ProFormText } from '@ant-design/pro-components'; import { act, cleanup, @@ -468,7 +472,7 @@ describe('ModalForm', () => { expect(await wrapper.findByDisplayValue('test')).toBeTruthy(); }); - + // need jsdom it('📦 ModalForm destroyOnClose close will rerender from', async () => { const wrapper = render( { vi.useRealTimers(); }); + // need jsdom ['ModalForm', 'DrawerForm'].forEach((layoutType) => { it(`😊 ${layoutType} support destroyOnClose rerender`, async () => { const formColumns = [ diff --git a/tests/layout/__snapshots__/index.test.tsx.snap b/tests/layout/__snapshots__/index.test.tsx.snap index b22de4108b62..cdbc7cfec63c 100644 --- a/tests/layout/__snapshots__/index.test.tsx.snap +++ b/tests/layout/__snapshots__/index.test.tsx.snap @@ -13,11 +13,11 @@ exports[`BasicLayout > 🥩 BasicLayout menu support menu.true 1`] = ` style="min-height: 100%; flex-direction: row;" >