javascript - 在单元测试中模拟 Angular 2 组件依赖

Question

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

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

登录页面.ts

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

登录.page.spec.ts

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

到标准输出

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

谢谢

Answer 1

如果你想提供一个模拟类，你必须使用 useClass 来实现:

{provide: DBService, useClass: MockDBService}