Restores front tests using jest and vite

front/babel.config.js

+module.exports = {
+  presets: [
+    '@babel/preset-env',
+  ],
+  plugins: [
+    '@babel/plugin-transform-runtime',
+    function () {
+      return {
+        visitor: {
+          MetaProperty(path) {
+            path.replaceWithSourceString('process')
+          },
+        },
+      }
+    },
+  ],
+}

front/package.json

@@ -9,7 +9,7 @@
     "build": "vite build",
     "build:deployment": "vite build --base /front/",
     "serve": "vite preview",
-    "test:unit": "true",
+    "test:unit": "jest",
     "lint": "eslint --ext .js,.vue src",
     "fix-fomantic-css": "scripts/fix-fomantic-css.sh",
     "i18n-compile": "scripts/i18n-compile.sh",
@@ -45,7 +45,14 @@
     "vuex-router-sync": "5.0.0"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.5",
+    "@babel/plugin-transform-runtime": "^7.17.0",
+    "@babel/preset-env": "^7.16.11",
+    "@vue/test-utils": "^1.0.0-beta.22",
     "autoprefixer": "10.4.4",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^27.5.1",
+    "chai": "^4.3.6",
     "easygettext": "2.17.0",
     "eslint": "8.11.0",
     "eslint-config-standard": "16.0.3",
@@ -55,8 +62,12 @@
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-vue": "7.20.0",
     "glob-all": "3.3.0",
+    "jest-cli": "^27.5.1",
+    "moxios": "^0.4.0",
+    "sinon": "^13.0.1",
     "vite": "2.8.6",
     "vite-plugin-vue2": "1.9.3",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "2.6.14"
   },
   "resolutions": {
@@ -109,5 +120,20 @@
     "iOS >= 9",
     "Android >= 4",
     "not dead"
-  ]
+  ],
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.js$": "babel-jest"
+    },
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1"
+    },
+    "testEnvironment": "jsdom"
+  }
 }

front/src/store/auth.js

@@ -2,7 +2,6 @@ import Vue from 'vue'
 import axios from 'axios'
 import logger from '@/logging'
 import lodash from 'lodash'
