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

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

导读：我为输入字段写了一个非常简单的自定义验证器： import { Directive } from '@angular/core';import { AbstractControl,NG_VALIDATORS } from '@angular/forms';function numberValidator(c: AbstractControl) { if (!c.value) return null; return new RegE

我为输入字段写了一个非常简单的自定义验证器：

import { Directive } from '@angular/core';
import { AbstractControl,NG_VALIDATORS } from '@angular/forms';

function numberValidator(c: AbstractControl) {
    if (!c.value) return null;
    return new RegExp('^[1-9][0-9]{6,9}$').test(c.value) ? null : {
        validateNumber: {
            valid: false
        }
    }
}

@Directive({
    selector: '[number-validator]',providers: [
        { provide: NG_VALIDATORS,multi: true,useValue: numberValidator }
    ]
})
export class NumberValidator {

}

我想对这个验证器进行单元测试.我在Angular2页面上阅读了Test an attribute directive,但没有更改的css或html.我该如何对这个验证器进行单元测试？

解决方法

如果你想以简单的方式(我会这样做,因为所有逻辑都在验证器函数中),只是为了测试验证器函数.只需将控件传递给它

expect(numberValidator(new FormControl('123456'))).toEqual({
  'validateNumber': { 'valid': false }
});
expect(numberValidator(new FormControl('123456789'))).toEqual(null);

如果你真的想在“被使用”时测试它,那么它会变得有点单调乏味.这些通常是我采取的步骤

>创建虚拟组件以使用该指令
>设置试验台配置
>创建要测试的组件.
>获取本机输入元素并向其发送无效的输入事件
>获取持有NgForm的注射器
>检查表单是否失败
>输入有效输入并检查它是否通过.

与仅测试验证器方法相比,它有很多.但无论如何它在这里;-)享受！

import { Component,Directive } from '@angular/core';
import { TestBed,async } from '@angular/core/testing';
import { dispatchEvent } from '@angular/platform-browser/testing/browser_util';
import { By } from '@angular/platform-browser';
import { FormsModule,NG_VALIDATORS,AbstractControl,NgForm,FormControl } from '@angular/forms';

function numberValidator(c: AbstractControl) {
  if (!c.value) return null;
  return new RegExp('^[1-9][0-9]{6,9}$').test(c.value) ? null : {
    validateNumber: {
      valid: false
    }
  };
}

@Directive({
  selector: '[number-validator]',providers: [
    { provide: NG_VALIDATORS,useValue: numberValidator }
  ]
})
export class NumberValidator {
}

@Component({
  template: `
    <form>
      <input name="number" type="text" ngModel number-validator />
    </form>
  `
})
class TestComponent {
}

describe('component: TestComponent',() => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [ FormsModule ],declarations: [TestComponent,NumberValidator]
    });
  });

  it('should validate (easy)',() => {
    expect(numberValidator(new FormControl('123'))).toEqual({
      'validateNumber': { 'valid': false }
    });
    expect(numberValidator(new FormControl('123456789'))).toEqual(null);
  });

  it('should validate (tedious)',async(() => {
    let fixture = TestBed.createComponent(TestComponent);
    let comp = fixture.componentInstance;
    let debug = fixture.debugElement;
    let input = debug.query(By.css('[name=number]'));

    fixture.detectChanges();
    fixture.whenStable().then(() => {
      input.nativeElement.value = '123';
      dispatchEvent(input.nativeElement,'input');
      fixture.detectChanges();

      let form: NgForm = debug.children[0].injector.get(NgForm);
      let control = form.control.get('number');

      // just to show a few different ways we can check validity
      expect(control.hasError('validateNumber')).toBe(true);
      expect(control.valid).toBe(false);
      expect(form.control.valid).toEqual(false);
      expect(form.control.hasError('validateNumber',['number'])).toEqual(true);

      input.nativeElement.value = '123456789';
      dispatchEvent(input.nativeElement,'input');
      fixture.detectChanges();

      expect(form.control.valid).toEqual(true);
    });
  }));
});

（编辑：李大同）

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