Prepare vitest

.gitpod.yml

@@ -91,3 +91,4 @@ vscode:
     - hbenl.vscode-test-explorer
     - hbenl.test-adapter-converter
     - littlefoxteam.vscode-python-test-adapter
+    - ZixuanChen.vitest-explorer

.vscode/settings.json

@@ -7,5 +7,7 @@
         "tests/"
     ],
     "python.testing.unittestEnabled": false,
-    "python.testing.pytestEnabled": true
-}
+    "python.testing.pytestEnabled": true,
+    "vitest.enable": true,
+    "vitest.commandLine": "yarn vitest"
+}

front/package.json

@@ -9,7 +9,7 @@
     "build": "vite build --mode development",
     "build:deployment": "vite build --base /front/",
     "serve": "vite preview",
-    "test:unit": "jest",
+    "test:unit": "vitest run",
     "lint": "eslint --ext .ts,.js,.vue src",
     "lint:tsc": "vue-tsc --noEmit",
     "fix-fomantic-css": "scripts/fix-fomantic-css.sh",
@@ -18,7 +18,7 @@
     "postinstall": "yarn run fix-fomantic-css"
   },
   "dependencies": {
-    "@sentry/tracing": "^7.7.0",
+    "@sentry/tracing": "7.7.0",
     "@sentry/vue": "^7.7.0",
     "@vue/runtime-core": "3.2.37",
     "@vueuse/core": "8.9.4",
@@ -38,28 +38,27 @@
     "showdown": "2.1.0",
     "text-clipper": "2.2.0",
     "transliteration": "2.3.5",
-    "universal-cookie": "^4.0.4",
+    "universal-cookie": "4.0.4",
     "vue": "3.2.37",
     "vue-gettext": "2.1.12",
     "vue-plyr": "7.0.0",
     "vue-router": "4.1.2",
     "vue-upload-component": "3.1.2",
-    "vue-virtual-scroller": "^2.0.0-alpha.1",
+    "vue-virtual-scroller": "2.0.0-alpha.1",
     "vue3-gettext": "2.3.0",
     "vue3-lazyload": "0.3.5",
     "vuedraggable": "4.1.0",
     "vuex": "4.0.2",
     "vuex-persistedstate": "4.1.0",
-    "vuex-router-sync": "5.0.0",
-    "yarn": "^1.22.19"
+    "vuex-router-sync": "5.0.0"
   },
   "devDependencies": {
     "@types/diff": "^5.0.2",
     "@types/dompurify": "2.3.3",
     "@types/howler": "2.2.7",
-    "@types/jest": "28.1.6",
     "@types/jquery": "3.5.14",
     "@types/lodash-es": "4.17.6",
+    "@types/moxios": "^0.4.15",
     "@types/qs": "6.9.7",
     "@types/semantic-ui": "2.2.7",
     "@types/showdown": "2.0.0",
@@ -71,7 +70,6 @@
     "@vue/eslint-config-typescript": "11.0.0",
     "@vue/test-utils": "2.0.2",
     "@vue/tsconfig": "0.1.3",
-    "chai": "4.3.6",
     "easygettext": "2.17.0",
     "eslint": "8.20.0",
     "eslint-config-standard": "17.0.0",
@@ -81,16 +79,15 @@
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-vue": "9.3.0",
-    "jest-cli": "28.1.3",
+    "jsdom": "20.0.0",
     "moxios": "0.4.0",
     "sinon": "14.0.0",
-    "ts-jest": "28.0.7",
     "typescript": "4.7.4",
     "utility-types": "^3.10.0",
     "vite": "3.0.3",
     "vite-plugin-pwa": "0.12.3",
     "vite-plugin-vue-inspector": "1.0.1",
-    "vue-jest": "3.0.7",
+    "vitest": "0.22.1",
     "vue-tsc": "0.39.4",
     "workbox-core": "6.5.3",
     "workbox-precaching": "6.5.3",
@@ -99,25 +96,5 @@
   },
   "resolutions": {
     "vue-plyr/plyr": "3.6.12"
-  },
-  "jest": {
-    "moduleFileExtensions": [
-      "ts",
-      "js",
-      "json",
-      "vue"
-    ],
-    "transform": {
-      ".*\\.(vue)$": "vue-jest",
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.ts$": "ts-jest"
-    },
-    "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!lodash-es/.*)"
-    ],
-    "moduleNameMapper": {
-      "^~/(.*)$": "<rootDir>/src/$1"
-    },
-    "testEnvironment": "jsdom"
   }
 }

