I am trying to test a component which has ngOnDestroy() method which has all the unsubscribe() method calls. But, while testing, when I run my testing file (spec file) it gives me error saying:
cannot read property 'unsubscribe' of undefined
I have done the following import in my testing file:
import { Subscription } from 'rxjs/Subscription';
so I think this should be enough to get all the methods in Subscription, but still the error is there. Also, I tried adding 'Subscription' to my 'imports', 'declarations' and 'providers' list of the testing file, still the error is there.
Below is a code snippet:
//component
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {
NinjaService } from '../../../../ninja.service';
@Component({
selector: 'ninja-files',
templateUrl: './ninja-files.component.html',
styleUrls: ['./ninja-files.component.css']
})
export class ninjaFilesComponent implements OnInit, OnDestroy {
showNinjaFiles: boolean = true;
addFileSubscription: Subscription;
constructor(private ninjaService: NinjaService) {
........
}
ngOnInit() {
this.addFileSubscription = this.NinjaService.AddedFile$
.subscribe((fileFormat: FileFormat) => {
console.log('File being added: ' + fileFormat.fileName); }
ngOnDestroy() {
this.addFileSubscription.unsubscribe();
}
}
Then I have the testing file for this component as follows:
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import {
NinjaService } from '../../../../ninja.service';
import { TestBed, async, fakeAsync ,ComponentFixture, } from '@angular/core/testing';
import { DebugElement } from '@angular/core';
import { By } from '@angular/platform-browser';
import {} from 'jasmine';
describe('Component: NinjaFiles', () => {
let fixture: ComponentFixture<ninjaFilesComponent>;
let component: ninjaFilesComponent;
let ninjaServiceStub;
beforeEach( async(() => {
//stub NinjaService
let ninjaServiceStub= {};
fixture = TestBed.configureTestingModule({
declarations: [ ninjaFilesComponent],
}).createComponent(ninjaFilesComponent);
component = fixture.componentInstance;
}));
it('Page Title', async(() => {
let pageTitle = fixture.debugElement.query(By.css('.page-title'));
expect(pageTitle).toBeTruthy();
}));
it('Counting the files', () => {
let fileCount= fixture.debugElement.query(By.css('.file-count'));
expect(fileCount).toBeTruthy();
});
When I run the above testing code, it gives me error saying "cannot read property 'unsubscribe' of undefined" (which means its not being able to define the subscription object 'addFileSubscription' that I've defined in the component class.
Can somebody suggest a workaround?
import { Subscription } from 'rxjs/Subscription';
All this means is that you can access the Subscription
class from the ninjaFilesComponent
class file.
The problem is that the addFileSubscription
is never initialized. In order for the ngOnInit
to be called, you need to call
fixture.detectChanges();
Aside from that, the other problems I see are:
You never add the stub to the providers
TestBed.configureTestingModule({
providers: [
{ provide: NinjaService, useValue: ninjaServiceStub }
]
})
You need to actually implement something in the stub
let ninjaServiceStub = {
AddedFile$: Observable.of(new FileFormat(...))
}
You're not using the service in the component correctly
this.NinjaService.AddedFile$
// should be
this.ninjaService.AddedFile$
// lowercase