Question

我有以下代码：

<input class="txt-port-id" id="portId"
     [value]="portIdFund1"
     maxlength="4"
     size="4"
     (keyup)="fundPortIdChanged(fund1PortId.value, 'fund1')"
     #fund1Port>

Angular文档说passing-event-is-a-dubious-practice，从而传递模板引用变量。我们如何在Jasmine中编写单元测试呢？

Answer 1

您可以通过以下方式使用dispatchEvent：

it('simple input test', fakeAsync(() => {
      const fundChangedSpy = spyOn(component, 'fundPortIdChanged').and.callThrough();
      const portIDInput: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#portId');
      expect(portIDInput.value).toEqual('');
      portIDInput.dispatchEvent(new Event('keyup'));
      fixture.detectChanges();
      tick(50);
      expect(portIDInput.value).toEqual('fund1');
      expect(fundChangedSpy).toHaveBeenCalledTimes(1);
}));

不过，据我所知，在单元测试中，更建议使用Reactive forms而不是Template-driven forms。

反应形式也提供了直接的测试路径，因为可以确保在请求时数据是一致且可预测的。流的任何使用者都可以安全地操作该数据。

这是测试的stackblitz。

在Angular中测试模板参考变量

1 个答案: