Upgrade Dependencies

cypress.config.ts

@@ -0,0 +1,41 @@
+import { defineConfig } from 'cypress'
+import { devServer } from '@cypress/vite-dev-server'
+import { ViteDevServerConfig } from '@cypress/vite-dev-server/dist/devServer'
+import plugin from './test/e2e/plugins'
+
+export default defineConfig({
+  defaultCommandTimeout: 30000,
+  requestTimeout: 30000,
+  fileServerFolder: '.',
+  fixturesFolder: 'test/e2e/fixtures',
+  experimentalFetchPolyfill: true,
+  trashAssetsBeforeRuns: true,
+  viewportWidth: 1440,
+  viewportHeight: 990,
+  env: {
+    CYPRESS_COVERAGE: 'true',
+    TAGS: 'not @ignore',
+    BASE_URL: 'localhost:3000'
+  },
+  e2e: {
+    // We've imported your old cypress plugins here.
+    // You may want to clean this up later by importing these.
+    setupNodeEvents(on, config) {
+      return plugin(on, config)
+    },
+    specPattern: 'test/e2e/specs/**/*.{feature,features}',
+    supportFile: 'test/e2e/support/index.ts',
+    excludeSpecPattern: ['*.{ts,tsx,js,jsx}']
+  },
+  component: {
+    devServer(config: ViteDevServerConfig) {
+      return devServer({
+        ...config,
+        framework: 'vue',
+        viteConfig: './vite.config.ts'
+      })
+    },
+    specPattern: 'test/**/*.{feature,features}',
+    excludeSpecPattern: ['*.{ts,tsx,js,jsx}']
+  }
+})

package.json

@@ -8,67 +8,68 @@
     "serve": "vite preview",
     "test": "vitest run",
     "test:watch": "vitest",
-    "test:e2e": "concurrently -r \"yarn dev\" \"cypress open\"",
-    "test:e2e:headless": "concurrently -k -r -s first \"yarn dev\" \"cypress run\"",
+    "test:e2e": "env CYPRESS_TEST=true concurrently -r \"yarn dev\" \"cypress open\"",
+    "test:e2e:headless": "env CYPRESS_TEST=true concurrently -k -r -s first \"yarn dev\" \"cypress run\"",
     "coverage": "vitest run --coverage",
     "lint": "eslint --ext .js,.vue,.ts --ignore-path .gitignore --fix src",
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@headlessui/vue": "^1.5.0",
-    "@heroicons/vue": "^1.0.5",
-    "@popperjs/core": "^2.11.2",
+    "@headlessui/vue": "^1.7.2",
+    "@heroicons/vue": "^2.0.11",
+    "@popperjs/core": "^2.11.6",
     "body-scroll-lock": "^4.0.0-beta.0",
-    "pinia": "^2.0.11",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
+    "pinia": "^2.0.22",
+    "vue": "^3.2.39",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
-    "@babel/types": "^7.17.0",
-    "@cypress/code-coverage": "^3.9.12",
-    "@cypress/vite-dev-server": "^2.2.2",
-    "@cypress/vue": "^3.1.1",
-    "@pinia/testing": "^0.0.9",
-    "@tailwindcss/aspect-ratio": "^0.4.0",
-    "@tailwindcss/forms": "^0.4.0",
-    "@tailwindcss/typography": "^0.5.2",
-    "@types/cypress": "^1.1.3",
+    "@babel/core": "^7.19.1",
+    "@babel/preset-env": "^7.19.1",
+    "@babel/types": "^7.19.0",
+    "@cypress/code-coverage": "^3.10.0",
+    "@cypress/vite-dev-server": "^3.1.1",
+    "@cypress/vue": "^4.2.0",
+    "@pinia/testing": "^0.0.14",
+    "@tailwindcss/aspect-ratio": "^0.4.2",
+    "@tailwindcss/forms": "^0.5.3",
+    "@tailwindcss/typography": "^0.5.7",
     "@types/cypress-cucumber-preprocessor": "^4.0.1",
-    "@types/node": "^17.0.23",
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@types/node": "^18.7.18",
+    "@typescript-eslint/eslint-plugin": "^5.38.0",
+    "@typescript-eslint/parser": "^5.38.0",
     "@vicons/fa": "^0.12.0",
