Fix unit testing

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": {
@@ -102,5 +102,11 @@
   },
   "volta": {
     "node": "20.9.0"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.4.3",
+    "jsdom": "^24.0.0",
+    "vite-svg-loader": "^5.1.0",
+    "vitest": "^1.1.3"
   }
 }

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,19 +25,23 @@ export default {
   name: 'BalanceButtons',
   computed: {
     ...mapState({
-      currentStatus: state => state.wallet.status.currentState,
+      status: state => {
+        console.log('ddddddddstate')
+        return state.wallet.status
+      },
     }),
   },
   methods: {
     ...mapMutations({
       setError: 'setError',
     }),
     onSend(e) {
+      console.log(this.status)
       /**
        * 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,19 @@
       <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 +35,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 +57,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>
@@ -124,6 +115,8 @@ export default {
       return JSON.stringify(this.output)
     },
     showOutput() {
+      console.log(this.output)
+      console.log('show output', this.output && !this.error && !this.loading)
       return this.output && !this.error && !this.loading
     },
     showEmptyState() {

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

@@ -280,6 +280,10 @@ export default {
     createDataRequest() {
       this.$refs.form.validate(valid => {
         if (valid) {
+          /**
+           * Emitted when createDataRequest button is clicked
+           * @event set-dr-values
+           */
           this.$emit('set-dr-values', {
             ...this.form,
             feeType: this.feeType.key,

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">