Angular testing for first time a method which returns Observable

Question

Hello and thank you for your time:

I am trying to learn how to test a service which has a method to return an Observable.

I have done the Tour of heroes tutorial of the Angular page until the routing module, and I would like to unit test the code.

Here is the MyHeroService:

    import {Injectable} from '@angular/core';
import {HEROES} from '../mock-heroes';
import {Hero} from '../Hero';
import {Observable} from 'rxjs/Observable';
import {of} from 'rxjs/observable/of';
import {MessageService} from '../message.service';

@Injectable()
export class MyHeroService {

  getHeroes(): Observable<Hero[]> {
    this.messageService.add('HeroService: fetched all your heroes');
    return of(HEROES);
  }

  getHero(id: number): Observable<Hero> {
    // Todo: send the message _after_ fetching the hero
    this.messageService.add(`HeroService: fetched hero id=${id}`);
    return of(HEROES.find(hero => hero.id === id));
  }

  constructor(private messageService: MessageService) {
  }

}

And here is the unit test I am currently doing:

    import {MyHeroService} from './my-hero.service';
import {MessageService} from '../message.service';
import {async, inject} from '@angular/core/testing';

describe('heroService', () => {


  it('should return an Observable of Hero[]', async(() => {
    const myHeroService = new MyHeroService(new MessageService([]));
    myHeroService.getHero(1).subscribe(result => expect(result).toBeGreaterThan(0));
  }));
});

The result which the test gives is:

I have also read: Unit testing an observable in Angular 2

Unit test 'success' and 'error' observable response in component for Angular 2

Angular 2 Observable Service Karma Jasmine Unit Test not working

Could you help me please to understand why it gives 'Expected undefined to be greater than 0.'

Antoine Guittet · Answer 1 · 2018-01-10T16:44:20.040

I think that your problem is that you are not injecting your service correctly (you are importing 'inject' from '@angular/core/testing' but not using it).

The best way to test an Angular service is Angular TestBed class which:

Configures and initializes environment for unit testing and provides methods for creating components and services in unit tests.

import { TestBed, inject, async} from '@angular/core/testing';
import { HeroService } from './hero.service';

describe('Testing Angular Heroes', () => {
  beforeEach(async(() => {
     TestBed.configureTestingModule({
        providers: [
           HeroService
        ]
     }).compileComponents();
  }));

  describe("Testing my awesome function", () => {
     it('should return true when I call getTrue', inject([HeroService], (heroService: HeroService) => {
        expect(heroService.getTrue()).toBe(true)
     }));
  })
});

Here is a plunkr working with Jasmine and the example below: https://embed.plnkr.co/Kgkozh7gZ9GMdwHgjcph/

Sources:

https://blog.thoughtram.io/angular/2016/11/28/testing-services-with-http-in-angular-2.html https://angular.io/api/core/testing/TestBed

Angular testing for first time a method which returns Observable

1 Answers1