如何对使用 AngularFire 和 Jasmine 的 Angular 服务进行单元测试？

Question

我正在尝试测试将使用 AngularFire 的 Angular 服务。

快速设置：

  "dependencies": {
    "@angular/animations": "^17.3.8",
    "@angular/cdk": "^17.3.8",
    "@angular/common": "^17.3.8",
    "@angular/compiler": "^17.3.7",
    "@angular/core": "^17.3.8",
    "@angular/fire": "^18.0.1",
    "rxjs": "~7.8.0",
    "sass": "^1.77.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^17.3.7",
    "@angular/cli": "^17.3.7",
    "@angular/compiler-cli": "^17.3.7",
    "@types/jasmine": "~5.1.0",
    "jasmine-core": "~5.1.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.2.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.1.0",
    "typescript": "~5.4.2"
  }

服务是这样的：

import { EventEmitter, Injectable } from '@angular/core';
import { onValue, getDatabase, ref } from "firebase/database";

@Injectable({
  providedIn: 'root'
})
export class LocationService {
  private database = getDatabase();
  private referencePath = "warehouse/locations";

  locationsEmitter$ = new EventEmitter<String[]>();
  
  constructor() {
    console.log('constructor locations')
    onValue(ref(this.database, this.referencePath), (snapshot) => {
      if(snapshot.exists()) {
        let keys: String[] = [];
        snapshot.forEach((loc) => {
          keys.push(loc.key);
        });
        this.locationsEmitter$.emit(keys);
      }
    });
  }
}

和测试：

import { TestBed } from '@angular/core/testing';
import { LocationService } from './location.service';
import { AngularFireModule } from '@angular/fire/compat';
import { provideFirebaseApp, initializeApp } from '@angular/fire/app';
import { environment } from 'src/environments/environment';

describe('LocationService', () => {
  let service: LocationService;
  
  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        AngularFireModule
      ],
      providers: [
        provideFirebaseApp(() => initializeApp(environment.firebase)),
      ]
    }).compileComponents();

    service = TestBed.inject(LocationService);
  });

  it('should be created', () => {
    expect(service).toBeTruthy();
  });
});

我收到错误，这清楚地表明服务中的

getDatabase()

方法存在问题。

LocationService > should be created
FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call initializeApp() first (app/no-app).
error properties: Object({ code: 'app/no-app', customData: Object({ appName: '[DEFAULT]' }) })
    at getApp (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/app/dist/esm/index.esm2017.js:651:29)
    at getDatabase (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@firebase/database/dist/index.esm2017.js:13643:34)
    at new LocationService (http://localhost:9876/_karma_webpack_/webpack:/src/app/services/firebaseRealtimeDatabase/location.service.ts:8:33)
    at Object.factory (ng:///LocationService/ɵfac.js:4:10)
    at callback (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:3219:47)
    at runInInjectorProfilerContext (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:866:9)
    at R3Injector.hydrate (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:3218:21)
    at R3Injector.get (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/core.mjs:3082:33)
    at TestBedImpl.inject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/testing.mjs:1914:52)
    at Function.inject (http://localhost:9876/_karma_webpack_/webpack:/node_modules/@angular/core/fesm2022/testing.mjs:1768:37)

我知道我需要以某种方式提供该方法或模拟它，但我尝试用

import * as database from 'firebase/database'

模拟该模块，然后监视它。我尝试了导入、提供程序、设置的不同配置。

Answer 1

我想如果你添加

provideFirestore(() => getFirestore())

测试文件中的提供商应该可以工作