-    "@vitejs/plugin-vue": "^2.2.2",
-    "@vitest/ui": "^0.8.3",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/test-utils": "^2.0.0-rc.17",
-    "autoprefixer": "^10.4.2",
-    "c8": "^7.11.0",
-    "concurrently": "^7.1.0",
-    "cypress": "^9.5.3",
+    "@vitejs/plugin-vue": "^3.1.0",
+    "@vitest/coverage-c8": "^0.23.4",
+    "@vitest/ui": "^0.23.4",
+    "@vue/compiler-sfc": "^3.2.39",
+    "@vue/test-utils": "^2.0.2",
+    "autoprefixer": "^10.4.12",
+    "babel-loader": "^8.2.5",
+    "c8": "^7.12.0",
+    "concurrently": "^7.4.0",
+    "cypress": "^10.8.0",
     "cypress-cucumber-preprocessor": "^4.3.1",
-    "eslint": "^8.10.0",
-    "eslint-config-prettier": "^8.4.0",
-    "eslint-plugin-vue": "^8.5.0",
-    "happy-dom": "^2.41.0",
-    "naive-ui": "^2.27.0",
-    "postcss": "^8.4.12",
-    "postcss-scss": "^4.0.3",
-    "postcss-import": "^14.1.0",
-    "prettier": "^2.5.1",
-    "sass": "^1.49.8",
-    "stylelint": "^14.5.1",
-    "stylelint-config-recommended": "^7.0.0",
-    "tailwindcss": "^3.0.23",
-    "typescript": "^4.6.3",
+    "eslint": "^8.23.1",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-vue": "^9.5.1",
+    "happy-dom": "^6.0.4",
+    "naive-ui": "^2.33.3",
+    "postcss": "^8.4.16",
+    "postcss-import": "^15.0.0",
+    "postcss-scss": "^4.0.5",
+    "prettier": "^2.7.1",
+    "sass": "^1.55.0",
+    "stylelint": "^14.12.1",
+    "stylelint-config-recommended": "^9.0.0",
+    "tailwindcss": "^3.1.8",
+    "typescript": "^4.8.3",
     "vfonts": "^0.0.3",
-    "vite": "^2.9.1",
-    "vite-plugin-istanbul": "^2.5.1",
-    "vite-tsconfig-paths": "^3.4.1",
-    "vitest": "^0.9.0",
-    "vue-tsc": "^0.33.9"
-  },
-  "resolutions": {
-    "@volar/pug-language-service": "^0.33.9"
+    "vite": "^3.1.3",
+    "vite-plugin-istanbul": "^3.0.1",
+    "vite-tsconfig-paths": "^3.5.0",
+    "vitest": "^0.23.4",
+    "vue-tsc": "^0.40.13",
+    "webpack": "^5.74.0"
   }
 }

test/e2e/plugins/index.ts

@@ -2,15 +2,15 @@
 // load type definitions that come with Cypress module
 
 import path from 'path'
-import { startDevServer } from '@cypress/vite-dev-server'
+import { devServer } from '@cypress/vite-dev-server'
 import coverage from '@cypress/code-coverage/task'
 import browserify from '@cypress/browserify-preprocessor'
 // need to use require for now as importing default throws a type error at runtime
 const cucumber = require('cypress-cucumber-preprocessor').default
 
 const rootDir = path.resolve(__dirname, '..', '..', '..')
 
