diff --git a/src/components/FormV2/__snapshots__/formv2.spec.ts.snap b/src/components/FormV2/__snapshots__/formv2.spec.ts.snap index 096aa7d..511338a 100644 --- a/src/components/FormV2/__snapshots__/formv2.spec.ts.snap +++ b/src/components/FormV2/__snapshots__/formv2.spec.ts.snap @@ -30,6 +30,11 @@ exports[`PdapFormV2 > calls submit event with form values on valid submission 1` +
+ + + +
`; @@ -63,6 +68,11 @@ exports[`PdapFormV2 > renders default error message when form has errors 1`] = ` +
+ +
Notes are required
+ +
`; @@ -102,6 +112,11 @@ exports[`PdapFormV2 > renders error message when errorMessage prop is provided 1 +
+ + + +
`; @@ -135,5 +150,10 @@ exports[`PdapFormV2 > renders the form element 1`] = ` +
+ + + +
`; diff --git a/src/components/FormV2/formv2.spec.ts b/src/components/FormV2/formv2.spec.ts index bd46453..10738f1 100644 --- a/src/components/FormV2/formv2.spec.ts +++ b/src/components/FormV2/formv2.spec.ts @@ -5,6 +5,7 @@ import PdapFormV2 from './PdapFormV2.vue'; import InputCheckbox from '../InputCheckbox/PdapInputCheckbox.vue'; import InputText from '../InputText/PdapInputText.vue'; import InputPassword from '../InputPassword/PdapInputPassword.vue'; +import InputTextArea from '../InputTextArea/PdapInputTextArea.vue'; vi.mock('vue-router'); vi.mock('vue', async () => { @@ -46,6 +47,7 @@ const BASE_CONFIG = { email: '', password: '', 'ice-cream': false, + notes: '', }, schema: [ { @@ -69,6 +71,12 @@ const BASE_CONFIG = { password: { value: true, message: 'Password is too weak' }, }, }, + { + name: 'notes', + validators: { + required: { value: true, message: 'Notes are required' }, + }, + }, ], id: 'test', name: 'test', @@ -101,6 +109,12 @@ const BASE_CONFIG = { name="ice-cream" label="Ice Cream" :defaultChecked="false" + /> + `, }, @@ -109,6 +123,7 @@ const BASE_CONFIG = { InputCheckbox, InputText, InputPassword, + InputTextArea, }, }, }; @@ -164,6 +179,7 @@ describe('PdapFormV2', () => { await form.find('input[name="email"]').setValue('john@example.com'); await form.find('input[name="password"]').setValue('Password123!'); await form.find('input[name="ice-cream"]').setChecked(); + await form.find('textarea[name="notes"]').setValue('This is a note'); await form.trigger('submit'); await wrapper.vm.$forceUpdate(); @@ -175,6 +191,7 @@ describe('PdapFormV2', () => { email: 'john@example.com', password: 'Password123!', 'ice-cream': true, + notes: 'This is a note', }, expect.any(Event) ); diff --git a/src/components/InputTextArea/PdapInputTextArea.vue b/src/components/InputTextArea/PdapInputTextArea.vue new file mode 100644 index 0000000..3867186 --- /dev/null +++ b/src/components/InputTextArea/PdapInputTextArea.vue @@ -0,0 +1,48 @@ +