Question

我正在测试一个组件，当调用ngAfterViewInit生命周期钩子时，该组件会在其模板中以复制方式插入一个复选框。

export class MyComponent {

  ngAfterViewInit() {
    // checkbox insertion in the template here
    ...
  }

  ...
}

这是我的测试：

it('should inject the checkbox', () => {
  fixture = TestBed.createComponent(AutogeneratedTableComponent);
  fixture.detectChanges();

  rows = fixture.debugElement.queryAll(By.css('tr'));
  console.log(Object.assign({}, rows[1].nativeElement));  // *referenceLog
  console.log(rows[1].nativeElement));  // *cloneLog

  expect(rows[1].query(By.css('input')).not.toBeNull(); // FAILS
}

* refereceLog（打印没有插入td的tr）

<tr ng-reflect-id="22" id="22">
   <td>Single Room</td>
   <td>My single room.</td>
</tr>

* cloneLog（显示在测试模板时尚未准备好）

Object{__zone_symbol__eventTasks: [ZoneTask{zone: ..., runCount: ..., _zoneDelegates: ..., _state: ..., type: ..., source: ..., data: ..., scheduleFn: ..., cancelFn: ..., callback: ..., invoke: ...}]}

我尝试手动调用ngAfterViewInit（）

it('should inject the checkbox', () => {
  fixture = TestBed.createComponent(AutogeneratedTableComponent);
  fixture.detectChanges();

  fixture.debugElement.componentInstance.ngAfterViewInit();
  fixture.detectChanges();

  rows = fixture.debugElement.queryAll(By.css('tr'));
  console.log(Object.assign({}, rows[1].nativeElement));  // *referenceLog
  console.log(rows[1].nativeElement));  // *cloneLog

  expect(rows[1].query(By.css('input')).not.toBeNull(); // FAILS
}

* refereceLog（打印预期的tr）

<tr ng-reflect-id="22" id="22">
   <td><input id="22" type="checkbox"></td>
   <td>Single Room</td>
   <td>My single room.</td>
</tr>

* cloneLog

没有变化

然后我试了

添加spyOn(component, 'ngAfterViewInit').andReturnValue(Promise.resolve(true)).and.callThrough(); 然后是spyOn().calls.mostRecent.returnValue.then(() => {fixture.detectChanges() ... })，底部是done() 块
将async()添加到单个测试声明并执行 fixture.whenStable.then( () => { fixture.detectChanges()... } )
将fakeAsync()添加到单个测试声明和tick() 在评估前致电

具有相同之前结果的所有尝试。评估完成后，模板元素正在更新。

我应该找到一种方法来停止测试执行，直到我正在测试的nativeElement被更新。

Answer 1

我遇到了类似的问题，这个解决方案对我有用：

我致电traefik_1 | time="2017-08-02T13:55:05Z" level=warning msg="Error while upgrading connection : websocket: 'Origin' header value not allowed"而不是（或另外）fixture.autoDetectChanges(true);。

Angular 2测试，未检测到模板更新

1 个答案: