angular - 使用 [(ngModel)] 不会对 ngFor 内的输入应用单元测试更改

Question

我在测试 Angular 组件时遇到问题，该组件使用两种方式 [(ngModel)] 绑定(bind) ngFor 中的复选框输入。它在实际应用程序中工作得很好。这只是测试的问题。

这是一个失败的示例测试:

import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
import { Component, EventEmitter, Output } from '@angular/core';
import { FormsModule } from '@angular/forms';

describe('Example Test', () => {
  @Component({
    template: `
      <input *ngFor="let value of values"
             type="checkbox"
             class="checkbox-1"
             [(ngModel)]="value.isSelected"
             (change)="output.emit(values)">
    `,
    styles: [``]
  })
  class TestHostComponent {
    @Output() output: EventEmitter<any> = new EventEmitter();

    values = [
      { isSelected: true },
      { isSelected: true },
      { isSelected: true },
    ];
  }

  let testHost: TestHostComponent;
  let fixture: ComponentFixture<TestHostComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [FormsModule],
      declarations: [TestHostComponent],
      providers: []
    })
      .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    testHost = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should change isSelected', fakeAsync(() => {
    const spy = spyOn(testHost.output, 'emit');
    fixture.nativeElement.querySelectorAll('.checkbox-1')[0].click();
    fixture.detectChanges();
    tick();

    expect(spy).toHaveBeenCalledWith([
      { isSelected: false }, // it fails because this is still true
      { isSelected: true },
      { isSelected: true },
    ]);
  }));
});

将 [(ngModel)] 与不在循环中的单个输入一起使用在类似的测试中效果很好。我什至记录了 (ngModelChange) 发出的值，当复选框被点击时 $event 是 true 而实际上它应该是 假。

有什么想法吗？

Answer 1

似乎执行点击的方法不会触发更改检测。在复选框上调度更改事件反而给出了预期的结果:

it('should change isSelected', fakeAsync(() => {
    const spy = spyOn(testHost.output, 'emit');
    const checkbox = fixture.nativeElement.querySelectorAll('.checkbox-1')[0];
    checkbox.dispatchEvent(new Event('change'));
    fixture.detectChanges();
    tick();

    expect(spy).toHaveBeenCalledWith([
        { isSelected: false }, // This is now false
        { isSelected: true },
        { isSelected: true },
    ]);
}));

受 this post 启发的解决方案.

更新:

看起来需要等待一些控件在 CheckboxControlValueAccessor 上初始化或注册。如果修改第二个beforeEach()创建组件后等待一个周期，原测试代码有效:

beforeEach(fakeAsync(() => {
    fixture = TestBed.createComponent(TestHostComponent);
    testHost = fixture.componentInstance;
    fixture.detectChanges();
    tick();
}));

参见 this Github issue以获得完整的答案/解释。