Angular2 如何对自定义验证器指令进行单元测试

# Angular 2中自定义验证器指令的单元测试

typescript
// even-number-validator.directive.ts
import { Directive, Input } from '@angular/core';
import { NG_VALIDATORS, Validator, AbstractControl, ValidationErrors } from '@angular/forms';
@Directive({
  selector: '[appEvenNumberValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: EvenNumberValidatorDirective, multi: true }]
})
export class EvenNumberValidatorDirective implements Validator {
  validate(control: AbstractControl): ValidationErrors | null {
    const inputValue = control.value;
    if (inputValue % 2 !== 0) {
      return { 'evenNumber': true };
    }
    return null;
  }
}

bash
npm install --save-dev @angular/core @angular/common @angular/forms @angular/platform-browser @angular/compiler

typescript
// even-number-validator.directive.spec.ts
import { TestBed, ComponentFixture } from '@angular/core/testing';
import { Component, DebugElement } from '@angular/core';
import { FormsModule, NgForm } from '@angular/forms';
import { By } from '@angular/platform-browser';
import { EvenNumberValidatorDirective } from './even-number-validator.directive';
@Component({
  template: `
    
      
    
  `,
})
class TestComponent {
  evenNumber: number;
}
describe('EvenNumberValidatorDirective', () => {
  let fixture: ComponentFixture;
  let component: TestComponent;
  let inputElement: DebugElement;
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [EvenNumberValidatorDirective, TestComponent],
    });
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    inputElement = fixture.debugElement.query(By.css('input'));
  });
  it('should allow even numbers', () => {
    component.evenNumber = 2;
    fixture.detectChanges();
    const form: NgForm = fixture.debugElement.children[0].injector.get(NgForm);
    const control = form.control.get('evenNumberInput');
    expect(control.valid).toBe(true);
  });
  it('should reject odd numbers', () => {
    component.evenNumber = 3;
    fixture.detectChanges();
    const form: NgForm = fixture.debugElement.children[0].injector.get(NgForm);
    const control = form.control.get('evenNumberInput');
    expect(control.hasError('evenNumber')).toBe(true);
  });
});