【需求 22051】 refactor: 假如测试用例

package.json

@@ -10,6 +10,7 @@
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
     "preview": "vite preview",
+    "test": "vitest",
     "type-check": "vue-tsc --build",
     "lint": "oxlint --fix && eslint . --fix --cache",
     "lint:oxlint": "oxlint --fix",
@@ -56,11 +57,13 @@
     "@vitejs/plugin-vue-jsx": "^5.1.5",
     "@vue/eslint-config-prettier": "^10.2.0",
     "@vue/eslint-config-typescript": "^14.6.0",
+    "@vue/test-utils": "^2.4.10",
     "@vue/tsconfig": "^0.8.1",
     "baseline-browser-mapping": "^2.9.14",
     "eslint": "^9.37.0",
     "eslint-plugin-vue": "~10.5.0",
     "jiti": "^2.6.1",
+    "jsdom": "^29.1.1",
     "npm-run-all2": "^8.0.4",
     "oxfmt": "^0.44.0",
     "oxlint": "^1.59.0",
@@ -74,6 +77,7 @@
     "vite": "^8.0.0",
     "vite-plugin-svg-icons": "^2.0.1",
     "vite-plugin-vue-devtools": "^8.0.3",
+    "vitest": "^4.1.6",
     "vue-tsc": "^3.1.1"
   }
 }

src/__tests__/components/BackButton.test.ts

+// @vitest-environment jsdom
+
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+import BackButton from '@/components/common/BackButton/index.vue'
+console.log(BackButton)
+const { push, back } = vi.hoisted(() => ({
+  push: vi.fn(),
+  back: vi.fn(),
+}))
+
+vi.mock('vue-router', () => ({
+  useRouter: () => ({
+    push,
+    back,
+  }),
+}))
+
+describe('component: BackButton', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  test('backHomePage 为 true 时，点击后跳转首页', async () => {
+    const wrapper = mount(BackButton, {
+      props: {
+        backHomePage: true,
+      },
+    })
+
+    await wrapper.trigger('click')
+
+    expect(push).toHaveBeenCalledWith('/')
+    expect(back).not.toHaveBeenCalled()
+  })
+
+  test('backHomePage 为 false 且存在历史记录时，点击后返回上一页', async () => {
+    Object.defineProperty(window.history, 'length', {
+      configurable: true,
+      value: 2,
+    })
+
+    const wrapper = mount(BackButton)
+
+    await wrapper.trigger('click')
+
+    expect(back).toHaveBeenCalled()
+    expect(push).not.toHaveBeenCalled()
+  })
+
+  test('backHomePage 为 false 且不存在历史记录时，点击后跳转首页', async () => {
+    Object.defineProperty(window.history, 'length', {
+      configurable: true,
+      value: 1,
+    })
+
+    const wrapper = mount(BackButton)
+
+    await wrapper.trigger('click')
+
+    expect(push).toHaveBeenCalledWith('/')
+    expect(back).not.toHaveBeenCalled()
+  })
+})

src/__tests__/hooks/useResetData.test.ts

