如何从示例数据 [Angular] return Observable

Question

我正在 Angular 学习浅层集成测试。我有一个组件 HeroesComponent。它有一个服务注入，即 HeroService 和一个子组件 HeroComponent。现在我只想模拟服务注入。我在 HEROES: Hero[] 中有一些示例数据这是我的规范文件：

heores.component.spec.ts

import { Hero } from "../hero"
import { HeroesComponent } from "./heroes.component";
import { HeroService } from "../hero.service";
import { TestBed, ComponentFixture } from "@angular/core/testing";
import { NO_ERRORS_SCHEMA } from "@angular/core";
import { of } from "rxjs/internal/observable/of";

describe('HeroesComponent', () => {
    let HEROES: Hero[];
    let mockHeroService: HeroService;
    let fixture: ComponentFixture<HeroesComponent>

    beforeEach(() => {
        HEROES = [
            {id: 1, name: 'Ant man', strength: 20},
            {id: 2, name: 'Gohan', strength: 10},
            {id: 3, name: 'Goku', strength: 5}
        ];
        mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);

        TestBed.configureTestingModule({
            declarations: [HeroesComponent],
            providers: [
                {provide: HeroService, useValue: mockHeroService}
            ],
            schemas: [NO_ERRORS_SCHEMA]
        })

        fixture=TestBed.createComponent(HeroesComponent);
     })

     it('should set heroes correctly from the service', () => {
        // arrange
        mockHeroService.getHeroes.and.returnValue(of(HEROES));

        // act
        fixture.detectChanges();

        // assert
        expect(fixture.componentInstance.heroes.length).toBe(3);
    })
})

但是我在控制台上遇到了这个错误。问题出在我的 it() 方法中的 and：

ERROR in src/app/heroes/heroes.second.spec.ts(32,39): error TS2339: Property 'and' does not exist > on type '() => Observable'.

请指出我的错误。欢迎索取更多代码。谢谢。

PS：这是 HeroesComponent 的代码：

import { Component, OnInit } from '@angular/core';
import { Hero } from '../hero';
import { HeroService } from '../hero.service';

@Component({
  selector: 'app-heroes',
  templateUrl: './heroes.component.html',
  styleUrls: ['./heroes.component.css']
})
export class HeroesComponent implements OnInit {
  heroes: Hero[];

  constructor(private heroService: HeroService) { }

  ngOnInit() {
    this.getHeroes();
  }

  getHeroes(): void {
    this.heroService.getHeroes()
    .subscribe(heroes => this.heroes = heroes);
  }

  add(name: string): void {
    name = name.trim();
    var strength = 11
    if (!name) { return; }
    this.heroService.addHero({ name, strength } as Hero)
      .subscribe(hero => {
        this.heroes.push(hero);
      });
  }

  delete(hero: Hero): void {
    this.heroes = this.heroes.filter(h => h !== hero);
    this.heroService.deleteHero(hero).subscribe();
  }
}

这是我正在关注的 pluralsight 教程的屏幕截图。对他来说，代码运行正常，没有任何错误：

Answer 1

问题出在模拟上，您需要将 jasmine.createSpybj 的语法从

更改为

mockHeroService = jasmine.createSpyObj(['getHeroes', 'addHero', 'deleteHero']);

到

mockHeroService = jasmine.createSpyObj('HeroService', ['getHeroes', 'addHero', 'deleteHero']);

并且您还需要在创建组件之前移动 mockHeroService.getHeroes.and.returnValue(of(HEROES));。因为当你创建一个组件时，你的构造函数和 ngOnInit 方法将被调用。我们不会返回间谍数据，因为我们在这之后写了这个声明。

您还需要更改创建间谍的语句：

let mockHeroService: jasmine.SpyObj<HeroService>;

它将解决您的问题。请找到 documentation here

如何从示例数据 [Angular] return Observable

How to return an Observable from a sample data [Angular]

karma-jasmine

angular