angular - 如何测试与 Firebase 交互的服务？

Question

似乎从 Firebase 获取数据的惯例是创建一个在内部使用 AngularFire 的服务类。然后，在您应用程序的组件中，您可以注入(inject)和使用该服务。这使您可以在对组件进行单元测试时轻松模拟服务。

但是，我仍然不清楚如何着手测试实际服务本身。

举个例子，假设我在 Firebase 中有一个 todo list 节点，我有一个简单的服务可以获取所有 todos，如下所示:

import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';

@Injectable()
export class TodoService {
  constructor(private af: AngularFire) { }

  getAll(): FirebaseListObservable<any[]> {
    return this.af.database.list('todos');
  }
}

您将如何测试该服务是否符合您的预期？

Answer 1

Reaz 在他的回答中推荐了 MockFirebase。但是，MockFirebase 不适用于 Firebase 3。有一个名为 firebase-mock 的库，它似乎是由与 MockFirebase 相同的一些人开发的。这增强了 MF，添加了 Firebase 3 支持，但是它 doesn't appear to play nicely with WebPack yet .

这是我最后做的:

我想到 FirebaseListObservable 继承自 RXJS 的 Observable。因此，您可以模拟 AngularFire 对 list 的调用并让它返回您自己的 Observable。

一些示例代码展示了这一点:

todos.service.spec.ts

let fixtureTodos = [
  { 'text': 'Get milk' },
  { 'text': 'Take out the trash' },
  { 'text': 'Get gas for the car' },
  { 'text': 'Pay parking ticket' },
  { 'text': 'Pick up dry cleaning' },
];
let angularFireDatabaseStub = { list: () => {} };
let mockTodos$ = Observable.of(fixtureTodos);

describe('TodosService', () => {
  beforeEach(() => {
    spyOn(angularFireDatabaseStub, 'list').and.returnValue(mockTodos$);

    TestBed.configureTestingModule({
      providers: [
        TodosService,
        { provide: AngularFireDatabase, useValue: angularFireDatabaseStub },
      ]
    });
  });

  it('#getAll', inject([TodosService], (service: TodosService) => {
    let todos$ = service.getAll();
    todos$.subscribe(todos => {
      expect(todos[0].text).toEqual(fixtureTodos[0].text);
      expect(todos[0]).toEqual(jasmine.any(Todo));
    });
  }));
});

todos.service.ts

@Injectable()
export class TodosService {
  constructor(public db: AngularFireDatabase) { }

  getAll(): Observable<Todo[]> {
    return this.db.list('todos').map(arr => {
      return arr.map(t => new Todo(t.text));
    });
  }
}

todo.model.ts

export class Todo {
  constructor(public text: string) {}
}