Angular 2 Custom Test Modulation Testing

Question

I am writing a custom angular check (Angular 2.0.0), following this guide https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validation .

@Directive({ selector: '[ngModel][emailValidator]', providers: [{provide: NG_VALIDATORS, useExisting: EmailValidatorDirective, multi: true}] }) export class EmailValidatorDirective implements Validator 

Now I'm trying to add unit test to my own validation directive.

 beforeEach(() => { fixture = TestBed.createComponent(EmailComponent); component = fixture.componentInstance; de = fixture.debugElement; el = de.nativeElement; component = de.componentInstance; emailField = de.query(By.css('input')).nativeElement; }); 

I refer to all these objects, but no one has any information about the validity of my input. Does anyone know how to access NgControl of my input inside Unit tests, or how I can check a valid / invalid (user confirmation) input field.

Answer 1

What you need to do is get an injector with NgForm . It took me a while to figure this out. I thought you could just get it from debugElement , but it looks like you need to get it from it. ¹ .

 let form: NgForm = fixture.debugElement.children[0].injector.get(NgForm); 

You can simply get individual controls from a form group with

 let emailControl = form.control.get('email'); expect(emailControl.valid).toBe(true); 

Or you can just check the form for a specific error.

 expect(form.control.hasError('emailInvalid', ['email'])).toBe(true); 

Below is a complete test

 import { Component, forwardRef, Directive } from '@angular/core'; import { TestBed, getTestBed, async } from '@angular/core/testing'; import { FormsModule, NG_VALIDATORS, Validator, AbstractControl, NgForm } from '@angular/forms'; import { dispatchEvent } from '@angular/platform-browser/testing/browser_util'; import { By } from '@angular/platform-browser'; @Directive({ selector: '[ngModel][validEmail]', providers: [ { provide: NG_VALIDATORS, useExisting: forwardRef(() => EmailValidatorDirective), multi: true } ] }) class EmailValidatorDirective implements Validator { validate(c: AbstractControl): { [key: string]: any } { if (c.value !== ' [e-mail] ') { return { notPeeskillet: true }; } return null; } } @Component({ template: ` <form> <input name="email" [ngModel]="email" validEmail /> </form> ` }) class TestComponent { email; } describe('component: TestComponent', () => { beforeEach(() => { TestBed.configureTestingModule({ imports: [FormsModule], declarations: [TestComponent, EmailValidatorDirective] }); }); it('should validate', async(() => { let fixture = TestBed.createComponent(TestComponent); let comp = fixture.componentInstance; let debug = fixture.debugElement; let input = debug.query(By.css('[name=email]')); fixture.detectChanges(); fixture.whenStable().then(() => { input.nativeElement.value = ' [e-mail] '; dispatchEvent(input.nativeElement, 'input'); fixture.detectChanges(); let form: NgForm = debug.children[0].injector.get(NgForm); let control = form.control.get('email'); expect(control.hasError('notPeeskillet')).toBe(true); expect(form.control.valid).toEqual(false); expect(form.control.hasError('notPeeskillet', ['email'])).toEqual(true); input.nativeElement.value = ' [e-mail] '; dispatchEvent(input.nativeElement, 'input'); fixture.detectChanges(); expect(control.hasError('notPeeskillet')).toBe(false); expect(form.control.valid).toEqual(true); expect(form.control.hasError('notPeeskillet', ['email'])).toEqual(false); }); })); }); 

---

_{1 - Found in source code tests}