Angular 2测试 - 渲染器未定义

时间:2017-08-02 09:49:49

标签: angular jasmine karma-runner karma-jasmine renderer

组件定义:

export class NoteComponent  {
    constructor(elementRef: ElementRef,
        renderer: Renderer,
        _alertService: AlertService) {
    }

    ngAfterViewInit() {

        //Hiding the toolbar when editable by default.
        this.renderer.setElementStyle(this.elementRef.nativeElement.children[0].children[2].children[0], 'display', 'none');
    }
}

测试

describe('NoteComponent (external template)', () => {
    let comp: NoteComponent;
    let fixture: ComponentFixture<NoteComponent>;
    let de: DebugElement;
    let el: HTMLElement;

    let rendererMock = jasmine.createSpyObj('rendererMock', ['selectRootElement',
        'createElement',
        'createViewRoot',
        'createText',
        'setElementProperty',
        'setElementAttribute',
        'setText',
        'setBindingDebugInfo',
        'createTemplateAnchor',
        'projectNodes',
        'attachViewAfter',
        'detachView',
        'destroyView',
        'listen',
        'listenGlobal',
        'setElementClass',
        'setElementStyle',
        'invokeElementMethod',
        'animate']);

    let rootRendererMock = {
        renderComponent: () => {
            return rendererMock;
        }
    };

    beforeEach(async () => {
        TestBed.configureTestingModule({
            declarations: [
                NoteComponent,
                SafePipe], // declare the test component
            providers: [AlertService,
                { provide: Renderer, useValue: rootRendererMock }]
        })
            .overrideComponent(NoteComponent, {
                set: {
                    providers: [
                        { provide: Renderer, useValue: rootRendererMock }
                    ]
                }
            });

        TestBed.compileComponents();
    });

    beforeEach(() => {
        fixture = TestBed.createComponent(NoteComponent);
        comp = fixture.componentInstance;
     });
     
     it('note: note not on favorite page, not faved', async () => {
        comp.pinnedOnFavWall = false;
        fixture.detectChanges();
        de = fixture.debugElement.query(By.css('.favorite'));
        expect(de).toBeDefined();
    });

测试通过,因为它是异步的,但我在控制台中收到此错误:

  

TypeError:无法读取未定义的属性“样式”    在DomRenderer.webpackJsonp ... / .. / .. / platform-b​​rowser / src / dom / dom_renderer.js.DomRenderer.setElementStyle(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/platform-browser/src/dom/dom_renderer.js:395:1)       在DebugDomRenderer.webpackJsonp ... / .. / .. / core / src / debug / debug_renderer.js.DebugDomRenderer.setElementStyle(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/debug/debug_renderer.js:223:1)       在NoteComponent.ngAfterViewInit(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/Scripts/app/components/controls/Note/note.component.ts:67:23)       at CompiledTemplate.proxyViewClass.View_NoteComponent_Host0.detectChangesInternal(/DynamicTestModule/NoteComponent/host.ngfactory.js:32:72)       在CompiledTemplate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.AppView.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view.js:425:1)       在CompiledTemplate.proxyViewClass.webpackJsonp ... / .. / .. / core / src / linker / view.js.DebugAppView.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view.js:620:1)       在ViewRef_.webpackJsonp ... / .. / .. / core / src / linker / view_ref.js.ViewRef_.detectChanges(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/linker/view_ref.js:181:1)       在ComponentFixture._tick(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/bundles/core-testing.umd.js:191:1)       在http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/bundles/core-testing.umd.js:205:46       在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:365:26)       在ProxyZoneSpec.webpackJsonp ... / .. / .. / .. / zone.js / dist / proxy.js.ProxyZoneSpec.onInvoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/zone.js/dist/proxy.js:79:1)       在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:364:32)       at Object.onInvoke(http://localhost:9876/_karma_webpack_/webpack:/C:/Shilpa/Work/Freelancing/ArugamBay/Code/ArugambaySite2/src/Arugambay.Web/~/@angular/core/src/zone/ng_zone.js:271:1)       在ZoneDelegate.invoke(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:364:32)       在Zone.run(http://localhost:9876/base/node_modules/zone.js/dist/zone.js:125:43

如何摆脱此错误? 即使没有模拟,我也会得到同样的错误。

PS:为简洁起见编辑了组件代码。因此,堆栈中的行号可能不匹配。

0 个答案:

没有答案