Angular 2 通过在单元测试中更改模型来更新选择

Question

我的模板中有一个 select 元素，如下所示:

<select [(ngModel)]="snapshotCriteria.salesArea" required>
  <option *ngFor="let salesArea of salesAreas" [ngValue]="salesArea">
    {{salesArea.name}}
  </option>
</select>

您可以看到模型绑定(bind)到 snapshotCriteria.salesArea，它是一个对象，因此我们使用 ngValue 而不是 value。 salesArea 属性本身也是一个对象。

---

组件如下:

export class Component implements OnInit {

  salesAreas: SalesArea[];

  snapshotCriteria: SnapshotCriteria = {
    salesArea: null,
    date: null,
    startTime: 600,
    endTime: 3059
  };


  constructor(private salesAreaService: SalesAreaService) {}


  ngOnInit(): void {
    this.salesAreaService.fetchSalesAreas(salesAreas) => this.salesAreas = salesAreas);
  }

}

请注意，绑定(bind)到 select 模型的 salesArea 已初始化为 null。

---

通过操作下拉列表通过模板进行更改时，模板可以正常运行。然而，在我的单元测试中，我直接更新 select 元素引用的模型，与我的预期相反， View 没有更新!由于该字段是必填字段，因此我的测试因验证失败而无法提交表单。这是测试:

it('...', fakeAsync(() => {

  spyOn(salesAreaService, 'fetchSalesAreas').and.returnValue(Observable.of([
    {areaNumber: 1, name: 'A'} as any as SalesArea,
    {areaNumber: 2, name: 'B'} as any as SalesArea,
    {areaNumber: 3, name: 'C'} as any as SalesArea
  ]));

  fixture.detectChanges();
  tick();

  component.snapshotCriteria = {
    salesArea: {areaNumber: 1, name: 'A'} as SalesArea,
    date: new Date(2015, 5, 25),
    startTime: 1000,
    endTime: 1001
  } as SnapshotCriteria;

  fixture.detectChanges();
  tick();

}));

调试显示 select 元素未更新。我尝试了各种方法都无济于事:

1. 不在测试中重新实例化对象。
2. 将 salesArea 对象实例化为空对象，而不是 空。
3. 在测试中调度 input 和 change 事件。
4. 在 View 中监听 ngModelChange 但这不会被触发 在测试中。

值得注意的是，通过在模板中使用 value 而不是 ngValue，我可以通过更改底层模型来更新 View 。

Answer 1

我假设您需要执行以下操作:

it('...', fakeAsync(() => {
  var mockArr = [
    {areaNumber: 1, name: 'A'} as any as SalesArea,
    {areaNumber: 2, name: 'B'} as any as SalesArea,
    {areaNumber: 3, name: 'C'} as any as SalesArea
  ];
  spyOn(salesAreaService, 'fetchSalesAreas').and.returnValue(Observable.of(mockArr));

  fixture.detectChanges();
  tick();

  component.snapshotCriteria = {
    salesArea: mockArr.find(x => x.areaNumber === 1),
    date: new Date(2015, 5, 25),
    startTime: 1000,
    endTime: 1001
  } as SnapshotCriteria;

  fixture.detectChanges();

  tick();
  expect(...);
}));

<强> Plunker Example