我为输入字段编写了一个非常简单的自定义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页面上阅读了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, multi: true, 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);
});
}));
});