This repository has been archived by the owner on Feb 28, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 6
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[WIP] Tout ce qui est relatif au formulaire (#695)
* * ajouter une fonctionnalité de validation au niveau du formulaire * * typo * * renaming * small refactor * * removed unused method * * small fixes * * change form state to be the internal state of the form * added form validation class to represent the return of each validator callback of the form * updated tests and sandbox * * missing doc * * allow to display error message only when form field is touched * * fix errorMessage algo to return errorMessage if messageAfterTouched = false * added use case to sandbox * * renaming * tests * * moved touch closer to validate * * typo * * removed unsused line * * renaming * * renaming * * use form plugin * * use to more strict toBe method * reformat condition and use of variable to hold the value * MODUL-707 - * use non-null assertion operator * MODUL-710 - * access formfield by name * new constructor for the form with form field group * * renaming * MODUL-710 - * renaming and typing * * merge fix * merge fix * * formating * ENA2-4264 - Add multiple validators * ENA2-4264 - Allow toast to contain html * ENA2-4264 - Fix plugin * * missing doc * ENA2-4264 - Move params from constructor to validating class and allow single function validating class * Rebase and fixes * * touch field to mark as touched + validate them * bring back focus if only one field has error * display summary error if it have errors & only one field have an error * MODUL 716 - style scopé pour formulaire (#696) * MODUL-716 - * ajout form.scss * utilisation de classe formulaire au lieu des classe utilitaire * MODUL-716 - * updated snapshot * * use of v-html for validation message * rename prop hasRequiredFields by requiredMarker * MODUL-719 - * form field directive * MODUL-719 - * remove unused setter * remove unused setter * MODUL-719 - * removed unused delclaration * MAJ du style du champ requis * Ajouter une transition accordeon pour l'affichage du message d'erreur * Maj champ requis * MODUL-719 - * removed directive pluggin in favor of vue.directive * added touch test * small fixes * MODUL-719 - * updated tests * updated algo when form field is use on input * MODUL-719 - * add comment for hack-ish code * MODUL-719 - * refactor * * removed weird import * Delete form-field.ts * * added key * renaming * use push in favor of concat * MODUL-719 - * await on forceUpdate * MODUL-719 - * more generic algo * * renamed css class * updated snapshots * throw error if field not found in form * * look like the weird import was necessary * * please travis
- Loading branch information
1 parent
d323851
commit d9b1e76
Showing
28 changed files
with
765 additions
and
177 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,20 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`MForm When the form has no required fields, then it should not show a required label 1`] = `<form id="uuid"> </form>`; | ||
| exports[`MForm When the form has no required fields, then it should not show a required label 1`] = ` | ||
| <form id="uuid" class="m-form"> | ||
| <m-accordion-transition></m-accordion-transition> | ||
| </form> | ||
| `; | ||
|
|
||
| exports[`MForm When the form has required fields, then it should show a required label 1`] = ` | ||
| <form id="uuid"> | ||
| <p class="m-u--require"><span class="m-u--asterisk">*</span> <span class="m-u--typo--precision">m-form:required</span></p> | ||
| <form id="uuid" class="m-form"> | ||
| <m-accordion-transition></m-accordion-transition> | ||
| <p class="required"><span class="required__marker">*</span> <span class="required__label">m-form:required</span></p> | ||
| </form> | ||
| `; | ||
|
|
||
| exports[`MForm should render correctly 1`] = ` | ||
| <form id="uuid"> | ||
| <p class="m-u--require"><span class="m-u--asterisk">*</span> <span class="m-u--typo--precision">m-form:required</span></p> | ||
| <form id="uuid" class="m-form"> | ||
| <m-accordion-transition></m-accordion-transition> | ||
| </form> | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import { createLocalVue, mount, Wrapper } from '@vue/test-utils'; | ||
| import Vue, { VueConstructor } from 'vue'; | ||
| import { resetModulPlugins } from '../../../tests/helpers/component'; | ||
| import { FORM_FIELD_NAME } from '../../directives/directive-names'; | ||
| import { Form } from '../../utils/form/form'; | ||
| import { FormFieldValidation } from '../../utils/form/form-field-validation/form-field-validation'; | ||
| import { FormField } from '../../utils/form/form-field/form-field'; | ||
| import { ModulVue } from '../../utils/vue/vue'; | ||
| import TextfieldPlugin from '../textfield/textfield'; | ||
| import { FormFieldDirective } from './form-field'; | ||
|
|
||
| let mockFormField: any = {}; | ||
|
|
||
| jest.mock('../../utils/form/form-field/form-field', () => { | ||
| return { | ||
| FormField: jest.fn().mockImplementation(() => { | ||
| return mockFormField; | ||
| }) | ||
| }; | ||
| }); | ||
|
|
||
| describe('form-field', () => { | ||
| let element: Wrapper<Vue>; | ||
| let localVue: VueConstructor<ModulVue>; | ||
|
|
||
| beforeEach(() => { | ||
| resetModulPlugins(); | ||
| localVue = createLocalVue(); | ||
| localVue.directive(FORM_FIELD_NAME, FormFieldDirective); | ||
| localVue.use(TextfieldPlugin); | ||
| }); | ||
|
|
||
| describe(`The form validate its fields`, () => { | ||
| mockFormField = { | ||
| shouldFocus: false, | ||
| isTouched: false, | ||
| hasError: true, | ||
| touched: false, | ||
| touch: jest.fn() | ||
| }; | ||
|
|
||
| let formField: FormField<any>; | ||
| let form: Form; | ||
|
|
||
| beforeEach(() => { | ||
| formField = new FormField(() => undefined, [(value: any) => { | ||
| return new FormFieldValidation(true, [''], ['']); | ||
| }]); | ||
|
|
||
| form = new Form({ | ||
| 'a-field': formField | ||
| }); | ||
|
|
||
| element = mount( | ||
| { | ||
| template: `<input v-m-form-field="form.get('a-field')" ref="field"></input>`, | ||
| data(): any { | ||
| return { | ||
| form: form | ||
| }; | ||
| } | ||
| }, | ||
| { localVue: localVue } | ||
| ); | ||
| }); | ||
|
|
||
| it(`the element should have the focus if first invalid`, async () => { | ||
| const spy: any = jest.spyOn(element.find({ ref: 'field' }).element, 'focus'); | ||
| form.focusFirstFieldWithError(); | ||
| expect(mockFormField.shouldFocus).toBe(true); | ||
|
|
||
| await element.vm.$forceUpdate(); | ||
|
|
||
| expect(mockFormField.shouldFocus).toBe(false); | ||
| expect(spy).toHaveBeenCalled(); | ||
| }); | ||
|
|
||
| it(`it should touch the form field on blur`, () => { | ||
| const spy: any = jest.spyOn(mockFormField, 'touch'); | ||
|
|
||
| element.find({ ref: 'field' }).element.focus(); | ||
| element.find({ ref: 'field' }).element.blur(); | ||
|
|
||
| expect(spy).toBeCalled(); | ||
| }); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| import { FormField } from 'src/utils/form/form-field/form-field'; | ||
| import { DirectiveOptions, VNode, VNodeDirective } from 'vue'; | ||
|
|
||
| let touchFormField: any; | ||
|
|
||
| export const FormFieldDirective: DirectiveOptions = { | ||
| inserted( | ||
| el: HTMLElement, | ||
| binding: VNodeDirective, | ||
| vnode: VNode | ||
| ): void { | ||
| const formField: FormField<any> = binding.value; | ||
| touchFormField = () => formField.touch(); | ||
|
|
||
| el.addEventListener('blur', touchFormField, true); | ||
| }, | ||
| update( | ||
| el: HTMLElement, | ||
| binding: VNodeDirective, | ||
| vnode: VNode | ||
| ): void { | ||
| const formField: FormField<any> = binding.value; | ||
|
|
||
| if (formField.shouldFocus) { | ||
| const selector: string = 'input, textarea, [contenteditable=true]'; | ||
| let container: HTMLDivElement = document.createElement('div'); | ||
| container.appendChild(el); | ||
|
|
||
| const elements: NodeListOf<HTMLInputElement> = container.querySelectorAll(selector); | ||
|
|
||
| if (elements.length > 0) { | ||
| elements[0].focus(); | ||
| } | ||
|
|
||
| formField.shouldFocus = false; | ||
| } | ||
| }, | ||
| unbind( | ||
| el: HTMLElement, | ||
| binding: VNodeDirective | ||
| ): void { | ||
| el.removeEventListener('blur', touchFormField, true); | ||
| } | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.