进行组件测试以具有主体或模拟Renderer2

Question

在我们的组件之一中，我们用于Renderer2向body元素添加和删除一些CSS类/样式。为此，我们只需执行以下操作：

this.renderer.setStyle(document.body, 'padding-left', '10px');
this.renderer.addClass(document.body, 'modal-container--opened');

一旦运行测试，就会遇到错误：

无法读取未定义的属性“添加”

无法设置未定义的属性“ padding-left”

因此，有角度的testBed似乎没有创建任何body元素。

在我们的测试配置中，如何创建模拟的body元素？因此，我们可以对该元素运行测试，并查看渲染器是否正确应用了样式/类。

似乎也无法嘲笑Renderer2。

我们试图创建一个间谍：

let renderer: jasmine.SpyObj<Renderer2>;
renderer = jasmine.createSpyObj('renderer', ['addClass', 'removeClass', 'setStyle']);

然后进入TestBed.configureTestingModule（也进行了测试，overrideProviders但未获得更多成功）：

{ provide: Renderer2, useValue: renderer }

但是Angular完全忽略了此覆盖。

如何能够测试我们的组件行为，对其进行操作document.body？

Answer 1

其他方法是模拟服务：

let renderer: MockRenderer;
class MockRenderer {
   addClass(document: string, cssClass: string): boolean {
     return true;
   }
}

beforeEach(async( () => {
   TestBed.configureTestingModule({
    ...
       providers: [{
              provide: Renderer2,
              useClass: MockRenderer
            }]
    }).compileComponents().then(() => {
        fixture = TestBed.createComponent(YourComponent);
        renderer =  fixture.debugElement.injector.get(Renderer2);
    });
}));

...
it('should call render', () => {
      spyOn(renderer, 'addClass');
      ...
      expect(renderer.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});

Answer 2

与其嘲笑渲染器，不如尝试劫持它。这应该适用于Angular 6+。

在您的component.spec.ts中：

let renderer2: Renderer2;
...
beforeEach(async( () => {
    TestBed.configureTestingModule({
        ...
        providers: [Renderer2]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(YourComponent);
    // grab the renderer
    renderer2 = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
    // and spy on it
    spyOn(renderer2, 'addClass').and.callThrough();
    // or replace
    // spyOn(renderer2, 'addClass').and.callFake(..);
    // etc
});

it('should call renderer', () => {
    expect(renderer2.addClass).toHaveBeenCalledWith(jasmine.any(Object), 'css-class');
});