Angular 2自定义验证单元测试

发布时间：2020-12-17 06:48:50 所属栏目：安全来源：网络整理

导读：我正在编写自定义角度(Angular 2.0.0)验证,遵循本指南 https://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validation. @Directive({ selector: '[ngModel][emailValidator]',providers: [{provide: NG_VALIDATORS,useExisting: Ema

我正在编写自定义角度(Angular 2.0.0)验证,遵循本指南 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

现在我正在尝试将单元测试添加到我的自定义验证指令中.

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,或者我如何检查有效/无效(自定义验证)输入字段.

解决方法

你需要做的是获得具有NgForm的注射器.我花了一段时间才搞清楚.我以为你可以从debugElement中获取它,但看起来你需要从它的child1中获取它.

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

1 – Found it in the source code tests

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!