unit-testing - 从 Angular 2 测试中更新输入 html 字段

Question

我想在 Angular 2 单元测试中更改输入字段的值。

<input type="text" class="form-control" [(ngModel)]="abc.value" />

我不能只更改 ngModel 因为 abc 对象是私有(private)的:

 private abc: Abc = new Abc();

在 Angular 2 测试中，我能否模拟用户在输入字段中键入内容，以便 ngModel 将根据用户在单元测试中键入的内容进行更新？

我可以毫无问题地获取输入字段的 DebugElement 和 nativeElement。 (只是在输入字段的 nativeElement 上设置 value 属性似乎不起作用，因为它不会更新 ngModel我为值设置了什么)。

也许 inputDebugEl.triggerEventHandler 可以被调用，但我不确定要给它什么参数，以便它模拟用户输入了特定的输入字符串。

Answer 1

你是对的，你不能只设置输入，你还需要调度 'input' 事件。这是我今天晚上早些时候写的一个输入文本的函数:

function sendInput(text: string) {
  inputElement.value = text;
  inputElement.dispatchEvent(new Event('input'));
  fixture.detectChanges();
  return fixture.whenStable();
}

这里的 fixture 是 ComponentFixture 而 inputElement 是来自 fixture 的 nativeElement< 的相关 HTTPInputElement/。这将返回一个 promise ，因此您可能必须解决它 sendInput('whatever').then(...)。

在上下文中:https://github.com/textbook/known-for-web/blob/52c8aec4c2699c2f146a33c07786e1e32891c8b6/src/app/actor/actor.component.spec.ts#L134

---

更新:

我们在 Angular 2.1 中遇到了一些问题，它不喜欢创建一个 new Event(...)，所以我们做了:

import { dispatchEvent } from '@angular/platform-browser/testing/browser-util';

...

function sendInput(text: string) {
  inputElement.value = text;
  dispatchEvent(fixture.nativeElement, 'input');
  fixture.detectChanges();
  return fixture.whenStable();
}