-module.exports = (on, config) => {
+const plugin = (on, config) => {
   const cucumberOptions = {
     ...browserify.defaultOptions,
     typescript: path.join(rootDir, 'node_modules/typescript')
@@ -19,8 +19,8 @@ module.exports = (on, config) => {
   coverage(on, config)
   on('file:preprocessor', cucumber(cucumberOptions))
   on('dev-server:start', (options: Cypress.DevServerConfig) => {
-    return startDevServer({
-      options,
+    return devServer({
+      ...options,
       viteConfig: {
         configFile: path.resolve(rootDir, 'vite.config.ts'),
         define: {
@@ -35,3 +35,5 @@ module.exports = (on, config) => {
 
   return config
 }
+
+export default plugin

test/unit/App.spec.ts

@@ -0,0 +1,40 @@
+import App from '@/App.vue'
+import router from '@/router'
+import HelloWorld from '@/views/HelloWorld.vue'
+import { mountComponent } from '@test/unit/testhelper'
+import { VueWrapper } from '@vue/test-utils'
+import { NConfigProvider, NSwitch } from 'naive-ui'
+import { ComponentPublicInstance } from 'vue'
+
+describe('App.vue', () => {
+  let wrapper: VueWrapper<ComponentPublicInstance<typeof App>>
+  beforeEach(() => {
+    wrapper = mountComponent<InstanceType<typeof App>>(App, {}, {}, true)
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  test('should mount', async () => {
+    expect(wrapper.exists()).toBe(true)
+
+    router.push({ name: 'home' })
+    await router.isReady()
+
+    expect(wrapper.findComponent(HelloWorld).exists()).toBe(true)
+  })
+  test('should switch to dark mode', async () => {
+    const button = wrapper.findComponent(NSwitch)
+
+    expect(button.exists()).toBe(true)
+
+    button.trigger('click')
+
+    await wrapper.vm.$nextTick()
+
+    const confComp = wrapper.findComponent(NConfigProvider)
+
+    expect(confComp.classes().includes('dark')).toBe(true)
+  })
+})

test/unit/testhelper.ts

@@ -1,13 +1,15 @@
+import { globalComponents } from '@/components'
+import router from '@/router'
 import { mount, MountingOptions } from '@vue/test-utils'
 import { createTestingPinia, TestingOptions } from '@pinia/testing'
 import { ComponentPublicInstance, Plugin } from 'vue'
-import { globalComponents } from '@/components'
 import { createPinia, setActivePinia } from 'pinia'
 
 export function mountComponent<T extends ComponentPublicInstance>(
   component: T,
   options: MountingOptions<T> = { shallow: false },
-  mockStore?: TestingOptions
+  mockStore?: TestingOptions,
+  useRouter = false
 ) {
   const pinia = mockStore
     ? createTestingPinia({ createSpy: vi.fn, ...mockStore })
@@ -16,6 +18,10 @@ export function mountComponent<T extends ComponentPublicInstance>(
 
   const plugins: Array<Plugin> = [pinia, globalComponents]
 
+  if (useRouter) {
+    plugins.push(router)
+  }
+
   if (options.global?.plugins) {
     options.global.plugins.push(...plugins)
   } else {

test/unit/tsconfig.json

@@ -13,6 +13,8 @@
     "../../src/**/*.d.ts",
     "../../src/**/*.tsx",
     "../../src/**/*.vue",
+    "../../tests/unit/**.ts",
+    "../../tests/unit/**.spec.ts",
     "**/*.ts",
     "**/*.d.ts",
     "**/*.tsx",

vite.config.ts

@@ -5,19 +5,25 @@ import IstanbulPlugin from 'vite-plugin-istanbul'
 
 const plugins: Array<Plugin> = [vue(), tsconfigPaths()]
 
-plugins.push(
-  IstanbulPlugin({
-    cypress: true,
-    checkProd: true,
-    exclude: ['dist', '.nyc_output', 'node_modules', 'coverage', 'test'],
-    include: ['src/*']
-  })
-)
+if (process.env.CYPRESS_TEST === 'true') {
+  console.info('instrumenting code coverage for e2e tests...')
+  plugins.push(
+    IstanbulPlugin({
+      cypress: true,
+      checkProd: true,
+      exclude: ['dist', '.nyc_output', 'node_modules', 'coverage', 'test'],
+      include: ['src/*']
+    })
+  )
+}
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default defineConfig(({ mode }) => ({
   plugins,
   build: {
-    sourcemap: process.env.NODE_ENV === 'production' ? false : 'inline'
+    sourcemap: mode === 'production' ? false : 'inline'
+  },
+  server: {
+    port: 3000
   }
-})
+}))

vitest.config.ts

@@ -1,18 +1,35 @@
+import { mergeConfig } from 'vite'
 import { defineConfig } from 'vitest/config'
 import vue from '@vitejs/plugin-vue'
 import tsconfigPaths from 'vite-tsconfig-paths'
+import config from './vite.config'
 
 const plugins = [vue(), tsconfigPaths({ root: 'test/unit' })]
 
 // https://vitejs.dev/config/
-export default defineConfig({
-  plugins,
-  test: {
-    environment: 'happy-dom',
-    globals: true,
-    coverage: {
-      all: true,
-      exclude: ['*.config.{ts,js}', '**/*.d.ts', 'src/main.ts', 'dist', 'test']
+export default mergeConfig(
+  config,
+  defineConfig({
+    plugins,
+    test: {
+      deps: {
+        inline: ['date-fns']
+      },
+      environment: 'happy-dom',
+      globals: true,
+      coverage: {
+        all: true,
+        exclude: [
+          '*.config.{ts,js}',
+          '**/*.d.ts',
+          'src/main.ts',
+          'dist',
+          'test'
+        ],
+        functions: 80,
+        branches: 80,
+        statements: 80
+      }
     }
-  }
-})
+  })
+)