Question

我在Angular中有一个使用此HTML的组件：

<div class="row">
  <label for="tipo" class="column">Tipo: </label>
  <div *ngFor="let tipo of tipos" class="column">
    <input type="radio" name="tipo" [value]="tipo.id" 
      [(ngModel)]="movimiento.tipo" (ngModelChange)="alCambiarTipo()">
    <span class="{{tipo.texto | lowercase}}">{{ tipo.texto }}</span>
  </div>
</div>

它有两个单选按钮，在更改时它会在我的组件中触发一个功能。在我的测试中，我想检查第二个单选按钮以测试我的函数被调用。我已经尝试过这段代码，但它不起作用：

it('should call alCambiarTipo on radio button change', () => {
  spyOn(component, 'alCambiarTipo').and.callThrough();
  let options: DebugElement[] = fixture.debugElement.queryAll(By.css('input[type="radio"]'));
  let secondOption: HTMLInputElement = options[1].nativeElement;
  secondOption.checked = true;
  expect(component.alCambiarTipo).toHaveBeenCalled();
});

我也尝试在输入上使用.click()，但它也无效。我该怎么做才能触发我的功能？感谢。

PS：我还尝试更改添加component.movimiento.tipo = 1;并调用fixture.detectChanges()的模型，但它也无效。

Answer 1

因为您使用了错误的事件。它应该是更改事件。

  options[1].triggerEventHandler('change', { target: options[1].nativeElement });

您甚至不需要设置支票

Answer 2

@maxisam的答案是正确的，此外，您可以使用：

inputElement.nativeElement.dispatchEvent(new Event('change'));

如果您想要更紧凑的形式：）

检查Angular单元测试中的单选按钮

2 个答案: