角度2カスタム検証ユニットのテスト

Question

私はこのガイドhttps://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validationに沿って、カスタム角度（角度2.0.0）検証を書いています。

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

私のカスタム検証ディレクティブにユニットテストを追加しようとしています。

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

これらのオブジェクトにはすべてアクセスしていますが、入力の妥当性に関する情報はありません。ユニットテストの中の自分の入力のNgControlにアクセスする方法や、有効/無効（カスタム検証）の入力フィールドをチェックする方法はありますか？

Answer 1

あなたがする必要があるのは、NgFormのインジェクタを得ることです。それを理解するにはしばらく時間がかかりました。私はあなたがちょうどdebugElementからそれを得ることができると思ったが、それはあなたの子供からそれを得る必要があるように見える。

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

ザ・あなただけの

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

でフォームグループから個々のコントロールを得ることができますそれとも、単に特定のエラー以下

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

ためのフォームを確認することができますすることは完全なテスト

です

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 !== 'peeskillet@stackoverflow.com') { 
     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 = 'bad@email.com'; 
     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 = 'peeskillet@stackoverflow.com'; 
     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); 
    }); 
    })); 
}); 

---

_{からFound it in the source code tests}