@deepstorm/cli 0.10.2 → 0.11.1

package/dist/skills/reef-style-frontend/fragments/test/vitest-react/examples/testing.md

@@ -4,191 +4,192 @@
 
 ```tsx
 // UserAvatar.test.tsx
-import { render, screen } from '@testing-library/react'
-import { describe, it, expect } from 'vitest'
-import { UserAvatar } from './UserAvatar'
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { UserAvatar } from './UserAvatar';
 
 describe('UserAvatar', () => {
-  const mockUser = { username: 'alice', avatar: 'https://example.com/avatar.png' }
+  const mockUser = { username: 'alice', avatar: 'https://example.com/avatar.png' };
 
   it('renders with avatar image', () => {
-    render(<UserAvatar user={mockUser} />)
-    const img = screen.getByAltText('alice')
-    expect(img).toBeInTheDocument()
-    expect(img).toHaveAttribute('src', mockUser.avatar)
-  })
+    render(<UserAvatar user={mockUser} />);
+    const img = screen.getByAltText('alice');
+    expect(img).toBeInTheDocument();
+    expect(img).toHaveAttribute('src', mockUser.avatar);
+  });
 
   it('renders with size classes', () => {
-    const { container } = render(<UserAvatar user={mockUser} size="lg" />)
+    const { container } = render(<UserAvatar user={mockUser} size="lg" />);
     // Ant Design Avatar 通过 size 属性控制尺寸
-    expect(container.querySelector('.ant-avatar')).toBeInTheDocument()
-  })
+    expect(container.querySelector('.ant-avatar')).toBeInTheDocument();
+  });
 
   it('is clickable when onClick provided', async () => {
-    const handleClick = vi.fn()
-    render(<UserAvatar user={mockUser} onClick={handleClick} />)
+    const handleClick = vi.fn();
+    render(<UserAvatar user={mockUser} onClick={handleClick} />);
 
-    await userEvent.click(screen.getByAltText('alice'))
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-})
+    await userEvent.click(screen.getByAltText('alice'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
 ```
 
 ## 表单测试
 
 ```tsx
 // CreateUserForm.test.tsx
-import { render, screen, waitFor } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { CreateUserForm } from './CreateUserForm'
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { CreateUserForm } from './CreateUserForm';
 
 // Mock message
 vi.mock('antd', async () => {
-  const actual = await vi.importActual('antd')
-  return { ...actual, message: { success: vi.fn(), error: vi.fn() } }
-})
+  const actual = await vi.importActual('antd');
+  return { ...actual, message: { success: vi.fn(), error: vi.fn() } };
+});
 
 describe('CreateUserForm', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
   it('renders all form fields', () => {
-    render(<CreateUserForm />)
+    render(<CreateUserForm />);
 
-    expect(screen.getByLabelText('用户名')).toBeInTheDocument()
-    expect(screen.getByLabelText('邮箱')).toBeInTheDocument()
-    expect(screen.getByLabelText('角色')).toBeInTheDocument()
-    expect(screen.getByRole('button', { name: '创建' })).toBeInTheDocument()
-  })
+    expect(screen.getByLabelText('用户名')).toBeInTheDocument();
+    expect(screen.getByLabelText('邮箱')).toBeInTheDocument();
+    expect(screen.getByLabelText('角色')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: '创建' })).toBeInTheDocument();
+  });
 
   it('shows validation errors on empty submit', async () => {
-    render(<CreateUserForm />)
+    render(<CreateUserForm />);
 
-    await userEvent.click(screen.getByRole('button', { name: '创建' }))
+    await userEvent.click(screen.getByRole('button', { name: '创建' }));
 
     await waitFor(() => {
-      expect(screen.getByText('请输入用户名')).toBeInTheDocument()
-      expect(screen.getByText('请输入邮箱')).toBeInTheDocument()
-    })
-  })
+      expect(screen.getByText('请输入用户名')).toBeInTheDocument();
+      expect(screen.getByText('请输入邮箱')).toBeInTheDocument();
+    });
+  });
 
   it('submits form with valid data', async () => {
-    const createUser = vi.fn().mockResolvedValue({ id: '1' })
-    render(<CreateUserForm onSubmit={createUser} />)
+    const createUser = vi.fn().mockResolvedValue({ id: '1' });
+    render(<CreateUserForm onSubmit={createUser} />);
 
-    await userEvent.type(screen.getByLabelText('用户名'), 'newuser')
-    await userEvent.type(screen.getByLabelText('邮箱'), 'new@example.com')
+    await userEvent.type(screen.getByLabelText('用户名'), 'newuser');
+    await userEvent.type(screen.getByLabelText('邮箱'), 'new@example.com');
 
     // Ant Design Select 需要特殊处理
-    const roleSelect = screen.getByLabelText('角色')
-    await userEvent.click(roleSelect)
-    await userEvent.click(screen.getByText('编辑'))
+    const roleSelect = screen.getByLabelText('角色');
+    await userEvent.click(roleSelect);
+    await userEvent.click(screen.getByText('编辑'));
 
-    await userEvent.click(screen.getByRole('button', { name: '创建' }))
+    await userEvent.click(screen.getByRole('button', { name: '创建' }));
 
     await waitFor(() => {
       expect(createUser).toHaveBeenCalledWith({
         username: 'newuser',
         email: 'new@example.com',
         role: 'EDITOR',
-      })
-    })
-  })
-})
+      });
+    });
+  });
+});
 ```
 
 ## Hook 测试
 
 ```tsx
 // useUsers.test.ts
-import { renderHook, act, waitFor } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { useUsers } from './useUsers'
+import { renderHook, act, waitFor } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { useUsers } from './useUsers';
 
 describe('useUsers', () => {
-  const mockUsers = [
-    { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
-  ]
+  const mockUsers = [{ id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' }];
 
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
   it('returns loading state initially', () => {
-    global.fetch = vi.fn().mockImplementation(() => new Promise(() => {})) // 永不 resolve
+    global.fetch = vi.fn().mockImplementation(() => new Promise(() => {})); // 永不 resolve
 
-    const { result } = renderHook(() => useUsers())
+    const { result } = renderHook(() => useUsers());
 
-    expect(result.current.loading).toBe(true)
-    expect(result.current.users).toEqual([])
-    expect(result.current.error).toBeNull()
-  })
+    expect(result.current.loading).toBe(true);
+    expect(result.current.users).toEqual([]);
+    expect(result.current.error).toBeNull();
+  });
 
   it('returns users on successful fetch', async () => {
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       json: () => Promise.resolve({ content: mockUsers, totalElements: 1 }),
-    })
+    });
 
-    const { result } = renderHook(() => useUsers())
+    const { result } = renderHook(() => useUsers());
 
     await waitFor(() => {
-      expect(result.current.loading).toBe(false)
-    })
+      expect(result.current.loading).toBe(false);
+    });
 
-    expect(result.current.users).toEqual(mockUsers)
-    expect(result.current.error).toBeNull()
-  })
+    expect(result.current.users).toEqual(mockUsers);
+    expect(result.current.error).toBeNull();
+  });
 
   it('returns error on fetch failure', async () => {
-    global.fetch = vi.fn().mockRejectedValue(new Error('Network error'))
+    global.fetch = vi.fn().mockRejectedValue(new Error('Network error'));
 
-    const { result } = renderHook(() => useUsers())
+    const { result } = renderHook(() => useUsers());
 
     await waitFor(() => {
-      expect(result.current.loading).toBe(false)
-    })
+      expect(result.current.loading).toBe(false);
+    });
 
-    expect(result.current.error).toBeInstanceOf(Error)
-    expect(result.current.error?.message).toBe('Network error')
-    expect(result.current.users).toEqual([])
-  })
+    expect(result.current.error).toBeInstanceOf(Error);
+    expect(result.current.error?.message).toBe('Network error');
+    expect(result.current.users).toEqual([]);
+  });
 
   it('refresh resets loading state', async () => {
-    let resolvePromise!: (value: unknown) => void
+    let resolvePromise!: (value: unknown) => void;
     global.fetch = vi.fn().mockImplementation(
-      () => new Promise((resolve) => { resolvePromise = resolve })
-    )
+      () =>
+        new Promise((resolve) => {
+          resolvePromise = resolve;
+        }),
+    );
 
-    const { result } = renderHook(() => useUsers())
+    const { result } = renderHook(() => useUsers());
 
     act(() => {
-      result.current.refresh()
-    })
+      result.current.refresh();
+    });
 
     // refresh should trigger a new fetch, loading goes back to true
-    expect(result.current.loading).toBe(true)
-  })
-})
+    expect(result.current.loading).toBe(true);
+  });
+});
 ```
 
 ## Ant Design 组件集成测试
 
 ```tsx
 // UserTable.test.tsx
-import { render, screen, within } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, it, expect, vi } from 'vitest'
-import { Table } from 'antd'
-import type { ColumnsType } from 'antd/es/table'
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
+import { Table } from 'antd';
+import type { ColumnsType } from 'antd/es/table';
 
 interface User {
-  id: string
-  username: string
-  email: string
-  role: string
+  id: string;
+  username: string;
+  email: string;
+  role: string;
 }
 
 describe('UserTable with Ant Design', () => {
@@ -196,41 +197,28 @@ describe('UserTable with Ant Design', () => {
     { title: '用户名', dataIndex: 'username', key: 'username' },
     { title: '邮箱', dataIndex: 'email', key: 'email' },
     { title: '角色', dataIndex: 'role', key: 'role' },
-  ]
+  ];
 
   const mockData: User[] = [
     { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
     { id: '2', username: 'bob', email: 'bob@example.com', role: 'EDITOR' },
-  ]
+  ];
 
   it('renders table with data', () => {
-    render(
-      <Table
-        columns={columns}
-        dataSource={mockData}
-        rowKey="id"
-      />
-    )
+    render(<Table columns={columns} dataSource={mockData} rowKey="id" />);
 
-    expect(screen.getByText('alice')).toBeInTheDocument()
-    expect(screen.getByText('bob')).toBeInTheDocument()
-  })
+    expect(screen.getByText('alice')).toBeInTheDocument();
+    expect(screen.getByText('bob')).toBeInTheDocument();
+  });
 
   it('shows empty state when no data', () => {
-    render(
-      <Table
-        columns={columns}
-        dataSource={[]}
-        rowKey="id"
-        locale={{ emptyText: '暂无数据' }}
-      />
-    )
+    render(<Table columns={columns} dataSource={[]} rowKey="id" locale={{ emptyText: '暂无数据' }} />);
 
-    expect(screen.getByText('暂无数据')).toBeInTheDocument()
-  })
+    expect(screen.getByText('暂无数据')).toBeInTheDocument();
+  });
 
   it('handles row click', async () => {
-    const handleRow = vi.fn()
+    const handleRow = vi.fn();
     render(
       <Table
         columns={columns}
@@ -239,31 +227,31 @@ describe('UserTable with Ant Design', () => {
         onRow={() => ({
           onClick: () => handleRow(),
         })}
-      />
-    )
+      />,
+    );
 
-    const rows = screen.getAllByRole('row')
+    const rows = screen.getAllByRole('row');
     // 第一行是 header, 第二行是第一个数据行
-    await userEvent.click(rows[1])
-    expect(handleRow).toHaveBeenCalled()
-  })
-})
+    await userEvent.click(rows[1]);
+    expect(handleRow).toHaveBeenCalled();
+  });
+});
 ```
 
 ## 路由组件测试
 
 ```tsx
 // ProtectedRoute.test.tsx
-import { render, screen } from '@testing-library/react'
-import { MemoryRouter, Routes, Route } from 'react-router-dom'
-import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter, Routes, Route } from 'react-router-dom';
+import { describe, it, expect, vi } from 'vitest';
 
 // Mock auth hook
 vi.mock('../hooks/useAuth', () => ({
   useAuth: () => ({ user: null, loading: false }),
-}))
+}));
 
-import { ProtectedRoute } from './ProtectedRoute'
+import { ProtectedRoute } from './ProtectedRoute';
 
 describe('ProtectedRoute', () => {
   it('redirects to login when not authenticated', () => {
@@ -271,13 +259,20 @@ describe('ProtectedRoute', () => {
       <MemoryRouter initialEntries={['/dashboard']}>
         <Routes>
           <Route path="/login" element={<div>登录页</div>} />
-          <Route path="/dashboard" element={<ProtectedRoute><div>仪表盘</div></ProtectedRoute>} />
+          <Route
+            path="/dashboard"
+            element={
+              <ProtectedRoute>
+                <div>仪表盘</div>
+              </ProtectedRoute>
+            }
+          />
         </Routes>
-      </MemoryRouter>
-    )
+      </MemoryRouter>,
+    );
 
-    expect(screen.getByText('登录页')).toBeInTheDocument()
-    expect(screen.queryByText('仪表盘')).not.toBeInTheDocument()
-  })
-})
+    expect(screen.getByText('登录页')).toBeInTheDocument();
+    expect(screen.queryByText('仪表盘')).not.toBeInTheDocument();
+  });
+});
 ```

