CODEWITHSUNDEEP
unit-testingangularkarma-jasmine
Manish Gautam
Manish Gautam

Reputation: 516

Angular 2 testing components with observables

I am testing a angular component and the code is 

ngOnInit(): void {
        this.getNar();
    }

    getNar(): void {
        let self = this;
        this.dashboardService.getNar().subscribe(
            res => self.narIds = res.narIds,
            error => self.error = error,
            function () {
                self.narIds.forEach(element => {
                   // Some Code
                });
            }
        );
    }

The Service provider for this i.e Dashboard Service is 

  getNar(): Observable<any> {
    return this.http.get(Config.Api.GetNar + '1/nar').map((res: Response) => res.json());
  }

And my Test cases are:

let res = '"narIds":[{"id":1,"narId":"104034-1","narName":"SDLC Platform"},{"id":2,"narId":"64829-1","narName":"EMS-EMS"}]';

describe('Application Health Component', () => {
    beforeEach( async(() => {
       TestBed.configureTestingModule({
            providers: [MockBackend, DashboardService],
            imports: [ChartsModule, SlimScrollModule, HttpModule],
            declarations: [CompletedFilterPipe, ApplicationHealthComponent]
        })
            .compileComponents()
            .then(createComponent);
    }));

    it('should call the getNar when ngOnInit is called', async(() => {
        spyOn(dashboardService, 'getNar').and.returnValue(Observable.of(res));
        comp.ngOnInit();
        expect(dashboardService.getNar).toHaveBeenCalled();
    }));
});

function createComponent() {
    fixture = TestBed.createComponent(ApplicationHealthComponent);
    comp = fixture.componentInstance;
    dashboardService = fixture.debugElement.injector.get(DashboardService);
};

The problem I am getting is the test case gives an error that forEach is undefined.

enter image description here

Upvotes: 0

Views: 423

Answers (1)

Jonathan Niu
Jonathan Niu

Reputation: 321

The error message is not that forEach function is not defined, it's that your object "self.narIds" is undefined. Fairly sure this is due to the way you declared your onComplete function in Observable.subscribe

related to this Rx Subscribe OnComplete fires but cannot use the data

change your 

function () {
     self.narIds.forEach(element => {
     // Some Code
 });

code to 

() => {
    self.narIds.forEach(element => {
    // Some Code
 });

Upvotes: 1

Related Questions