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

我为输入字段编写了一个非常简单的自定义validor：

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页面上阅读，但没有css或html的变化。如何对这个验证器进行单元测试？

如果您想用简单的方法（我会这样做，因为所有的逻辑都在验证器函数中）测试验证器函数。只需将控件传递给它

expect（numberValidator（新表单控件（'123456'））.toEqual({
'validateEnumber'：{'valid'：false}
});
expect（numberValidator（newformcontrol（'123456789'））.toEqual（null）；

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

创建虚拟组件以使用指令

设置测试台配置

创建要测试的组件

获取本机输入元素并向其分派无效的输入事件

获取装有

NgForm

检查表单是否失败

输入一个有效的输入并检查它是否通过

这与仅仅测试验证器方法相比有很大的不同。但无论如何，它在这里；-）享受吧

从'@angular/core'导入{Component，Directive}；
从“@angular/core/testing”导入{TestBed，async}；
从“@angular/platform browser/testing/browser_util”导入{dispatchEvent}；
从“@angular/platform browser”导入{By}”；
导入{FormsModule、NG_验证程序、AbstractControl、，
NgForm，FormControl}来自“@angular/forms”；
函数numberValidator（c:AbstractControl）{
如果（！c.value）返回null；
返回新的RegExp（'^[1-9][0-9]{6,9}$'）。test（c.value）？null:{
验证枚举器：{
有效：假
}
};
}
@指示({
选择器：“[number validator]”，
供应商：[
{提供：NG_验证器，multi:true，useValue:numberValidator}
]
})
导出类编号器{
}
@组成部分({
模板：`
`
})
类TestComponent{
}
描述（'component:TestComponent'，（）=>{
在每个之前（（）=>{
TestBed.configureTestingModule({
导入：[FormsModule]，
声明：[TestComponent，NumberValidator]
});
});
它（'应该验证（容易）'，（）=>{
expect（numberValidator（newformcontrol（'123'））.toEqual({
'validateEnumber'：{'valid'：false}
});
expect（numberValidator（newformcontrol（'123456789'））.toEqual（null）；
});
它（'应该验证（冗长）'、异步（（）=>{
让fixture=TestBed.createComponent（TestComponent）；
让comp=fixture.componentInstance；
让debug=fixture.debugElement；
让input=debug.query（By.css（'[name=number]'）；
fixture.detectChanges（）；
fixture.whenStable（）然后（（）=>{
input.nativeElement.value='123'；
dispatchEvent（input.nativeElement，'input'）；
fixture.detectChanges（）；
let form:NgForm=debug.children[0]。injector.get（NgForm）；
让control=form.control.get（'number'）；
//只是为了展示一些不同的方法，我们可以检查有效性
expect（control.hasError（'validateEnumber'））.toBe（true）；
expect（control.valid）.toBe（false）；
expect（form.control.valid）、toEqual（false）；
expect（form.control.hasError（'validateEnumber'，['number']））.toEqual（true）；
input.nativeElement.value='123456789'；
dispatchEvent（input.nativeElement，'input'）；
fixture.detectChanges（）；
expect（form.control.valid）.toEqual（true）；
});
}));
});

当我尝试第二种方法时。我找不到ngForm的提供程序。我相信那应该是我的错误。你知道会出现什么问题吗？获取

NgForm

的更好方法是使用

debug.query（By.directive（NgForm））

。我只是在看angular源代码测试，以找到我在上面的文章中所做的方法。但是使用.directive可能是更好的方法。