Angular Firestore 测试：snapshotChanges() 不是函数

Question

我正在运行 ng test，而 Karma 无法通过 snapshotChanges() 函数。该代码有效，但我需要它来测试。

目的是在 Firestore 中更改所有者表时自动更新它。同样，代码按预期工作，但我需要在运行 ng test 时证明测试通过。

下面是代码。该服务处理所有 Firebase 方法。它在lookup-owner.ts 中被调用，它获取所有所有者并将它们显示在一个表格中，然后可以对其进行搜索。

来自 Karma 的错误

TypeError: this.firestore.collection(...).snapshotChanges is not a function
    at OwnerService.fetchOwners (http://localhost:9876/_karma_webpack_/main.js:7293:48)
    at LookupOwnerComponent.getOwners (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/lookup-owner/lookup-owner.component.ts:11:14)
    at LookupOwnerComponent.ngOnInit (http://localhost:9876/_karma_webpack_/webpack:/src/app/components/lookup-owner/lookup-owner.component.ts:21:4)
    at callHook (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2521:1)
    at callHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2492:1)
    at executeInitAndCheckHooks (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:2443:1)
    at refreshView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9422:1)
    at renderComponentOrTemplate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:9521:1)
    at tickRootContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10747:1)
    at detectChangesInRootView (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/__ivy_ngcc__/fesm2015/core.js:10772:1)

LookupOwner.Component.TS

import { Component, OnInit } from '@angular/core';
import { DocumentChangeAction } from '@angular/fire/firestore';
import { OwnerService } from 'src/app/Services/owner.service';

@Component({
  selector: 'app-lookup-owner',
  templateUrl: './lookup-owner.component.html',
  styleUrls: ['./lookup-owner.component.css']
})

export class LookupOwnerComponent implements OnInit {

  constructor(public ownerService: OwnerService) { }

  ngOnInit(): void {

    this.getOwners();

    console.log(this.ownerList);

  }

  ownerList: any;
  searchword: string = '';

  getOwners = () =>
    this.ownerService
    .fetchOwners()
    .subscribe(res => (this.ownerList = res));

}

Owner.service.ts

import { Injectable } from '@angular/core';
import { AngularFirestore } from '@angular/fire/firestore';
import { FormControl, FormGroup } from '@angular/forms';

@Injectable({
  providedIn: 'root'
})
export class OwnerService {

  constructor(private firestore: AngularFirestore) { }

  form = new FormGroup({
    ownerID: new FormControl(''),
    ownerName: new FormControl(''),
    ownerPhone: new FormControl(''),
    ownerEmail: new FormControl(''),
  })

  createOwner(owner: any) {
    return new Promise<any>((resolve, reject) =>{
      this.firestore
        .collection("owners")
        .add(owner)
        .then(res => {}, err => reject(err));
    })
  }

  fetchOwners() {
     return this.firestore.collection("owners").snapshotChanges();
  }

}

提前感谢您的帮助！

Answer 1

我会模拟 OwnerService 而不会提供它的实际实例。

在您的 TestBed 中，执行以下操作：

let mockOwnerService: any;
beforeEach(waitForAsync(() => { // waitForAsync is async in older versions of Angular
  // the first argument of createSpyObj is a general string of the external dependency and the
  // second argument are the public methods that can be mocked
  mockOwnerService = jasmine.createSpyObj('ownerService', ['createOwner', 'fetchOwners']);
  mockOwnerService.createOwner.and.returnValue(Promise.resolve(true)); // up to you how you want to mock
  mockOwnerService.fetchOwners.and.returnValue(of([])); // up to you how you want to mock
  TestBed.configureTestingModule({
    declarations: [LookupOwnerComponent],
    providers: [{ provide: OwnerService, useValue: mockOwnerService }]
  }).compileComponents();
}));

从官方文档中查看link。它应该会有所帮助。