Skip to content

Commit

Permalink
chore(ng-form): fix format
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivan-morandi-zupit
ivan-morandi-zupit committed Sep 18, 2023
1 parent ce4355a commit c2ce5d8
Show file tree
Hide file tree
Showing 6 changed files with 332 additions and 287 deletions.
211 changes: 116 additions & 95 deletions packages/ng-form/src/lib/components/form/form.component.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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<FakeModel>
Expand All @@ -16,7 +16,7 @@ describe('FormComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [FormComponent<FakeModel>],
imports: [ReactiveFormsModule],
imports: [ReactiveFormsModule]
}).compileComponents()

fixture = TestBed.createComponent(FormComponent<FakeModel>)
Expand All @@ -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()
})
})
1 change: 0 additions & 1 deletion packages/ng-form/src/lib/components/form/form.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,6 @@ export class FormComponent<Model> implements OnChanges {

private _instance?: Model


submitFormSave(): void {
const formValue = this.getValue()
this.formSubmit.emit(formValue)
Expand Down
11 changes: 5 additions & 6 deletions packages/ng-form/src/lib/directives/submit.directive.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -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')

Expand All @@ -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')

Expand Down
Loading

0 comments on commit c2ce5d8

Please sign in to comment.