I'm learning Angular 2 and unit testing using @angular/cli 1.0.0-beta.30 and had a bit of success testing one aspect of a form field's validity, but not all. I'm using an inline template in my component for the time being to remove a layer of complexity for now (a form template in a separate file introduces asynchronicity, correct?).

The ngOnInit() defines a name property that includes the validators for required and minLength. Currently an empty form field will correctly trigger the required validator but not the minLength validator. The name.errors array in the test does not contain any reference to required at all, name.errors['minLength'] returns undefined. Does minLength need to be handled asynchronously? I'm having trouble finding docs or examples that fit my problem.

// signup-form.component.ts

...

export class SignupFormComponent implements OnInit {



    user: FormGroup;



    constructor(private fb: FormBuilder) {

    }



    ngOnInit() {

        this.user = this.fb.group({

            name: ['', [Validators.required, Validators.minLength(2)]],

            account: this.fb.group({

                email: ['', Validators.required, Validators.pattern([^ @]*@[^ @]*)],

                confirm: ['', Validators.required]

            })

        })

    }



    onSubmit({ value, valid }: { value: User, valid: boolean }) {

        console.log(value, valid);

    }



}

My test

// signup-form.component.spec.ts

import { SignupFormComponent } from './signup-form.component';



describe('SignupFormComponent', () => {

    let component: SignupFormComponent;

    let fixture: ComponentFixture<SignupFormComponent>;



    beforeEach(async(() => {

        TestBed.configureTestingModule({

            declarations: [SignupFormComponent],

            imports: [

                ReactiveFormsModule,

                FormsModule

            ]

        })

            .compileComponents();

    }));



    beforeEach(() => {

        fixture = TestBed.createComponent(SignupFormComponent);

        component = fixture.componentInstance;

        component.ngOnInit();

        fixture.detectChanges();

    });



    it('should create', () => {

        expect(component).toBeTruthy();

    });



    it('form invalid when empty', () => {

        expect(component.user.valid).toBeFalsy();

    });



    it('name field validity', () => {

        let name = component.user.controls['name'];

        expect(name.valid).toBeFalsy();



        let errors = {};

        name.setValue();

        errors = name.errors || {};

        expect(errors['required']).toBeTruthy(); // this works

        expect(errors['minLength']).toBeTruthy(); // this fails, undefined

    });



});