Angular 订阅函数的单元测试

我想测试一下我是否接收了一组人。我需要测试，我总是得到相同类型的响应，所以如果从后端更改对象，我可以检测到它

我的界面：

export interface People {
   peopleDtos: [{
      id: number,
      name: String,
      surname: String
      from: String,
      tel: String
   }],
   page: number,
   size: number;
   total: number;
   order: String;
}

export class PeopleComponent implements OnInit {
  private people: People[];

  constructor(private peopleService: peopleService) {
  }

  ngOnInit() {
    this.fetchPeople();
  }

  fetchPeople(): void {
    this.peopleService.getPeople().subscribe(response => {
      this.people = response;
    });
  }
}

import 'zone.js/dist/zone-testing';
import { async, TestBed, ComponentFixture, inject } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { PeopleService } from "../../services/people.service";
import {of} from 'rxjs/observable/of';

describe("PeopleComponent", () => {
  let component: DocumentoAudienciaComponent;
  let fixture: ComponentFixture<PeopleComponent >;
  let peopleService: PeopleService;

  beforeEach(async(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
    TestBed.configureTestingModule({
      declarations: [
        PeopleComponent
      ],
      providers: [
        PeopleService
      ],
      imports: [HttpModule]
    }).compileComponents();
  }));

  beforeEach(inject([UserService], s => {
    peopleService = s;
    fixture = TestBed.createComponent(HomeComponent);
    homeComponent = fixture.componentInstance;
    element = fixture.nativeElement;
  }));

it('Should fetch people and return list of people', async(() => {
    let response: People;
    spyOn(peopleService, 'getPeople').and.returnValue(of(response));
    component.fetchPeople();
    fixture.detectChanges();
    expect(component.fetchPeople).toEqual(response);
  }));

我的组件：

export interface People {
   peopleDtos: [{
      id: number,
      name: String,
      surname: String
      from: String,
      tel: String
   }],
   page: number,
   size: number;
   total: number;
   order: String;
}

export class PeopleComponent implements OnInit {
  private people: People[];

  constructor(private peopleService: peopleService) {
  }

  ngOnInit() {
    this.fetchPeople();
  }

  fetchPeople(): void {
    this.peopleService.getPeople().subscribe(response => {
      this.people = response;
    });
  }
}

import 'zone.js/dist/zone-testing';
import { async, TestBed, ComponentFixture, inject } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { PeopleService } from "../../services/people.service";
import {of} from 'rxjs/observable/of';

describe("PeopleComponent", () => {
  let component: DocumentoAudienciaComponent;
  let fixture: ComponentFixture<PeopleComponent >;
  let peopleService: PeopleService;

  beforeEach(async(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
    TestBed.configureTestingModule({
      declarations: [
        PeopleComponent
      ],
      providers: [
        PeopleService
      ],
      imports: [HttpModule]
    }).compileComponents();
  }));

  beforeEach(inject([UserService], s => {
    peopleService = s;
    fixture = TestBed.createComponent(HomeComponent);
    homeComponent = fixture.componentInstance;
    element = fixture.nativeElement;
  }));

it('Should fetch people and return list of people', async(() => {
    let response: People;
    spyOn(peopleService, 'getPeople').and.returnValue(of(response));
    component.fetchPeople();
    fixture.detectChanges();
    expect(component.fetchPeople).toEqual(response);
  }));

我的规范文件：

export interface People {
   peopleDtos: [{
      id: number,
      name: String,
      surname: String
      from: String,
      tel: String
   }],
   page: number,
   size: number;
   total: number;
   order: String;
}

export class PeopleComponent implements OnInit {
  private people: People[];

  constructor(private peopleService: peopleService) {
  }

  ngOnInit() {
    this.fetchPeople();
  }

  fetchPeople(): void {
    this.peopleService.getPeople().subscribe(response => {
      this.people = response;
    });
  }
}

import 'zone.js/dist/zone-testing';
import { async, TestBed, ComponentFixture, inject } from '@angular/core/testing';
import { HttpClientTestingModule } from '@angular/common/http/testing';
import { PeopleService } from "../../services/people.service";
import {of} from 'rxjs/observable/of';

describe("PeopleComponent", () => {
  let component: DocumentoAudienciaComponent;
  let fixture: ComponentFixture<PeopleComponent >;
  let peopleService: PeopleService;

  beforeEach(async(() => {
    TestBed.resetTestEnvironment();
    TestBed.initTestEnvironment(BrowserDynamicTestingModule, platformBrowserDynamicTesting());
    TestBed.configureTestingModule({
      declarations: [
        PeopleComponent
      ],
      providers: [
        PeopleService
      ],
      imports: [HttpModule]
    }).compileComponents();
  }));

  beforeEach(inject([UserService], s => {
    peopleService = s;
    fixture = TestBed.createComponent(HomeComponent);
    homeComponent = fixture.componentInstance;
    element = fixture.nativeElement;
  }));

it('Should fetch people and return list of people', async(() => {
    let response: People;
    spyOn(peopleService, 'getPeople').and.returnValue(of(response));
    component.fetchPeople();
    fixture.detectChanges();
    expect(component.fetchPeople).toEqual(response);
  }));

导入'zone.js/dist/zone testing'；
从“@angular/core/testing”导入{async，TestBed，ComponentFixture，inject}；
从'@angular/common/http/testing'导入{HttpClientTestingModule}；
从“../../services/people.service”导入{PeopleService}”；
从“rxjs/observable/of”导入{of}；
描述（“PeopleComponent”，（）=>{
let组件：文档组件；
let夹具：组件夹具；
让人民服务：人民服务；
beforeach（异步（（）=>{
TestBed.resetTestEnvironment（）；
initTestEnvironment（BrowserDynamicTestingModule，platformBrowserDynamicTesting（））；
TestBed.configureTestingModule({
声明：[
人成分
],
供应商：[
人民服务
],
导入：[HttpModule]
}).compileComponents（）；
}));
beforeach（inject（[UserService]，s=>{
peopleService=s；
fixture=TestBed.createComponent（HomeComponent）；
homeComponent=fixture.componentInstance；
元素=fixture.nativeElement；
}));
它（'Should fetch people and return list of people'，异步（（）=>{
让我们回应：人；
spyOn（peopleService，'getPeople'）。和.returnValue（of（response））；
fetchPeople（）；
fixture.detectChanges（）；
expect（component.fetchPeople）.toEqual（response）；
}));

测试不起作用，我得到以下错误：

失败：无法读取未定义的属性“order”

---

这里您没有在线声明mock-

let response:People；

它只是定义了模型，而不是确切的mock值：

尝试：

---

您可能需要根据您的测试场景调整响应对象