angular - Karma - ChangeDetectorRef detectChanges 模拟

Question

我在测试中遇到 cdr.detectChanges() 问题。调用时发生错误，我没有任何信息，只是收到此错误:

ZoneAwareError@webpack:///~/zone.js/dist/zone.js:923:0 <- config/karma-shim.js:108645:28 invokeTask@webpack:///~/zone.js/dist/zone.js:398:0 <- config/karma-shim.js:108120:36 onInvokeTask@webpack:///~/zone.js/dist/proxy.js:103:0 <- config/karma-shim.js:107642:49

有没有办法让 detectChanges 起作用？

我还尝试通过在我的测试组件配置中定义 cdr 来让 detectChanges 不执行任何操作，如下所示:

cdr = {
  detectChanges: () => {}
}

然后在提供程序中 { provide: ChangeDetectorRef, useValue: cdr }，但是当我在测试方法中使用 console.info cdr 时，似乎我仍然拥有原始的 cdr 类。

我也尝试过这样定义的假类:

class FakeCDR {
  detectChanges(): void {

  }
}

然后 { provide: ChangeDetectorRef, useClass: FakeCDR } 在提供者中，但这里相同。

这是我的测试代码:

it('should create an user', fakeAsync(inject([MockBackend],
  (backend: MockBackend) => {
    fixture.detectChanges()
    tick()

    component.newUser = User.newUserDraft()
    component.newUser.email = "email@gmail.com"
    component.createUser()
    tick()

    expect(component.newUser.email).toBe(User.newUserDraft().email)
  })))

在 createUser 中，它正在执行 service.createUser 然后执行一些操作，然后执行 cdr.detectChanges()。我确实在每一行都放置了 console.info，所以我确定它在 detectChanges 处失败了。

Answer 1

首先是一些注意事项:

1. ChangeDetectorRef 不是通过 DI 提供的，因此您不能提供 double。
2. fixture.changeDetectorRef 与提供的组件不同，因此您不能使用它。
3. fixture.debugElement.injector.get(ChangeDetectorRef) 将创建私有(private)类 ViewRef 的新实例(公共(public)类 ViewRef 是只是 ViewRef$1 的别名)，每次调用它时，提供给组件的对象都是另一个对象。

所以我的解决方案是:

const changeDetectorRef = fixture.debugElement.injector.get(ChangeDetectorRef);
const detectChangesSpy = spyOn(changeDetectorRef.constructor.prototype, 'detectChanges');