使用 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 。