feat: add Unit and E2E Testing and CI (#3)

* feat: add unit testing

* chore: suppress suspense warning

* feat: e2e test

* chore: add ci

.github/workflows/ci.yml

@@ -0,0 +1,59 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Lint
+        run: pnpm run lint
+
+  typecheck:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install
+
+      - name: Typecheck
+        run: pnpm run typecheck
+
+  e2e:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: pnpm/action-setup@v2
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: pnpm install
+      - name: Install Playwright Browsers
+        run: pnpm playwright-core install chromium
+      - name: Run tests
+        run: pnpm run test

README.md

@@ -39,6 +39,8 @@
 
 - 🦾 TypeScript 100%
 
+- 🧪 Unit, Component and E2E Testing with [@nuxt/test-utils](https://github.com/nuxt/test-utils)
+
 <br>
 
 ### Admin Starter Template
@@ -113,7 +115,7 @@ pnpm i
 
 ### Authentication Setup
 
-> You can switch to any [OAuth Providers](https://github.com/Atinux/nuxt-auth-utils#supported-oauth-providers) supported by [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils).
+> You can switch to any [OAuth Providers](https://github.com/Atinux/nuxt-auth-utils#supported-oauth-providers) supported by [Nuxt Auth Utils](https://github.com/Atinux/nuxt-auth-utils) or write your own.
 
 Create a [GitHub OAuth Application](https://github.com/settings/applications/new) with:
 

components/App/AppDrawerItem.vue

@@ -5,13 +5,10 @@ const props = withDefaults(
   defineProps<{ level?: number; item: RouteRecordRaw }>(),
   { level: 0 },
 )
-const visibleChildren = computed(
-  () =>
-    props.item.children
-      ?.filter((child) => child.meta?.icon)
-      .sort(
-        (a, b) => (a.meta?.drawerIndex ?? 99) - (b.meta?.drawerIndex ?? 98),
-      ),
+const visibleChildren = computed(() =>
+  props.item.children
+    ?.filter((child) => child.meta?.icon)
+    .sort((a, b) => (a.meta?.drawerIndex ?? 99) - (b.meta?.drawerIndex ?? 98)),
 )
 const visibleChildrenNum = computed(() => visibleChildren.value?.length || 0)
 const isItem = computed(

components/DialogConfirm.vue

@@ -1,50 +1,35 @@
-<script lang="ts">
-export default defineComponent({
-  data: () => ({
-    dialog: false,
-    confirmed: false,
-    resolve: (confirmed: boolean) => {
-      confirmed
-    },
-    reject: (val: unknown) => {
-      val
-    },
-    message: '',
-  }),
-  watch: {
-    dialog(value) {
-      if (value === false) {
-        this.resolve(this.confirmed)
-      }
-    },
-  },
-  methods: {
-    open(message: string) {
-      this.confirmed = false
-      this.dialog = true
-      this.message = message
-      return new Promise<boolean>((resolve, reject) => {
-        this.resolve = resolve
-        this.reject = reject
-      })
-    },
-    confirm() {
-      this.confirmed = true
-      this.dialog = false
-    },
-    cancel() {
-      this.confirmed = false
-      this.dialog = false
-    },
-  },
+<script setup lang="ts">
+const dialog = ref(false)
+const confirmed = ref(false)
+let resolve: (value: boolean) => void
+const message = ref('')
+watch(dialog, (v) => {
+  if (!v) {
+    resolve(confirmed.value)
+  }
 })
+function open(text: string) {
+  confirmed.value = false
+  dialog.value = true
+  message.value = text
+  return new Promise<boolean>((resolveFn) => {
+    resolve = resolveFn
+  })
+}
+function confirm() {
+  confirmed.value = true
+  dialog.value = false
+}
+function cancel() {
+  confirmed.value = false
+  dialog.value = false
+}
+defineExpose({ open })
 </script>
 
 <template>
   <v-dialog v-model="dialog" max-width="400px">
     <v-card style="z-index: -1">
-      <!-- <v-card-title class="font-weight-bold d-flex justify-center pt-5">
-      </v-card-title> -->
       <v-card-text class="font-weight-bold d-flex">
         <v-icon class="mr-2" color="warning">$warning</v-icon>
         <span>{{ message }}</span>

nuxt.config.ts

@@ -16,7 +16,7 @@ Object.keys(mdicons).forEach((key) => {
 export default defineNuxtConfig({
   devtools: { enabled: true },
   build: {
-    transpile: ['vue-echarts'],
+    transpile: ['vue-echarts', 'resize-detector'],
   },
   // you can turn on SSR but Vuetify has a layout bug
   // https://github.com/vuetifyjs/vuetify/issues/15202
@@ -26,6 +26,7 @@ export default defineNuxtConfig({
     '@vueuse/nuxt',
     'vuetify-nuxt-module',
     'nuxt-auth-utils',
+    '@nuxt/test-utils/module',
   ],
   css: ['~/assets/styles/index.css'],
   experimental: { typedPages: true },

package.json

@@ -1,24 +1,31 @@
 {
   "private": true,
   "type": "module",
+  "packageManager": "[email protected]",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev -o",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare",
     "typecheck": "nuxt typecheck",
+    "test": "vitest",
     "lint": "eslint . --fix --ignore-path .gitignore"
   },
   "devDependencies": {
     "@mdi/js": "^7.4.47",
     "@nuxt/devtools": "latest",
     "@nuxt/eslint-config": "^0.2.0",
+    "@nuxt/test-utils": "^3.10.0",
+    "@vue/test-utils": "^2.4.3",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.1.3",
+    "happy-dom": "^13.3.1",
     "nuxt": "^3.9.3",
+    "playwright-core": "^1.41.1",
     "prettier": "^3.2.4",
     "rollup-plugin-regexp": "^5.0.1",
+    "vitest": "^1.2.1",
     "vue-tsc": "^1.8.27",
     "vuetify-nuxt-module": "^0.10.2"
   },