-import router from '@/router'
 
 function getDefaultScopedTokens () {
   return {
@@ -142,7 +141,9 @@ export default {
         // commit('token', response.data.token)
         dispatch('fetchProfile').then(() => {
           // Redirect to a specified route
-          return router.push(next)
+          import('@/router').then((router) => {
+            return router.default.push(next)
+          })
         })
       }, response => {
         logger.default.error('Error while logging in', response.data)

front/tests/unit/.eslintrc

+{
+  "env": {
+    "mocha": true
+  },
+  "globals": {
+    "expect": true,
+    "sinon": true
+  }
+}

front/tests/unit/specs/audio/volume.spec.js

+import { expect } from 'chai'
+
+import { toLinearVolumeScale, toLogarithmicVolumeScale } from '@/audio/volume'
+
+describe('store/auth', () => {
+    describe('toLinearVolumeScale', () => {
+        it('it should return real 0', () => {
+            expect(toLinearVolumeScale(0.0)).to.equal(0.0)
+        })
+
+        it('it should return full volume', () => {
+            expect(toLinearVolumeScale(1.0)).to.be.closeTo(1.0, 0.001)
+        })
+    })
+
+    describe('toLogarithmicVolumeScale', () => {
+        it('it should return real 0', () => {
+            expect(toLogarithmicVolumeScale(0.0)).to.equal(0.0)
+        })
+
+        it('it should return full volume', () => {
+            expect(toLogarithmicVolumeScale(1.0)).to.be.closeTo(1.0, 0.001)
+        })
+    })
+})

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

+import {expect} from 'chai'
+
+import Username from '@/components/common/Username.vue'
+
+import { render } from '../../utils'
+
+describe('Username', () => {
+  it('displays username', () => {
+    const vm = render(Username, {username: 'Hello'})
+    expect(vm.$el.textContent).to.equal('Hello')
+  })
+})

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

+import { expect } from 'chai'
+import PasswordInput from '@/components/forms/PasswordInput.vue'
+import { shallowMount } from '@vue/test-utils'
+const sinon = require('sinon')
+
+describe('PasswordInput', () => {
+  const password = 'password'
+  let sandbox
+
+  beforeEach(function () {
+    sandbox = sinon.createSandbox()
+  })
+
+  afterEach(function () {
+    sandbox.restore()
+  })
+  const wrapper = shallowMount(PasswordInput, {
+    mocks: {
+      $pgettext: () => 'dummy',
+      $store: {
+        commit: () => { }
+      },
+    },
+    propsData: {
+      fieldId: 'password',
+      value: password,
+    }
+  })
+  wrapper.setProps({ value: password, copyButton: true })
+  it('password input has passed value', () => {
+    const inputElement = wrapper.find('input')
+    expect(inputElement.element.value).to.equal(password)
+  })
+  it('copy password function called', () => {
+    document.execCommand = jest.fn()
+    const spy = sandbox.spy(wrapper.vm, 'copyPassword')     
+    sandbox.stub(PasswordInput.methods, '_copyStringToClipboard').callsFake()
+    const copyButton = wrapper.findAll('button').at(1)
+    copyButton.trigger('click')
+    sandbox.assert.calledOnce(spy)
+  })
+})

front/tests/unit/specs/filters/filters.spec.js

+import {expect} from 'chai'
+import moment from 'moment'
+import {truncate, ago, capitalize, year} from '@/filters'
+
+describe('filters', () => {
+  describe('truncate', () => {
+    it('leave strings as it if correct size', () => {
+      const input = 'Hello world'
+      let output = truncate(input, 100)
+      expect(output).to.equal(input)
+    })
+    it('returns shorter string with character', () => {
+      const input = 'Hello world'
+      let output = truncate(input, 5)
+      expect(output).to.equal('Hello…')
+    })
+    it('custom ellipsis', () => {
+      const input = 'Hello world'
+      let output = truncate(input, 5, ' pouet')
+      expect(output).to.equal('Hello pouet')
+    })
+  })
+  describe('ago', () => {
+    it('works', () => {
+      const input = new Date()
+      let output = ago(input)
+      let expected = moment(input).calendar(input, {
+        sameDay: 'LT',
+        nextDay: 'L',
+        nextWeek: 'L',
+        lastDay: 'L',
+        lastWeek: 'L',
+        sameElse: 'L'
+    })
+      expect(output).to.equal(expected)
+    })
+  })
+  describe('year', () => {
+    it('works', () => {
+      const input = '2017-07-13'
+      let output = year(input)
+      expect(output).to.equal(2017)
+    })
+  })
+  describe('capitalize', () => {
+    it('works', () => {
+      const input = 'hello world'
+      let output = capitalize(input)
+      expect(output).to.equal('Hello world')
+    })
+  })
+})

front/tests/unit/specs/search.spec.js

+import {expect} from 'chai'
+
+import {normalizeQuery, parseTokens, compileTokens} from '@/search'
+
+describe('search', () => {
+  it('normalizeQuery returns correct tokens', () => {
+    const input = 'this is a "search query" yeah'
+    let output = normalizeQuery(input)
+    expect(output).to.deep.equal(['this', 'is', 'a', 'search query', 'yeah'])
+  })
+  it('parseTokens can extract fields and values from tokens', () => {
+    const input = ['unhandled', 'key:value', 'status:pending', 'title:"some title"', 'anotherunhandled']
+    let output = parseTokens(input)
+    let expected = [
+      {
+        'field': null,
+        'value': 'unhandled'
+      },
+      {
+        'field': 'key',
+        'value': 'value'
+      },
+      {
+        'field': 'status',
+        'value': 'pending',
+      },
+      {
+        'field': 'title',
+        'value': 'some title'
+      },
+      {
+        'field': null,
+        'value': 'anotherunhandled'
+      }
+    ]
+    expect(output).to.deep.equal(expected)
+  })
+  it('compileTokens returns proper query string', () => {
+    let input = [
+      {
+        'field': null,
+        'value': 'unhandled'
+      },
+      {
+        'field': 'key',
+        'value': 'value'
+      },
+      {
+        'field': 'status',
+        'value': 'pending',
+      },
+      {
+        'field': 'title',
+        'value': 'some title'
+      },
+      {
+        'field': null,
+        'value': 'anotherunhandled'
+      }
+    ]
+    const expected = 'unhandled key:value status:pending title:"some title" anotherunhandled'
+    let output = compileTokens(input)
+    expect(output).to.deep.equal(expected)
+  })
+})

front/tests/unit/specs/store/auth.spec.js

+var sinon = require('sinon')
+import {expect} from 'chai'
+
+import moxios from 'moxios'
+import store from '@/store/auth'
+
+import { testAction } from '../../utils'
+
+describe('store/auth', () => {
+  var sandbox
+
+  beforeEach(function () {
+    sandbox = sinon.createSandbox()
+    moxios.install()
+  })
+  afterEach(function () {
+    sandbox.restore()
+    moxios.uninstall()
+  })
+
+  describe('mutations', () => {
+    it('profile', () => {
+      const state = {}
+      store.mutations.profile(state, {})
+      expect(state.profile).to.deep.equal({})
+    })
+    it('username', () => {
+      const state = {}
+      store.mutations.username(state, 'world')
+      expect(state.username).to.equal('world')
+    })
+    it('authenticated true', () => {
+      const state = {}
+      store.mutations.authenticated(state, true)
+      expect(state.authenticated).to.equal(true)
+    })
+    it('authenticated false', () => {
+      const state = {
+        username: 'dummy',
+        token: 'dummy',
+        profile: 'dummy',
+        availablePermissions: 'dummy'
+      }
+      store.mutations.authenticated(state, false)
+      expect(state.authenticated).to.equal(false)
+      expect(state.username).to.equal(null)
+      expect(state.token).to.equal(null)
+      expect(state.profile).to.equal(null)
+      expect(state.availablePermissions).to.deep.equal({})
+    })
+    it('token null', () => {
+      const state = {}
+      store.mutations.token(state, null)
+      expect(state.token).to.equal(null)
+    })
+    it('token real', () => {
+      const state = {}
+      let token = 'eyJhbGciOiJub25lIiwidHlwIjoiSldUIn0.eyJpc3MiOiJodHRwczovL2p3dC1pZHAuZXhhbXBsZS5jb20iLCJzdWIiOiJtYWlsdG86bWlrZUBleGFtcGxlLmNvbSIsIm5iZiI6MTUxNTUzMzQyOSwiZXhwIjoxNTE1NTM3MDI5LCJpYXQiOjE1MTU1MzM0MjksImp0aSI6ImlkMTIzNDU2IiwidHlwIjoiaHR0cHM6Ly9leGFtcGxlLmNvbS9yZWdpc3RlciJ9.'
+      store.mutations.token(state, token)
+      expect(state.token).to.equal(token)
+    })
+    it('permissions', () => {
+      const state = { availablePermissions: {} }
+      store.mutations.permission(state, {key: 'admin', status: true})
+      expect(state.availablePermissions).to.deep.equal({admin: true})
+    })
+  })
+  describe('getters', () => {
+    it('header', () => {
+      const state = { oauth: {accessToken: 'helloworld' }}
+      expect(store.getters['header'](state)).to.equal('Bearer helloworld')
+    })
+  })
+  describe('actions', () => {
+    it('logout', () => {
+      testAction({
+        action: store.actions.logout,
+        params: {state: {}},
+        expectedMutations: [
+          { type: 'auth/reset', payload: null, options: {root: true} },
+          { type: 'favorites/reset', payload: null, options: {root: true} },
+          { type: 'player/reset', payload: null, options: {root: true} },
+          { type: 'playlists/reset', payload: null, options: {root: true} },
+          { type: 'queue/reset', payload: null, options: {root: true} },
+          { type: 'radios/reset', payload: null, options: {root: true} }
+        ]
+      })
+    })
+    it('check jwt null', () => {
+      testAction({
+        action: store.actions.check,
+        params: {state: {}},
+        expectedMutations: [
+          { type: 'authenticated', payload: false },
+          { type: 'authenticated', payload: true },
+        ],
+        expectedActions: [
+          { type: 'fetchProfile' },
+        ]
+      })
+    })
+    it('login success', () => {
+      moxios.stubRequest('token/', {
+        status: 200,
+        response: {
+          token: 'test'
+        }
+      })
+      const credentials = {
+        username: 'bob'
+      }
+      testAction({
+        action: store.actions.login,
+        payload: {credentials: credentials},
+        expectedMutations: [
+          { type: 'token', payload: 'test' }
+        ],
+        expectedActions: [
+          { type: 'fetchProfile' }
+        ]
+      })
+    })
+    it('login error', () => {
+      moxios.stubRequest('token/', {
+        status: 500,
+        response: {
+          token: 'test'
+        }
+      })
+      const credentials = {
+        username: 'bob'
+      }
+      let spy = sandbox.spy()
+      testAction({
+        action: store.actions.login,
+        payload: {credentials: credentials, onError: spy}
+      }, () => {
+        expect(spy.calledOnce).to.equal(true)
+        done() // eslint-disable-line no-undef
+      })
+    })
+    it('fetchProfile', () => {
+      const profile = {
+        username: 'bob',
+        permissions: {
+          admin: true
+        }
+      }
+      moxios.stubRequest('users/me/', {
+        status: 200,
+        response: profile
+      })
+      testAction({
+        action: store.actions.fetchProfile,
+        expectedMutations: [
+          { type: 'authenticated', payload: true },
+          { type: 'profile', payload: profile },
+          { type: 'username', payload: profile.username },
+          { type: 'permission', payload: {key: 'admin', status: true} }
+        ],
+        expectedActions: [
+          { type: 'ui/initSettings', payload: { root: true } },
+          { type: 'updateProfile', payload: profile },
+          { type: 'ui/fetchUnreadNotifications', payload: null },
+          { type: 'favorites/fetch', payload: null, options: {root: true} },
+          { type: 'channels/fetchSubscriptions', payload: null, options: {root: true} },
+          { type: 'libraries/fetchFollows', payload: null, options: {root: true} },
+          { type: 'moderation/fetchContentFilters', payload: null, options: {root: true} },
+          { type: 'playlists/fetchOwn', payload: null, options: {root: true} }
+        ]
+      })
+    })
+  })
+})

front/tests/unit/specs/store/favorites.spec.js

+import {expect} from 'chai'
+
+import store from '@/store/favorites'
+
+import { testAction } from '../../utils'
+
+describe('store/favorites', () => {
+  describe('mutations', () => {
+    it('track true', () => {
+      const state = { tracks: [] }
+      store.mutations.track(state, {id: 1, value: true})
+      expect(state.tracks).to.deep.equal([1])
+      expect(state.count).to.deep.equal(1)
+    })
+    it('track false', () => {
+      const state = { tracks: [1] }
+      store.mutations.track(state, {id: 1, value: false})
+      expect(state.tracks).to.deep.equal([])
+      expect(state.count).to.deep.equal(0)
+    })
+  })
+  describe('getters', () => {
+    it('isFavorite true', () => {
+      const state = { tracks: [1] }
+      expect(store.getters['isFavorite'](state)(1)).to.equal(true)
+    })
+    it('isFavorite false', () => {
+      const state = { tracks: [] }
+      expect(store.getters['isFavorite'](state)(1)).to.equal(false)
+    })
+  })
+  describe('actions', () => {
+    it('toggle true', () => {
+      testAction({
+        action: store.actions.toggle,
+        payload: 1,
+        params: {getters: {isFavorite: () => false}},
+        expectedActions: [
+          { type: 'set', payload: {id: 1, value: true} }
+        ]
+      })
+    })
+    it('toggle true', () => {
+      testAction({
+        action: store.actions.toggle,
+        payload: 1,
+        params: {getters: {isFavorite: () => true}},
+        expectedActions: [
+          { type: 'set', payload: {id: 1, value: false} }
+        ]
+      })
+    })
+  })
+})

front/tests/unit/specs/store/instance.spec.js

+import {expect} from 'chai'
+var sinon = require('sinon')
+import axios from 'axios'
+import moxios from 'moxios'
+import store from '@/store/instance'
+import { testAction } from '../../utils'
+
+describe('store/instance', () => {
+  var sandbox
+
+  beforeEach(function () {
+    sandbox = sinon.createSandbox()
+    moxios.install()
+  })
+  afterEach(function () {
+    sandbox.restore()
+    moxios.uninstall()
+    axios.defaults.baseURL = null
+  })
+
+  describe('mutations', () => {
+    it('settings', () => {
+      const state = {settings: {users: {upload_quota: {value: 1}}}}
+      let settings = {users: {registration_enabled: {value: true}}}
+      store.mutations.settings(state, settings)
+      expect(state.settings).to.deep.equal({
+        users: {upload_quota: {value: 1}, registration_enabled: {value: true}}
+      })
+    })
+    it('instanceUrl', () => {
+      const state = {instanceUrl: null, knownInstances: ['http://test2/', 'http://test/']}
+      store.mutations.instanceUrl(state, 'http://test')
+      expect(state).to.deep.equal({
+        instanceUrl: 'http://test/',  // trailing slash added
+        knownInstances: ['http://test/', 'http://test2/']
+      })
+    })
+  })
+  describe('actions', () => {
+    it('fetchSettings', () => {
+      moxios.stubRequest('instance/settings/'