IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

tests for inputs, add data-test

Browse Source
This commit is contained in:
ogerly 2023-01-04 22:19:19 +01:00
parent 19ec650496
commit 6812baad22
5 changed files with 79 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

137
frontend/src/components/GddSend/TransactionForm.spec.js
View File

@ -49,20 +49,20 @@ describe('TransactionForm', () => {
describe('with balance <= 0.00 GDD the form is disabled', () => { describe('with balance <= 0.00 GDD the form is disabled', () => {
it.skip('has a disabled input field of type email', () => { it.skip('has a disabled input field of type email', () => {
expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('disabled')).toBe( expect(
'disabled', wrapper.find('div[data-test="input-email"]').find('input').attributes('disabled'),
) ).toBe('disabled')
}) })
it.skip('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( expect(
'disabled', wrapper.find('div[data-test="input-amount"]').find('input').attributes('disabled'),
) ).toBe('disabled')
}) })
it.skip('has a disabled textarea field ', () => { it.skip('has a disabled textarea field ', () => {
expect( expect(
wrapper.findAll('div.form-group').at(2).find('textarea').attributes('disabled'), wrapper.find('div[data-test="input-textarea').find('textarea').attributes('disabled'),
).toBe('disabled') ).toBe('disabled')
}) })
@ -95,47 +95,49 @@ describe('TransactionForm', () => {
describe('email field', () => { describe('email field', () => {
it('has an input field of type email', () => { it('has an input field of type email', () => {
expect(wrapper.findAll('div.form-group').at(0).find('input').attributes('type')).toBe( expect(
'email', wrapper.find('div[data-test="input-email"]').find('input').attributes('type'),
) ).toBe('email')
}) })
it('has a label form.receiver', () => { it('has a label form.receiver', () => {
expect(wrapper.findAll('div.form-group').at(0).find('label').text()).toBe( expect(wrapper.find('div[data-test="input-email"]').find('label').text()).toBe(
'form.recipient', 'form.recipient',
) )
}) })
it('has a placeholder "E-Mail"', () => { it('has a placeholder "E-Mail"', () => {
expect( expect(
wrapper.findAll('div.form-group').at(0).find('input').attributes('placeholder'), wrapper.find('div[data-test="input-email"]').find('input').attributes('placeholder'),
).toBe('form.email') ).toBe('form.email')
}) })
it('flushes an error message when no valid email is given', async () => { 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 wrapper.find('div[data-test="input-email"]').find('input').setValue('a')
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(0).find('.invalid-feedback').text()).toBe( expect(
'validations.messages.email', wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
) ).toBe('validations.messages.email')
}) })
// TODO:SKIPPED there is no check that the email being sent to is the same as the user's email. // TODO:SKIPPED there is no check that the email being sent to is the same as the user's email.
it.skip('flushes an error message when email is the email of logged in user', async () => { it.skip('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 wrapper
.find('div[data-test="input-email"]')
.find('input')
.setValue('user@example.org')
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(0).find('.invalid-feedback').text()).toBe( expect(
'form.validation.is-not', wrapper.find('div[data-test="input-email"]').find('.invalid-feedback').text(),
) ).toBe('form.validation.is-not')
}) })
it('trims the email after blur', async () => { it('trims the email after blur', async () => {
await wrapper await wrapper
.findAll('div.form-group') .find('div[data-test="input-email"]')
.at(0)
.find('input') .find('input')
.setValue(' valid@email.com ') .setValue(' valid@email.com ')
await wrapper.findAll('div.form-group').at(0).find('input').trigger('blur') await wrapper.find('div[data-test="input-email"]').find('input').trigger('blur')
await flushPromises() await flushPromises()
expect(wrapper.vm.form.email).toBe('valid@email.com') expect(wrapper.vm.form.email).toBe('valid@email.com')
}) })
@ -143,51 +145,52 @@ describe('TransactionForm', () => {
describe('amount field', () => { describe('amount field', () => {
it('has an input field of type text', () => { it('has an input field of type text', () => {
expect(wrapper.findAll('div.form-group').at(1).find('input').attributes('type')).toBe( expect(
'text', wrapper.find('div[data-test="input-amount"]').find('input').attributes('type'),
) ).toBe('text')
}) })
it('has a label form.amount', () => { it('has a label form.amount', () => {
expect(wrapper.findAll('div.form-group').at(1).find('label').text()).toBe('form.amount') expect(wrapper.find('div[data-test="input-amount"]').find('label').text()).toBe(
'form.amount',
)
}) })
it('has a placeholder "0.01"', () => { it('has a placeholder "0.01"', () => {
expect( expect(
wrapper.findAll('div.form-group').at(1).find('input').attributes('placeholder'), wrapper.find('div[data-test="input-amount"]').find('input').attributes('placeholder'),
).toBe('0.01') ).toBe('0.01')
}) })
it('does not update form amount when invalid', async () => { it('does not update form amount when invalid', async () => {
await wrapper.findAll('div.form-group').at(1).find('input').setValue('invalid') await wrapper.find('div[data-test="input-amount"]').find('input').setValue('invalid')
await wrapper.findAll('div.form-group').at(1).find('input').trigger('blur') await wrapper.find('div[data-test="input-amount"]').find('input').trigger('blur')
await flushPromises() await flushPromises()
expect(wrapper.vm.form.amountValue).toBe(0) expect(wrapper.vm.form.amountValue).toBe(0)
}) })
it('flushes an error message when no valid amount is given', async () => { 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 wrapper.find('div[data-test="input-amount"]').find('input').setValue('a')
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(1).find('.invalid-feedback').text()).toBe( expect(
'form.validation.gddSendAmount', wrapper.find('div[data-test="input-amount"]').find('.invalid-feedback').text(),
) ).toBe('form.validation.gddSendAmount')
}) })
it('flushes an error message when amount is too high', async () => { 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 wrapper.find('div[data-test="input-amount"]').find('input').setValue('123.34')
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(1).find('.invalid-feedback').text()).toBe( expect(
'form.validation.gddSendAmount', wrapper.find('div[data-test="input-amount"]').find('.invalid-feedback').text(),
) ).toBe('form.validation.gddSendAmount')
}) })
it('flushes no errors when amount is valid', async () => { it('flushes no errors when amount is valid', async () => {
await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.34') await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.34')
await flushPromises() await flushPromises()
expect( expect(
wrapper wrapper
.findAll('div.form-group') .find('div[data-test="input-amount"]')
.at(1)
.find('.invalid-feedback') .find('.invalid-feedback')
.attributes('aria-live'), .attributes('aria-live'),
).toBe('off') ).toBe('off')
@ -196,25 +199,27 @@ describe('TransactionForm', () => {
describe('message text box', () => { describe('message text box', () => {
it('has an textarea field', () => { it('has an textarea field', () => {
expect(wrapper.findAll('div.form-group').at(2).find('textarea').exists()).toBe(true) expect(wrapper.find('div[data-test="input-textarea').find('textarea').exists()).toBe(
true,
)
}) })
it('has a label form.message', () => { it('has a label form.message', () => {
expect(wrapper.findAll('div.form-group').at(2).find('label').text()).toBe( expect(wrapper.find('div[data-test="input-textarea').find('label').text()).toBe(
'form.message', 'form.message',
) )
}) })
it('flushes an error message when memo is less than 5 characters', async () => { 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 wrapper.find('div[data-test="input-textarea').find('textarea').setValue('a')
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(2).find('.invalid-feedback').text()).toBe( expect(
'validations.messages.min', wrapper.find('div[data-test="input-textarea').find('.invalid-feedback').text(),
) ).toBe('validations.messages.min')
}) })
it('flushes an error message when memo is more than 255 characters', async () => { it('flushes an error message when memo is more than 255 characters', async () => {
await wrapper.findAll('div.form-group').at(2).find('textarea').setValue(` await wrapper.find('div[data-test="input-textarea').find('textarea').setValue(`
Es ist ein König in Thule, der trinkt Es ist ein König in Thule, der trinkt
Champagner, es geht ihm nichts drüber; Champagner, es geht ihm nichts drüber;
Und wenn er seinen Champagner trinkt, Und wenn er seinen Champagner trinkt,
@ -245,18 +250,20 @@ Mir später weit besser gelingen;
Dann werde ich, taumelnd von Krug zu Krug, Dann werde ich, taumelnd von Krug zu Krug,
Die ganze Welt bezwingen.“`) Die ganze Welt bezwingen.“`)
await flushPromises() await flushPromises()
expect(wrapper.findAll('div.form-group').at(2).find('.invalid-feedback').text()).toBe( expect(
'validations.messages.max', wrapper.find('div[data-test="input-textarea').find('.invalid-feedback').text(),
) ).toBe('validations.messages.max')
}) })
it('flushes no error message when memo is valid', async () => { it('flushes no error message when memo is valid', async () => {
await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await flushPromises() await flushPromises()
expect( expect(
wrapper wrapper
.findAll('div.form-group') .find('div[data-test="input-amount"]')
.at(1)
.find('.invalid-feedback') .find('.invalid-feedback')
.attributes('aria-live'), .attributes('aria-live'),
).toBe('off') ).toBe('off')
@ -274,12 +281,14 @@ Die ganze Welt bezwingen.“`)
it('clears all fields on click', async () => { it('clears all fields on click', async () => {
await wrapper await wrapper
.findAll('div.form-group') .find('div[data-test="input-email"]')
.at(0)
.find('input') .find('input')
.setValue('someone@watches.tv') .setValue('someone@watches.tv')
await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await flushPromises() await flushPromises()
expect(wrapper.vm.form.email).toBe('someone@watches.tv') expect(wrapper.vm.form.email).toBe('someone@watches.tv')
expect(wrapper.vm.form.amount).toBe('87.23') expect(wrapper.vm.form.amount).toBe('87.23')
@ -295,12 +304,14 @@ Die ganze Welt bezwingen.“`)
describe('submit', () => { describe('submit', () => {
beforeEach(async () => { beforeEach(async () => {
await wrapper await wrapper
.findAll('div.form-group') .find('div[data-test="input-email"]')
.at(0)
.find('input') .find('input')
.setValue('someone@watches.tv') .setValue('someone@watches.tv')
await wrapper.findAll('div.form-group').at(1).find('input').setValue('87.23') await wrapper.find('div[data-test="input-amount"]').find('input').setValue('87.23')
await wrapper.findAll('div.form-group').at(2).find('textarea').setValue('Long enough') await wrapper
.find('div[data-test="input-textarea')
.find('textarea')
.setValue('Long enough')
await wrapper.find('form').trigger('submit') await wrapper.find('form').trigger('submit')
await flushPromises() await flushPromises()
}) })
@ -311,7 +322,7 @@ Die ganze Welt bezwingen.“`)
[ [
{ {
email: 'someone@watches.tv', email: 'someone@watches.tv',
amount: 87.23, amount: '87.23',
memo: 'Long enough', memo: 'Long enough',
selected: 'send', selected: 'send',
}, },

2
frontend/src/components/Inputs/InputAmount.vue
View File

@ -7,7 +7,7 @@
:name="name" :name="name"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }" v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
> >
<b-form-group :label="label" :label-for="labelFor"> <b-form-group :label="label" :label-for="labelFor" data-test="input-amount">
<b-form-input <b-form-input
v-model="currentValue" v-model="currentValue"
v-bind="ariaInput" v-bind="ariaInput"

3
frontend/src/components/Inputs/InputEmail.vue
View File

@ -5,10 +5,11 @@
:name="name" :name="name"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }" v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
> >
<b-form-group :label="label" :label-for="labelFor"> <b-form-group :label="label" :label-for="labelFor" data-test="input-email">
<b-form-input <b-form-input
v-model="currentValue" v-model="currentValue"
v-bind="ariaInput" v-bind="ariaInput"
data-test="input-email"
:id="labelFor" :id="labelFor"
:name="name" :name="name"
:placeholder="placeholder" :placeholder="placeholder"

2
frontend/src/components/Inputs/InputTextarea.vue
View File

@ -5,7 +5,7 @@
:name="name" :name="name"
v-slot="{ errors, valid, validated, ariaInput, ariaMsg }" v-slot="{ errors, valid, validated, ariaInput, ariaMsg }"
> >
<b-form-group :label="label" :label-for="labelFor"> <b-form-group :label="label" :label-for="labelFor" data-test="input-textarea">
<b-form-textarea <b-form-textarea
v-model="currentValue" v-model="currentValue"
v-bind="ariaInput" v-bind="ariaInput"

2
frontend/src/pages/Community.vue
View File

@ -103,7 +103,7 @@ export default {
date: '', date: '',
memo: '', memo: '',
hours: 0, hours: 0,
amount: '0.0', amount: '',
} }
} }
}, },