CODEWITHSUNDEEP
angulartypescriptkarma-jasminekarma-runner
Georgi Koemdzhiev
Georgi Koemdzhiev

Reputation: 11931

TypeError during cleanup of component

I am trying to figure out why my angular component test is failing. Looking at the stack trace the issue seems to be coming from the fact that the _subscriptions object is undefined but I don't understand how that's possible or why this is happeing. That is the full stack that I am getting when the test fails:

HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 8 of 26 SUCCESS (0 secs / 0.191 secs)
ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at http://localhost:9876/_karma_webpack_/src/app/player/player.component.ts:58:29
    at Array.map (<anonymous>)
    at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
    at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
    at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
    at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
    at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
    at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)
    at ViewRef_.destroy (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:27128:1)}
HeadlessChrome 79.0.3945 (Windows 10.0.0): Executed 9 of 26 SUCCESS (0 secs / 0.207 secs)
ERROR: 'Error during cleanup of component', Object{component: PlayerComponent{router: Object{navigate: ..., events: ...}, _subscriptions: Object{routerSubscription: ...}}, stacktrace: TypeError: Cannot read property 'unsubscribe' of undefined
TypeError: Cannot read property 'unsubscribe' of undefined
    at http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:58:29
    at Array.map (<anonymous>)
    at PlayerComponent.ngOnDestroy (http://localhost:9876/_karma_webpack_/src/app/web-player/web-player.component.ts:57:36)
    at callProviderLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28212:1)
    at callElementProvidersLifecycles (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28171:1)
    at callLifecycleHooksChildrenFirst (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:28153:1)
    at destroyView (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:38603:1)
    at callWithDebugContext (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39716:1)
    at Object.debugDestroyView [as destroyView] (http://localhost:9876/_karma_webpack_/node_modules/@angular/core/fesm2015/core.js:39313:1)

That is my PlayerComponent.ts:

import { Component, OnInit, OnDestroy, Input } from '@angular/core';
import { Router, RouterEvent, NavigationStart } from '@angular/router';
import { combineLatest, Subscription } from 'rxjs';

export class WebPlayerComponent implements OnInit, OnDestroy {
    private _subscriptions: { [key: string]: Subscription } = {};

    constructor(
        private readonly router: Router
    ) { }

    ngOnInit() {
        this._subscriptions ["routerSubscription"] = this.router.events.subscribe((event: RouterEvent) => {
            // other logic here
        });
    }

    ngOnDestroy() {
        Object.keys(this._subscriptions).map((key) => {
            this._subscriptions[key].unsubscribe();
        });
    }
}

That is the test for it:

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Router } from '@angular/router';

describe('PlayerComponent', () => {
    let component: PlayerComponent;
    let fixture: ComponentFixture<PlayerComponent>;

    beforeEach(async(() => {
        let router = {
            navigate: jasmine.createSpy(),
            events: {
                subscribe: jasmine.createSpy(),
                unsubscribe: jasmine.createSpy()
            }
        };


        TestBed.configureTestingModule({
            providers: [
                { provide: Router, useValue: router },
            ],
            declarations: [ PlayerComponent ]
        })
        .compileComponents();
    }));

    beforeEach(() => {
        fixture = TestBed.createComponent(PlayerComponent);
        fixture.detectChanges();
        component = fixture.componentInstance;

    });

    it('should create', () => {
        expect(component).toBeTruthy();
    });
});

Upvotes: 0

Views: 2922

Answers (1)

AliF50
AliF50

Reputation: 18849

Are you sure routerSubscription is the only subscription? Is there another subscription happening that could cause the unsubscribe to be undefined? Try importing RouterTestingModule instead of stubbing it. angular.io/api/router/testing/RouterTestingModule Try putting console.log(key) right before the unsubscribe to see which key it is trying to unsubscribe from.

Upvotes: 1

Related Questions