+import { describe, expect, test } from 'vitest'
+import { useResetData } from '@/hooks/useResetData'
+
+describe('hook: useResetData', () => {
+  test('初始化时返回 initialValue 的深拷贝', () => {
+    const rawObj = {
+      age: 1,
+      arr: [],
+    }
+    const [data] = useResetData(rawObj)
+
+    expect(data.value).not.toBe(rawObj)
+    expect(data.value).toEqual(rawObj)
+
+    data.value.age = 2
+    expect(data.value).not.toEqual(rawObj)
+  })
+
+  test('reset仍然是深拷贝', () => {
+    const rawObj = {
+      age: 1,
+      arr: [],
+    }
+    const [data, reset] = useResetData(rawObj)
+
+    data.value.age = 2
+    reset()
+
+    expect(data.value).not.toBe(rawObj)
+    expect(data.value).toEqual(rawObj)
+  })
+
+  test('reset 会替换 state.value，旧 toRef 不再跟随后续状态变化', () => {
+    const rawObj = {
+      age: 1,
+      arr: [],
+    }
+
+    const [data, reset] = useResetData(rawObj)
+    const ageRef = toRef(data.value, 'age')
+
+    data.value.age = 2
+    expect(ageRef.value).toBe(2)
+
+    reset()
+    data.value.age = 3
+
+    expect(ageRef.value).toBe(2)
+  })
+
+  test('forReset 会保留 state.value 引用，旧 toRef 仍会跟随后续状态变化', () => {
+    const rawObj = {
+      age: 1,
+      arr: [],
+    }
+
+    const [data, , forReset] = useResetData(rawObj)
+    const ageRef = toRef(data.value, 'age')
+
+    data.value.age = 2
+    expect(ageRef.value).toBe(2)
+
+    forReset()
+    expect(ageRef.value).toBe(1)
+
+    data.value.age = 3
+    expect(ageRef.value).toBe(3)
+  })
+})

src/__tests__/utils/app-dom.test.ts

+// @vitest-environment jsdom
+
+import { describe, expect, test } from 'vitest'
+import { changeAppTitle } from '@/utils/app'
+
+describe('function: changeAppTitle', () => {
+  test('传入标题时，修改 document.title', () => {
+    changeAppTitle('企业文化')
+
+    expect(document.title).toBe('企业文化')
+  })
+})

src/__tests__/utils/app.test.ts

+import { describe, expect, test } from 'vitest'
+import { formatSeconds, formatDuration } from '@/utils/app'
+
+describe('function: formatSeconds', () => {
+  test('传入 number 时，返回当天 23:59:59 的秒级时间戳 number', () => {
+    const result = formatSeconds(1705285230)
+    expect(result).toBe(1705334399)
+  })
+
+  test('传入 string 时，返回当天 23:59:59 的秒级时间戳 string', () => {
+    const result = formatSeconds('1705285230')
+    expect(result).toBe('1705334399')
+  })
+})
+
+describe('function: formatDuration', () => {
+  test('把秒数格式化为 m:ss，并对秒数补 0', () => {
+    const result1 = formatDuration(120)
+    expect(result1).toBe('2:00')
+
+    const result2 = formatDuration(8)
+    expect(result2).toBe('0:08')
+
+    const result3 = formatDuration(61)
+    expect(result3).toBe('1:01')
+  })
+
+  test.each([
+    [120, '2:00'],
+    [8, '0:08'],
+    [61, '1:01'],
+  ])('把秒数格式化为 m:ss，并对秒数补 0', (seconds, expected) => {
+    expect(formatDuration(seconds)).toBe(expected)
+  })
+})

src/__tests__/utils/emoji.test.ts

+import { describe, expect, test } from 'vitest'
+import { parseEmoji } from '@/utils/emoji'
+
+describe('function: parseEmoji', () => {
+  test('传入空字符串时，返回空字符串', () => {
+    const result = parseEmoji('')
+
+    expect(result).toBe('')
+  })
+
+  test('传入不包含表情标记的文本时，返回原文本', () => {
+    const result = parseEmoji('这是一段普通评论')
+
+    expect(result).toBe('这是一段普通评论')
+  })
+
+  test('传入 YAYA 表情标记时，替换为 img 标签', () => {
+    const result = parseEmoji('收到[YAYA_OK]')
+
+    expect(result).toContain('<img')
+    expect(result).toContain('alt="[YAYA_OK]"')
+    expect(result).toContain('class="w-8 h-8"')
+  })
+
+  test('传入 普通 表情标记时，替换为 img 标签', () => {
+    const result = parseEmoji('开心[face_哈哈]')
+
+    expect(result).toContain('<img')
+    expect(result).toContain('alt="[face_哈哈]"')
+    expect(result).toContain('class="w-6 h-6"')
+  })
+})