refactor: use globally test utils

.eslintrc.cjs

@@ -1,9 +1,5 @@
 const path = require('path')
 
-// module.exports = {
-
-// }
-
 /* eslint-env node */
 require('@rushstack/eslint-patch/modern-module-resolution')
 
@@ -19,20 +15,8 @@ module.exports = {
     '@vue/eslint-config-typescript',
     '@vue/eslint-config-prettier',
   ],
-  //   extends: [
-  //     '@vue/prettier',
-  //     '@vue/prettier/@typescript-eslint',
-  //     '@vue/typescript',
-  //     'plugin:import/errors',
-  //     'plugin:import/typescript',
-  //     'plugin:import/warnings',
-  //     'plugin:vue/recommended',
-  //     'prettier/vue',
-  //   ],
   parserOptions: {
     ecmaVersion: 'latest',
-    // parser: '@typescript-eslint/parser',
-    // sourceType: 'script',
   },
   rules: {
     'import/extensions': [
@@ -63,19 +47,6 @@ module.exports = {
   overrides: [
     {
       files: ['**/*.spec.js'],
-      // parserOptions: {
-      //   parser: 'babel-eslint',
-      //   sourceType: 'module',
-      // },
-      env: { jest: true },
-      globals: {
-        mount: false,
-        shallowMount: false,
-        shallowMountView: false,
-        createComponentMocks: false,
-        createModuleStore: false,
-        i18n: false,
-      },
     },
   ],
 }

tests/unit/.eslintrc.cjs

@@ -1,15 +1,18 @@
 module.exports = {
-  env: {
-    jest: true,
-  },
   globals: {
+    vi: true,
     mount: false,
     shallowMount: false,
     createComponentMocks: false,
     i18n: false,
     nextTick: false,
     getNormalizedFormRules: false,
     sleep: false,
+    createMocks: true,
+    describe: true,
+    expect: true,
+    test: true,
+    flushPromises: true,
   },
   rules: {},
 }

tests/unit/api.spec.js

@@ -1,5 +1,4 @@
 import { standardizeTransactions } from '@/api'
-import { describe, expect, test } from 'vitest'
 
 const TRANSACTIONS_RESULT = {
   result: {

tests/unit/setup.js

@@ -1,114 +1,35 @@
-// This setup file reuse code from:
-// https://github.com/chrisvfritz/vue-enterprise-boilerplate/blob/master/tests/unit/setup.js
-
-import Vue from 'vue'
-import Vuex from 'vuex'
-import '@/plugins/element'
-import '@/fontAwesome'
 import i18n from '@/plugins/i18n'
-
-const vueTestUtils = require('@vue/test-utils')
-
-// Mock window properties not handled by jsdom
-Object.defineProperty(window, 'localStorage', {
-  value: (function () {
-    let store = {}
-    return {
-      getItem: function (key) {
-        return store[key] || null
-      },
-      setItem: function (key, value) {
-        store[key] = value.toString()
+import { vi } from 'vitest'
+import ElementPlus from 'element-plus'
+import { createStore } from 'vuex'
+import { mount, shallowMount, flushPromises } from '@vue/test-utils'
+
+global.mount = mount
+global.shallowMount = shallowMount
+global.flushPromises = flushPromises
+
+global.createMocks = ({ storeModules = {}, stubs, router, slots } = {}) => {
+  const queryParams = router?.queryParams
+  const pushMock = router?.pushMock ?? vi.fn()
+  const mockStore = createStore({
+    modules: {
+      ...storeModules,
+    },
+  })
+  return {
+    global: {
+      plugins: [i18n, ElementPlus, mockStore],
+      stubs: {
+        ...stubs,
       },
-      clear: function () {
-        store = {}
+      router: true,
+      mocks: {
+        $route: { query: { ...queryParams } },
+        $router: { push: pushMock },
       },
-    }
-  })(),
-})
-
-// Make console.warn throw, so that Jest tests fail
-const warn = console.error
-console.error = function (message) {
-  warn.apply(console, arguments)
-  // NOTE: You can whitelist some `console.warn` messages here
-  //       by returning if the `message` value is acceptable.
-  throw message instanceof Error ? message : new Error(message)
-}
-
-// Global helpers
-global.mount = vueTestUtils.mount
-
-global.shallowMount = vueTestUtils.shallowMount
-
-global.nextTick = Vue.nextTick
-
-// A helper for creating Vue component mocks
-global.createComponentMocks = ({ store, router, style, mocks, stubs }) => {
-  // Use a local version of Vue, to avoid polluting the global
-  // Vue and thereby affecting other tests.
-  const localVue = vueTestUtils.createLocalVue()
-  const returnOptions = { localVue, i18n }
-
-  // https://vue-test-utils.vuejs.org/api/options.html#stubs
-  returnOptions.stubs = stubs || {}
-  // https://vue-test-utils.vuejs.org/api/options.html#mocks
-  returnOptions.mocks = mocks || {}
-  const mockedDirective = {
-    inserted(el) {
-      el.getElementsByTagName('input')
-        ? el.getElementsByTagName('input')[0].focus()
-        : el.focus()
     },
-    update(el, binding) {
-      if (binding.arg === true) {
-        if (el.getElementsByTagName('input')) {
-          el.getElementsByTagName('input')[0].focus()
-        } else {
-          el.focus()
-        }
-      }
-    },
-  }
-  localVue.directive('focus', mockedDirective)
-
-  if (store) {
-    localVue.use(Vuex)
-    returnOptions.store = new Vuex.Store({
-      modules: Object.keys(store)
-        .map(moduleName => {
-          const storeModule = store[moduleName]
-          return {
-            [moduleName]: {
-              state: storeModule.state || {},
-              getters: storeModule.getters || {},
-              actions: storeModule.actions || {},
-              mutations: storeModule.mutations || {},
-              // namespaced by default is false
-              namespaced:
-                typeof storeModule.namespaced === 'undefined'
-                  ? false
-                  : storeModule.namespaced,
-            },
-          }
-        })
-        .reduce((moduleA, moduleB) => Object.assign({}, moduleA, moduleB), {}),
-    })
-  }
-
-  // If using `router: true`, we'll automatically stub out
-  // components from Vue Router.
-  if (router) {
-    returnOptions.stubs['router-link'] = true
-    returnOptions.stubs['router-view'] = true
-  }
-
-  // If a `style` object is provided, mock some styles.
-  if (style) {
-    returnOptions.mocks.$style = style
+    slots: { ...slots },
   }
-
-  return returnOptions
 }
 
 // FIXME: https://github.com/witnet/sheikah/issues/1500
@@ -125,12 +46,10 @@ global.getNormalizedFormRules = function (wrapper) {
   )
 }
 
-global.sleep = function timeout(ms) {
-  return new Promise(resolve => setTimeout(resolve, ms))
-}
-
-global.i18n = function () {
-  return {
-    i18n,
-  }
+global.sleep = (timeout = 1000) => {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve()
+    }, timeout)
+  })
 }

tests/unit/src/background/utils/getVersionFromName.spec.ts

@@ -1,5 +1,4 @@
 import { getVersionFromName } from '../../../../../electron/walletManager'
-import { describe, expect, test } from 'vitest'
 
 describe('getVersionFromName', () => {
   test('should return version x.y.z from the release name', () => {

tests/unit/src/components/Address.spec.js

@@ -1,6 +1,4 @@
 import Address from '@/components/Address.vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
 
 describe('Address.vue', () => {
   test('Should include the address passed', () => {

tests/unit/src/components/AddressCard.spec.js

@@ -1,7 +1,4 @@
 import AddressCard from '@/components/AddressCard.vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('AddressCard.vue', () => {
   describe('should render correctly', () => {

tests/unit/src/components/AddressCardButton.spec.js

@@ -1,7 +1,5 @@
 import AddressCardButton from '@/components/AddressCardButton.vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
+
 import { ElTooltip } from 'element-plus'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 

tests/unit/src/components/AddressInformation.spec.js

@@ -1,9 +1,6 @@
 import AddressInformation from '@/components/AddressInformation.vue'
 import DotsLoading from '@/components/DotsLoading.vue'
 import { formatDateVerbose } from '@/utils'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('AddressInformation.vue', () => {
   describe('should render correctly', () => {

tests/unit/src/components/AddressList.spec.js

@@ -1,9 +1,7 @@
 import AddressList from '@/components/AddressList.vue'
 import AddressCardButton from '@/components/AddressCardButton.vue'
 import AddressCard from '@/components/AddressCard.vue'
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
+
 import { ElTooltip } from 'element-plus'
 
 describe('AddressList.vue', () => {

tests/unit/src/components/Addresses.spec.js

@@ -1,9 +1,6 @@
 import Addresses from '@/components/Addresses.vue'
 import AddressList from '@/components/AddressList.vue'
 import AddressInformation from '@/components/AddressInformation.vue'
-import { mount, flushPromises } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('Addresses.vue', () => {
   describe('should render correctly', () => {

tests/unit/src/components/Amount.spec.js

@@ -1,8 +1,5 @@
 import Amount from '@/components/Amount.vue'
 import '@/fontAwesome'
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('Renders the correct elements', () => {
   const mockStore = createMocks({

tests/unit/src/components/Avatar.spec.js

@@ -1,6 +1,3 @@
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 import Avatar from '@/components/Avatar.vue'
 
 describe('NetworkStatus', () => {

tests/unit/src/components/Balance.spec.js

@@ -2,10 +2,9 @@ import Balance from '@/components/Balance.vue'
 import BalanceData from '@/components/BalanceData.vue'
 import BalanceButtons from '@/components/BalanceButtons.vue'
 import SendValueTransfer from '@/components/SendTransaction/SendValueTransfer.vue'
-import { mount, flushPromises } from '@vue/test-utils'
+
 import { describe, expect, test, vi } from 'vitest'
 import { WIT_UNIT, DEFAULT_VTT_VALUES } from '@/constants'
-import { createMocks } from '../../utils'
 
 describe('Balance.vue', () => {
   const mockStore = createMocks({

tests/unit/src/components/BalanceButtons.spec.js

@@ -1,8 +1,6 @@
 import BalanceButtons from '@/components/BalanceButtons.vue'
 import { NETWORK_STATUS } from '@/constants'
 import { describe, expect, test, vi } from 'vitest'
-import { createMocks } from '../../utils'
-import { mount, flushPromises } from '@vue/test-utils'
 
 describe('BalanceButtons.vue', () => {
   describe('should render receive and send buttons', () => {

tests/unit/src/components/BalanceData.spec.js

@@ -1,7 +1,4 @@
 import BalanceData from '@/components/BalanceData.vue'
-import { shallowMount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('Balance.vue', () => {
   const mockStore = createMocks({

tests/unit/src/components/Community.spec.js

@@ -1,7 +1,4 @@
 import Community from '@/components/Community.vue'
-import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vitest'
-import { createMocks } from '../../utils'
 
 describe('Community.vue', () => {
   describe('should render properly', () => {