Angular 2 自定义验证单元测试 [英] Angular 2 Custom validation unit testing

问题描述

我正在编写自定义角度(Angular 2.0.0)验证，遵循本指南https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validation .

i'm writing custom angular(Angular 2.0.0) validation, 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 custom 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;
    });

我正在访问所有这些对象，但没有人知道我输入的有效性的任何信息.有没有人知道如何在单元测试中访问我输入的 NgControl，或者我如何检查有效/无效(自定义验证)输入字段.

I'm accessing all these object, but no one has any information about the validity of my input. Does anyone has any idea how to access the NgControl of my input inside the Unit Tests, or how can i check for valid/invalid(custom validation) input field.

推荐答案

您需要做的是获得具有 NgForm 的注入器.我花了一段时间才弄明白.我以为你可以从 debugElement 获取它，但看起来你需要从它的子¹ 获取它.

What you need to do is get the injector that has the NgForm. It took me a while to figure it out. I thought you could just get it from the debugElement, but it looks like you need to get it from it's child¹.

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

您可以使用

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);

下面是一个完整的测试

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 - 在源代码测试中发现}

这篇关于Angular 2 自定义验证单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！