diff --git a/frontend/src/components/GddSend/TransactionForm.spec.js b/frontend/src/components/GddSend/TransactionForm.spec.js index 6d46f2f18..a4f66c877 100644 --- a/frontend/src/components/GddSend/TransactionForm.spec.js +++ b/frontend/src/components/GddSend/TransactionForm.spec.js @@ -1,6 +1,6 @@ import { mount } from '@vue/test-utils' import TransactionForm from './TransactionForm' -// import flushPromises from 'flush-promises' +import flushPromises from 'flush-promises' import { SEND_TYPES } from '@/pages/Send.vue' import DashboardLayout from '@/layouts/DashboardLayout.vue' @@ -44,296 +44,283 @@ describe('TransactionForm', () => { expect(wrapper.find('div.transaction-form').exists()).toBe(true) }) - describe.skip('transaction form disable because balance 0,0 GDD', () => { - it('has a disabled input field of type email', () => { + describe('with balance <= 0.00 GDD the form is disabled', () => { + it.skip('has a disabled input field of type email', () => { expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('disabled')).toBe( 'disabled', ) }) - it('has a disabled input field for amount', () => { + + it.skip('has a disabled input field for amount', () => { expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('disabled')).toBe( 'disabled', ) }) - it('has a disabled textarea field ', () => { + + it.skip('has a disabled textarea field ', () => { expect( wrapper.findAll('div.form-group').at(2).find('textarea').attributes('disabled'), ).toBe('disabled') }) + it('has a message indicating that there are no GDDs to send ', () => { - expect(wrapper.find('.text-danger').text()).toBe('form.no_gdd_available') + expect(wrapper.find('form').find('.text-danger').text()).toBe('form.no_gdd_available') }) + it('has no reset button and no submit button ', () => { expect(wrapper.find('.test-buttons').exists()).toBe(false) }) }) - describe('send GDD', () => { - it('has a component InputEmail', () => { - expect(wrapper.findComponent({ name: 'InputEmail' }).exists()).toBe(true) + describe('with balance greater 0.00 (100.00) GDD the form is fully enabled', () => { + beforeEach(() => { + wrapper.setProps({ balance: 100.0 }) }) - it('has a component InputAmount', () => { - expect(wrapper.findComponent({ name: 'InputAmount' }).exists()).toBe(true) - }) - it('has a component InputTextarea', () => { - expect(wrapper.findComponent({ name: 'InputTextarea' }).exists()).toBe(true) - }) - // beforeEach(async () => { - // await wrapper.findAll('input[type="radio"]').at(0).setChecked() - // }) - - // it('has SEND_TYPES = send', () => { - // expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send) - // }) - - // 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('.errors').exists()).toBe(false) - // }) - - // 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('email field', () => { - // it('has an input field of type email', () => { - // expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('type')).toBe( - // 'email', - // ) - // }) - - // it('has a label form.receiver', () => { - // expect(wrapper.findAll('div.form-group').at(0).find('label').text()).toBe( - // 'form.recipient', - // ) - // }) - - // it('has a placeholder "E-Mail"', () => { - // expect( - // wrapper.findAll('div.form-group').at(0).find('input').attributes('placeholder'), - // ).toBe('form.email') - // }) - - // it('flushes an error message when no valid email is given', async () => { - // await wrapper.findAll('div.form-group').at(0).find('input').setValue('a') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(0).find('div.invalid-feedback').text(), - // ).toBe('validations.messages.email') - // }) - - // it('flushes an error message when email is the email of logged in user', async () => { - // await wrapper.findAll('div.form-group').at(0).find('input').setValue('user@example.org') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(0).find('div.invalid-feedback').text(), - // ).toBe('form.validation.is-not') - // }) - - // it('trims the email after blur', async () => { - // await wrapper - // .findAll('div.form-group') - // .at(0) - // .find('input') - // .setValue(' valid@email.com ') - // await wrapper.findAll('div.form-group').at(0).find('input').trigger('blur') - // await flushPromises() - // expect(wrapper.vm.form.email).toBe('valid@email.com') - // }) - // }) - - // describe('amount field', () => { - // it('has an input field of type text', () => { - // expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('type')).toBe('text') - // }) - - // it('has a placeholder "0.01"', () => { - // expect( - // wrapper.findAll('div.form-group').at(1).find('input').attributes('placeholder')).toBe('0.01') - // }) - - // it('does not update form amount when invalid', async () => { - // await wrapper.findAll('div.form-group').at(1).find('input').setValue('invalid') - // await wrapper.findAll('div.form-group').at(1).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.findAll('div.form-group').at(1).find('input').setValue('a') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(1).find('div.invalid-feedback').text(), - // ).toBe('form.validation.gddSendAmount') - // }) - - // it('flushes an error message when amount is too high', async () => { - // await wrapper.findAll('div.form-group').at(1).find('input').setValue('123.34') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(1).find('div.invalid-feedback').text(), - // ).toBe('form.validation.gddSendAmount') - // }) - - // it('flushes no errors when amount is valid', async () => { - // await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.34') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(1).find('div.invalid-feedback').text(), - // ).toBe('') - // }) - // }) - - // describe('message text box', () => { - // it('has an textarea field', () => { - // expect(wrapper.findAll('div.form-group').at(2).find('textarea').exists()).toBe(true) - // }) - - // it('has a label form.message', () => { - // expect(wrapper.findAll('div.form-group').at(2).find('label').text()).toBe( - // 'form.message', - // ) - // }) - - // it('flushes an error message when memo is less than 5 characters', async () => { - // await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('a') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(2).find('div.invalid-feedback').text(), - // ).toBe('validations.messages.min') - // }) - - // it('flushes an error message when memo is more than 255 characters', async () => { - // await wrapper.findAll('div.form-group').at(2).find('textarea').setValue(` - // Es ist ein König in Thule, der trinkt - // Champagner, es geht ihm nichts drüber; - // Und wenn er seinen Champagner trinkt, - // Dann gehen die Augen ihm über. - - // Die Ritter sitzen um ihn her, - // Die ganze Historische Schule; - // Ihm aber wird die Zunge schwer, - // Es lallt der König von Thule: - - // „Als Alexander, der Griechenheld, - // Mit seinem kleinen Haufen - // Erobert hatte die ganze Welt, - // Da gab er sich ans Saufen. - - // Ihn hatten so durstig gemacht der Krieg - // Und die Schlachten, die er geschlagen; - // Er soff sich zu Tode nach dem Sieg, - // Er konnte nicht viel vertragen. - - // Ich aber bin ein stärkerer Mann - // Und habe mich klüger besonnen: - // Wie jener endete, fang ich an, - // Ich hab mit dem Trinken begonnen. - - // Im Rausche wird der Heldenzug - // Mir später weit besser gelingen; - // Dann werde ich, taumelnd von Krug zu Krug, - // Die ganze Welt bezwingen.“`) - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(2).find('div.invalid-feedback').text(), - // ).toBe('validations.messages.max') - // }) - - // it('flushes no error message when memo is valid', async () => { - // await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') - // await flushPromises() - // expect( - // wrapper.findAll('div.form-group').at(2).find('div.invalid-feedback').text(), - // ).toBe('') - // }) - // }) - - // describe('cancel button', () => { - // it('has a cancel button', () => { - // expect(wrapper.find('button[type="reset"]').exists()).toBe(true) - // }) - - // it('has the text "form.cancel"', () => { - // expect(wrapper.find('button[type="reset"]').text()).toBe('form.cancel') - // }) - - // it('clears all fields on click', async () => { - // await wrapper - // .findAll('div.form-group') - // .at(0) - // .find('input') - // .setValue('someone@watches.tv') - // await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') - // await wrapper.findAll('div.form-group').at(2).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 - // .findAll('div.form-group') - // .at(0) - // .find('input') - // .setValue('someone@watches.tv') - // await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') - // await wrapper.findAll('div.form-group').at(2).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('create transaction link', () => { - beforeEach(async () => { - await wrapper.findAll('input[type="radio"]').at(1).setChecked() + it('has no warning message ', () => { + expect(wrapper.find('form').find('.text-danger').exists()).toBe(false) }) - it('has SEND_TYPES = link', () => { - expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.link) + describe('send GDD', () => { + beforeEach(async () => { + await wrapper.findAll('input[type="radio"]').at(0).setChecked() + }) + + it('has SEND_TYPES = send', () => { + expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.send) + }) + + describe('email field', () => { + it('has an input field of type email', () => { + expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('type')).toBe( + 'email', + ) + }) + + it('has a label form.receiver', () => { + expect(wrapper.findAll('div.form-group').at(0).find('label').text()).toBe( + 'form.recipient', + ) + }) + + it('has a placeholder "E-Mail"', () => { + expect( + wrapper.findAll('div.form-group').at(0).find('input').attributes('placeholder'), + ).toBe('form.email') + }) + + it('flushes an error message when no valid email is given', async () => { + await wrapper.findAll('div.form-group').at(0).find('input').setValue('a') + await flushPromises() + expect(wrapper.findAll('div.form-group').at(0).find('.invalid-feedback').text()).toBe( + 'validations.messages.email', + ) + }) + + it('flushes an error message when email is the email of logged in user', async () => { + await wrapper.findAll('div.form-group').at(0).find('input').setValue('user@example.org') + await flushPromises() + expect(wrapper.findAll('div.form-group').at(0).find('.invalid-feedback').text()).toBe('form.validation.is-not') + }) + + it('trims the email after blur', async () => { + await wrapper + .findAll('div.form-group') + .at(0) + .find('input') + .setValue(' valid@email.com ') + await wrapper.findAll('div.form-group').at(0).find('input').trigger('blur') + await flushPromises() + expect(wrapper.vm.form.email).toBe('valid@email.com') + }) + }) + + describe('amount field', () => { + it('has an input field of type text', () => { + expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('type')).toBe('text') + }) + + it('has a label form.amount', () => { + expect(wrapper.findAll('div.form-group').at(1).find('label').text()).toBe('form.amount') + }) + + it('has a placeholder "0.01"', () => { + expect( + wrapper.findAll('div.form-group').at(1).find('input').attributes('placeholder'), + ).toBe('0.01') + }) + + it('does not update form amount when invalid', async () => { + await wrapper.findAll('div.form-group').at(1).find('input').setValue('invalid') + await wrapper.findAll('div.form-group').at(1).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.findAll('div.form-group').at(1).find('input').setValue('a') + await flushPromises() + expect(wrapper.findAll('div.form-group').at(1).find('.invalid-feedback').text()).toBe('form.validation.gddSendAmount') + }) + + it('flushes an error message when amount is too high', async () => { + await wrapper.findAll('div.form-group').at(1).find('input').setValue('123.34') + await flushPromises() + expect(wrapper.findAll('div.form-group').at(1).find('.invalid-feedback').text()).toBe('form.validation.gddSendAmount') + }) + + it('flushes no errors when amount is valid', async () => { + await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.34') + await flushPromises() + expect( + wrapper + .findAll('div.form-group') + .at(1) + .find('.invalid-feedback') + .attributes('aria-live'), + ).toBe('off') + }) + }) + + describe('message text box', () => { + it('has an textarea field', () => { + expect(wrapper.findAll('div.form-group').at(2).find('textarea').exists()).toBe(true) + }) + + it('has a label form.message', () => { + expect(wrapper.findAll('div.form-group').at(2).find('label').text()).toBe( + 'form.message', + ) + }) + + it('flushes an error message when memo is less than 5 characters', async () => { + await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('a') + await flushPromises() + expect(wrapper.findAll('div.form-group').at(2).find('.invalid-feedback').text()).toBe( + 'validations.messages.min', + ) + }) + + it('flushes an error message when memo is more than 255 characters', async () => { + await wrapper.findAll('div.form-group').at(2).find('textarea').setValue(` +Es ist ein König in Thule, der trinkt +Champagner, es geht ihm nichts drüber; +Und wenn er seinen Champagner trinkt, +Dann gehen die Augen ihm über. + +Die Ritter sitzen um ihn her, +Die ganze Historische Schule; +Ihm aber wird die Zunge schwer, +Es lallt der König von Thule: + +„Als Alexander, der Griechenheld, +Mit seinem kleinen Haufen +Erobert hatte die ganze Welt, +Da gab er sich ans Saufen. + +Ihn hatten so durstig gemacht der Krieg +Und die Schlachten, die er geschlagen; +Er soff sich zu Tode nach dem Sieg, +Er konnte nicht viel vertragen. + +Ich aber bin ein stärkerer Mann +Und habe mich klüger besonnen: +Wie jener endete, fang ich an, +Ich hab mit dem Trinken begonnen. + +Im Rausche wird der Heldenzug +Mir später weit besser gelingen; +Dann werde ich, taumelnd von Krug zu Krug, +Die ganze Welt bezwingen.“`) + await flushPromises() + expect(wrapper.findAll('div.form-group').at(2).find('.invalid-feedback').text()).toBe( + 'validations.messages.max', + ) + }) + + it('flushes no error message when memo is valid', async () => { + await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') + await flushPromises() + expect( + wrapper + .findAll('div.form-group') + .at(1) + .find('.invalid-feedback') + .attributes('aria-live'), + ).toBe('off') + }) + }) + + describe('cancel button', () => { + it('has a cancel button', () => { + expect(wrapper.find('button[type="reset"]').exists()).toBe(true) + }) + + it('has the text "form.cancel"', () => { + expect(wrapper.find('button[type="reset"]').text()).toBe('form.cancel') + }) + + it('clears all fields on click', async () => { + await wrapper + .findAll('div.form-group') + .at(0) + .find('input') + .setValue('someone@watches.tv') + await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') + await wrapper.findAll('div.form-group').at(2).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 + .findAll('div.form-group') + .at(0) + .find('input') + .setValue('someone@watches.tv') + await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') + await wrapper.findAll('div.form-group').at(2).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', + }, + ], + ]) + }) + }) }) - it('has no component InputEmail', () => { - expect(wrapper.findComponent({ name: 'InputEmail' }).exists()).toBe(false) + describe('create transaction link', () => { + beforeEach(async () => { + await wrapper.findAll('input[type="radio"]').at(1).setChecked() + }) + + it('has SEND_TYPES = link', () => { + expect(wrapper.vm.radioSelected).toBe(SEND_TYPES.link) + }) + + it('has no input field of id input-group-1', () => { + expect(wrapper.find('#input-group-1').exists()).toBe(false) + }) }) }) })