Question

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

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

您可以看到模型已绑定到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);
  }

}

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

通过操作下拉列表，通过模板进行更改时，模板可以正常运行。但是在我的单元测试中，我直接更新了select元素引用的模型，与我期望的相反，视图没有更新！由于该字段是必需的，我的测试无法提交表单，因为验证失败。这是测试：

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元素未更新。我尝试了各种各样的事情无济于事：

不在测试中重新实例化对象。
将salesArea对象实例化为空对象而不是 null。
在测试中调度input和change个事件。
在视图中聆听ngModelChange但未触发此操作在测试中。

感兴趣的是，通过在模板中使用value而不是ngValue，我可以通过更改基础模型来更新视图。

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

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

1 个答案: