使组件测试具有主体或模拟 Renderer2 [英] Make the component test to have a body or mock Renderer2
问题描述
在我们的一个组件中,我们使用 Renderer2
向 body 元素添加和删除一些 css 类/样式.为此,我们只需执行以下操作:
In one of our component, we use Renderer2
to add and remove some css classes/styles to the body element. To achieve that, we simply do something like:
this.renderer.setStyle(document.body, 'padding-left', '10px');
this.renderer.addClass(document.body, 'modal-container--opened');
一旦我们运行测试,就会遇到错误:
As soon as we run the tests, we encounter errors:
无法读取未定义的属性添加"
Cannot read property 'add' of undefined
无法设置未定义的属性'padding-left'
Cannot set property 'padding-left' of undefined
因此,角度 testBed 似乎没有创建任何 body
元素.
So it seems angular testBed doesn't create any body
element.
在我们的测试配置中,如何创建一个 mocked body 元素?所以我们可以针对那个元素运行我们的测试,看看渲染器是否正确应用了样式/类.
似乎也无法模拟 Renderer2.
It also seems mocking the Renderer2 is not possible.
我们试图创建一个间谍:
We tried to create a spy:
let renderer: jasmine.SpyObj<Renderer2>;
renderer = jasmine.createSpyObj('renderer', ['addClass', 'removeClass', 'setStyle']);
然后在 TestBed.configureTestingModule
中(也在 overrideProviders
中进行了测试,但没有更多成功):
then in TestBed.configureTestingModule
(also tested in overrideProviders
without more success):
{ provide: Renderer2, useValue: renderer }
但是 Angular 完全忽略了这个覆盖.
But Angular ignores completely this override.
如何能够测试我们的组件行为,作用于 document.body
?
推荐答案
与其模拟渲染器,不如尝试劫持它.这应该适用于 Angular 6+.
Instead of mocking the renderer try to hijack it. This should be working with Angular 6+.
在您的 component.spec.ts 中:
In your 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');
});
这篇关于使组件测试具有主体或模拟 Renderer2的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!