来自 Angular 5 测试的触发输入事件答案

【问题标题】：Fire input event from Angular 5 test来自 Angular 5 测试的触发输入事件
【发布时间】：2018-12-04 08:22:37
【问题描述】：

我一直在尝试并查看 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 一切正常，只是在测试中没有。当我尝试学习如何编写测试时，这种事情不断出现，这真的让我感到沮丧并减慢了我的开发速度。

【问题讨论】：

你在哪里创建了你的间谍？
你能用planInputEl.nativeElement.dispatchEvent(new Event('input'))代替planInputEl.triggerEventHandler('input', null);吗？
我试过了，没用。

标签： angular jestjs dom-events

【解决方案1】：

看起来我必须在引发事件时包含一个带有目标的对象。 Angular docs 状态：

测试假设（在这种情况下是正确的）运行时事件处理程序——组件的 click() 方法——不关心事件对象。

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

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

所以，如果我这样做：inputEl.triggerEventHandler('input', { target: inputEl.nativeElement });，那么事件就会触发，并且它会检测到函数被调用。

【讨论】：