Question

我有一个像这样的角度分量：

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要求窗口的实际实现而不是模拟，而模拟实际窗口到满足实际Renderer2的程度可能很麻烦。

要么模拟window和Renderer2到您的组件满意的程度，要么提供实际的窗口和实际的Renderer2。

使用Renderer2进行单元测试角度组件

1 个答案: