在单元测试中模拟 Angular 2 组件依赖项答案

【问题标题】：Mocking Angular 2 component dependencies in unit tests在单元测试中模拟 Angular 2 组件依赖项
【发布时间】：2017-01-30 17:15:54
【问题描述】：

在对组件进行单元测试时，我在访问 Angular 2 中模拟服务的方法时遇到了一些困难。我正在寻找如何做到这一点的样板，我的用例是相当标准的。阅读并尝试遵循 Angular 文档后，我在访问我的模拟服务的方法时仍然遇到问题。

在这个阶段，我只想让组件访问模拟服务的 API，并最终监视服务登录方法以确保它被调用

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { DBService } from '../../services/db/db.service';
import { TabsPage } from '../tabs/tabs.page';

@Component({
  templateUrl: 'login.page.html',
})
export class LoginPage {
  constructor(public navCtrl: NavController, public dbService: DBService) {}

  login() {
   this.dbService.login();
  }
}

db.service.mock.ts

export class MockDBService {

  public login(): string {
    return 'login service';
  }
}

import { LoginPage } from './login.page';
import { TestBed, inject, ComponentFixture } from '@angular/core/testing';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NavController } from 'ionic-angular';
import { mockNavController } from 'ionic-angular/util/mock-providers';
import { DBService } from '../../services/db/db.service';
import { MockDBService } from '../../services/db/db.service.mock';

describe('Login Page:', () => {

  let fixture: ComponentFixture<LoginPage>;
  let component: LoginPage;
  let mockDBServiceInstance: MockDBService;

  beforeEach(() => {

    TestBed.configureTestingModule({
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
      declarations: [
        LoginPage,
      ],
      providers: [
        {provide: NavController, useValue: mockNavController},
        {provide: DBService, useValue: MockDBService},
        LoginPage,
      ],
    });

    fixture = TestBed.createComponent(LoginPage);
    component = fixture.componentInstance;
    mockDBServiceInstance = TestBed.get(DBService);

  });

  describe('testing the login functionality', () => {
    it('should call the login method on the DBService', () => {
      spyOn(mockDBServiceInstance, 'login');
      component.login();
      expect(mockDBServiceInstance.login).toHaveBeenCalled();
    });
  });
});

这会抛出

Error: <spyOn> : login() method does not exist

到标准输出

我多年来一直没有真正的快乐，所以任何关于如何以惯用方式做到这一点的提示将不胜感激。

谢谢

【问题讨论】：

标签： javascript unit-testing angular typescript

【解决方案1】：

如果你想提供一个模拟类，你必须使用useClass：

{provide: DBService, useClass: MockDBService}

【讨论】：