使用 Renderer2 对 angular 组件进行单元测试

Question

我有一个 angular 组件，如下所示：

constructor(
        @Inject(INJECTION_TOKEN_WINDOW) private window: Window,
        private renderer: Renderer2
){}

ngOnInit() {
  this.renderer.addClass(this.window.document.body, 'myCssClass');
}

单元测试片段：

const TOKEN_WINDOW = 'Window';

const WindowMock = {
    document: {
        body: {}
    }
};
describe('MyComponent', () => {
let renderer: Renderer2;
let component: MyComponent;
let fixture: ComponentFixture<MyComponent>;

beforeEach(async(() => {
        TestBed.configureTestingModule({
            declarations: [MyComponent],
            schemas: [CUSTOM_ELEMENTS_SCHEMA],
            providers: [
                Renderer2,
                { provide: TOKEN_WINDOW, useValue: WindowMock }
            ]
        }).compileComponents();
    }));

beforeEach(() => {
        fixture = TestBed.createComponent(MyComponent);
        component = fixture.componentInstance;
        el = fixture.debugElement;

        renderer = fixture.componentRef.injector.get<Renderer2>(Renderer2 as Type<Renderer2>);
        spyOn(renderer, 'myCssClass').and.callThrough();
        fixture.detectChanges();
    });
})

//Tests here...

我在运行测试时遇到以下错误（对于任何测试，我在下面遇到相同的错误）。 我猜我的测试中 Renderer2 配置有问题？ 请帮忙

TypeError: Cannot read property 'add' of undefined
    at <Jasmine>
    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/platform-browser/fesm5/platform-browser.js:1160:67)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.addClass (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm5/core.js:30455:1)
    at <Jasmine>

Answer 1

我认为Renderer2需要 window 的实际实现而不是模拟，并且模拟实际的 window 到满足实际Renderer2的程度可能很麻烦。

模拟window和Renderer2到您的组件满意的程度，或者提供实际的 window 和实际的Renderer2 。