From 25f51b57ea92201f15f90d7b99b02c1c1a58e8ab Mon Sep 17 00:00:00 2001
From: cuixiaorui <cui_xiaorui@126.com>
Date: Sat, 10 Jun 2023 19:50:52 +0800
Subject: [PATCH] =?UTF-8?q?feat(teach-frontend):=2003-=E6=B5=8B=E8=AF=95?=
 =?UTF-8?q?=E7=AC=AC=E4=B8=80=E4=B8=AA=E7=BB=84=E4=BB=B6=20TheHeader=20-?=
 =?UTF-8?q?=20=E6=B5=8B=E8=AF=95=20useRouter=20=E7=9A=84=E7=AD=96=E7=95=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/teach-frontend/package.json              |  6 ++--
 .../src/components/header/TheHeader.vue       | 14 ++++----
 .../src/components/header/theHeader.spec.ts   | 33 +++++++++++++++++++
 .../src/components/header/theHeader.ts        | 27 +++++++++++++++
 pnpm-lock.yaml                                |  2 ++
 5 files changed, 74 insertions(+), 8 deletions(-)
 create mode 100644 apps/teach-frontend/src/components/header/theHeader.spec.ts
 create mode 100644 apps/teach-frontend/src/components/header/theHeader.ts

diff --git a/apps/teach-frontend/package.json b/apps/teach-frontend/package.json
index 03fd6a3..d86fc66 100644
--- a/apps/teach-frontend/package.json
+++ b/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"
   }
diff --git a/apps/teach-frontend/src/components/header/TheHeader.vue b/apps/teach-frontend/src/components/header/TheHeader.vue
index 17ceb0a..e30fb1e 100644
--- a/apps/teach-frontend/src/components/header/TheHeader.vue
+++ b/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>
diff --git a/apps/teach-frontend/src/components/header/theHeader.spec.ts b/apps/teach-frontend/src/components/header/theHeader.spec.ts
new file mode 100644
index 0000000..56225d6
--- /dev/null
+++ b/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' })
+  })
+})
diff --git a/apps/teach-frontend/src/components/header/theHeader.ts b/apps/teach-frontend/src/components/header/theHeader.ts
new file mode 100644
index 0000000..b9250c6
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index b9ee56d..c45d29f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -171,6 +171,7 @@ importers:
       typescript: ^4.9.5
       unocss: ^0.48.3
       vite: ^4.0.4
+      vitest: ^0.27.0
       vue: ^3.2.45
       vue-router: 4.1.6
       vue-router-mock: ^0.2.0
@@ -206,6 +207,7 @@ importers:
       typescript: 4.9.5
       unocss: 0.48.5_vite@4.1.1
       vite: 4.1.1
+      vitest: 0.27.3_happy-dom@8.1.3
       vue-router-mock: 0.2.0_lavcef455lp3wtm2mcdrwhgymm
       vue-tsc: 1.0.24_typescript@4.9.5