Feature/inner ref basic vitest

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(<Demo onFinish={console} />);
+
+    await expect(getByText('基本表单')).not.toBeInTheDocument();
+  });
+
+  test('2. 通过innerRef打开弹窗', async () => {
+    const { getByText, getByTestId } = await render(
+      <Demo onFinish={console} />,
+    );
+
+    // 点击open按钮，通过innerRef打开弹窗
+    await getByTestId('open').click();
+
+    // 验证弹窗已打开
+    await expect(getByText('基本表单')).toBeInTheDocument();
+  });
+
+  test('3. 打开弹窗后，点击关闭按钮可以关闭弹窗', async () => {
+    const { container, getByTestId, getByText } = await render(
+      <Demo onFinish={console} />,
+    );
+
+    // 打开弹窗
+    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(<Demo onFinish={console} />);
+
+    // 打开弹窗
+    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(<Demo onFinish={onFinish} />);
+
+    // 打开弹窗
+    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),
+      );
+  });
+});

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<ModalFormInnerRefType>();
+
+  const container = useRef(null);
+
+  return (
+    <div>
+      <div style={{ textAlign: 'start' }}>
+        <Button
+          data-testid="open"
+          type="primary"
+          onClick={() => innerRef.current?.openModal()}
+        >
+          open
+        </Button>
+      </div>
+
+      <div ref={container} data-testid="dialog"></div>
+
+      <ModalForm
+        innerRef={innerRef}
+        getContainer={() => container.current!}
+        okButtonProps={{ ['data-testid']: 'ok' }}
+        title={'基本表单'}
+        onFinish={onFinish}
+        columns={[
+          {
+            title: '用户名',
+            dataIndex: 'username',
+            required: true,
+          },
+          {
+            title: '电话',
+            dataIndex: 'phone',
+          },
+        ]}
+      />
+    </div>
+  );
+};
+
+export default Demo;