监视 ChangeDetectorRef.detectChanges

Question

我正在尝试测试一个组件调用 detectChanges 在它被注入 ChangeDetectorRef

我已经单步执行了代码，它确实被调用了，但似乎我在组件和测试中得到了不同的 ChangeDetectorRef 值。这是代码。我也试过注释掉的间谍，但也没有用。

it('should call ChangeDetectorRef.detectChanges from onFixedUpdate', () => {
    let changeDetectorService = fixture.debugElement.injector.get(ChangeDetectorRef, null);
    let spy = spyOn(changeDetectorService, 'detectChanges').and.callThrough();
    //let spy = spyOn(fixture.changeDetectorRef, 'detectChanges').and.callThrough();

    expect(spy).not.toHaveBeenCalled();

    fixture.componentInstance.onFixedUpdate(1);

    expect(spy).toHaveBeenCalled();
});

Answer 1

首先是一些注意事项：

1. ChangeDetectorRef 不是通过 DI 提供的，所以不能提供双精度。
2. fixture.changeDetectorRef 和提供的组件不一样，所以不能用这个。
3. fixture.debugElement.injector.get(ChangeDetectorRef) 会创建一个私有类ViewRef 的新实例（公共类ViewRef 只是ViewRef$1 的别名），每次调用它，那么提供给组件的对象就是另一个。李>

所以我的解决方案是：

// Get a reference to an instance of the private class
const changeDetectorRef = fixture.debugElement.injector.get(ChangeDetectorRef);
// spy on private class prototype
const detectChangesSpy = spyOn(changeDetectorRef.constructor.prototype, 'detectChanges');

Answer 2

我遇到了同样的问题并使用了Juan's answer to a similar SO question.中描述的技术

基本要点是直接监视组件中分配注入的ChangeDetectorRef 的属性。如果您已将此属性标记为私有（通常是这种情况），则可以通过将组件转换为 any 然后使用它在私有属性上创建间谍来解决此问题。

请注意，我只是将其添加为评论，但我没有足够高的代表 - 我希望这没问题！

Answer 3

假设在您的组件中，您已将注入的 ChangeDetectorRef 命名为 cdr。

it('should call ChangeDetectorRef.detectChanges from onFixedUpdate', () => {

   // grab the the reference to the ChangeDetectorRef (cdr) directly from the component
   let spy = spyOn((<any>fixture.componentInstance).cdr, 'detectChanges').and.callThrough();

   expect(spy).not.toHaveBeenCalled();

   fixture.componentInstance.onFixedUpdate(1);

   expect(spy).toHaveBeenCalled();
});