fix(tests): fix unit tests

witnet · Feb 2, 2024 · d0b4ea5 · d0b4ea5
1 parent 4c4739c
commit d0b4ea5
Show file tree

Hide file tree

Showing 62 changed files with 2,723 additions and 2,211 deletions.
diff --git a/auto-imports.d.ts b/auto-imports.d.ts
@@ -4,6 +4,4 @@
 // noinspection JSUnusedGlobalSymbols
 // Generated by unplugin-auto-import
 export {}
-declare global {
-
-}
+declare global {}
diff --git a/src/components.d.ts b/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']

diff --git a/src/components/AddressCardButton.vue b/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>

diff --git a/src/components/AddressList.vue b/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)
 }

diff --git a/src/components/BalanceButtons.vue b/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({

diff --git a/src/components/OperatorOutput.vue b/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() {

diff --git a/src/components/ResyncConfirmation.vue b/src/components/ResyncConfirmation.vue
@@ -26,8 +26,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>

diff --git a/src/components/SendTransaction/CreateDataRequestForm.vue b/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,

diff --git a/src/components/Transaction.vue b/src/components/Transaction.vue
@@ -2,7 +2,7 @@
   <FrameOutside @click="hideDetails" @focus="hideDetails">
     <div class="border" :class="{ locked: timelocked }">
       <div class="transaction" @click="showDetails = !showDetails">
-        <arrowIcon data-test="negative-positive" class="icon" />
+        <CustomIcon data-test="negative-positive" :name="iconName" />
         <Amount
           :unit-dark="true"
           data-test="amount"
@@ -40,7 +40,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">
@@ -95,8 +95,6 @@
 
 <script setup lang="ts">
 import { ref, computed, type Ref } from 'vue'
-import PositiveIcon from '@/resources/svg/positive.svg'
-import NegativeIcon from '@/resources/svg/negative.svg'
 
 const showDetails: Ref<boolean> = ref(false)
 
@@ -193,8 +191,8 @@ const props = defineProps({
 
 const hideDetails = () => (showDetails.value = false)
 const origin = computed(() => (props.type === 'POSITIVE' ? 'from' : 'to'))
-const arrowIcon = computed(() =>
-  props.type === 'POSITIVE' ? PositiveIcon : NegativeIcon,
+const iconName = computed(() =>
+  props.type === 'POSITIVE' ? 'positive' : 'negative',
 )
 </script>
 

diff --git a/src/components/steps/WalletDescription.vue b/src/components/steps/WalletDescription.vue
@@ -38,6 +38,7 @@
       </p>
       <el-input
         v-model="description"
+        data-test="description-input"
         type="textarea"
         class="password"
         resize="none"

diff --git a/src/store/wallet.js b/src/store/wallet.js
@@ -132,9 +132,6 @@ export default {
   getters: {
     network: state => state.status.network,
     unlockedWallet: state => {
-      console.log('unlockedWallet -----')
-      console.log(state.walletInfos)
-      console.log(state.walletIdx)
       return Number.isInteger(state.walletIdx)
         ? state.walletInfos[state.walletIdx]
         : null

diff --git a/src/utils.js b/src/utils.js
@@ -57,7 +57,9 @@ export function getTimeDuration(seconds, currentLocale) {
       end: seconds * 1000,
     }),
     {
-      locale: LANGUAGES[currentLocale].fnsLocale,
+      locale: LANGUAGES[currentLocale]
+        ? LANGUAGES[currentLocale].fnsLocale
+        : null,
     },
   )
 }

diff --git a/test/unit/src/background/utils/overwriteWitnetNodeConfiguration.spec.ts b/test/unit/src/background/utils/overwriteWitnetNodeConfiguration.spec.ts
@@ -32,8 +32,8 @@ describe('overwriteConfigFile', () => {
 
   test('Should overwrite the configuration with several nodes according to the parameters given', () => {
     vi.spyOn(fs, 'writeFileSync').mockImplementation
-    vi.spyOn(fs, 'readFileSync').mockResolvedValue(
-      'node_url = ["public_node_url3","public_node_url4"]',
+    vi.spyOn(fs, 'readFileSync').mockImplementation(
+      () => 'node_url = "public_node_url3","public_node_url4"',
     )
 
     overwriteWitnetNodeConfiguration({

diff --git a/test/unit/src/components/AddressCard.spec.js b/test/unit/src/components/AddressCard.spec.js
@@ -1,7 +1,7 @@
 import AddressCard from '@/components/AddressCard.vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-import i18n from '@/plugins/i18n'
+import { createMocks } from '../../utils'
 
 describe('AddressCard.vue', () => {
   describe('should render correctly', () => {
@@ -11,9 +11,7 @@ describe('AddressCard.vue', () => {
           selected: false,
           used: true,
         },
-        global: {
-          plugins: [i18n],
-        },
+        ...createMocks({ storeModules: {} }),
       })
       expect(wrapper.find('.used').exists()).toBe(true)
     })
@@ -24,9 +22,7 @@ describe('AddressCard.vue', () => {
           selected: false,
           used: false,
         },
-        global: {
-          plugins: [i18n],
-        },
+        ...createMocks({ storeModules: {} }),
       })
 
       expect(wrapper.find('.card').classes()).toEqual(['card'])
@@ -38,9 +34,7 @@ describe('AddressCard.vue', () => {
           selected: true,
           used: false,
         },
-        global: {
-          plugins: [i18n],
-        },
+        ...createMocks({ storeModules: {} }),
       })
 
       expect(wrapper.find('.selected').exists()).toBe(true)

diff --git a/test/unit/src/components/AddressCardButton.spec.js b/test/unit/src/components/AddressCardButton.spec.js
@@ -1,28 +1,55 @@
 import AddressCardButton from '@/components/AddressCardButton.vue'
 import { mount } from '@vue/test-utils'
 import { describe, expect, test } from 'vitest'
-import i18n from '@/plugins/i18n'
+import { createMocks } from '../../utils'
+import { ElTooltip } from 'element-plus'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
 describe('AddressCardButton.vue', () => {
   describe('should render correctly', () => {
     test('should render the card', () => {
-      const wrapper = mount(AddressCardButton, {
-        global: {
-          plugins: [i18n],
-        },
-      })
+      const wrapper = mount(
+        AddressCardButton,
+        createMocks({
+          storeModules: {
+            uiInteractions: {
+              state: {
+                receiveTransactionClicked: true,
+              },
+            },
+          },
+          stubs: {
+            'el-tooltip': ElTooltip,
+            'font-awesome-icon': FontAwesomeIcon,
+          },
+        }),
+      )
 
-      expect(wrapper.find('.card').exists()).toBe(true)
+      expect(wrapper.find('[data-test="address-card-button"]').exists()).toBe(
+        true,
+      )
     })
 
-    test('should render the icon', () => {
-      const wrapper = mount(AddressCardButton, {
-        global: {
-          plugins: [i18n],
-        },
-      })
-
-      expect(wrapper.find('.icon').classes().includes('fa-plus')).toBe(true)
+    test('should emit click event on click button', async () => {
+      const wrapper = mount(
+        AddressCardButton,
+        createMocks({
+          storeModules: {
+            uiInteractions: {
+              state: {
+                receiveTransactionClicked: true,
+              },
+            },
+          },
+          stubs: {
+            'el-tooltip': ElTooltip,
+            'font-awesome-icon': FontAwesomeIcon,
+          },
+        }),
+      )
+      const btn = wrapper.find('[data-test="address-card-button"]')
+      await btn.trigger('click')
+      expect(wrapper.emitted().click).toBeTruthy
     })
   })
 })