package/dist/skills/reef-style-frontend/fragments/test/vitest-react/quick-reference.md

@@ -4,8 +4,8 @@
 
 ```ts
 // vitest.config.ts
-import { defineConfig } from 'vitest/config'
-import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
 
 export default defineConfig({
   plugins: [react()],
@@ -26,12 +26,12 @@ export default defineConfig({
       },
     },
   },
-})
+});
 ```
 
 ```ts
 // src/test/setup.ts
-import '@testing-library/jest-dom'
+import '@testing-library/jest-dom';
 ```
 
 ## 通用原则
@@ -44,16 +44,16 @@ import '@testing-library/jest-dom'
 ## 组件测试
 
 ```tsx
-import { render, screen } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import { describe, it, expect, vi } from 'vitest'
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi } from 'vitest';
 
 // ✅ 正确：通过文本寻找元素
-render(<Button>提交</Button>)
-expect(screen.getByRole('button', { name: '提交' })).toBeInTheDocument()
+render(<Button>提交</Button>);
+expect(screen.getByRole('button', { name: '提交' })).toBeInTheDocument();
 
 // ✅ 正确：模拟用户交互
-await userEvent.click(screen.getByRole('button'))
+await userEvent.click(screen.getByRole('button'));
 
 // ❌ 避免：通过测试 ID 或实现细节选择
 // screen.getByTestId('submit-btn') // 仅在无其他方式时使用
@@ -63,20 +63,20 @@ await userEvent.click(screen.getByRole('button'))
 ## Hook 测试
 
 ```tsx
