diff --git a/frontend/src/App.vue b/frontend/src/App.vue index 39e417404..d7945ec69 100755 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -40,3 +40,8 @@ export default { }, } + diff --git a/frontend/src/components/GddSend/TransactionConfirmation.spec.js b/frontend/src/components/GddSend/TransactionConfirmation.spec.js new file mode 100644 index 000000000..af746b6ff --- /dev/null +++ b/frontend/src/components/GddSend/TransactionConfirmation.spec.js @@ -0,0 +1,63 @@ +import { mount } from '@vue/test-utils' +import TransactionConfirmation from './TransactionConfirmation' + +const localVue = global.localVue + +describe('GddSend confirm', () => { + let wrapper + + const mocks = { + $t: jest.fn((t) => t), + $i18n: { + locale: jest.fn(() => 'en'), + }, + $n: jest.fn((n) => String(n)), + } + + const propsData = { + balance: 1234, + email: 'user@example.org', + amount: 12.34, + memo: 'Pessimisten stehen im Regen, Optimisten duschen unter den Wolken.', + loading: false, + selected: 'send', + } + + const Wrapper = () => { + return mount(TransactionConfirmation, { localVue, mocks, propsData }) + } + + describe('mount', () => { + beforeEach(() => { + wrapper = Wrapper() + }) + + it('renders the component div.transaction-confirm', () => { + expect(wrapper.find('div.transaction-confirm').exists()).toBeTruthy() + }) + + describe('has selected "send"', () => { + beforeEach(async () => { + await wrapper.setProps({ + selected: 'send', + }) + }) + + it('renders the component div.confirm-box-send', () => { + expect(wrapper.find('div.confirm-box-send').exists()).toBeTruthy() + }) + }) + + describe('has selected "link"', () => { + beforeEach(async () => { + await wrapper.setProps({ + selected: 'link', + }) + }) + + it('renders the component div.confirm-box-link', () => { + expect(wrapper.findAll('div.confirm-box-link').at(0).exists()).toBeTruthy() + }) + }) + }) +}) diff --git a/frontend/src/components/GddSend/TransactionConfirmation.vue b/frontend/src/components/GddSend/TransactionConfirmation.vue index 4acb95dcd..b3e873748 100644 --- a/frontend/src/components/GddSend/TransactionConfirmation.vue +++ b/frontend/src/components/GddSend/TransactionConfirmation.vue @@ -1,6 +1,16 @@ diff --git a/frontend/src/components/GddSend/TransactionForm.spec.js b/frontend/src/components/GddSend/TransactionForm.spec.js index 25683e6df..635b1f811 100644 --- a/frontend/src/components/GddSend/TransactionForm.spec.js +++ b/frontend/src/components/GddSend/TransactionForm.spec.js @@ -55,180 +55,203 @@ describe('GddSend', () => { }) }) - describe('transaction form', () => { - beforeEach(() => { - wrapper.setProps({ balance: 100.0 }) - }) - describe('transaction form show because balance 100,0 GDD', () => { - it('has no warning message ', () => { - expect(wrapper.find('.text-danger').exists()).toBeFalsy() - }) - it('has a reset button', () => { - expect(wrapper.find('.test-buttons').findAll('button').at(0).attributes('type')).toBe( - 'reset', - ) - }) - it('has a submit button', () => { - expect(wrapper.find('.test-buttons').findAll('button').at(1).attributes('type')).toBe( - 'submit', - ) - }) + describe('is selected: "send"', () => { + beforeEach(async () => { + // await wrapper.setData({ + // selected: 'send', + // }) + await wrapper.findAll('input[type="radio"]').at(0).setChecked() }) - describe('email field', () => { - it('has an input field of type email', () => { - expect(wrapper.find('#input-group-1').find('input').attributes('type')).toBe('email') + describe('transaction form', () => { + beforeEach(() => { + wrapper.setProps({ balance: 100.0 }) + }) + describe('transaction form show because balance 100,0 GDD', () => { + it('has no warning message ', () => { + expect(wrapper.find('.text-danger').exists()).toBeFalsy() + }) + it('has a reset button', () => { + expect(wrapper.find('.test-buttons').findAll('button').at(0).attributes('type')).toBe( + 'reset', + ) + }) + it('has a submit button', () => { + expect(wrapper.find('.test-buttons').findAll('button').at(1).attributes('type')).toBe( + 'submit', + ) + }) }) - it('has an envelope icon', () => { - expect(wrapper.find('#input-group-1').find('svg').attributes('aria-label')).toBe( - 'envelope', - ) + 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.find('label.input-1').text()).toBe('form.recipient') + }) + + it('has a placeholder "E-Mail"', () => { + expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe( + 'E-Mail', + ) + }) + + it('flushes an error message when no valid email is given', async () => { + await wrapper.find('#input-group-1').find('input').setValue('a') + await flushPromises() + expect(wrapper.find('span.errors').text()).toBe('validations.messages.email') + }) + + it('trims the email after blur', async () => { + await wrapper.find('#input-group-1').find('input').setValue(' valid@email.com ') + await wrapper.find('#input-group-1').find('input').trigger('blur') + await flushPromises() + expect(wrapper.vm.form.email).toBe('valid@email.com') + }) }) - it('has a label form.receiver', () => { - expect(wrapper.find('label.input-1').text()).toBe('form.recipient') + describe('amount field', () => { + it('has an input field of type text', () => { + expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text') + }) + + it('has an GDD text icon', () => { + expect(wrapper.find('#input-group-2').find('div.m-1').text()).toBe('GDD') + }) + + it('has a label form.amount', () => { + expect(wrapper.find('label.input-2').text()).toBe('form.amount') + }) + + it('has a placeholder "0.01"', () => { + expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe( + '0.01', + ) + }) + + it('does not update form amount when invalid', async () => { + await wrapper.find('#input-group-2').find('input').setValue('invalid') + await wrapper.find('#input-group-2').find('input').trigger('blur') + await flushPromises() + expect(wrapper.vm.form.amountValue).toBe(0) + }) + + it('flushes an error message when no valid amount is given', async () => { + await wrapper.find('#input-group-2').find('input').setValue('a') + await flushPromises() + expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') + }) + + it('flushes an error message when amount is too high', async () => { + await wrapper.find('#input-group-2').find('input').setValue('123.34') + await flushPromises() + expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') + }) + + it('flushes no errors when amount is valid', async () => { + await wrapper.find('#input-group-2').find('input').setValue('87.34') + await flushPromises() + expect(wrapper.find('span.errors').exists()).toBeFalsy() + }) }) - it('has a placeholder "E-Mail"', () => { - expect(wrapper.find('#input-group-1').find('input').attributes('placeholder')).toBe( - 'E-Mail', - ) + 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.message', () => { + expect(wrapper.find('label.input-3').text()).toBe('form.message') + }) + + it('flushes an error message when memo is less than 5 characters', async () => { + await wrapper.find('#input-group-3').find('textarea').setValue('a') + await flushPromises() + expect(wrapper.find('span.errors').text()).toBe('validations.messages.min') + }) + + it('flushes no error message when memo is valid', async () => { + await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') + await flushPromises() + expect(wrapper.find('span.errors').exists()).toBeFalsy() + }) }) - it('flushes an error message when no valid email is given', async () => { - await wrapper.find('#input-group-1').find('input').setValue('a') - await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('validations.messages.email') + 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('clears all fields on click', async () => { + await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') + await wrapper.find('#input-group-2').find('input').setValue('87.23') + await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') + await flushPromises() + expect(wrapper.vm.form.email).toBe('someone@watches.tv') + expect(wrapper.vm.form.amount).toBe('87.23') + expect(wrapper.vm.form.memo).toBe('Long enough') + await wrapper.find('button[type="reset"]').trigger('click') + await flushPromises() + expect(wrapper.vm.form.email).toBe('') + expect(wrapper.vm.form.amount).toBe('') + expect(wrapper.vm.form.memo).toBe('') + }) }) - it('trims the email after blur', async () => { - await wrapper.find('#input-group-1').find('input').setValue(' valid@email.com ') - await wrapper.find('#input-group-1').find('input').trigger('blur') - await flushPromises() - expect(wrapper.vm.form.email).toBe('valid@email.com') + describe('submit', () => { + beforeEach(async () => { + await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') + await wrapper.find('#input-group-2').find('input').setValue('87.23') + await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') + await wrapper.find('form').trigger('submit') + await flushPromises() + }) + + it('emits set-transaction', async () => { + expect(wrapper.emitted('set-transaction')).toBeTruthy() + expect(wrapper.emitted('set-transaction')).toEqual([ + [ + { + email: 'someone@watches.tv', + amount: 87.23, + memo: 'Long enough', + selected: 'send', + }, + ], + ]) + }) }) }) + }) - describe('amount field', () => { - it('has an input field of type text', () => { - expect(wrapper.find('#input-group-2').find('input').attributes('type')).toBe('text') - }) - - it('has an GDD text icon', () => { - expect(wrapper.find('#input-group-2').find('div.m-1').text()).toBe('GDD') - }) - - it('has a label form.amount', () => { - expect(wrapper.find('label.input-2').text()).toBe('form.amount') - }) - - it('has a placeholder "0.01"', () => { - expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe( - '0.01', - ) - }) - - it('does not update form amount when invalid', async () => { - await wrapper.find('#input-group-2').find('input').setValue('invalid') - await wrapper.find('#input-group-2').find('input').trigger('blur') - await flushPromises() - expect(wrapper.vm.form.amountValue).toBe(0) - }) - - it('flushes an error message when no valid amount is given', async () => { - await wrapper.find('#input-group-2').find('input').setValue('a') - await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') - }) - - it('flushes an error message when amount is too high', async () => { - await wrapper.find('#input-group-2').find('input').setValue('123.34') - await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') - }) - - it('flushes no errors when amount is valid', async () => { - await wrapper.find('#input-group-2').find('input').setValue('87.34') - await flushPromises() - expect(wrapper.find('span.errors').exists()).toBeFalsy() - }) + describe('is selected: "link"', () => { + beforeEach(async () => { + // await wrapper.setData({ + // selected: 'link', + // }) + await wrapper.findAll('input[type="radio"]').at(1).setChecked() }) - 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.message', () => { - expect(wrapper.find('label.input-3').text()).toBe('form.message') - }) - - it('flushes an error message when memo is less than 5 characters', async () => { - await wrapper.find('#input-group-3').find('textarea').setValue('a') - await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('validations.messages.min') - }) - - it('flushes no error message when memo is valid', async () => { - await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') - await flushPromises() - expect(wrapper.find('span.errors').exists()).toBeFalsy() - }) - }) - - 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('clears all fields on click', async () => { - await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') - await wrapper.find('#input-group-2').find('input').setValue('87.23') - await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') - await flushPromises() - expect(wrapper.vm.form.email).toBe('someone@watches.tv') - expect(wrapper.vm.form.amount).toBe('87.23') - expect(wrapper.vm.form.memo).toBe('Long enough') - await wrapper.find('button[type="reset"]').trigger('click') - await flushPromises() - expect(wrapper.vm.form.email).toBe('') - expect(wrapper.vm.form.amount).toBe('') - expect(wrapper.vm.form.memo).toBe('') - }) - }) - - describe('submit', () => { - beforeEach(async () => { - await wrapper.find('#input-group-1').find('input').setValue('someone@watches.tv') - await wrapper.find('#input-group-2').find('input').setValue('87.23') - await wrapper.find('#input-group-3').find('textarea').setValue('Long enough') - await wrapper.find('form').trigger('submit') - await flushPromises() - }) - - it('emits set-transaction', async () => { - expect(wrapper.emitted('set-transaction')).toBeTruthy() - expect(wrapper.emitted('set-transaction')).toEqual([ - [ - { - email: 'someone@watches.tv', - amount: 87.23, - memo: 'Long enough', - }, - ], - ]) - }) + it('has no input field of id input-group-1', () => { + expect(wrapper.find('#input-group-1').isVisible()).toBeFalsy() }) }) }) diff --git a/frontend/src/components/GddSend/TransactionForm.vue b/frontend/src/components/GddSend/TransactionForm.vue index 0f5650543..8e52ae345 100644 --- a/frontend/src/components/GddSend/TransactionForm.vue +++ b/frontend/src/components/GddSend/TransactionForm.vue @@ -2,26 +2,39 @@ - - + + + + {{ $t('send_gdd') }} + + + + + {{ $t('send_per_link') }} + + + + +

{{ $t('gdd_per_link.header') }}

+

+ {{ $t('gdd_per_link.sentence_1') }} +

+
- +
-
{{ $t('form.no_gdd_available') }} @@ -128,7 +140,7 @@ - {{ $t('form.send_now') }} + {{ selected === 'send' ? $t('form.send_now') : $t('form.generate_now') }} @@ -141,16 +153,12 @@