ci: add unit test

layouts/default.vue

@@ -10,23 +10,23 @@ const sidebarNav: SidebarNavGroup[] = [
       {
         title: '课程管理',
         url: `/course`,
-        icon: 'tabler:books',
+        icon: 'tabler:book-2',
       },
       {
         title: '课程资源',
         url: `/course/resources`,
-        icon: 'tabler:users-group',
+        icon: 'tabler:books',
       },
       {
         title: 'AI 备课',
         url: `/course/prep`,
-        icon: 'tabler:books',
+        icon: 'tabler:clipboard-list',
         isExternal: true,
       },
       {
         title: 'AI 教科研',
         url: `/course/research`,
-        icon: 'tabler:users-group',
+        icon: 'tabler:report-search',
         isExternal: true,
       },
     ],

nuxt.config.ts

@@ -5,7 +5,7 @@ export default defineNuxtConfig({
     '@nuxt/icon',
     '@nuxt/fonts',
     '@nuxt/image',
-    '@nuxt/test-utils',
+    '@nuxt/test-utils/module',
     '@nuxtjs/tailwindcss',
     'shadcn-nuxt',
     '@nuxtjs/color-mode',

package.json

@@ -9,13 +9,13 @@
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
+    "lint:fix": "eslint . --fix",
+    "test": "vitest"
   },
   "dependencies": {
     "@nuxt/fonts": "0.11.0",
     "@nuxt/icon": "1.11.0",
     "@nuxt/image": "1.10.0",
-    "@nuxt/test-utils": "3.17.2",
     "@tanstack/vue-table": "^8.21.2",
     "@vee-validate/zod": "^4.15.0",
     "@vue-office/docx": "^1.6.3",
@@ -47,18 +47,24 @@
     "@iconify-json/svg-spinners": "^1.2.2",
     "@iconify-json/tabler": "^1.2.17",
     "@nuxt/eslint": "1.3.0",
+    "@nuxt/test-utils": "3.17.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.13.2",
     "@pinia/nuxt": "^0.10.1",
     "@tailwindcss/typography": "^0.5.16",
+    "@testing-library/vue": "^8.1.0",
     "@types/dplayer": "^1.25.5",
+    "@vue/test-utils": "^2.4.6",
     "@vueuse/nuxt": "^13.0.0",
     "dayjs": "^1.11.13",
     "dayjs-nuxt": "^2.1.11",
     "eslint-plugin-prettier": "^5.2.6",
+    "happy-dom": "^17.4.4",
     "pinia-plugin-persistedstate": "^4.2.0",
+    "playwright-core": "^1.52.0",
     "prettier": "^3.5.3",
     "shadcn-nuxt": "2.0.1",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "vitest": "^3.1.1"
   }
 }

tests/components/AppContainer.nuxt.spec.ts

@@ -0,0 +1,30 @@
+import { renderSuspended } from '@nuxt/test-utils/runtime'
+import { describe, expect, it } from 'vitest'
+
+import { AppContainer } from '#components'
+import type { NavSecondaryItem } from '~/components/nav/Secondary.vue'
+
+describe('AppContainer', () => {
+  const testNavSecondary: NavSecondaryItem[] = [
+    {
+      label: 'Home',
+      to: '/'
+    },
+    {
+      label: 'Test',
+      to: '/test'
+    },
+  ]
+  it('renders properly', async () => {
+    const appContainer = await renderSuspended(AppContainer, {
+      props: {
+        navSecondary: testNavSecondary
+      },
+    })
+
+    expect(appContainer).toBeTruthy()
+    expect(appContainer.html()).toContain('Home')
+    expect(appContainer.html()).toContain('Test')
+    expect(appContainer.html()).toMatchSnapshot()
+  })
+})

tests/components/__snapshots__/AppContainer.nuxt.spec.ts.snap

@@ -0,0 +1,34 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AppContainer > renders properly 1`] = `
+"<div id="test-wrapper">
+  <div data-v-8083ee16="" class="flex flex-1 flex-col p-8 page-bg-gradient">
+    <!-- <h1 class="pl-2 text-xl font-medium">外部标题</h1> -->
+    <div data-v-77338269="" data-v-8083ee16="" class="flex items-end ml-4 z-0">
+      <div data-v-77338269="" class="subnav-item active" style="z-index: 10;"><svg data-v-77338269="" class="absolute inset-0 aspect-auto top-1" viewBox="0 0 206.5 72" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <defs data-v-77338269="">
+            <linearGradient data-v-77338269="" id="paint_linear_0" gradient-units="objectBoundingBox" x1="0.5" y1="0" x2="0.5" y2="1">
+              <stop data-v-77338269="" stop-color="var(--svg-stop1)"></stop>
+              <stop data-v-77338269="" offset="1" stop-color="var(--svg-stop2)"></stop>
+            </linearGradient>
+          </defs>
+          <g data-v-77338269="">
+            <path data-v-77338269="" id="subnav_item_active" d="M51.9 0L154.6 0C172.19 0 187.72 11.48 192.86 28.31L206.5 72L0 72L13.35 28.31C18.49 11.48 34.02 0 51.9 0Z" fill="url(#paint_linear_0)" fill-opacity="1.000000" fill-rule="evenodd"></path>
+          </g>
+        </svg><a data-v-77338269="" href="/" class="text-base font-medium z-10 select-none pb-0.5 text-secondary">Home</a></div>
+      <div data-v-77338269="" class="subnav-item" style="z-index: -1;"><svg data-v-77338269="" class="absolute inset-0 aspect-auto top-1" viewBox="0 0 206.5 72" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+          <defs data-v-77338269="">
+            <linearGradient data-v-77338269="" id="paint_linear_1" gradient-units="objectBoundingBox" x1="0.5" y1="0" x2="0.5" y2="1">
+              <stop data-v-77338269="" stop-color="var(--svg-stop1)"></stop>
+              <stop data-v-77338269="" offset="1" stop-color="var(--svg-stop2)"></stop>
+            </linearGradient>
+          </defs>
+          <g data-v-77338269="">
+            <path data-v-77338269="" id="subnav_item_active" d="M51.9 0L154.6 0C172.19 0 187.72 11.48 192.86 28.31L206.5 72L0 72L13.35 28.31C18.49 11.48 34.02 0 51.9 0Z" fill="url(#paint_linear_1)" fill-opacity="1.000000" fill-rule="evenodd"></path>
+          </g>
+        </svg><a data-v-77338269="" href="/test" class="text-base font-medium z-10 select-none pb-0.5 text-neutral-400 dark:text-neutral-500">Test</a></div>
+    </div>
+    <div data-v-8083ee16="" class="h-full rounded-lg shadow-sm overflow-hidden bg-white dark:bg-neutral-900 p-8 z-20"></div>
+  </div>
+</div>"
+`;

vitest.config.ts

@@ -0,0 +1,4 @@
+import { defineVitestConfig } from '@nuxt/test-utils/config'
+
+export default defineVitestConfig({
+})