第一次角度测试返回 Observable 的方法答案

【问题标题】：Angular testing for first time a method which returns Observable第一次角度测试返回 Observable 的方法
【发布时间】：2018-06-19 08:06:01
【问题描述】：

您好，感谢您抽出宝贵时间：

我正在尝试学习如何测试具有返回 Observable 的方法的服务。

我已经完成了Angular页面的英雄之旅教程，直到路由模块，我想对代码进行单元测试。

这里是 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) {
  }

}

这是我目前正在做的单元测试：

    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));
  }));
});

测试给出的结果是：

我也读过： 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

你能帮我理解为什么它给出'Expected undefined to be greater than 0.'

【问题讨论】：

标签： javascript angular unit-testing

【解决方案1】：

我认为您的问题是您没有正确注入您的服务（您正在从 '@angular/core/testing' 导入 'inject' 但没有使用它）。

测试 Angular 服务的最佳方法是Angular TestBed class，其中：

为单元测试配置和初始化环境，并提供在单元测试中创建组件和服务的方法。

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)
     }));
  })
});

这是一个使用 Jasmine 的 plunkr 和下面的示例： https://embed.plnkr.co/Kgkozh7gZ9GMdwHgjcph/

来源：

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

【讨论】：