feat: Test AccountOverview

frontend/src/views/Pages/AccountOverview.spec.js

@@ -1,34 +1,127 @@
-import { shallowMount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import AccountOverview from './AccountOverview'
+import communityAPI from '../../apis/communityAPI.js'
+
+jest.mock('../../apis/communityAPI.js')
+
+const sendMock = jest.fn()
+sendMock.mockReturnValue({ success: true })
+
+communityAPI.send = sendMock
 
 const localVue = global.localVue
 
 describe('AccountOverview', () => {
   let wrapper
 
+  const propsData = {
+    balance: 123.45,
+    transactionCount: 1,
+  }
+
   const mocks = {
     $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        sessionId: 1,
+      },
+    },
+    $n: jest.fn((n) => String(n)),
   }
 
   const Wrapper = () => {
-    return shallowMount(AccountOverview, { localVue, mocks })
+    return mount(AccountOverview, { localVue, mocks, propsData })
   }
 
-  describe('shallow Mount', () => {
+  describe('mount', () => {
     beforeEach(() => {
       wrapper = Wrapper()
     })
 
     it('has a status line', () => {
-      expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
+      expect(wrapper.find('div.gdd-status').exists()).toBeTruthy()
     })
 
     it('has a send field', () => {
-      expect(wrapper.find('gdd-send-stub').exists()).toBeTruthy()
+      expect(wrapper.find('div.gdd-send').exists()).toBeTruthy()
     })
 
     it('has a transactions table', () => {
-      expect(wrapper.find('gdd-transaction-list-stub').exists()).toBeTruthy()
+      expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
+    })
+
+    describe('transaction form', () => {
+      it('steps forward in the dialog', () => {
+        wrapper.findComponent({ name: 'TransactionForm' }).vm.$emit('set-transaction', {
+          email: 'user@example.org',
+          amount: 23.45,
+          memo: 'Make the best of it!',
+        })
+        expect(wrapper.vm.currentTransactionStep).toBe(1)
+      })
+    })
+
+    describe('confirm transaction', () => {
+      beforeEach(() => {
+        wrapper.setData({
+          currentTransactionStep: 1,
+          transactionData: {
+            email: 'user@example.org',
+            amount: 23.45,
+            memo: 'Make the best of it!',
+          },
+        })
+      })
+
+      it('resets the transaction process when on-reset is emitted', async () => {
+        await wrapper.findComponent({ name: 'TransactionConfirmation' }).vm.$emit('on-reset')
+        expect(wrapper.vm.currentTransactionStep).toBe(0)
+        expect(wrapper.vm.transactionData).toEqual({
+          email: '',
+          amount: 0,
+          memo: '',
+        })
+      })
+
+      describe('transaction is confirmed and server response is success', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmation' })
+            .vm.$emit('send-transaction')
+        })
+
+        it('calls the API when send-transaction is emitted', async () => {
+          expect(sendMock).toBeCalledWith(1, {
+            email: 'user@example.org',
+            amount: 23.45,
+            memo: 'Make the best of it!',
+          })
+        })
+
+        it('emits update-balance', () => {
+          expect(wrapper.emitted('update-balance')).toBeTruthy()
+          expect(wrapper.emitted('update-balance')).toEqual([[23.45]])
+        })
+
+        it('shows the succes page', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_success')
+        })
+      })
+
+      describe('transaction is confirmed and server response is error', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          sendMock.mockReturnValue({ success: false })
+          await wrapper
+            .findComponent({ name: 'TransactionConfirmation' })
+            .vm.$emit('send-transaction')
+        })
+
+        it('shows the error page', () => {
+          expect(wrapper.find('div.card-body').text()).toContain('form.send_transaction_error')
+        })
+      })
     })
   })
 })

frontend/src/views/Pages/AccountOverview.vue

@@ -69,7 +69,7 @@ export default {
   data() {
     return {
       timestamp: Date.now(),
-      transactionData: EMPTY_TRANSACTION_DATA,
+      transactionData: { ...EMPTY_TRANSACTION_DATA },
       error: false,
       currentTransactionStep: 0,
       loading: false,
@@ -110,7 +110,7 @@ export default {
       this.loading = false
     },
     onReset() {
-      this.transactionData = EMPTY_TRANSACTION_DATA
+      this.transactionData = { ...EMPTY_TRANSACTION_DATA }
       this.currentTransactionStep = 0
     },
     updateTransactions(pagination) {

frontend/src/views/Pages/AccountOverview/GddStatus.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="gdd-status">
     <b-row>
       <b-col class="p-0">
         <b-card class="p-0" style="background-color: #ebebeba3 !important">