front/src/views/admin/library/AlbumDetail.vue

@@ -91,7 +91,7 @@ const getQuery = (field: string, value: string) => `${field}:"${value}"`
             <div class="segment-content">
               <h2 class="ui header">
                 <img
-                  v-if="object.cover && object.cover.urls.original"
+                  v-if="object.cover?.urls.original"
                   v-lazy="$store.getters['instance/absoluteUrl'](object.cover.urls.medium_square_crop)"
                   alt=""
                 >

front/tests/unit/specs/components/forms.spec.js

@@ -21,7 +21,7 @@ describe('PasswordInput', () => {
         commit: () => { }
       },
     },
-    propsData: {
+    props: {
       fieldId: 'password',
       value: password,
     }
@@ -33,9 +33,9 @@ describe('PasswordInput', () => {
   })
   it('copy password function called', () => {
     document.execCommand = jest.fn()
-    const spy = sandbox.spy(wrapper.vm, 'copyPassword')     
+    const spy = sandbox.spy(wrapper.vm, 'copyPassword')
     sandbox.stub(PasswordInput.methods, '_copyStringToClipboard').callsFake()
-    const copyButton = wrapper.findAll('button').at(1)
+    const copyButton = wrapper.findAll('button')[1]
     copyButton.trigger('click')
     sandbox.assert.calledOnce(spy)
   })

front/tests/unit/specs/views/admin/library.spec.js

@@ -1,64 +0,0 @@
-const sinon = require('sinon')
-import { expect } from 'chai'
-import { shallowMount, createLocalVue, RouterLinkStub } from '@vue/test-utils'
-import AlbumDetail from '~/views/admin/library/AlbumDetail.vue'
-import GetTextPlugin from 'vue-gettext'
-
-import HumanDate from '~/components/common/HumanDate.vue'
-import DangerousButton from '~/components/common/DangerousButton.vue'
-
-describe('views/admin/library', () => {
-
-  let wrapper
-  let sandbox
-  beforeEach(() => {
-    sandbox = sinon.createSandbox()
-  })
-  afterEach(() => {
-    sandbox.restore()
-  })
-  describe('Album details', () => {
-
-    it('displays default cover', async () => {
-      const album = { cover: null, artist: { id: 1 }, title: "dummy", id: 1, creation_date: "2020-01-01" }
-      const localVue = createLocalVue()
-      localVue.directive('title', (() => null))
-      localVue.directive('dropdown', (() => null))
-      localVue.use(GetTextPlugin, { translations: {} })
-      localVue.filter('truncate', () => null)
-      localVue.filter('humanSize', () => null)
-      localVue.filter('ago', () => null)
-      localVue.filter('moment', () => null)
-      // overrides axios calls
-      sandbox.stub(AlbumDetail.methods, "fetchData").callsFake(() => null)
-      sandbox.stub(AlbumDetail.methods, "fetchStats").callsFake(() => null)
-        
-      wrapper = shallowMount(AlbumDetail, {
-        localVue,
-        data() {
-          return {
-            isLoading: false,
-            isLoadingStats: false,
-            object: album,
-            stats: [],
-          }
-        },
-        mocks: {
-          $store: {
-            state: { auth: { profile: null }, ui: { lastDate: null } }
-          },
-        },
-        stubs: {
-          'human-date': HumanDate,
-          'dangerous-button': DangerousButton,
-          'router-link': RouterLinkStub
-        },
-        propsData: {
-          id: 1          
-        },
-        computed: { labels: () => { return { statsWarning: null } } }
-      })
-      expect(wrapper.find('img').attributes('src')).to.include("default-cover")
-    })
-  })
-})

front/tests/unit/specs/views/admin/library.spec.ts

@@ -0,0 +1,50 @@
+import DangerousButton from '~/components/common/DangerousButton.vue'
+import AlbumDetail from '~/views/admin/library/AlbumDetail.vue'
+import SanitizedHtml from '~/components/SanitizedHtml.vue'
+import HumanDate from '~/components/common/HumanDate.vue'
+
+import moxios from 'moxios'
+
+import { shallowMount } from '@vue/test-utils'
+import { gettext } from '~/init/locale'
+import { sleep } from '?/utils'
+
+import router from '~/router'
+import store from '~/store'
+
+beforeEach(() => moxios.install())
+afterEach(() => moxios.uninstall())
+
+describe('views/admin/library', () => {
+  describe('Album details', () => {
+    it('displays default cover', async () => {
+      const album = { cover: null, artist: { id: 1 }, title: 'dummy', id: 1, creation_date: '2020-01-01' }
+
+      moxios.stubRequest('manage/library/albums/1/', {
+        status: 200,
+        response: album
+      })
+
+      moxios.stubRequest('manage/library/albums/1/stats/', {
+        status: 200,
+        response: {}
+      })
+
+      const wrapper = shallowMount(AlbumDetail, {
+        props: { id: 1 },
+        directives: {
+          dropdown: () => null,
+          title: () => null,
+          lazy: () => null
+        },
+        global: {
+          stubs: { DangerousButton, HumanDate, SanitizedHtml },
+          plugins: [gettext, router, store]
+        }
+      })
+
+      await sleep()
+      expect(wrapper.find('img').attributes('src')).to.include('default-cover')
+    })
+  })
+})

front/tests/unit/utils.js

@@ -1,14 +1,13 @@
 // helper for testing action with expected mutations
 import Vue from 'vue'
-import {expect} from 'chai'
+import { expect } from 'chai'
 
-
-export const render = (Component, propsData) => {
+export const render = (Component, props) => {
   const Constructor = Vue.extend(Component)
-  return new Constructor({ propsData: propsData }).$mount()
+  return new Constructor({ props }).$mount()
 }
 
-export const testAction = ({action, payload, params, expectedMutations, expectedActions}, done) => {
+export const testAction = ({ action, payload, params, expectedMutations, expectedActions }, done) => {
   let mutationsCount = 0
   let actionsCount = 0
 
@@ -18,9 +17,7 @@ export const testAction = ({action, payload, params, expectedMutations, expected
   if (!expectedActions) {
     expectedActions = []
   }
-  const isOver = () => {
-    return mutationsCount >= expectedMutations.length && actionsCount >= expectedActions.length
-  }
+
   // mock commit
   const commit = (type, payload) => {
     const mutation = expectedMutations[mutationsCount]
@@ -31,10 +28,8 @@ export const testAction = ({action, payload, params, expectedMutations, expected
     }
 
     mutationsCount++
-    if (isOver()) {
-      return
-    }
   }
+
   // mock dispatch
   const dispatch = (type, payload, options) => {
     const a = expectedActions[actionsCount]
@@ -49,12 +44,9 @@ export const testAction = ({action, payload, params, expectedMutations, expected
       expect(options).to.deep.equal(a.options)
     }
     actionsCount++
-    if (isOver()) {
-      return
-    }
   }
 
-  let end = function () {
+  const end = function () {
     // check if no mutations should have been dispatched
     if (expectedMutations.length === 0) {
       expect(mutationsCount).to.equal(0)
@@ -62,12 +54,10 @@ export const testAction = ({action, payload, params, expectedMutations, expected
     if (expectedActions.length === 0) {
       expect(actionsCount).to.equal(0)
     }
-    if (isOver()) {
-      return
-    }
   }
+
   // call the action with mocked store and arguments
-  let promise = action({ commit, dispatch, ...params }, payload)
+  const promise = action({ commit, dispatch, ...params }, payload)
   if (promise) {
     promise.then(end)
     return promise
@@ -75,3 +65,5 @@ export const testAction = ({action, payload, params, expectedMutations, expected
     return end()
   }
 }
+
+export const sleep = (n = 0) => new Promise(resolve => setTimeout(resolve, n))

front/tsconfig.json

@@ -7,14 +7,16 @@
     "noUnusedLocals": true,
     "typeRoots": ["node_modules/@types"],
     "types": [
+      "vitest/globals",
       "vite/client",
       "vue/ref-macros",
       "vue-gettext/types",
       "vite-plugin-pwa/client"
     ],
     "paths": {
+      "?/*": ["tests/unit/*"],
       "~/*": ["src/*"]
     }
   },
-  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts"]
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.vue", "vite.config.ts", "tests/**/*.ts"]
 }

front/vite.config.ts

@@ -36,6 +36,7 @@ export default defineConfig(({ mode }) => ({
   },
   resolve: {
     alias: {
+      '?': resolve(__dirname, './tests/unit'),
       '~': resolve(__dirname, './src')
     }
   },
@@ -46,5 +47,14 @@ export default defineConfig(({ mode }) => ({
         embed: resolve(__dirname, './embed.html')
       }
     }
+  },
+  test: {
+    include: [
+      'tests/unit/**/*.spec.ts',
+      // TODO (wvffle): Remove after migrating all tests
+      'tests/unit/**/*.spec.js'
+    ],
+    environment: 'jsdom',
+    globals: true
   }
 }))