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断言，则下一个失败，因为Submit按钮没有disabled属性。再次，手动单击UI都可以正常工作，只是不在测试中。当我尝试学习如何编写测试时，这种事情不断抬头，这确实使我的开发感到沮丧和缓慢。

Answer 1

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

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

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

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

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

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

1 个答案: