From 7beafcded240c17cdb4b5261f82b57161f977dab Mon Sep 17 00:00:00 2001 From: hezichao Date: Fri, 20 Mar 2026 11:15:01 +0800 Subject: [PATCH 1/3] feature/inner-ref-basic-vitest --- .../tests/ModalForm/basic/index.spec.tsx | 11 +++ .../tests/ModalForm/basic/index.tsx | 46 +++++++++ .../ModalForm/confirm-on-close/index.tsx | 52 ++++++++++ .../ModalForm/confirm-on-close/test.spec.tsx | 0 .../ModalForm/inner-ref-basic/index.spec.tsx | 94 +++++++++++++++++++ .../tests/ModalForm/inner-ref-basic/index.tsx | 47 ++++++++++ 6 files changed, 250 insertions(+) create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.spec.tsx create mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.tsx diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx new file mode 100644 index 00000000..4c3f808b --- /dev/null +++ b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx @@ -0,0 +1,11 @@ +import { render } from 'vitest-browser-react'; +import { describe, expect, test, vi } from 'vitest'; +import Basic from './index'; + +describe('ModalForm Basic 集成测试', () => { + test('0. 初始状态', async () => { + const { getByTestId, getByText, getByLabelText } = await render(); + + expect(getByText('基本表单')).not.toBeInTheDocument(); + }); +}); diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx new file mode 100644 index 00000000..ade84131 --- /dev/null +++ b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx @@ -0,0 +1,46 @@ +import { useRef, useState } from 'react'; +import ModalForm from 'react-admin-kit/ModalForm'; +import Button from 'react-admin-kit/Button'; + +const Basic = ({ onFinish = () => {} }) => { + const [open, setOpen] = useState(false); + + const container = useRef(null); + + return ( +
+
+ +
+ +
+ + container.current!} + okButtonProps={{ ['data-testid']: 'ok' }} + title={'基本表单'} + open={open} + onCancel={() => { + console.log('onCancel'); + setOpen(false); + }} + onFinish={onFinish} + columns={[ + { + title: '用户名', + dataIndex: 'username', + required: true, + }, + { + title: '电话', + dataIndex: 'phone', + }, + ]} + /> +
+ ); +}; + +export default Basic; diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx new file mode 100644 index 00000000..ec9109e8 --- /dev/null +++ b/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx @@ -0,0 +1,52 @@ +import { useRef } from 'react'; +import { Button, ModalForm } from 'react-admin-kit'; +import type { ModalFormInnerRefType } from 'react-admin-kit'; + +const Demo = ({ confirmOnClose = true }) => { + const innerRef = useRef(); + + const container = useRef(null); + + const onFinish = (values: any) => { + console.log({ values }); + }; + + return ( +
+
+ +
+ +
+ + container.current!} + okButtonProps={{ ['data-testid']: 'ok' }} + cancelButtonProps={{ ['data-testid']: 'cancel' }} + title={'基本表单'} + onFinish={onFinish} + columns={[ + { + title: '用户名', + dataIndex: 'username', + required: true, + }, + { + title: '电话', + dataIndex: 'phone', + }, + ]} + /> +
+ ); +}; + +export default Demo; diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.spec.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.spec.tsx new file mode 100644 index 00000000..25af2b04 --- /dev/null +++ b/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.spec.tsx @@ -0,0 +1,94 @@ +import { render } from 'vitest-browser-react'; +import { describe, expect, test } from 'vitest'; +import Demo from './index'; +import { vi } from 'vitest'; +import { page, userEvent } from 'vitest/browser'; + +describe('ModalForm InnerRef 集成测试', () => { + test('1. 初始状态下Modal不可见', async () => { + const { getByText } = await render(); + + await expect(getByText('基本表单')).not.toBeInTheDocument(); + }); + + test('2. 通过innerRef打开弹窗', async () => { + const { getByText, getByTestId } = await render( + , + ); + + // 点击open按钮，通过innerRef打开弹窗 + await getByTestId('open').click(); + + // 验证弹窗已打开 + await expect(getByText('基本表单')).toBeInTheDocument(); + }); + + test('3. 打开弹窗后，点击关闭按钮可以关闭弹窗', async () => { + const { container, getByTestId, getByText } = await render( + , + ); + + // 打开弹窗 + await getByTestId('open').click(); + + // 验证弹窗已打开 + await expect(getByText('基本表单')).toBeInTheDocument(); + + // 点击关闭按钮 + await container.querySelector('button.ant-modal-close')?.click(); + // // 等待弹窗关闭动画 + await new Promise((resolve) => setTimeout(resolve, 300)); + + // // 验证弹窗正在关闭 + await expect(getByText('基本表单')).not.toBeVisible(); + + // 再一次验证 + await getByTestId('open').click(); + + await expect(getByText('基本表单')).toBeVisible(); + }); + test('4. 表单验证：空表单提交时显示错误信息', async () => { + const { getByTestId } = await render(); + + // 打开弹窗 + await getByTestId('open').click(); + + // 点击确认按钮 + await getByTestId('ok').click(); + + // 验证错误提示出现 + + const error = document.querySelector('.ant-form-item-explain-error'); + expect(error).toBeInTheDocument(); + }); + test('表单提交：填写用户名并提交', async () => { + const onFinish = vi.fn(); + + const { getByTestId } = await render(); + + // 打开弹窗 + await getByTestId('open').click(); + + // 2️⃣ 等 Modal 出现（关键） + const modal = page.getByTestId('dialog'); + await expect(page.getByText('基本表单')).toBeVisible(); + + // 3️⃣ 在 Modal 内操作 + const input = modal.getByLabelText(/用户名/); + await userEvent.fill(input, 'testuser'); + + const okBtn = modal.getByTestId('ok'); + await userEvent.click(okBtn); + + // 4️⃣ 验证 + await expect + .poll(() => onFinish) + .toHaveBeenCalledWith( + expect.objectContaining({ + username: 'testuser', + }), + 'new', + expect.any(Object), + ); + }); +}); diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.tsx new file mode 100644 index 00000000..d60ffb17 --- /dev/null +++ b/packages/react-admin-kit-vitest/tests/ModalForm/inner-ref-basic/index.tsx @@ -0,0 +1,47 @@ +import { useRef } from 'react'; +import Button from 'react-admin-kit/Button'; +import ModalForm from 'react-admin-kit/ModalForm'; +import type { ModalFormInnerRefType } from 'react-admin-kit'; + +const Demo = ({ onFinish }) => { + const innerRef = useRef(); + + const container = useRef(null); + + return ( +
+
+ +
+ +
+ + container.current!} + okButtonProps={{ ['data-testid']: 'ok' }} + title={'基本表单'} + onFinish={onFinish} + columns={[ + { + title: '用户名', + dataIndex: 'username', + required: true, + }, + { + title: '电话', + dataIndex: 'phone', + }, + ]} + /> +
+ ); +}; + +export default Demo; From faab2a25e239e03f50b9cb6383cb1c111c148545 Mon Sep 17 00:00:00 2001 From: hezichao Date: Fri, 20 Mar 2026 11:16:49 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feature/=E5=8F=AA=E6=8F=90=E4=BA=A4inner-re?= =?UTF-8?q?f-basic=E5=86=85=E5=AE=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 删除额外创建的confirm-on-close部分 --- .../ModalForm/confirm-on-close/index.tsx | 52 ------------------- .../ModalForm/confirm-on-close/test.spec.tsx | 0 2 files changed, 52 deletions(-) delete mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx delete mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx deleted file mode 100644 index ec9109e8..00000000 --- a/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/index.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { useRef } from 'react'; -import { Button, ModalForm } from 'react-admin-kit'; -import type { ModalFormInnerRefType } from 'react-admin-kit'; - -const Demo = ({ confirmOnClose = true }) => { - const innerRef = useRef(); - - const container = useRef(null); - - const onFinish = (values: any) => { - console.log({ values }); - }; - - return ( -
-
- -
- -
- - container.current!} - okButtonProps={{ ['data-testid']: 'ok' }} - cancelButtonProps={{ ['data-testid']: 'cancel' }} - title={'基本表单'} - onFinish={onFinish} - columns={[ - { - title: '用户名', - dataIndex: 'username', - required: true, - }, - { - title: '电话', - dataIndex: 'phone', - }, - ]} - /> -
- ); -}; - -export default Demo; diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/confirm-on-close/test.spec.tsx deleted file mode 100644 index e69de29b..00000000 From defcdedfc4d3830eda7a15e34520cd1a13e5f6b0 Mon Sep 17 00:00:00 2001 From: hezichao Date: Fri, 20 Mar 2026 11:18:56 +0800 Subject: [PATCH 3/3] =?UTF-8?q?feature/=E5=88=A0=E9=99=A4basic=EF=BC=8C?= =?UTF-8?q?=E4=BF=9D=E8=AF=81innerrefbasic=E7=BA=AF=E5=87=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../tests/ModalForm/basic/index.spec.tsx | 11 ----- .../tests/ModalForm/basic/index.tsx | 46 ------------------- 2 files changed, 57 deletions(-) delete mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx delete mode 100644 packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx deleted file mode 100644 index 4c3f808b..00000000 --- a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.spec.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { render } from 'vitest-browser-react'; -import { describe, expect, test, vi } from 'vitest'; -import Basic from './index'; - -describe('ModalForm Basic 集成测试', () => { - test('0. 初始状态', async () => { - const { getByTestId, getByText, getByLabelText } = await render(); - - expect(getByText('基本表单')).not.toBeInTheDocument(); - }); -}); diff --git a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx b/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx deleted file mode 100644 index ade84131..00000000 --- a/packages/react-admin-kit-vitest/tests/ModalForm/basic/index.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { useRef, useState } from 'react'; -import ModalForm from 'react-admin-kit/ModalForm'; -import Button from 'react-admin-kit/Button'; - -const Basic = ({ onFinish = () => {} }) => { - const [open, setOpen] = useState(false); - - const container = useRef(null); - - return ( -
-
- -
- -
- - container.current!} - okButtonProps={{ ['data-testid']: 'ok' }} - title={'基本表单'} - open={open} - onCancel={() => { - console.log('onCancel'); - setOpen(false); - }} - onFinish={onFinish} - columns={[ - { - title: '用户名', - dataIndex: 'username', - required: true, - }, - { - title: '电话', - dataIndex: 'phone', - }, - ]} - /> -
- ); -}; - -export default Basic;