feat(teach-frontend): 03-测试第一个组件 TheHeader - 测试 useRouter 的策略

apps/teach-frontend/package.json

@@ -1,12 +1,13 @@
 {
-  "name": "frontend",
+  "name": "teach-frontend",
   "type": "module",
   "version": "0.0.0",
   "private": true,
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest"
   },
   "dependencies": {
     "@imengyu/vue3-context-menu": "^1.1.10",
@@ -38,6 +39,7 @@
     "typescript": "^4.9.5",
     "unocss": "^0.48.3",
     "vite": "^4.0.4",
+    "vitest": "^0.27.0",
     "vue-router-mock": "^0.2.0",
     "vue-tsc": "^1.0.24"
   }

apps/teach-frontend/src/components/header/TheHeader.vue

@@ -1,19 +1,21 @@
 <script setup lang="ts">
-import { useGoto } from '@/composables/goto'
+import { useGoto } from './theHeader'
 
-const { gotoHome, gotoGithub, gotoSettings } = useGoto()
+const { goToHome, goToSettings, goToGithub } = useGoto()
 </script>
 
 <template>
-  <div class="w-full base-color h-40px px-1% flex justify-between items-center text-16px">
-    <div class="cursor-pointer" aria-label="Go Home" @click="gotoHome()">
+  <div
+    class="w-full base-color h-40px px-1% flex justify-between items-center text-16px"
+  >
+    <div class="cursor-pointer" aria-label="Go Home" @click="goToHome">
       DiDa
     </div>
     <div class="flex items-center justify-start">
-      <button class="mx-2 !outline-none" @click="gotoSettings()">
+      <button class="mx-2 !outline-none" @click="goToSettings">
         <div i="carbon-settings" />
       </button>
-      <button class="mx-2 !outline-none" @click="gotoGithub()">
+      <button class="mx-2 !outline-none" @click="goToGithub">
         <div i="mdi-github" />
       </button>
     </div>

apps/teach-frontend/src/components/header/theHeader.spec.ts

@@ -0,0 +1,33 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { useRouter } from 'vue-router'
+import { useGoto } from './theHeader'
+
+vi.mock('vue-router')
+
+const pushFn = vi.fn()
+vi.mocked(useRouter as () => { push: Function }).mockImplementation(() => {
+  return {
+    push: pushFn,
+  }
+})
+
+describe('theHeader', () => {
+  beforeEach(() => {
+    pushFn.mockClear()
+  })
+  it('should be go to home page', () => {
+    const { goToHome } = useGoto()
+
+    goToHome()
+
+    expect(pushFn).toBeCalledWith({ name: 'Home' })
+  })
+
+  it('should be go to settings page', () => {
+    const { goToSettings } = useGoto()
+
+    goToSettings()
+
+    expect(pushFn).toBeCalledWith({ name: 'Settings' })
+  })
+})

apps/teach-frontend/src/components/header/theHeader.ts

@@ -0,0 +1,27 @@
+import { useRouter } from 'vue-router'
+
+export function useGoto() {
+  const router = useRouter()
+
+  function goToHome() {
+    router.push({
+      name: 'Home',
+    })
+  }
+
+  function goToSettings() {
+    router.push({
+      name: 'Settings',
+    })
+  }
+
+  function goToGithub() {
+    window.open('https://github.com/cuixueshe/dida')
+  }
+
+  return {
+    goToHome,
+    goToSettings,
+    goToGithub,
+  }
+}