-import { renderHook, act } from '@testing-library/react'
-import { describe, it, expect } from 'vitest'
+import { renderHook, act } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
 
 describe('useCounter', () => {
   it('should increment count', () => {
-    const { result } = renderHook(() => useCounter())
+    const { result } = renderHook(() => useCounter());
 
     act(() => {
-      result.current.increment()
-    })
+      result.current.increment();
+    });
 
-    expect(result.current.count).toBe(1)
-  })
-})
+    expect(result.current.count).toBe(1);
+  });
+});
 ```
 
 ## 测试文件命名与位置
@@ -89,22 +89,22 @@ describe('useCounter', () => {
 
 ```tsx
 // 全局 mock API 调用
-import { vi } from 'vitest'
+import { vi } from 'vitest';
 
 // Mock fetch
-global.fetch = vi.fn()
+global.fetch = vi.fn();
 
 // Mock 模块
 vi.mock('antd', async () => {
-  const actual = await vi.importActual('antd')
+  const actual = await vi.importActual('antd');
   return {
     ...actual,
     message: {
       success: vi.fn(),
       error: vi.fn(),
     },
-  }
-})
+  };
+});
 
 // Mock 自定义 Hook
 vi.mock('../hooks/useUsers', () => ({
@@ -114,7 +114,7 @@ vi.mock('../hooks/useUsers', () => ({
     error: null,
     refresh: vi.fn(),
   }),
-}))
+}));
 ```
 
 ## 异步测试
@@ -125,23 +125,23 @@ it('should load and display users', async () => {
   const mockUsers = [
     { id: '1', username: 'alice', email: 'alice@example.com', role: 'ADMIN' },
     { id: '2', username: 'bob', email: 'bob@example.com', role: 'EDITOR' },
-  ]
+  ];
 
   // 模拟 API 响应
   const mockFetch = vi.fn().mockResolvedValue({
     ok: true,
     json: () => Promise.resolve({ content: mockUsers, totalElements: 2 }),
-  })
-  global.fetch = mockFetch
+  });
+  global.fetch = mockFetch;
 
   // Act
-  render(<UserList />)
+  render(<UserList />);
 
   // Assert — 等待异步渲染完成
-  expect(await screen.findByText('alice')).toBeInTheDocument()
-  expect(screen.getByText('bob')).toBeInTheDocument()
-  expect(screen.getByText('ADMIN')).toBeInTheDocument()
-})
+  expect(await screen.findByText('alice')).toBeInTheDocument();
+  expect(screen.getByText('bob')).toBeInTheDocument();
+  expect(screen.getByText('ADMIN')).toBeInTheDocument();
+});
 ```
 
 ## 覆盖率要求