diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js index 031828129..17f3aedba 100644 --- a/frontend/src/views/Pages/AccountOverview.spec.js +++ b/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') + }) + }) }) }) }) diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue index 35490e093..cde611778 100644 --- a/frontend/src/views/Pages/AccountOverview.vue +++ b/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) { diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue index c0c4869dd..4ab675485 100644 --- a/frontend/src/views/Pages/AccountOverview/GddStatus.vue +++ b/frontend/src/views/Pages/AccountOverview/GddStatus.vue @@ -1,5 +1,5 @@