Fix unit testing

.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,
-      },
     },
   ],
 }

package.json

@@ -34,7 +34,7 @@
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps",
     "reinstall": "yarn clean-deps && yarn",
-    "test:unit": "vue-cli-service test:unit --config=jest.unit.config.js"
+    "test:unit": "vitest"
   },
   "main": "dist-electron/main/index.js",
   "dependencies": {
@@ -89,7 +89,10 @@
     "vue-tsc": "^1.8.27",
     "vuex": "^4.1.0",
     "witnet-radon-js": "^0.11.0",
-    "witnet-requests": "^0.9.12"
+    "witnet-requests": "^0.9.12",
+    "@vue/test-utils": "^2.4.3",
+    "jsdom": "^24.0.0",
+    "vitest": "^1.1.3"
   },
   "bugs": {
     "url": "https://github.com/witnet/sheikah/issues"

src/components.d.ts

@@ -159,6 +159,7 @@ declare module 'vue' {
     Telegram: typeof import('./components/svg/Telegram.vue')['default']
     TemplateCard: typeof import('./components/card/TemplateCard.vue')['default']
     Templates: typeof import('./components/Templates.vue')['default']
+    TestEmit: typeof import('./components/TestEmit.vue')['default']
     Transaction: typeof import('./components/Transaction.vue')['default']
     TransactionDetails: typeof import('./components/TransactionDetails.vue')['default']
     TransactionList: typeof import('./components/TransactionList.vue')['default']

src/components/AddressCardButton.vue

@@ -12,10 +12,15 @@
     <button
       ref="addAddress"
       class="card"
+      data-test="address-card-button"
       :class="{ active: isRadiantBorderActive }"
       @click="$emit('click')"
     >
-      <font-awesome-icon class="icon" icon="plus" />
+      <font-awesome-icon
+        class="icon"
+        data-test="address-card-plus-icon"
+        icon="plus"
+      />
     </button>
   </el-tooltip>
 </template>

src/components/AddressList.vue

@@ -9,7 +9,7 @@
       :selected="selected === index"
       @click="() => selectAddress(index)"
     />
-    <AddressCardButton @click="$emit('generate-address')" />
+    <AddressCardButton @click="generateAddress" />
   </div>
 </template>
 
@@ -44,6 +44,10 @@ const isMaxHeightExceeded = computed(() => {
   return props.addresses.length > 26
 })
 
+const generateAddress = () => {
+  emits('generate-address')
+}
+
 const selectAddress = (index: number) => {
   emits('select-address', index)
 }

src/components/BalanceButtons.vue

@@ -25,7 +25,7 @@ export default {
   name: 'BalanceButtons',
   computed: {
     ...mapState({
-      currentStatus: state => state.wallet.status.currentState,
+      status: state => state.wallet.status,
     }),
   },
   methods: {
@@ -37,7 +37,7 @@ export default {
        * Emitted when send button is clicked
        * @event send
        */
-      if (this.currentStatus === NETWORK_STATUS.SYNCED) {
+      if (this.status.currentState === NETWORK_STATUS.SYNCED) {
         this.$emit('send')
       } else {
         this.setError({

src/components/LayoutTwoColumns.vue

@@ -20,9 +20,9 @@ export default {
           },
           [
             // slot to render on the upper right side
-            this.$slots.upperRight(),
+            this.$slots.upperRight && this.$slots.upperRight(),
             // slot to render on the bottom of the right side
-            this.$slots.bottomRight(),
+            this.$slots.bottomRight && this.$slots.bottomRight(),
           ],
         ),
       ],

src/components/OperatorOutput.vue

@@ -12,22 +12,18 @@
       <el-popover
         v-if="showOutput"
         popper-class="result"
+        data-test="output"
         :visible-arrow="false"
         placement="top-start"
         trigger="hover"
         :content="stringifiedOutput"
       >
         <template #reference>
-          <p
-            v-if="explicitOutput"
-            data-test="output"
-            class="icon explicit-output"
-          >
+          <p v-if="explicitOutput" class="icon explicit-output">
             {{ explicitOutput }}
           </p>
           <font-awesome-icon
             v-else-if="stringifiedOutput"
-            data-test="output"
             class="icon"
             icon="eye"
           />
@@ -38,22 +34,20 @@
       <!-- Empty state of the operator output -->
       <el-popover
         v-if="showEmptyState"
+        data-test="empty-output"
         placement="top-start"
         :visible-arrow="false"
         trigger="hover"
         content="Click 'Try Data Request' to see the partial result"
       >
         <template #reference>
-          <font-awesome-icon
-            data-test="empty-output"
-            class="icon ban"
-            icon="eye-slash"
-          />
+          <font-awesome-icon class="icon ban" icon="eye-slash" />
         </template>
       </el-popover>
       <!-- Error when trying data request-->
       <el-popover
-        v-if="showError"
+        v-else-if="showError"
+        data-test="error"
         placement="top-start"
         :visible-arrow="false"
         popper-class="error"
@@ -62,11 +56,7 @@
         :content="error"
       >
         <template #reference>
-          <font-awesome-icon
-            data-test="error"
-            class="icon error"
-            icon="exclamation-triangle"
-          />
+          <font-awesome-icon class="icon error" icon="exclamation-triangle" />
         </template>
       </el-popover>
     </div>

src/components/ResyncConfirmation.vue

@@ -25,8 +25,10 @@
 
     <template #footer>
       <div class="dialog-footer">
-        <el-button @click="close">{{ $t('cancel') }}</el-button>
-        <el-button type="primary" @click="callResync">{{
+        <el-button data-test="resync-cancel-btn" @click="close">{{
+          $t('cancel')
+        }}</el-button>
+        <el-button type="primary" data-test="resync-btn" @click="callResync">{{
           $t('resyncronize')
         }}</el-button>
       </div>

src/components/SendTransaction/CreateDataRequestForm.vue

@@ -91,6 +91,7 @@ export default {
       required: true,
     },
   },
+  emits: ['set-dr-values', 'go-back'],
   data() {
     const formValidation = () =>
       new FormValidation({

src/components/SettingsLanguage.vue

@@ -12,15 +12,15 @@
 
 <script setup>
 import { useStore } from 'vuex'
-import { localStorageWrapper } from '@/main'
 import Card from '@/components/card/Card.vue'
 import Select from '@/components/Select.vue'
 import { LANGUAGES } from '@/constants'
 import { useI18n } from 'vue-i18n'
-import { computed } from 'vue'
+import { computed, toRefs } from 'vue'
 
 const { locale } = useI18n()
 const store = useStore()
+const { localStorage } = toRefs(store.state.wallet)
 
 const options = computed(() =>
   Object.values(LANGUAGES).map(language => ({
@@ -36,7 +36,7 @@ const actualLanguage = computed({
   }),
   set: val => {
     locale.value = val.value
-    localStorageWrapper.setLanguageSettings(val.value)
+    localStorage.value.setLanguageSettings(val.value)
     store.commit('updateDRLanguage', val)
   },
 })

src/components/Transaction.vue

@@ -44,7 +44,7 @@
         <div v-if="confirmed">
           <p data-test="time-ago" class="date">{{ timeAgo }}</p>
         </div>
-        <div v-else-if="!!Number(epoch)">
+        <div v-else-if="!!Number(epoch)" data-test="pending-confirmation">
           <el-tooltip placement="bottom" effect="light">
             <template #content>
               <div class="info-message">