У меня есть компонент Angular 7 со свойством searchTerm
и элемент input в его шаблоне.Значение свойства привязывается к значению элемента ввода с помощью [(ngModel)]="searchTerm"
:
@Component({
selector: 'app-search',
template: `
<form class="search-form">
<mat-form-field class="search-form-field">
<input matInput
type="text"
id="search-input"
[(ngModel)]="searchTerm"
name="search-input">
</mat-form-field>
</form>
`,
styleUrls: ['./search.component.scss']
})
export class SearchComponent {
searchTerm: string;
}
В моих модульных тестах я пытаюсь проверить, изменяется ли свойство на значение элемента ввода:
it('should update searchTerm according to the input-value', async (() => {
fixture = TestBed.createComponent(SearchComponent);
component = fixture.componentInstance;
fixture.detectChanges();
const input = fixture.debugElement
.query(By.css('#search-input')).nativeElement;
input.value = 'test-value';
input.dispatchEvent(new Event('input'));
fixture.detectChanges();
fixture.whenStable().then(() =>
expect(component.searchTerm).toEqual('test-value')
);
}));
Однако все, что я получаю, это следующее сообщение об ошибке:
Ожидается, что неопределенное значение равно 'test-value'.
Интереснотем не менее, привязка полностью работает, когда я вручную пробую в браузере.Кроме того, я уже пытался использовать fakeAsync
вместо async
в своей тестовой функции, но это не имело никакого значения.
Что я делаю не так?