diff --git a/packages/ng-form/src/lib/components/form/form.component.spec.ts b/packages/ng-form/src/lib/components/form/form.component.spec.ts index 0a5cd64..57f6f93 100644 --- a/packages/ng-form/src/lib/components/form/form.component.spec.ts +++ b/packages/ng-form/src/lib/components/form/form.component.spec.ts @@ -1,13 +1,13 @@ -import {ComponentFixture, TestBed} from '@angular/core/testing' -import {FormComponent} from './form.component' -import {FormBuilder, ReactiveFormsModule, Validators} from "@angular/forms"; +import { ComponentFixture, TestBed } from '@angular/core/testing' +import { FormComponent } from './form.component' +import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms' describe('FormComponent', () => { - const fb: FormBuilder = new FormBuilder(); + const fb: FormBuilder = new FormBuilder() class FakeModel { - email: string; - password: string; + email: string + password: string } let component: FormComponent @@ -16,7 +16,7 @@ describe('FormComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ declarations: [FormComponent], - imports: [ReactiveFormsModule], + imports: [ReactiveFormsModule] }).compileComponents() fixture = TestBed.createComponent(FormComponent) @@ -25,147 +25,168 @@ describe('FormComponent', () => { it('submittable should be truthy only if form data is valid', () => { component.form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - }); + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) fixture.detectChanges() - expect(component.submittable).toBeFalsy(); + expect(component.submittable).toBeFalsy() component.form.setValue({ - email: 'email', - password: 'password' - }); - expect(component.submittable).toBeTruthy(); + email: 'email', + password: 'password' + }) + expect(component.submittable).toBeTruthy() }) it('pristine should be truthy only if form is pristine', () => { component.form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - });; + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) fixture.detectChanges() - expect(component.pristine).toBeTruthy(); - component.form.markAsDirty(); - expect(component.pristine).toBeFalsy(); + expect(component.pristine).toBeTruthy() + component.form.markAsDirty() + expect(component.pristine).toBeFalsy() }) it('instance update should reset form data', () => { component.form = fb.group({ - email: fb.control("email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); + email: fb.control('email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) fixture.detectChanges() - expect(component.form.getRawValue()).toEqual({"email": "email", "password": "password"}); - component.instance = {"email": "email2", "password": "password2"}; - expect(component.form.getRawValue()).toEqual({"email": "email2", "password": "password2"}); + expect(component.form.getRawValue()).toEqual({ + email: 'email', + password: 'password' + }) + component.instance = { email: 'email2', password: 'password2' } + expect(component.form.getRawValue()).toEqual({ + email: 'email2', + password: 'password2' + }) }) it('formSubmit should emit when submit directive calls submitFormSave', () => { component.form = fb.group({ - email: fb.control("email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); + email: fb.control('email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) fixture.detectChanges() jest.spyOn(component.formSubmit, 'emit') - component.submitFormSave(); + component.submitFormSave() - expect(component.formSubmit.emit).toHaveBeenCalledWith({"email": "email", "password": "password"}) + expect(component.formSubmit.emit).toHaveBeenCalledWith({ + email: 'email', + password: 'password' + }) }) it('modelToFormValueMapper should transform instance to form data', () => { component.form = fb.group({ username: fb.control(undefined, [Validators.required]), password: fb.control(undefined, [Validators.required]) - }); - component.modelToFormValueMapper = (instance: FakeModel) => ({"username": instance.email, "password": instance.password}) + }) + component.modelToFormValueMapper = (instance: FakeModel) => ({ + username: instance.email, + password: instance.password + }) fixture.detectChanges() - component.instance = {"email": "username@email", "password": "password"}; - expect(component.form.getRawValue()).toEqual({"username": "username@email", "password": "password"}); + component.instance = { email: 'username@email', password: 'password' } + expect(component.form.getRawValue()).toEqual({ + username: 'username@email', + password: 'password' + }) }) it('formValueToModelMapper should transform form data to instance', () => { component.form = fb.group({ - username: fb.control("username@email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); - component.formValueToModelMapper = (formData: {username: string; password: string }) => ({"email": formData.username, "password": formData.password}) + username: fb.control('username@email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) + component.formValueToModelMapper = (formData: { + username: string + password: string + }) => ({ email: formData.username, password: formData.password }) fixture.detectChanges() - expect(component.getValue()).toEqual({"email": "username@email", "password": "password"}); + expect(component.getValue()).toEqual({ + email: 'username@email', + password: 'password' + }) }) it('form should be enabled if enabled is true and formDataLoaded is true', () => { - component.form = fb.group({ - username: fb.control("username@email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); - component.enabled = false; - component.formDataLoaded = false; - component.ngOnChanges(undefined); + component.form = fb.group({ + username: fb.control('username@email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) + component.enabled = false + component.formDataLoaded = false + component.ngOnChanges(undefined) - expect(component.form.enabled).toBeFalsy(); + expect(component.form.enabled).toBeFalsy() - component.enabled = true; - component.formDataLoaded = false; - component.ngOnChanges(undefined); + component.enabled = true + component.formDataLoaded = false + component.ngOnChanges(undefined) - expect(component.form.enabled).toBeFalsy(); + expect(component.form.enabled).toBeFalsy() - component.enabled = false; - component.formDataLoaded = true; - component.ngOnChanges(undefined); + component.enabled = false + component.formDataLoaded = true + component.ngOnChanges(undefined) - expect(component.form.enabled).toBeFalsy(); + expect(component.form.enabled).toBeFalsy() - component.enabled = true; - component.formDataLoaded = true; - component.ngOnChanges(undefined); + component.enabled = true + component.formDataLoaded = true + component.ngOnChanges(undefined) - expect(component.form.enabled).toBeTruthy(); + expect(component.form.enabled).toBeTruthy() }) it('form should allow to keep some fields disabled when enabling the others', () => { - component.form = fb.group({ - username: fb.control("username@email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); - component.form.disable(); - component.enabled = true; - component.formDataLoaded = true; - component.disabledFields = ['username']; - component.ngOnChanges(undefined); - - expect(component.form.enabled).toBeTruthy(); - expect(component.form.get("username").enabled).toBeFalsy(); - expect(component.form.get("password").enabled).toBeTruthy(); + component.form = fb.group({ + username: fb.control('username@email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) + component.form.disable() + component.enabled = true + component.formDataLoaded = true + component.disabledFields = ['username'] + component.ngOnChanges(undefined) + + expect(component.form.enabled).toBeTruthy() + expect(component.form.get('username').enabled).toBeFalsy() + expect(component.form.get('password').enabled).toBeTruthy() }) it('form should update enabled field when form is enabled only when forceEnabling is true', () => { - component.form = fb.group({ - username: fb.control("username@email", [Validators.required]), - password: fb.control("password", [Validators.required]) - }); - - component.form.enable(); - component.enabled = true; - component.formDataLoaded = true; - component.disabledFields = ['username']; - component.ngOnChanges(undefined); - - expect(component.form.enabled).toBeTruthy(); - expect(component.form.get("username").enabled).toBeTruthy(); - expect(component.form.get("password").enabled).toBeTruthy(); - - component.forceEnabling = true; - component.ngOnChanges(undefined); - - expect(component.form.enabled).toBeTruthy(); - expect(component.form.get("username").enabled).toBeFalsy(); - expect(component.form.get("password").enabled).toBeTruthy(); + component.form = fb.group({ + username: fb.control('username@email', [Validators.required]), + password: fb.control('password', [Validators.required]) + }) + + component.form.enable() + component.enabled = true + component.formDataLoaded = true + component.disabledFields = ['username'] + component.ngOnChanges(undefined) + + expect(component.form.enabled).toBeTruthy() + expect(component.form.get('username').enabled).toBeTruthy() + expect(component.form.get('password').enabled).toBeTruthy() + + component.forceEnabling = true + component.ngOnChanges(undefined) + + expect(component.form.enabled).toBeTruthy() + expect(component.form.get('username').enabled).toBeFalsy() + expect(component.form.get('password').enabled).toBeTruthy() }) }) diff --git a/packages/ng-form/src/lib/components/form/form.component.ts b/packages/ng-form/src/lib/components/form/form.component.ts index 997ebf5..476e9e5 100644 --- a/packages/ng-form/src/lib/components/form/form.component.ts +++ b/packages/ng-form/src/lib/components/form/form.component.ts @@ -58,7 +58,6 @@ export class FormComponent implements OnChanges { private _instance?: Model - submitFormSave(): void { const formValue = this.getValue() this.formSubmit.emit(formValue) diff --git a/packages/ng-form/src/lib/directives/submit.directive.spec.ts b/packages/ng-form/src/lib/directives/submit.directive.spec.ts index 656eef4..c138d32 100644 --- a/packages/ng-form/src/lib/directives/submit.directive.spec.ts +++ b/packages/ng-form/src/lib/directives/submit.directive.spec.ts @@ -1,13 +1,12 @@ -import {SubmitDirective} from './submit.directive' -import {FormBuilder, Validators} from '@angular/forms' - +import { SubmitDirective } from './submit.directive' +import { FormBuilder, Validators } from '@angular/forms' describe('SubmitDirective', () => { - const fb: FormBuilder = new FormBuilder(); + const fb: FormBuilder = new FormBuilder() it('ngFormSubmit should emit a submit event when form is valid', () => { const directive = new SubmitDirective() - directive.form = fb.control(123, [Validators.required]) + directive.form = fb.control(123, [Validators.required]) jest.spyOn(directive.ngFormSubmit, 'emit') @@ -17,7 +16,7 @@ describe('SubmitDirective', () => { it('ngFormSubmit should raise an error on submit if form is invalid', () => { const directive = new SubmitDirective() - directive.form = fb.control(undefined, [Validators.required]) + directive.form = fb.control(undefined, [Validators.required]) jest.spyOn(directive.ngFormSubmit, 'emit') diff --git a/packages/ng-form/src/lib/utils/form.spec.ts b/packages/ng-form/src/lib/utils/form.spec.ts index 2e3ccb9..b7ba6f4 100644 --- a/packages/ng-form/src/lib/utils/form.spec.ts +++ b/packages/ng-form/src/lib/utils/form.spec.ts @@ -1,119 +1,128 @@ -import {FormBuilder, Validators} from "@angular/forms"; +import { FormBuilder, Validators } from '@angular/forms' import { FormValidationResult, hasAnyRequiredErrors, setFormEnabled, updateFormTreeValueAndValidity, - validateForm, validateFormWithException -} from "./form"; + validateForm, + validateFormWithException +} from './form' describe('Form Utilities', () => { - const fb = new FormBuilder(); + const fb = new FormBuilder() it('setFormEnabled should enable and disable form', () => { const form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - }); - - setFormEnabled(form, true); - expect(form.enabled).toBeTruthy(); - setFormEnabled(form, false); - expect(form.enabled).toBeFalsy(); + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) + + setFormEnabled(form, true) + expect(form.enabled).toBeTruthy() + setFormEnabled(form, false) + expect(form.enabled).toBeFalsy() }) it('setFormEnabled should allow to keep some fields disabled when enabling the form', () => { const form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - }); - - setFormEnabled(form, false); - expect(form.enabled).toBeFalsy(); - setFormEnabled(form, true, {disableFields: ['email']}); - expect(form.enabled).toBeTruthy(); - expect(form.get('email').enabled).toBeFalsy(); - expect(form.get('password').enabled).toBeTruthy(); + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) + + setFormEnabled(form, false) + expect(form.enabled).toBeFalsy() + setFormEnabled(form, true, { disableFields: ['email'] }) + expect(form.enabled).toBeTruthy() + expect(form.get('email').enabled).toBeFalsy() + expect(form.get('password').enabled).toBeTruthy() }) it('setFormEnabled should allow to force update the enabled fields', () => { const form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - }); - - setFormEnabled(form, true); - expect(form.enabled).toBeTruthy(); - expect(form.get('email').enabled).toBeTruthy(); - expect(form.get('password').enabled).toBeTruthy(); - - setFormEnabled(form, true, {disableFields: ['email'], force: true}); - expect(form.enabled).toBeTruthy(); - expect(form.get('email').enabled).toBeFalsy(); - expect(form.get('password').enabled).toBeTruthy(); + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) + + setFormEnabled(form, true) + expect(form.enabled).toBeTruthy() + expect(form.get('email').enabled).toBeTruthy() + expect(form.get('password').enabled).toBeTruthy() + + setFormEnabled(form, true, { disableFields: ['email'], force: true }) + expect(form.enabled).toBeTruthy() + expect(form.get('email').enabled).toBeFalsy() + expect(form.get('password').enabled).toBeTruthy() }) - it('updateFormTreeValueAndValidity should mark the whole form as dirty and update its value and validity', () => { - const form = fb.group({ - email: fb.control(undefined, [Validators.required]), - password: fb.control(undefined, [Validators.required]) - }); - - form.setValue({"email": "email", "password": "password"}); + it('updateFormTreeValueAndValidity should mark the whole form as dirty and update its value and validity', () => { + const form = fb.group({ + email: fb.control(undefined, [Validators.required]), + password: fb.control(undefined, [Validators.required]) + }) - expect(form.dirty).toBeFalsy(); + form.setValue({ email: 'email', password: 'password' }) - updateFormTreeValueAndValidity(form); - expect(form.dirty).toBeTruthy(); - expect(form.get('email').dirty).toBeTruthy(); + expect(form.dirty).toBeFalsy() - expect(form.get('password').dirty).toBeTruthy(); - expect(form.valid).toBeTruthy(); - }); + updateFormTreeValueAndValidity(form) + expect(form.dirty).toBeTruthy() + expect(form.get('email').dirty).toBeTruthy() - it('hasAnyRequiredErrors should return true only if the form has any required errors', () => { - const form = fb.group({ - email: fb.control(undefined, [Validators.required, Validators.maxLength(10)]), - password: fb.control(undefined, [Validators.required]) - }); + expect(form.get('password').dirty).toBeTruthy() + expect(form.valid).toBeTruthy() + }) - expect(hasAnyRequiredErrors(form)).toBeTruthy(); + it('hasAnyRequiredErrors should return true only if the form has any required errors', () => { + const form = fb.group({ + email: fb.control(undefined, [ + Validators.required, + Validators.maxLength(10) + ]), + password: fb.control(undefined, [Validators.required]) + }) - form.setValue({"email": "too_long_email_example", "password": "password"}); - expect(hasAnyRequiredErrors(form)).toBeFalsy(); + expect(hasAnyRequiredErrors(form)).toBeTruthy() - form.setValue({"email": "email", "password": "password"}); - expect(hasAnyRequiredErrors(form)).toBeFalsy(); - }); + form.setValue({ email: 'too_long_email_example', password: 'password' }) + expect(hasAnyRequiredErrors(form)).toBeFalsy() + form.setValue({ email: 'email', password: 'password' }) + expect(hasAnyRequiredErrors(form)).toBeFalsy() + }) - it('validateForm should return correct value based on form validity and required fields', () => { - const form = fb.group({ - email: fb.control(undefined, [Validators.required, Validators.maxLength(10)]), - password: fb.control(undefined, [Validators.required]) - }); + it('validateForm should return correct value based on form validity and required fields', () => { + const form = fb.group({ + email: fb.control(undefined, [ + Validators.required, + Validators.maxLength(10) + ]), + password: fb.control(undefined, [Validators.required]) + }) - expect(validateForm(form)).toBe(FormValidationResult.MISSING_REQUIRED); + expect(validateForm(form)).toBe(FormValidationResult.MISSING_REQUIRED) - form.setValue({"email": "too_long_email_example", "password": "password"}); - expect(validateForm(form)).toBe(FormValidationResult.INVALID); + form.setValue({ email: 'too_long_email_example', password: 'password' }) + expect(validateForm(form)).toBe(FormValidationResult.INVALID) - form.setValue({"email": "email", "password": "password"}); - expect(validateForm(form)).toBe(FormValidationResult.VALID); - }); + form.setValue({ email: 'email', password: 'password' }) + expect(validateForm(form)).toBe(FormValidationResult.VALID) + }) - it('validateForm should raise exception if the form is not valid', () => { - const form = fb.group({ - email: fb.control(undefined, [Validators.required, Validators.maxLength(10)]), - password: fb.control(undefined, [Validators.required]) - }); + it('validateForm should raise exception if the form is not valid', () => { + const form = fb.group({ + email: fb.control(undefined, [ + Validators.required, + Validators.maxLength(10) + ]), + password: fb.control(undefined, [Validators.required]) + }) - expect(() => validateFormWithException(form)).toThrowError(); + expect(() => validateFormWithException(form)).toThrowError() - form.setValue({"email": "too_long_email_example", "password": "password"}); - expect(() => validateFormWithException(form)).toThrowError(); + form.setValue({ email: 'too_long_email_example', password: 'password' }) + expect(() => validateFormWithException(form)).toThrowError() - form.setValue({"email": "email", "password": "password"}); - expect(() => validateFormWithException(form)).not.toThrowError(); - }); + form.setValue({ email: 'email', password: 'password' }) + expect(() => validateFormWithException(form)).not.toThrowError() + }) }) diff --git a/packages/ng-form/src/lib/utils/validators.spec.ts b/packages/ng-form/src/lib/utils/validators.spec.ts index b195f15..832b373 100644 --- a/packages/ng-form/src/lib/utils/validators.spec.ts +++ b/packages/ng-form/src/lib/utils/validators.spec.ts @@ -1,146 +1,158 @@ -import {FormBuilder, Validators} from "@angular/forms"; -import {AppValidators} from "./validators"; +import { FormBuilder, Validators } from '@angular/forms' +import { AppValidators } from './validators' describe('Form Validators', () => { - const fb = new FormBuilder(); + const fb = new FormBuilder() it('passwordValidators should validate required and strong password', () => { - const formControl = fb.control(undefined, AppValidators.passwordValidators); - expect(formControl.valid).toBeFalsy(); + const formControl = fb.control(undefined, AppValidators.passwordValidators) + expect(formControl.valid).toBeFalsy() - formControl.setValue('12345678'); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('12345678') + expect(formControl.valid).toBeFalsy() - formControl.setValue('password'); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('password') + expect(formControl.valid).toBeFalsy() - formControl.setValue('password123'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('password123') + expect(formControl.valid).toBeTruthy() - formControl.setValue('password#'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('password#') + expect(formControl.valid).toBeTruthy() - formControl.setValue('PASSWORD123'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('PASSWORD123') + expect(formControl.valid).toBeTruthy() - formControl.setValue('PASSWORD#'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('PASSWORD#') + expect(formControl.valid).toBeTruthy() - formControl.setValue('PASSWORD123#'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('PASSWORD123#') + expect(formControl.valid).toBeTruthy() - formControl.setValue('Pass0word#'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('Pass0word#') + expect(formControl.valid).toBeTruthy() }) it('matchPassword should validate that 2 password fields are equals', () => { const form = fb.group( - { - password1: fb.control('', AppValidators.passwordValidators), - password2: fb.control('', [Validators.required]), - }, - { - validators: AppValidators.matchPassword('password1', 'password2'), - } - ); + { + password1: fb.control('', AppValidators.passwordValidators), + password2: fb.control('', [Validators.required]) + }, + { + validators: AppValidators.matchPassword('password1', 'password2') + } + ) - expect(form.valid).toBeFalsy(); + expect(form.valid).toBeFalsy() - form.setValue({password1: "Pass0word#", password2: ""}); - expect(form.valid).toBeFalsy(); + form.setValue({ password1: 'Pass0word#', password2: '' }) + expect(form.valid).toBeFalsy() - form.setValue({password1: "", password2: "Pass0word#"}); - expect(form.valid).toBeFalsy(); + form.setValue({ password1: '', password2: 'Pass0word#' }) + expect(form.valid).toBeFalsy() - form.setValue({password1: "Pass0word#", password2: "Pass1word#"}); - expect(form.valid).toBeFalsy(); + form.setValue({ password1: 'Pass0word#', password2: 'Pass1word#' }) + expect(form.valid).toBeFalsy() - form.setValue({password1: "Pass0word#", password2: "Pass0word#"}); - expect(form.valid).toBeTruthy(); + form.setValue({ password1: 'Pass0word#', password2: 'Pass0word#' }) + expect(form.valid).toBeTruthy() }) it('notBlank should validate a string to be not empty', () => { - const formControl = fb.control(undefined, [AppValidators.notBlank()]); - expect(formControl.valid).toBeFalsy(); + const formControl = fb.control(undefined, [AppValidators.notBlank()]) + expect(formControl.valid).toBeFalsy() - formControl.setValue(''); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('') + expect(formControl.valid).toBeFalsy() - formControl.setValue(' '); - expect(formControl.valid).toBeFalsy(); + formControl.setValue(' ') + expect(formControl.valid).toBeFalsy() - formControl.setValue('something'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('something') + expect(formControl.valid).toBeTruthy() }) it('email should validate that a mail is valid', () => { - const formControl = fb.control('email', AppValidators.email()); + const formControl = fb.control('email', AppValidators.email()) - expect(formControl.valid).toBeFalsy(); + expect(formControl.valid).toBeFalsy() - formControl.setValue('email@something'); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('email@something') + expect(formControl.valid).toBeFalsy() - formControl.setValue('email@something.tld'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('email@something.tld') + expect(formControl.valid).toBeTruthy() }) it('phoneNumber should validate that the phone number is valid', () => { - const formControl = fb.control('123', AppValidators.phoneNumber()); + const formControl = fb.control('123', AppValidators.phoneNumber()) - expect(formControl.valid).toBeFalsy(); + expect(formControl.valid).toBeFalsy() - formControl.setValue('+39123'); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('+39123') + expect(formControl.valid).toBeFalsy() - formControl.setValue('+39123123123123123123123123132'); - expect(formControl.valid).toBeFalsy(); + formControl.setValue('+39123123123123123123123123132') + expect(formControl.valid).toBeFalsy() - formControl.setValue('+391231231231'); - expect(formControl.valid).toBeTruthy(); + formControl.setValue('+391231231231') + expect(formControl.valid).toBeTruthy() }) it('maxDate should validate that input date is not after maxDate', () => { - const formControl = fb.control(new Date('2019-01-01'), AppValidators.maxDate(new Date('2020-01-01'))); + const formControl = fb.control( + new Date('2019-01-01'), + AppValidators.maxDate(new Date('2020-01-01')) + ) - expect(formControl.valid).toBeTruthy(); + expect(formControl.valid).toBeTruthy() - formControl.setValue(new Date('2020-01-01')); - expect(formControl.valid).toBeTruthy(); + formControl.setValue(new Date('2020-01-01')) + expect(formControl.valid).toBeTruthy() - formControl.setValue(new Date('2020-01-02')); - expect(formControl.valid).toBeFalsy(); + formControl.setValue(new Date('2020-01-02')) + expect(formControl.valid).toBeFalsy() }) it('minDate should validate that input date is not before minDate', () => { - const formControl = fb.control(new Date('2020-01-02'), AppValidators.minDate(new Date('2020-01-01'))); + const formControl = fb.control( + new Date('2020-01-02'), + AppValidators.minDate(new Date('2020-01-01')) + ) - expect(formControl.valid).toBeTruthy(); + expect(formControl.valid).toBeTruthy() - formControl.setValue(new Date('2020-01-01')); - expect(formControl.valid).toBeTruthy(); + formControl.setValue(new Date('2020-01-01')) + expect(formControl.valid).toBeTruthy() - formControl.setValue(new Date('2019-01-01')); - expect(formControl.valid).toBeFalsy(); + formControl.setValue(new Date('2019-01-01')) + expect(formControl.valid).toBeFalsy() }) it('startDateBeforeEndDate should validate that start date is not after end date', () => { const form = fb.group( - { - startDate: fb.control(new Date('2019-01-01')), - endDate: fb.control(new Date('2020-01-01')), - }, - { - validators: AppValidators.startDateBeforeEndDate('startDate', 'endDate'), - } - ); - - expect(form.valid).toBeTruthy(); - - form.setValue({startDate: new Date('2020-01-01'), endDate: new Date('2020-01-01')}); - expect(form.valid).toBeTruthy(); - - form.setValue({startDate: new Date('2021-01-01'), endDate: new Date('2020-01-01')}); - expect(form.valid).toBeFalsy(); + { + startDate: fb.control(new Date('2019-01-01')), + endDate: fb.control(new Date('2020-01-01')) + }, + { + validators: AppValidators.startDateBeforeEndDate('startDate', 'endDate') + } + ) + + expect(form.valid).toBeTruthy() + + form.setValue({ + startDate: new Date('2020-01-01'), + endDate: new Date('2020-01-01') + }) + expect(form.valid).toBeTruthy() + + form.setValue({ + startDate: new Date('2021-01-01'), + endDate: new Date('2020-01-01') + }) + expect(form.valid).toBeFalsy() }) }) diff --git a/packages/ng-form/src/lib/utils/validators.ts b/packages/ng-form/src/lib/utils/validators.ts index 5c09eda..c28f4c8 100644 --- a/packages/ng-form/src/lib/utils/validators.ts +++ b/packages/ng-form/src/lib/utils/validators.ts @@ -1,16 +1,21 @@ -import {AbstractControl, ValidationErrors, ValidatorFn, Validators} from '@angular/forms' +import { + AbstractControl, + ValidationErrors, + ValidatorFn, + Validators +} from '@angular/forms' export class AppValidators { static readonly passwordValidators = [ Validators.required, Validators.pattern( - /^((?=\S*?[A-Za-z])(?=\S*?[0-9$-/:-?{-~!"^_`£#€@]).{0,})\S$/ + /^((?=\S*?[A-Za-z])(?=\S*?[0-9$-/:-?{-~!"^_`£#€@]).{0,})\S$/ ) ] static matchPassword( - firstInputName: string, - secondInputName: string + firstInputName: string, + secondInputName: string ): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const password = control.get(firstInputName)?.value @@ -18,7 +23,7 @@ export class AppValidators { if (password && confirm && password !== confirm) { const confirmControl = control.get(secondInputName) - const errors = {noMatch: true} + const errors = { noMatch: true } confirmControl?.setErrors(errors) return errors @@ -32,10 +37,10 @@ export class AppValidators { return (control: AbstractControl): ValidationErrors | null => { const text = control.value?.toString() ?? '' if (text.length === 0) { - return {blank: true} + return { blank: true } } - return text.trim() === '' ? {blank: true} : null + return text.trim() === '' ? { blank: true } : null } } @@ -46,7 +51,7 @@ export class AppValidators { const patternValidatorFn = Validators.pattern(/.*@.*\..*/) const patternError = patternValidatorFn(control) if (patternError) { - return {email: true} + return { email: true } } return null } @@ -58,14 +63,14 @@ export class AppValidators { return (control: AbstractControl): ValidationErrors | null => { const patternValidatorFn = Validators.pattern('\\+?1?\\d{9,15}') const patternError = patternValidatorFn(control) - return patternError ? {phoneNumber: true} : null + return patternError ? { phoneNumber: true } : null } } static maxDate(maxDate: Date): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (control.value && control.value > maxDate) { - return {maxDate} + return { maxDate } } return null @@ -75,7 +80,7 @@ export class AppValidators { static minDate(minDate: Date): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { if (control.value && control.value < minDate) { - return {minDate} + return { minDate } } return null @@ -83,8 +88,8 @@ export class AppValidators { } static startDateBeforeEndDate( - startDateInputName: string, - endDateInputName: string + startDateInputName: string, + endDateInputName: string ): ValidatorFn { return (control: AbstractControl): ValidationErrors | null => { const startDateValue = control.get(startDateInputName)?.value @@ -98,10 +103,10 @@ export class AppValidators { const endDate = new Date(endDateValue) if (startDate.getTime() > endDate.getTime()) { - return {startDateAfterEndDate: true} + return { startDateAfterEndDate: true } } return null } } -} \ No newline at end of file +}