Angular 5测试中的火灾输入事件

Question

我一直在尝试一些事情，并且在Angular文档上待了一个多小时，但仍然无法通过此测试。我正在使用Jest（与Jasmine非常相似）。问题是，当我时，它正在应用程序中运行ng serve，我只是无法为此编写通过测试！

HTML模板

 id="typeahead-plan"
   placeholder="search"
   type="text" class="form-control br--top"
   [(ngModel)]="selections.clientId"
   [ngbTypeahead]="searchClients"
   (input)="resetFileId()"
   (blur)="filterFileIds()"
   (keyup.enter)="filterFileIds()"
   (selectItem)="selectClientPlan($event.target.value)" />

规格

test('Submit button is disabled when changing plan', () => {
  component.resetFileId = jest.fn();
  fixture.detectChanges();
  const submitEl = fixture.debugElement.query(
    By.css('button[data-test=submit]')
  );
  const planInputEl = fixture.debugElement.query(By.css('#typeahead-plan'));
  expect(submitEl.nativeElement.attributes['disabled']).not.toBeDefined();

  planInputEl.nativeElement.value = 'd';
  planInputEl.triggerEventHandler('input', null);
  fixture.detectChanges();
  expect(component.resetFileId).toHaveBeenCalled();
  expect(submitEl.nativeElement.attributes['disabled']).toBeTruthy();
});

该测试表明该间谍应该被调用，但从未被调用，因此使我认为我没有正确触发输入事件。如果我注释掉该toHaveBeenCalled断言，则下一个断言将失败，因为“提交”按钮没有disabled属性。再次，手动单击UI都可以正常工作，只是不在测试中。当我尝试学习如何编写测试时，这种事情不断抬头，这确实使我感到沮丧并拖慢了我的开发速度。

Answer 1

看起来我在引发事件时必须包含一个带有目标的对象。该角文档说明：

该测试假定（在这种情况下正确）假设运行时事件处理程序（组件的click（）方法）不在意事件对象。

其他处理程序则不太宽容。例如，RouterLink指令需要一个具有button属性的对象，该属性标识单击期间按下了哪个鼠标按钮（如果有）。如果缺少事件对象，则RouterLink指令将引发错误。

但是，他们没有说“其他处理程序”是什么，或者他们需要什么，这似乎是一个明显的遗漏。

因此，如果我这样做：inputEl.triggerEventHandler('input', { target: inputEl.nativeElement });则事件触发，并且它检测到该函数已被调用。