refactor modal tests (#2317)

* update modal tests
* fix vote modals

PENDING.md

@@ -0,0 +1,3 @@
+### Changed
+
+- [\#1337](https://github.com/cosmos/voyager/issues/1337) Updated modals tests acording to standard @fedekunze

app/src/renderer/components/governance/ModalPropose.vue

@@ -145,7 +145,7 @@ export default {
     ...mapGetters([`wallet`]),
     balance() {
       // TODO: refactor to get the selected coin when multicoin deposit is enabled
-      if (!this.wallet.balancesLoading && !!this.wallet.balances.length) {
+      if (!this.wallet.loading && !!this.wallet.balances.length) {
         const balance = this.wallet.balances.find(
           coin => coin.denom === this.denom
         )

app/src/renderer/components/staking/PageValidator.vue

@@ -15,11 +15,11 @@
             v-if="validator.keybase && validator.keybase.avatarUrl"
             :src="validator.keybase.avatarUrl"
             class="avatar"
-          /><img
+          ><img
             v-else
             class="avatar"
             src="~assets/images/validator-icon.svg"
-          />
+          >
 
           <div class="page-profile__header__info">
             <div>

app/src/renderer/components/staking/UndelegationModal.vue

@@ -106,7 +106,6 @@ export default {
   },
   data: () => ({
     amount: null,
-    selectedIndex: 0,
     atoms,
     num
   }),
@@ -134,7 +133,6 @@ export default {
     clear() {
       this.$v.$reset()
 
-      this.selectedIndex = 0
       this.amount = null
     },
     async submitForm(submitType, password) {

test/unit/specs/components/governance/ModalDeposit.spec.js

@@ -1,64 +1,67 @@
 "use strict"
 
 import Vuelidate from "vuelidate"
-import setup from "../../../helpers/vuex-setup"
+import { shallowMount, createLocalVue } from "@vue/test-utils"
 import ModalDeposit from "renderer/components/governance/ModalDeposit"
 import lcdClientMock from "renderer/connectors/lcdClientMock.js"
 
 describe(`ModalDeposit`, () => {
-  let wrapper, store
-  const { mount, localVue } = setup()
+  let wrapper, $store
+
+  const localVue = createLocalVue()
   localVue.use(Vuelidate)
-  localVue.directive(`tooltip`, () => { })
-  localVue.directive(`focus`, () => { })
 
   beforeEach(async () => {
-    const coins = [
-      {
-        amount: `200000000`,
-        denom: `stake`
+    $store = {
+      commit: jest.fn(),
+      dispatch: jest.fn(),
+      getters: {
+        session: { signedIn: true },
+        connection: { connected: true },
+        bondDenom: `uatom`,
+        liquidAtoms: 1000000,
+        wallet: {
+          balances: [
+            { denom: `uatom`, amount: `10` }
+          ],
+          loading: false
+        }
       }
-    ]
-    const instance = mount(ModalDeposit, {
+    }
+
+    wrapper = shallowMount(ModalDeposit, {
       localVue,
+      mocks: {
+        $store
+      },
       propsData: {
         proposalId: `1`,
         proposalTitle: lcdClientMock.state.proposals[`1`].title,
-        denom: `stake`
+        denom: `uatom`
       },
       sync: false
     })
-    wrapper = instance.wrapper
-    store = instance.store
-    store.state.connection.connected = true
-    store.commit(`setWalletBalances`, coins)
-    store.commit(`setSignIn`, true)
-
-    await wrapper.vm.$nextTick()
-    wrapper.vm.$refs.actionModal.open()
   })
 
-  describe(`component matches snapshot`, () => {
-    it(`has the expected html structure`, async () => {
-      expect(wrapper.vm.$el).toMatchSnapshot()
-    })
+  it(`should display deposit modal form`, async () => {
+    expect(wrapper.vm.$el).toMatchSnapshot()
   })
 
   it(`opens`, () => {
-    wrapper.vm.$refs.actionModal.open = jest.fn()
-    wrapper.vm.open()
-    expect(wrapper.vm.$refs.actionModal.open).toHaveBeenCalled()
+    const $refs = { actionModal: { open: jest.fn() } }
+    ModalDeposit.methods.open.call({ $refs })
+    expect($refs.actionModal.open).toHaveBeenCalled()
   })
 
   it(`clears on close`, () => {
-    wrapper.setData({ amount: 100000000000 })
-    // produce validation error as amount is too high
-    wrapper.vm.$v.$touch()
-    expect(wrapper.vm.$v.$error).toBe(true)
-
-    wrapper.vm.clear()
-    expect(wrapper.vm.$v.$error).toBe(false)
-    expect(wrapper.vm.amount).toBe(0)
+    const self = {
+      $v: { $reset: jest.fn() },
+      amount: 10
+    }
+
+    ModalDeposit.methods.clear.call(self)
+    expect(self.$v.$reset).toHaveBeenCalled()
+    expect(self.amount).toBe(0)
   })
 
   describe(`validation`, () => {
@@ -71,8 +74,8 @@ describe(`ModalDeposit`, () => {
         wrapper.setData({ amount: 250 })
         expect(wrapper.vm.validateForm()).toBe(false)
         await wrapper.vm.$nextTick()
-        const errorMessage = wrapper.find(`input#amount + div`)
-        expect(errorMessage.classes()).toContain(`tm-form-msg--error`)
+
+        expect(wrapper.html()).toContain(`error="true"`)
       })
 
       it(`when the user doesn't have the deposited coin`, () => {
@@ -82,54 +85,54 @@ describe(`ModalDeposit`, () => {
             denom: `otherCoin`
           }
         ]
-        store.commit(`setWalletBalances`, otherCoins)
+        wrapper.vm.wallet.balances = otherCoins
         wrapper.setData({ amount: 25 })
         expect(wrapper.vm.validateForm()).toBe(false)
       })
     })
 
     describe(`succeeds`, () => {
       it(`when the user has enough balance to submit a deposit`, async () => {
-        wrapper.setData({ amount: 15 })
+        wrapper.vm.wallet.balances = [{ denom: `uatom`, amount: `20000000` }]
+        wrapper.setData({ amount: 10 })
         expect(wrapper.vm.validateForm()).toBe(true)
       })
     })
   })
 
   describe(`Deposit`, () => {
     it(`submits a deposit`, async () => {
-      wrapper.vm.$store.dispatch = jest.fn()
-      wrapper.vm.$store.commit = jest.fn()
-
-      wrapper.setData({ amount: 10 })
-      await wrapper.vm.submitForm(`local`, `1234567890`)
 
-      expect(wrapper.vm.$store.dispatch.mock.calls).toEqual([
-        [
-          `submitDeposit`,
-          {
-            amount: [
-              {
-                amount: `10000000`,
-                denom: `stake`
-              }
-            ],
-            proposal_id: `1`,
-            password: `1234567890`,
-            submitType: `local`
-          }
-        ]
-      ])
+      const $store = {
+        dispatch: jest.fn(),
+        commit: jest.fn()
+      }
 
-      expect(wrapper.vm.$store.commit.mock.calls).toEqual([
-        [
-          `notify`,
-          {
-            body: `You have successfully deposited your stakes on proposal #1`,
-            title: `Successful deposit!`
-          }
-        ]
-      ])
+      await ModalDeposit.methods.submitForm.call(
+        { type: `Text`, denom: `uatom`, proposalId: `1`, amount: 10, $store },
+        `ledger`, ``
+      )
+
+      expect($store.dispatch).toHaveBeenCalledWith(`submitDeposit`,
+        {
+          amount: [
+            {
+              amount: `10000000`,
+              denom: `uatom`
+            }
+          ],
+          proposal_id: `1`,
+          password: ``,
+          submitType: `ledger`
+        }
+      )
+
+      expect($store.commit).toHaveBeenCalledWith(`notify`,
+        {
+          body: `You have successfully deposited your atoms on proposal #1`,
+          title: `Successful deposit!`
+        }
+      )
     })
   })
 })