@deepstorm/cli 0.11.0 → 0.11.1

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

@@ -6,15 +6,15 @@
 <!-- UserAvatar.vue -->
 <script setup lang="ts">
 interface Props {
-  username: string
-  avatar?: string
-  size?: 'sm' | 'md' | 'lg'
-  onClick?: () => void
+  username: string;
+  avatar?: string;
+  size?: 'sm' | 'md' | 'lg';
+  onClick?: () => void;
 }
 
 const props = withDefaults(defineProps<Props>(), {
   size: 'md',
-})
+});
 </script>
 
 <template>
@@ -30,12 +30,12 @@ const props = withDefaults(defineProps<Props>(), {
 
 ```typescript
 // UserAvatar.test.ts
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi } from 'vitest'
-import UserAvatar from './UserAvatar.vue'
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import UserAvatar from './UserAvatar.vue';
 
 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', () => {
     const wrapper = mount(UserAvatar, {
@@ -43,12 +43,12 @@ describe('UserAvatar', () => {
         username: mockUser.username,
         avatar: mockUser.avatar,
       },
-    })
+    });
 
-    const img = wrapper.find('img')
-    expect(img.attributes('alt')).toBe('alice')
-    expect(img.attributes('src')).toBe(mockUser.avatar)
-  })
+    const img = wrapper.find('img');
+    expect(img.attributes('alt')).toBe('alice');
+    expect(img.attributes('src')).toBe(mockUser.avatar);
+  });
 
   it('renders with size classes', () => {
     const wrapper = mount(UserAvatar, {
@@ -56,25 +56,25 @@ describe('UserAvatar', () => {
         username: mockUser.username,
         size: 'lg',
       },
-    })
+    });
 
     // Ant Design Vue Avatar 通过 size 属性控制尺寸
-    expect(wrapper.findComponent({ name: 'AAvatar' }).exists()).toBe(true)
-  })
+    expect(wrapper.findComponent({ name: 'AAvatar' }).exists()).toBe(true);
+  });
 
   it('is clickable when onClick provided', async () => {
-    const handleClick = vi.fn()
+    const handleClick = vi.fn();
     const wrapper = mount(UserAvatar, {
       props: {
         username: mockUser.username,
         onClick: handleClick,
       },
-    })
+    });
 
-    await wrapper.findComponent({ name: 'AAvatar' }).trigger('click')
-    expect(handleClick).toHaveBeenCalledTimes(1)
-  })
-})
+    await wrapper.findComponent({ name: 'AAvatar' }).trigger('click');
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+});
 ```
 
 ## 表单测试
@@ -82,27 +82,27 @@ describe('UserAvatar', () => {
 ```vue
 <!-- CreateUserForm.vue -->
 <script setup lang="ts">
-import { reactive, ref } from 'vue'
-import { message } from 'ant-design-vue'
+import { reactive, ref } from 'vue';
+import { message } from 'ant-design-vue';
 
 interface FormState {
-  username: string
-  email: string
-  role: string | undefined
+  username: string;
+  email: string;
+  role: string | undefined;
 }
 
 const emit = defineEmits<{
-  success: []
-}>()
+  success: [];
+}>();
 
 const formState = reactive<FormState>({
   username: '',
   email: '',
   role: undefined,
-})
+});
 
-const loading = ref(false)
-const formRef = ref()
+const loading = ref(false);
+const formRef = ref();
 
 const rules = {
   username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
@@ -111,26 +111,26 @@ const rules = {
     { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' },
   ],
   role: [{ required: true, message: '请选择角色', trigger: 'change' }],
-}
+};
 
 async function handleSubmit() {
   try {
-    await formRef.value?.validate()
-    loading.value = true
+    await formRef.value?.validate();
+    loading.value = true;
 
     const res = await fetch('/api/v1/users', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify(formState),
-    })
+    });
 
-    if (!res.ok) throw new Error('创建失败')
-    message.success('用户创建成功')
-    emit('success')
+    if (!res.ok) throw new Error('创建失败');
+    message.success('用户创建成功');
+    emit('success');
   } catch (e) {
-    if (e instanceof Error) message.error(e.message)
+    if (e instanceof Error) message.error(e.message);
   } finally {
-    loading.value = false
+    loading.value = false;
   }
 }
 </script>
@@ -159,9 +159,7 @@ async function handleSubmit() {
     </a-form-item>
 
     <a-form-item :wrapper-col="{ offset: 6, span: 16 }">
-      <a-button type="primary" html-type="submit" :loading="loading">
-        创建
-      </a-button>
+      <a-button type="primary" html-type="submit" :loading="loading"> 创建 </a-button>
     </a-form-item>
   </a-form>
 </template>
@@ -169,183 +167,184 @@ async function handleSubmit() {
 
 ```typescript
 // CreateUserForm.test.ts
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { nextTick } from 'vue'
-import CreateUserForm from './CreateUserForm.vue'
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { nextTick } from 'vue';
+import CreateUserForm from './CreateUserForm.vue';
 
 // Mock Ant Design Vue message
 vi.mock('ant-design-vue', async () => {
-  const actual = await vi.importActual('ant-design-vue')
-  return { ...actual, message: { success: vi.fn(), error: vi.fn() } }
-})
+  const actual = await vi.importActual('ant-design-vue');
+  return { ...actual, message: { success: vi.fn(), error: vi.fn() } };
+});
 
 describe('CreateUserForm', () => {
   beforeEach(() => {
-    vi.clearAllMocks()
-  })
+    vi.clearAllMocks();
+  });
 
   it('renders all form fields', () => {
-    const wrapper = mount(CreateUserForm)
+    const wrapper = mount(CreateUserForm);
 
-    expect(wrapper.text()).toContain('用户名')
-    expect(wrapper.text()).toContain('邮箱')
-    expect(wrapper.text()).toContain('角色')
-  })
+    expect(wrapper.text()).toContain('用户名');
+    expect(wrapper.text()).toContain('邮箱');
+    expect(wrapper.text()).toContain('角色');
+  });
 
   it('shows validation errors on empty submit', async () => {
-    const wrapper = mount(CreateUserForm)
+    const wrapper = mount(CreateUserForm);
 
-    await wrapper.find('form').trigger('submit')
-    await nextTick()
+    await wrapper.find('form').trigger('submit');
+    await nextTick();
 
-    expect(wrapper.text()).toContain('请输入用户名')
-    expect(wrapper.text()).toContain('请输入邮箱')
-  })
+    expect(wrapper.text()).toContain('请输入用户名');
+    expect(wrapper.text()).toContain('请输入邮箱');
+  });
 
   it('submits form with valid data', async () => {
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       json: () => Promise.resolve({ id: '1' }),
-    })
+    });
 
