在Angular中测试模板参考变量

Question

I have the following code:

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

Angular docs says passing-event-is-a-dubious-practice , thus passing template reference variable. How do we write Unit Test in Jasmine for the same?

Answer 1

What you can do is to use dispatchEvent in the following way:

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);
}));

However as I understand it's more encouraged to use Reactive forms instead of Template-driven forms with unit testing.

Reactive forms also provide a straightforward path to testing because you are assured that your data is consistent and predictable when requested. Any consumers of the streams have access to manipulate that data safely.

Here's a stackblitz with the test.