3
我似乎无法测试绑定到Angluar2模型的输入框。我对此有点新,所以请和我一起裸照。Angular 2测试输入框绑定
我有一个非常基本的Angular2组件,它包含一个绑定到模型的inputbox。
<form>
<input type="text" [(ngModel)]="searchTerm" name="termsearchTerm" (keyup)="search()" value=""/>
</form>
这里是后面的代码:
import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
moduleId: module.id,
selector: 'sc-search',
templateUrl: 'search.component.html'
})
export class SearchComponent {
@Input() data: any;
@Output() onSearchTermChanged = new EventEmitter<string>();
private searchTerm: string;
search() {
this.onSearchTermChanged.emit(this.searchTerm);
}
}
当运行下面的测试继续得到预期的不确定等于“约翰”。 我期待测试通过。
searchableHierarchyComponentFixture.detectChanges();
let termInputDbg = searchableHierarchyComponentFixture.debugElement.query(By.css('input[name="termsearchTerm"]'));
let input = searchableHierarchyComponentFixture.nativeElement.querySelector('input');
input.value = 'John';
let evt = document.createEvent('Event');
evt.initEvent('keyup', true, false);
termInputDbg.triggerEventHandler('keyup', null);
input.dispatchEvent(evt);
tick(50);
searchableHierarchyComponentFixture.detectChanges();
searchableHierarchyComponentFixture.whenStable();
expect(searchableHierarchyComponentFixture.componentInstance.searchTerm).toEqual('John');
梦幻般的答案。谢谢! –
'tick()'和'input.dispatchEvent'技巧挽救了我的生命! – elli0t
嘿家伙,就像一个答案和问题本身。但是这里的tick函数是什么?我现在有同样的情况。并且想要测试绑定到输入的ngModel。我需要那个tick()吗? –