我有一个来自控件的自定义选择器 app-date-picker
.它实现了 ControlValueAccessor
.我有一个名为 MyPage
的组件通过以下方式包含此自定义表单控件:
<app-date-picker class="address__from-date" [(ngModel)]="fromDate"></app-date-picker>
我正在尝试为 MyPage
编写单元测试测试绑定(bind)的两个方向。我已经为其他表单字段完成了此操作,例如:
it('should bind zip code', fakeAsync(() => {
const formControl = element.query(By.css('.address__zip-code input')).nativeElement;
// model -> view
component.zipCode = 76777;
fixture.detectChanges();
tick();
expect(formControl.value).toEqual('76777');
// view -> model
formControl.value = '89556';
formControl.dispatchEvent(new Event('input'));
expect(component.zipCode).toEqual(89556);
}));
当我尝试为我的自定义表单控件执行此操作时,我的问题出现了。到目前为止,我只能测试一个方向的绑定(bind),即使这样也需要使用 ng-reflect-model
,这太糟糕了:
it('should bind from-date', fakeAsync(() => {
const formControl = element.query(By.css('.address__from-date app-date-picker')).nativeElement;
// model -> view
component.fromDate = '01/2017';
fixture.detectChanges();
tick();
expect(formControl.attributes['ng-reflect-model'].value).toEqual('01/2017');
// view -> model
// Not sure what to do here either
}));
有没有更好的方法来做到这一点?我想:
- 能够测试来自
MyPage
的双向绑定(bind)单元测试,以便我知道我已将它正确连接到表单控件 - 不必使用
ng-reflect-*
其他注意事项:
MyPage
组件是带有 fromDate
的标准组件(和一个 zipCode
)字段。
自定义表单域实现ControlValueAccessor
正确,有一个 date
字段,并使用 <input>
在内部,它本身通过 ngModel
绑定(bind):
<input [(ngModel)]="date" type="date">
DatePickerComponent
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.scss'],
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => DatePickerComponent),
multi: true
}]
})
export class DatePickerComponent implements ControlValueAccessor {
private propagateChange = (_: any) => {};
private _date: string;
get date(): string {
return this._date;
}
@Input()
set date(value: string) {
this._date = value;
this.propagateChange(value);
}
writeValue(newValue: any) {
if (newValue !== undefined) {
this.date = newValue;
}
}
registerOnChange(fn: any) {
this.propagateChange = fn;
}
registerOnTouched(fn: any) {
// Not used
}
}
2017 年 8 月 10 日更新
到目前为止,我已经接近我想要的 @ViewChild
:
@Component(...)
MyPageComponent {
@ViewChild('fromDate') fromDatePicker: DatePickerComponent;
...
}
MyPage
模板变为(注意模板引用变量 #fromDate
):
<app-date-picker #fromDate class="address__from-date" [(ngModel)]="fromDate">
</app-date-picker>
那么测试就变成了:
it('should bind from-date', fakeAsync(() => {
// model -> view
component.info.fromDate = '01/2017';
fixture.detectChanges();
tick();
expect(component.fromDatePicker.date).toEqual('01/2017');
// view -> model
component.fromDatePicker.date = '02/2017';
expect(component.info.fromDate).toEqual('02/2017');
}));
有人知道更好的方法吗?虽然这不是最佳选择,但我暂时还可以。
最佳答案
好吧,终于找到了一个令我满意的答案,因为它避免了 ng-reflect-*
和 @ViewChild
。我可以调用 .componentInstance
,而不是调用 .nativeElement
。那么测试就变得简单了:
it('should bind from-date', fakeAsync(() => {
const formControl = element.query(By.css('.address__from-date app-date-picker')).componentInstance;
// model -> view
component.fromDate = '01/2017';
fixture.detectChanges();
tick();
expect(formControl.date).toEqual('01/2017');
// view -> model
formControl.date = '02/2017';
expect(component.fromDate).toEqual('02/2017');
}));
如果有人有更好的解决方案,我仍然持开放态度,但我暂时将其标记为答案。希望它能帮助遇到此问题的其他人!
关于Angular 2 - 绑定(bind)到嵌套自定义表单控件的单元测试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45601561/