-    const wrapper = mount(CreateUserForm)
+    const wrapper = mount(CreateUserForm);
 
     // 填充表单
-    await wrapper.find('input').setValue('newuser')
-    const inputs = wrapper.findAll('input')
-    await inputs[1].setValue('new@example.com')
+    await wrapper.find('input').setValue('newuser');
+    const inputs = wrapper.findAll('input');
+    await inputs[1].setValue('new@example.com');
 
     // 提交
-    await wrapper.find('form').trigger('submit')
-    await nextTick()
+    await wrapper.find('form').trigger('submit');
+    await nextTick();
 
-    expect(global.fetch).toHaveBeenCalled()
-  })
-})
+    expect(global.fetch).toHaveBeenCalled();
+  });
+});
 ```
 
 ## 组合式函数测试
 
 ```typescript
 // useUsers.test.ts
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { withSetup } from '@/test/utils'
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { withSetup } from '@/test/utils';
 
 // withSetup 辅助函数：在测试环境中执行组合式函数
 function withSetup<T>(hook: () => T): T {
-  let result: T
+  let result: T;
   const wrapper = defineComponent({
     setup() {
-      result = hook()
-      return () => null
+      result = hook();
+      return () => null;
     },
-  })
-  mount(wrapper)
-  return result!
+  });
+  mount(wrapper);
+  return result!;
 }
 
 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(() => {}))
+    global.fetch = vi.fn().mockImplementation(() => new Promise(() => {}));
 
-    const { loading, users, error } = useUsers()
+    const { loading, users, error } = useUsers();
 
-    expect(loading.value).toBe(true)
-    expect(users.value).toEqual([])
-    expect(error.value).toBeNull()
-  })
+    expect(loading.value).toBe(true);
+    expect(users.value).toEqual([]);
+    expect(error.value).toBeNull();
+  });
 
   it('returns users on successful fetch', async () => {
     global.fetch = vi.fn().mockResolvedValue({
       ok: true,
       json: () => Promise.resolve({ content: mockUsers, totalElements: 1 }),
-    })
+    });
 
     // 在 setup 中调用组合式函数
-    let result: ReturnType<typeof useUsers>
+    let result: ReturnType<typeof useUsers>;
     mount(
       defineComponent({
         setup() {
-          result = useUsers()
-          return () => null
+          result = useUsers();
+          return () => null;
         },
-      })
-    )
+      }),
+    );
 
     await vi.waitFor(() => {
-      expect(result!.loading.value).toBe(false)
-    })
+      expect(result!.loading.value).toBe(false);
+    });
 
-    expect(result!.users.value).toEqual(mockUsers)
-    expect(result!.error.value).toBeNull()
-  })
+    expect(result!.users.value).toEqual(mockUsers);
+    expect(result!.error.value).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'));
 
