feat(tests): more unit test (#1309)

hiveer · HiveerLi · web-flow · commit 88668cfd8574 · 2025-08-21T10:12:06.000+08:00
Co-authored-by: HiveerLi &lt;pingl@opencsg.com&gt;
diff --git a/.codesouler/rules/vue-unit-test-guide.md b/.codesouler/rules/vue-unit-test-guide.md
@@ -83,11 +83,95 @@ vi.mock('element-plus', () => ({
     info: vi.fn(),
   },
   ElMessageBox: {
-    confirm: vi.fn((message, title, options) => Promise.resolve())
+    confirm: vi.fn(() => Promise.resolve()) // 简化确认对话框mock
   }
 }))
 ```
 
+### 使用 vi.hoisted mock useFetchApi
+```javascript
+let { useFetchApiMock } = vi.hoisted(() => {
+  return {
+    useFetchApiMock: vi.fn(() => ({
+      json: () => Promise.resolve({ data: { value: {} }, error: { value: null } }),
+      get: () => ({
+        json: () => Promise.resolve({ data: { value: {} }, error: { value: null } })
+      }),
+      post: () => ({
+        json: () => Promise.resolve({ data: { value: {} }, error: { value: null } })
+      }),
+      put: () => ({
+        json: () => Promise.resolve({ 
+          data: { value: { token: 'new-token', msg: 'Success' } }, 
+          error: { value: null } 
+        })
+      })
+    }))
+  }
+})
+
+vi.mock('@/packs/useFetchApi', () => ({
+  default: useFetchApiMock
+}))
+```
+
+#### 使用说明：
+1. **vi.hoisted** 用于将mock变量提升到文件顶部，确保在mock时可用
+2. 可以模拟各种HTTP方法(get/post/put等)的响应
+3. 每个方法返回的json() Promise可以自定义数据结构和错误状态
+4. 支持在测试用例中动态修改mock实现：
+```javascript
+// 在特定测试用例中覆盖默认mock
+useFetchApiMock.mockImplementationOnce(() => ({
+  get: () => ({
+    json: () => Promise.resolve({
+      data: { value: customData },
+      error: { value: customError }
+    })
+  })
+}))
+```
+
+### 测试经验总结：SyncAccessTokenSettings组件
+
+1. **API调用测试要点**：
+   - 使用`vi.fn()` mock API函数，模拟不同响应场景
+   - 测试成功/失败/空数据等边界情况
+   - 验证API调用参数和次数
+
+2. **UI交互测试要点**：
+   - 测试不同状态下的UI渲染（有Token/无Token）
+   - 验证按钮点击事件触发
+   - 测试表单元素交互
+
+3. **异步操作测试**：
+   - 使用`await nextTick()`等待DOM更新
+   - 对异步API调用使用`await`等待完成
+   - 验证异步操作后的UI状态
+
+4. **第三方库mock技巧**：
+   ```javascript
+   // mock clipboard库
+   vi.mock('@/packs/clipboard', () => ({
+     copyToClipboard: vi.fn()
+   }))
+   
+   // mock uuid库
+   vi.mock('uuid', () => ({
+     v4: vi.fn(() => 'mocked-uuid') // 返回固定值便于断言
+   }))
+   ```
+
+5. **组件方法测试**：
+   - 测试`copyToken`方法是否调用剪贴板API
+   - 测试`refreshAccessToken`的确认流程
+   - 验证错误处理逻辑
+
+6. **最佳实践**：
+   - 每个测试用例后使用`vi.clearAllMocks()`
+   - 为每个测试场景编写描述性名称
+   - 保持测试独立，不依赖其他测试的状态
+
 ### use vi.hoisted to mock useFetchApi Function
 ```javascript
 let { useFetchApiMock } = vi.hoisted(() => {
diff --git a/.gitignore b/.gitignore
@@ -48,3 +48,5 @@ app.log
 frontend/coverage
 
 .idea/
+
+frontend/junit-report.xml
diff --git a/frontend/src/components/__tests__/collections/CollectionsSettings.spec.js b/frontend/src/components/__tests__/collections/CollectionsSettings.spec.js
@@ -0,0 +1,147 @@
+import { mount } from '@vue/test-utils'
+import CollectionsSettings from '@/components/collections/CollectionsSettings.vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { nextTick } from 'vue'
+
+// Mock 依赖项
+vi.mock('element-plus', () => ({
+  ElMessage: {
+    warning: vi.fn(),
+    success: vi.fn(),
+    error: vi.fn()
+  },
+  ElMessageBox: {
+    confirm: vi.fn(() => Promise.resolve())
+  }
+}))
+
+const { mockPut, mockDelete, useFetchApiMock } = vi.hoisted(() => {
+  const mockPut = vi.fn(() => Promise.resolve({ data: { value: {} }, error: { value: null } }))
+  const mockDelete = vi.fn(() => Promise.resolve({ data: { value: {} }, error: { value: null } }))
+
+  return {
+    mockPut,
+    mockDelete,
+    useFetchApiMock: vi.fn(() => ({
+      put: () => ({ json: mockPut }),
+      delete: () => ({ json: mockDelete })
+    }))
+  }
+})
+
+vi.mock('@/packs/useFetchApi', () => ({
+  default: useFetchApiMock
+}))
+
+describe('CollectionsSettings.vue', () => {
+  const mockCollection = {
+    name: 'test-collection',
+    username: 'test-user',
+    nickname: 'Test Collection',
+    description: 'Test description',
+    privateVisibility: false,
+    theme: '#F5F3FF'
+  }
+
+  const createWrapper = (props = {}) => {
+    return mount(CollectionsSettings, {
+      props: {
+        collection: mockCollection,
+        userName: 'test-user',
+        collectionsId: '123',
+        ...props
+      },
+      global: {
+        provide: {
+          fetchCollectionDetail: vi.fn()
+        },
+        mocks: {
+          $t: (key) => key
+        }
+      },
+      attachTo: document.body // 确保组件挂载到DOM
+    })
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    mockPut.mockResolvedValue({ data: { value: {} }, error: { value: null } })
+    mockDelete.mockResolvedValue({ data: { value: {} }, error: { value: null } })
+  })
+
+  it('正确渲染初始状态', async () => {
+    const wrapper = createWrapper()
+    await nextTick()
+
+    // 使用更可靠的选择器，找到第一个el-input组件（集合名称输入框）
+    const nicknameInputs = wrapper.findAll('.el-input__inner')
+    const nicknameInput = nicknameInputs[0]
+
+    expect(nicknameInput.exists()).toBe(true)
+    expect(nicknameInput.element.value).toBe(mockCollection.nickname)
+  })
+
+  it('更新集合名称和描述', async () => {
+    const wrapper = createWrapper()
+    const updateButtons = wrapper.findAll('.btn-secondary-gray')
+    const nicknameInputs = wrapper.findAll('.el-input__inner')
+
+    // 使用第一个输入框（集合名称）
+    await nicknameInputs[0].setValue('New Name')
+    await updateButtons[0].trigger('click')
+
+    expect(useFetchApiMock).toHaveBeenCalledWith(
+      '/collections/123',
+      expect.objectContaining({
+        body: JSON.stringify({
+          description: 'Test description',
+          name: 'test-collection',
+          nickname: 'New Name',
+          private: false,
+          theme: '#F5F3FF'
+        })
+      })
+    )
+  })
+
+  it('变更可见性时显示确认对话框', async () => {
+    const wrapper = createWrapper()
+    // 找到所有ElSelect组件，第二个是可见性选择器
+    const selects = wrapper.findAllComponents({ name: 'ElSelect' })
+    const visibilitySelect = selects[1]
+    await visibilitySelect.vm.$emit('select', 'true')
+
+    const elMessageBox = wrapper.findAllComponents({ name: 'ElMessageBox' })
+    expect(elMessageBox).toBeTruthy()
+  })
+
+it('删除集合需要正确输入名称', async () => {
+  const wrapper = createWrapper()
+
+  // 1. 通过组件选择器找到 CsgButton
+  const deleteBtn = wrapper.findComponent('#confirmDelete')
+
+  // 2. 检查初始禁用状态（通过 props）
+  expect(deleteBtn.props('disabled')).toBe(true)
+
+  // 3. 找到删除确认输入框（第三个el-input）
+  const inputs = wrapper.findAll('.el-input__inner')
+  const confirmInput = inputs[2]
+
+  // 4. 输入正确名称
+  await confirmInput.setValue('test-user/test-collection')
+
+  // 5. 检查启用状态
+  expect(deleteBtn.props('disabled')).toBe(false)
+})
+
+  it('处理API错误情况', async () => {
+    mockPut.mockResolvedValueOnce({ data: { value: null }, error: { value: { msg: 'Error' } } })
+    const wrapper = createWrapper()
+    // 使用更精确的选择器找到第一个更新按钮
+    const updateButtons = wrapper.findAll('.btn-secondary-gray')
+    await updateButtons[0].trigger('click')
+
+    expect(ElMessage.warning).toHaveBeenCalled()
+  })
+})
diff --git a/frontend/src/components/__tests__/user_settings/ProfileSettings.spec.js b/frontend/src/components/__tests__/user_settings/ProfileSettings.spec.js
@@ -0,0 +1,75 @@
+import { mount } from '@vue/test-utils'
+import ProfileSettings from '@/components/user_settings/ProfileSettings.vue'
+import Menu from '@/components/user_settings/Menu.vue'
+import ProfileEdit from '@/components/user_settings/ProfileEdit.vue'
+
+describe('ProfileSettings.vue', () => {
+  // 创建测试包装器
+  const createWrapper = () => {
+    return mount(ProfileSettings, {
+      global: {
+        components: {
+          Menu,
+          ProfileEdit
+        }
+      }
+    })
+  }
+
+  // 测试1：验证基础渲染
+  it('正确渲染容器和子组件', () => {
+    const wrapper = createWrapper()
+
+    // 验证容器元素
+    const container = wrapper.find('.page-responsive-width')
+    expect(container.exists()).toBe(true)
+    expect(container.classes()).toContain('bg-white')
+
+    // 验证子组件存在
+    expect(wrapper.findComponent(Menu).exists()).toBe(true)
+    expect(wrapper.findComponent(ProfileEdit).exists()).toBe(true)
+  })
+
+  // 测试2：验证布局类名
+  it('正确应用响应式布局类', () => {
+    const wrapper = createWrapper()
+    const container = wrapper.find('div')
+
+    // 验证响应式类
+    expect(container.classes()).toContain('md:flex-col')
+    expect(container.classes()).toContain('justify-center')
+  })
+
+  // 测试3：验证props传递
+  it('正确传递hasSave到Menu组件', () => {
+    const wrapper = createWrapper()
+    const menu = wrapper.findComponent(Menu)
+
+    // 验证初始值传递
+    expect(menu.props('hasSave')).toBe(true)
+
+    // 验证class传递
+    expect(menu.vm.$attrs.class).toContain('max-w-[411px]')
+  })
+
+  // 测试4：验证事件处理
+  it('正确响应update-has-save事件', async () => {
+    const wrapper = createWrapper()
+    const profileEdit = wrapper.findComponent(ProfileEdit)
+
+    // 模拟事件触发
+    await profileEdit.vm.$emit('update-has-save', false)
+
+    // 验证状态更新
+    expect(wrapper.findComponent(Menu).props('hasSave')).toBe(false)
+  })
+
+  // 测试5：验证子组件class传递
+  it('正确传递class到ProfileEdit组件', () => {
+    const wrapper = createWrapper()
+    const profileEdit = wrapper.findComponent(ProfileEdit)
+
+    // 验证grow类传递
+    expect(profileEdit.classes()).toContain('grow')
+  })
+})
diff --git a/frontend/src/components/__tests__/user_settings/SshKeySettings.spec.js b/frontend/src/components/__tests__/user_settings/SshKeySettings.spec.js
diff --git a/frontend/src/components/user_settings/SshKeySettings.vue b/frontend/src/components/user_settings/SshKeySettings.vue
