From c1b018a340c9484d0a320fd3b8f4ccfed7296983 Mon Sep 17 00:00:00 2001 From: ogerly Date: Tue, 11 May 2021 15:49:29 +0200 Subject: [PATCH 01/12] thx transaction false --- frontend/src/views/Pages/AccountOverview/GddSend.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue index 9053d0ea4..127c3d908 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue @@ -244,7 +244,7 @@ export default { }, send: false, row_check: false, - row_thx: true, + row_thx: false, row_error: false, } }, From e818f957444e5b9cfe63da263f1b9970709c17ed Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 11 May 2021 16:31:45 +0200 Subject: [PATCH 02/12] set max items to 1000 --- frontend/src/apis/communityAPI.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/apis/communityAPI.js b/frontend/src/apis/communityAPI.js index 5d56f4a1b..a1fe3faf6 100644 --- a/frontend/src/apis/communityAPI.js +++ b/frontend/src/apis/communityAPI.js @@ -35,7 +35,7 @@ const communityAPI = { balance: async (sessionId) => { return apiGet(CONFIG.COMMUNITY_API_URL + 'getBalance/' + sessionId) }, - transactions: async (sessionId, firstPage = 1, items = 25, order = 'DESC') => { + transactions: async (sessionId, firstPage = 1, items = 1000, order = 'DESC') => { return apiGet( `${CONFIG.COMMUNITY_API_URL}listTransactions/${firstPage}/${items}/${order}/${sessionId}`, ) From 8eb4364f64dea43e213dff61ed973427ce98c83b Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 01:19:08 +0200 Subject: [PATCH 03/12] make qr code scanner a component --- .../views/Pages/AccountOverview/GddSend.vue | 67 +++---------------- .../Pages/AccountOverview/GddSend/QrCode.vue | 65 ++++++++++++++++++ 2 files changed, 74 insertions(+), 58 deletions(-) create mode 100644 frontend/src/views/Pages/AccountOverview/GddSend/QrCode.vue diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue index 7c78f993c..68457d460 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue @@ -6,42 +6,7 @@ - - + From 5155318dd32b06a683e813a2b58563549d504372 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 01:52:27 +0200 Subject: [PATCH 04/12] make transaction form a component --- .../views/Pages/AccountOverview/GddSend.vue | 164 ++--------------- .../Pages/AccountOverview/GddSend/QrCode.vue | 2 +- .../GddSend/TransactionForm.vue | 168 ++++++++++++++++++ 3 files changed, 181 insertions(+), 153 deletions(-) create mode 100644 frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue index 68457d460..c01650139 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue @@ -1,133 +1,10 @@ - From d5a6927ff37ce6a2e6b5a1e749a94fc1e31dd8cb Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 02:59:24 +0200 Subject: [PATCH 07/12] tests are running again --- .../Pages/AccountOverview/GddSend.spec.js | 106 +-------------- .../GddSend/TransactionForm.spec.js | 121 ++++++++++++++++++ .../GddSend/TransactionForm.vue | 2 +- 3 files changed, 128 insertions(+), 101 deletions(-) create mode 100644 frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js index d7130aeca..c7005ddf5 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.spec.js +++ b/frontend/src/views/Pages/AccountOverview/GddSend.spec.js @@ -1,29 +1,18 @@ import { mount } from '@vue/test-utils' import GddSend from './GddSend' -import Vuex from 'vuex' const localVue = global.localVue describe('GddSend', () => { let wrapper - const state = { - user: { - balance: 1234, - balance_gdt: 9876, - }, - } - - const store = new Vuex.Store({ - state, - }) - const mocks = { - // $n: jest.fn((n) => n), $t: jest.fn((t) => t), - $moment: jest.fn((m) => ({ - format: () => m, - })), + $store: { + state: { + sessionId: 1234, + }, + }, $i18n: { locale: jest.fn(() => 'en'), }, @@ -31,7 +20,7 @@ describe('GddSend', () => { } const Wrapper = () => { - return mount(GddSend, { localVue, store, mocks }) + return mount(GddSend, { localVue, mocks }) } describe('mount', () => { @@ -42,88 +31,5 @@ describe('GddSend', () => { it('renders the component', () => { expect(wrapper.find('div.gdd-send').exists()).toBeTruthy() }) - - describe('warning messages', () => { - it('has a warning message', () => { - expect(wrapper.find('div.alert-default').find('span').text()).toBe('form.attention') - }) - }) - - describe('transaction form', () => { - describe('email field', () => { - it('has an input field of type email', () => { - expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email') - }) - - it('has an envelope icon', () => { - expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe( - 'envelope', - ) - }) - - it('has a label form.receiver', () => { - expect(wrapper.findAll('div.text-left').at(0).text()).toBe('form.receiver') - }) - - it('has a placeholder "E-Mail"', () => { - expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe( - 'E-Mail', - ) - }) - }) - - describe('ammount field', () => { - it('has an input field of type number', () => { - expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number') - }) - - it('has an GDD text icon', () => { - expect(wrapper.find('#input-group-2').find('div.h3').text()).toBe('GDD') - }) - - it('has a label form.amount', () => { - expect(wrapper.findAll('div.text-left').at(1).text()).toBe('form.amount') - }) - - it('has a placeholder "0.01"', () => { - expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe( - '0.01', - ) - }) - }) - - describe('message text box', () => { - it('has an textarea field', () => { - expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy() - }) - - it('has an chat-right-text icon', () => { - expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe( - 'chat right text', - ) - }) - - it('has a label form.memo', () => { - expect(wrapper.findAll('div.text-left').at(2).text()).toBe('form.memo') - }) - }) - - describe('cancel button', () => { - it('has a cancel button', () => { - expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy() - }) - - it('has the text "form.cancel"', () => { - expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset') - }) - - it.skip('clears the email field on click', async () => { - wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') - wrapper.find('button[type="reset"]').trigger('click') - await wrapper.vm.$nextTick() - expect(wrapper.vm.form.email).toBeNull() - }) - }) - }) }) }) diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js new file mode 100644 index 000000000..61656f86c --- /dev/null +++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.spec.js @@ -0,0 +1,121 @@ +import { mount } from '@vue/test-utils' +import TransactionForm from './TransactionForm' + +const localVue = global.localVue + +describe('GddSend', () => { + let wrapper + + const mocks = { + $t: jest.fn((t) => t), + $moment: jest.fn((m) => ({ + format: () => m, + })), + $i18n: { + locale: jest.fn(() => 'en'), + }, + $n: jest.fn((n) => String(n)), + $store: { + state: { + email: 'user@example.org', + }, + }, + } + + const Wrapper = () => { + return mount(TransactionForm, { localVue, mocks }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component', () => { + expect(wrapper.find('div.transaction-form').exists()).toBeTruthy() + }) + + describe('warning messages', () => { + it('has a warning message', () => { + expect(wrapper.find('div.alert-default').find('span').text()).toBe('form.attention') + }) + }) + + describe('transaction form', () => { + describe('email field', () => { + it('has an input field of type email', () => { + expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email') + }) + + it('has an envelope icon', () => { + expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe( + 'envelope', + ) + }) + + it('has a label form.receiver', () => { + expect(wrapper.findAll('div.text-left').at(0).text()).toBe('form.receiver') + }) + + it('has a placeholder "E-Mail"', () => { + expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe( + 'E-Mail', + ) + }) + }) + + describe('ammount field', () => { + it('has an input field of type number', () => { + expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('number') + }) + + it('has an GDD text icon', () => { + expect(wrapper.find('#input-group-2').find('div.h3').text()).toBe('GDD') + }) + + it('has a label form.amount', () => { + expect(wrapper.findAll('div.text-left').at(1).text()).toBe('form.amount') + }) + + it('has a placeholder "0.01"', () => { + expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe( + '0.01', + ) + }) + }) + + describe('message text box', () => { + it('has an textarea field', () => { + expect(wrapper.find('#input-group-3').find('textarea').exists()).toBeTruthy() + }) + + it('has an chat-right-text icon', () => { + expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe( + 'chat right text', + ) + }) + + it('has a label form.memo', () => { + expect(wrapper.findAll('div.text-left').at(2).text()).toBe('form.memo') + }) + }) + + describe('cancel button', () => { + it('has a cancel button', () => { + expect(wrapper.find('button[type="reset"]').exists()).toBeTruthy() + }) + + it('has the text "form.cancel"', () => { + expect(wrapper.find('button[type="reset"]').text()).toBe('form.reset') + }) + + it.skip('clears the email field on click', async () => { + wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') + wrapper.find('button[type="reset"]').trigger('click') + await wrapper.vm.$nextTick() + expect(wrapper.vm.form.email).toBeNull() + }) + }) + }) + }) +}) diff --git a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue index 62b910bcd..3967bbec0 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend/TransactionForm.vue @@ -1,5 +1,5 @@ @@ -28,6 +40,10 @@ import GddStatus from './AccountOverview/GddStatus.vue' import GddSend from './AccountOverview/GddSend.vue' import GddTable from './AccountOverview/GddTable.vue' import GddTableFooter from './AccountOverview/GddTableFooter.vue' +import TransactionForm from './AccountOverview/GddSend/TransactionForm.vue' +import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfirmation.vue' +import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue' +import communityAPI from '../../apis/communityAPI.js' export default { name: 'Overview', @@ -36,11 +52,23 @@ export default { GddSend, GddTable, GddTableFooter, + TransactionForm, + TransactionConfirmation, + TransactionResult, }, data() { return { - showTransactionList: true, + showContext: true, timestamp: Date.now(), + transactionData: { + email: '', + amount: 0, + target_date: '', + memo: '', + }, + error: false, + transactionSteps: ['transaction-form', 'transaction-confirmation', 'transaction-result'], + currentTransactionStep: 0, } }, props: { @@ -52,14 +80,37 @@ export default { transactionCount: { type: Number, default: 0 }, }, methods: { - toggleShowList(bool) { - this.showTransactionList = bool + setTransaction(data) { + this.transactionData.email = data.email + this.transactionData.amount = data.amount + this.transactionData.memo = data.memo + this.transactionData.target_date = new Date(Date.now()).toISOString() + this.showContext = false + this.currentTransactionStep = 1 }, - updateBalance(data) { - this.$emit('update-balance', data.ammount) + async sendTransaction() { + const result = await communityAPI.send( + this.$store.state.sessionId, + this.transactionData.email, + this.transactionData.amount, + this.transactionData.memo, + this.transactionData.target_date, + ) + if (result.success) { + this.error = false + this.$emit('update-balance', this.transactionData.amount) + } else { + this.error = true + } + this.currentTransactionStep = 2 }, - updateTransactions() { - this.$emit('update-transactions') + onReset() { + this.transactionData.email = '' + this.transactionData.amount = 0 + this.transactionData.memo = '' + this.transactionData.target_date = '' + this.showContext = true + this.currentTransactionStep = 0 }, }, } diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue index dd7518b2c..53e0910c9 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue @@ -1,100 +1,13 @@ From e8aad2e317eab68d20aae91c7253af64e279f5dc Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 04:30:15 +0200 Subject: [PATCH 09/12] get the test working. ToDo: Test this component! --- .../src/views/Pages/AccountOverview.spec.js | 25 ------------------- 1 file changed, 25 deletions(-) diff --git a/frontend/src/views/Pages/AccountOverview.spec.js b/frontend/src/views/Pages/AccountOverview.spec.js index 1454ada5c..68d91ee98 100644 --- a/frontend/src/views/Pages/AccountOverview.spec.js +++ b/frontend/src/views/Pages/AccountOverview.spec.js @@ -34,30 +34,5 @@ describe('AccountOverview', () => { it('has a transactions table', () => { expect(wrapper.find('gdd-table-stub').exists()).toBeTruthy() }) - - describe('updateBalance method', () => { - beforeEach(async () => { - wrapper.find('gdd-send-stub').vm.$emit('update-balance', { - ammount: 42, - }) - await wrapper.vm.$nextTick() - }) - - it('emmits updateBalance with correct value', () => { - expect(wrapper.emitted('update-balance')).toEqual([[42]]) - }) - }) - - describe('toggleShowList method', () => { - beforeEach(async () => { - wrapper.setProps({ showTransactionList: false }) - wrapper.find('gdd-send-stub').vm.$emit('toggle-show-list', true) - await wrapper.vm.$nextTick() - }) - - it('changes the value of property showTransactionList', () => { - expect(wrapper.vm.showTransactionList).toBeTruthy() - }) - }) }) }) From 8c33d5e9131cfa3616329defa42edd987f459f10 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 06:30:47 +0200 Subject: [PATCH 10/12] more compact code --- frontend/src/apis/communityAPI.js | 7 ++-- frontend/src/views/Pages/AccountOverview.vue | 35 ++++++++----------- .../views/Pages/AccountOverview/GddSend.vue | 9 +++-- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/frontend/src/apis/communityAPI.js b/frontend/src/apis/communityAPI.js index 5d56f4a1b..5340140d0 100644 --- a/frontend/src/apis/communityAPI.js +++ b/frontend/src/apis/communityAPI.js @@ -51,14 +51,11 @@ const communityAPI = { } return apiPost(CONFIG.COMMUNITY_API__URL + 'createCoins/', payload) }, */ - send: async (sessionId, email, amount, memo, targetDate) => { + send: async (sessionId, data) => { const payload = { session_id: sessionId, - email, - amount, - memo, - target_date: targetDate, auto_sign: true, + ...data, } return apiPost(CONFIG.COMMUNITY_API_URL + 'sendCoins/', payload) }, diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue index d0257809d..4ad4c27ba 100644 --- a/frontend/src/views/Pages/AccountOverview.vue +++ b/frontend/src/views/Pages/AccountOverview.vue @@ -4,7 +4,7 @@
- + @@ -58,7 +58,6 @@ export default { }, data() { return { - showContext: true, timestamp: Date.now(), transactionData: { email: '', @@ -67,7 +66,6 @@ export default { memo: '', }, error: false, - transactionSteps: ['transaction-form', 'transaction-confirmation', 'transaction-result'], currentTransactionStep: 0, } }, @@ -79,23 +77,19 @@ export default { }, transactionCount: { type: Number, default: 0 }, }, + computed: { + showContext() { + return this.currentTransactionStep === 0 + }, + }, methods: { setTransaction(data) { - this.transactionData.email = data.email - this.transactionData.amount = data.amount - this.transactionData.memo = data.memo - this.transactionData.target_date = new Date(Date.now()).toISOString() - this.showContext = false + data.target_date = new Date(Date.now()).toISOString() + this.transactionData = { ...data } this.currentTransactionStep = 1 }, async sendTransaction() { - const result = await communityAPI.send( - this.$store.state.sessionId, - this.transactionData.email, - this.transactionData.amount, - this.transactionData.memo, - this.transactionData.target_date, - ) + const result = await communityAPI.send(this.$store.state.sessionId, this.transactionData) if (result.success) { this.error = false this.$emit('update-balance', this.transactionData.amount) @@ -105,11 +99,12 @@ export default { this.currentTransactionStep = 2 }, onReset() { - this.transactionData.email = '' - this.transactionData.amount = 0 - this.transactionData.memo = '' - this.transactionData.target_date = '' - this.showContext = true + this.transactionData = { + email: '', + amount: 0, + memo: '', + target_date: '', + } this.currentTransactionStep = 0 }, }, diff --git a/frontend/src/views/Pages/AccountOverview/GddSend.vue b/frontend/src/views/Pages/AccountOverview/GddSend.vue index 53e0910c9..cfab0899a 100644 --- a/frontend/src/views/Pages/AccountOverview/GddSend.vue +++ b/frontend/src/views/Pages/AccountOverview/GddSend.vue @@ -1,13 +1,18 @@ From 1b1f4adb9364daa50a3c53d728835129108d4b02 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 06:49:57 +0200 Subject: [PATCH 11/12] even more compact code --- frontend/src/views/Pages/AccountOverview.vue | 21 +++++++++----------- 1 file changed, 9 insertions(+), 12 deletions(-) diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue index 4ad4c27ba..0149daebe 100644 --- a/frontend/src/views/Pages/AccountOverview.vue +++ b/frontend/src/views/Pages/AccountOverview.vue @@ -45,6 +45,13 @@ import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfir import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue' import communityAPI from '../../apis/communityAPI.js' +const _emptyTransactionData = { + email: '', + amount: 0, + memo: '', + target_date: '', +} + export default { name: 'Overview', components: { @@ -59,12 +66,7 @@ export default { data() { return { timestamp: Date.now(), - transactionData: { - email: '', - amount: 0, - target_date: '', - memo: '', - }, + transactionData: { ..._emptyTransactionData }, error: false, currentTransactionStep: 0, } @@ -99,12 +101,7 @@ export default { this.currentTransactionStep = 2 }, onReset() { - this.transactionData = { - email: '', - amount: 0, - memo: '', - target_date: '', - } + this.transactionData = { ..._emptyTransactionData } this.currentTransactionStep = 0 }, }, From 70793d385473704a9395dc4cbe8738f93a970247 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 12 May 2021 13:06:28 +0200 Subject: [PATCH 12/12] contsant to upper case --- frontend/src/views/Pages/AccountOverview.vue | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue index 0149daebe..3ca7ef9af 100644 --- a/frontend/src/views/Pages/AccountOverview.vue +++ b/frontend/src/views/Pages/AccountOverview.vue @@ -45,7 +45,7 @@ import TransactionConfirmation from './AccountOverview/GddSend/TransactionConfir import TransactionResult from './AccountOverview/GddSend/TransactionResult.vue' import communityAPI from '../../apis/communityAPI.js' -const _emptyTransactionData = { +const EMPTY_TRANSACTION_DATA = { email: '', amount: 0, memo: '', @@ -66,7 +66,7 @@ export default { data() { return { timestamp: Date.now(), - transactionData: { ..._emptyTransactionData }, + transactionData: EMPTY_TRANSACTION_DATA, error: false, currentTransactionStep: 0, } @@ -101,7 +101,7 @@ export default { this.currentTransactionStep = 2 }, onReset() { - this.transactionData = { ..._emptyTransactionData } + this.transactionData = EMPTY_TRANSACTION_DATA this.currentTransactionStep = 0 }, },