-    let result: ReturnType<typeof useUsers>
+    let result: ReturnType<typeof useUsers>;
     mount(
       defineComponent({
         setup() {
-          result = useUsers()
-          return () => null
+          result = useUsers();
+          return () => null;
         },
-      })
-    )
+      }),
+    );
 
     await vi.waitFor(() => {
-      expect(result!.loading.value).toBe(false)
-    })
+      expect(result!.loading.value).toBe(false);
+    });
 
-    expect(result!.error.value).toBeInstanceOf(Error)
-    expect(result!.error.value?.message).toBe('Network error')
-  })
+    expect(result!.error.value).toBeInstanceOf(Error);
+    expect(result!.error.value?.message).toBe('Network error');
+  });
 
   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;
+        }),
+    );
 
-    let result: ReturnType<typeof useUsers>
+    let result: ReturnType<typeof useUsers>;
     mount(
       defineComponent({
         setup() {
-          result = useUsers()
-          return () => null
+          result = useUsers();
+          return () => null;
         },
-      })
-    )
+      }),
+    );
 
-    result!.refresh()
-    expect(result!.loading.value).toBe(true)
-  })
-})
+    result!.refresh();
+    expect(result!.loading.value).toBe(true);
+  });
+});
 ```
 
 ## Ant Design Vue 组件集成测试
 
 ```typescript
 // UserTable.test.ts
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi } from 'vitest'
-import { defineComponent } from 'vue'
-import { Table } from 'ant-design-vue'
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { defineComponent } from 'vue';
+import { Table } from 'ant-design-vue';
 
 interface User {
-  id: string
-  username: string
-  email: string
-  role: string
+  id: string;
+  username: string;
+  email: string;
+  role: string;
 }
 
 describe('UserTable with Ant Design Vue', () => {
@@ -353,12 +352,12 @@ describe('UserTable with Ant Design Vue', () => {
     { 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', () => {
     const wrapper = mount(
@@ -372,12 +371,12 @@ describe('UserTable with Ant Design Vue', () => {
         `,
         components: { ATable: Table },
         setup: () => ({ data: mockData, columns }),
-      })
-    )
+      }),
+    );
 
-    expect(wrapper.text()).toContain('alice')
-    expect(wrapper.text()).toContain('bob')
-  })
+    expect(wrapper.text()).toContain('alice');
+    expect(wrapper.text()).toContain('bob');
+  });
 
   it('shows empty state when no data', () => {
     const wrapper = mount(
@@ -392,12 +391,12 @@ describe('UserTable with Ant Design Vue', () => {
         `,
         components: { ATable: Table },
         setup: () => ({ columns }),
-      })
-    )
+      }),
+    );
 
-    expect(wrapper.text()).toContain('暂无数据')
-  })
-})
+    expect(wrapper.text()).toContain('暂无数据');
+  });
+});
 ```
 
 ## 路由组件测试
@@ -405,14 +404,14 @@ describe('UserTable with Ant Design Vue', () => {
 ```vue
 <!-- ProtectedRoute.vue -->
 <script setup lang="ts">
-import { useAuthStore } from '@/stores/auth'
-import { useRouter } from 'vue-router'
+import { useAuthStore } from '@/stores/auth';
+import { useRouter } from 'vue-router';
 
-const auth = useAuthStore()
-const router = useRouter()
+const auth = useAuthStore();
+const router = useRouter();
 
 if (!auth.isAuthenticated) {
-  router.replace({ name: 'login' })
+  router.replace({ name: 'login' });
 }
 </script>
 
@@ -423,11 +422,11 @@ if (!auth.isAuthenticated) {
 
 ```typescript
 // ProtectedRoute.test.ts
-import { mount } from '@vue/test-utils'
-import { describe, it, expect, vi } from 'vitest'
-import { createRouter, createWebHistory } from 'vue-router'
-import { createTestingPinia } from '@pinia/testing'
-import ProtectedRoute from './ProtectedRoute.vue'
+import { mount } from '@vue/test-utils';
+import { describe, it, expect, vi } from 'vitest';
+import { createRouter, createWebHistory } from 'vue-router';
+import { createTestingPinia } from '@pinia/testing';
+import ProtectedRoute from './ProtectedRoute.vue';
 
 describe('ProtectedRoute', () => {
   it('redirects to login when not authenticated', () => {
@@ -449,9 +448,9 @@ describe('ProtectedRoute', () => {
           }),
         ],
       },
-    })
+    });
 
-    expect(wrapper.text()).not.toContain('Protected Content')
-  })
-})
+    expect(wrapper.text()).not.toContain('Protected Content');
+  });
+});
 ```