Angular - 组件中订阅功能的单元测试 [英] Angular - unit test for a subscribe function in a component

问题描述

用于订阅的 Angular 4 单元测试.

Angular 4 unit test for a subscribe.

我想测试我的订阅是否返回了一组用户.我想模拟一个用户列表并测试一个名为 getUsers 的函数.

I want to test that my subscribe returns an array of Users. I want to mock a list of users and test a function called getUsers.

订阅单元测试不起作用.语法有问题.

The subscribe unit test doesnt work. Something wrong with the syntax.

这是我的用户界面:

export interface User {
  id: number;
  name: string;
  username: string;
  email: string;
  address: {
    street: string;
    suite: string;
    city: string;
    zipcode: string;
    geo: {
      lat: string;
      lng: string;
    }
  };
  phone: string;
  website: string;
  company: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

这是我要测试的组件:

import { Component, OnInit } from "@angular/core";
import { Observable } from "rxjs/Observable";

import { UserService } from "../../services/user.service";
import { User } from "../../models/user.model";

@Component({
  selector: "home-users",
  templateUrl: "./home.component.html"
})

export class HomeComponent implements OnInit {
  private listOfUsers: User[];

  constructor(private userService: UserService) {
  }

  ngOnInit() {
    this.getUsers();
  }

  getUsers(): void {
    this.userService.getUsers().subscribe(users => {
      this.listOfUsers = users;
    });
  }
}

这是我的单元测试尝试:

import { TestBed, async, inject } from "@angular/core/testing";
import { HttpModule } from "@angular/http";

import { HomeComponent } from "./home.component";
import { UserService } from "../../services/user.service";
import { User } from "../../models/user.model";

describe("HomeComponent", () => {
  let userService;
  let homeComponent;
  let fixture;
  let element;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        HomeComponent
      ],
      providers: [
        UserService
      ],
      imports: [HttpModule]
    }).compileComponents();
  }));

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

  it("should call getUsers and return list of users", async(() => {
    // Arrange
    let response: User[] = [];

    // Act
    homeComponent.getUsers();

    fixture.detectChanges();
    fixture.whenStable().subscribe(() => {
        expect(homeComponent.listOfUsers).toEqual(response);
    });
  }));
});

推荐答案

rxjs@6 及以上版本需要这个.对于较旧的 rxjs 版本，答案如下:

You need this for version rxjs@6 and above. For older rxjs version answer is below:

import { of } from 'rxjs';

it("should call getUsers and return list of users", async(() => {
  const response: User[] = [];

  spyOn(userService, 'getUsers').and.returnValue(of(response))

  homeComponent.getUsers();

  fixture.detectChanges();

  expect(homeComponent.listOfUsers).toEqual(response);
}));

对于旧的 rxjs 版本更改导入:

For old rxjs version change import from:

import { of } from 'rxjs';

到

import { of } from 'rxjs/observable/of';

这篇关于Angular - 组件中订阅功能的单元测试的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！