diff --git a/frontend/src/components/GddSend/TransactionForm.spec.js b/frontend/src/components/GddSend/TransactionForm.spec.js index 501fb7c37..65f4f8e59 100644 --- a/frontend/src/components/GddSend/TransactionForm.spec.js +++ b/frontend/src/components/GddSend/TransactionForm.spec.js @@ -46,13 +46,17 @@ describe('TransactionForm', () => { describe('transaction form disable because balance 0,0 GDD', () => { it('has a disabled input field of type email', () => { - expect(wrapper.find('#input-group-1').find('input').attributes('disabled')).toBe('disabled') + expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('disabled')).toBe( + 'disabled', + ) }) it('has a disabled input field for amount', () => { - expect(wrapper.find('#input-2').find('input').attributes('disabled')).toBe('disabled') + expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('disabled')).toBe('disabled') }) it('has a disabled textarea field ', () => { - expect(wrapper.find('#input-3').find('textarea').attributes('disabled')).toBe('disabled') + 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') @@ -96,40 +100,46 @@ describe('TransactionForm', () => { 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', + expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('type')).toBe( + 'email', ) }) 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', + 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.find('#input-group-1').find('input').setValue('a') + await wrapper.findAll('div.form-group').at(0).find('input').setValue('a') await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('validations.messages.email') + 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.find('#input-group-1').find('input').setValue('user@example.org') + await wrapper.findAll('div.form-group').at(0).find('input').setValue('user@example.org') await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('form.validation.is-not') + 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.find('#input-group-1').find('input').setValue(' valid@email.com ') - await wrapper.find('#input-group-1').find('input').trigger('blur') + 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') }) @@ -137,72 +147,67 @@ describe('TransactionForm', () => { 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') + expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('type')).toBe('text') }) it('has a placeholder "0.01"', () => { - expect(wrapper.find('#input-group-2').find('input').attributes('placeholder')).toBe( - '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.find('#input-group-2').find('input').setValue('invalid') - await wrapper.find('#input-group-2').find('input').trigger('blur') + 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.find('#input-group-2').find('input').setValue('a') + await wrapper.findAll('div.form-group').at(1).find('input').setValue('a') await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') + 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.find('#input-group-2').find('input').setValue('123.34') + await wrapper.findAll('div.form-group').at(1).find('input').setValue('123.34') await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('form.validation.gddSendAmount') + 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.find('#input-group-2').find('input').setValue('87.34') + await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.34') await flushPromises() - expect(wrapper.find('span.errors').exists()).toBe(false) + 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.find('#input-group-3').find('textarea').exists()).toBe(true) - }) - - it('has an chat-right-text icon', () => { - expect(wrapper.find('#input-group-3').find('svg').attributes('aria-label')).toBe( - 'chat right text', - ) + expect(wrapper.findAll('div.form-group').at(2).find('textarea').exists()).toBe(true) }) it('has a label form.message', () => { - expect(wrapper.find('label.input-3').text()).toBe('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.find('#input-group-3').find('textarea').setValue('a') + await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('a') await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('validations.messages.min') + 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.find('#input-group-3').find('textarea').setValue(` + 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, @@ -233,13 +238,17 @@ Mir später weit besser gelingen; Dann werde ich, taumelnd von Krug zu Krug, Die ganze Welt bezwingen.“`) await flushPromises() - expect(wrapper.find('span.errors').text()).toBe('validations.messages.max') + 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.find('#input-group-3').find('textarea').setValue('Long enough') + await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') await flushPromises() - expect(wrapper.find('span.errors').exists()).toBe(false) + expect( + wrapper.findAll('div.form-group').at(2).find('div.invalid-feedback').text(), + ).toBe('') }) }) @@ -253,9 +262,13 @@ Die ganze Welt bezwingen.“`) }) 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 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') @@ -270,9 +283,13 @@ Die ganze Welt bezwingen.“`) 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 + .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() })