angular - 模拟与服务的依赖关系导致 firebase 错误

Question

我正在使用以下代码模拟与 authservice 的依赖关系:

login.component.spec

import { LoginComponent } from "./login.component";
import { ComponentFixture, inject, TestBed } from "@angular/core/testing";
import { async } from "q";
import { MatCardModule } from "@angular/material";
import { AuthService } from "../../services/auth/auth.service";
import { Log } from "@angular/core/testing/src/logger";
import { NO_ERRORS_SCHEMA } from "@angular/core";

class MockAuthService extends AuthService {
  isAuthenticated() {
    return "Mocked";
  }
}

describe("LoginComponent", () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let componentService: AuthService;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [LoginComponent],
      providers: [AuthService],
      imports: [MatCardModule]
    });
    TestBed.overrideComponent(LoginComponent, {
      set: { providers: [{ provide: AuthService, useClass: MockAuthService }] }
    });

    fixture = TestBed.createComponent(LoginComponent);
    component = fixture.componentInstance;
    componentService = fixture.debugElement.injector.get(AuthService);
  }));

  it("Service injected via component should be and instance of MockAuthService", () => {
    expect(componentService instanceof MockAuthService).toBeTruthy();
  });
});

login.component

import {Component, OnInit} from '@angular/core';

import {AuthService} from '../../services/auth/auth.service';
import {Router} from '@angular/router';
import {GithubService} from '../../services/github/github.service';
import {Errorcode} from './errorcode.enum';


@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.sass'],

})
export class LoginComponent implements OnInit {
  public loginError: string | boolean = false;

  constructor(public authService: AuthService, public router: Router, private data: GithubService) {
  }

  public signInWithGithub(): void {
    this.authService.loginwithGithubProvider()
      .then(this.loginError = null)
      .catch(err => {
        if (err === Errorcode.FIREBASE_POPUP_CLOSED) {
        this.loginError = 'The popup has been closed before authentication';
        }
        if (err === Errorcode.FIREBASE_REQUEST_EXESS) {
          this.loginError = 'To many requests to the server';
        }
      }
    );
  }

  public logout(): void {
    this.authService.logout();
  }

  ngOnInit() {
  }
}

但是如果我查看结果，我会不断收到以下错误:

Error: StaticInjectorError(DynamicTestModule)[AuthService -> AngularFireAuth]: StaticInjectorError(Platform: core)[AuthService -> AngularFireAuth]: NullInjectorError: No provider for AngularFireAuth! in http://localhost:9876/_karma_webpack_/vendor.js (line 59376)

知道如何解决这个问题吗？

Answer 1

我已在 Stackblitz 中重现了您的问题.目前在 Stackblitz 中，测试全部通过，但您会注意到我已经注释掉了您的 MockAuthService 声明，如下所示:

// class MockAuthService extends AuthService {
//     isAuthenticated() {
//       return "Mocked";
//     }
// }

并将其替换为:

class MockAuthService implements Partial<AuthService> {
    isAuthenticated() {
      return "Mocked";
    }
    loginwithGithubProvider() {
      return new Promise((resolve, reject) => resolve())
    }
    logout() {}
}

要注意的关键区别是我替换了 extends与 implements .

要重现您的错误，只需注释掉我对 MockAuthService 的新声明，然后取消注释掉您原来的声明。您在上面描述的错误将再次出现。

这样做的原因是，当您扩展一个类时，您将获得现有类的所有对象、属性、方法等包括构造函数。在你的情况下，我很确定原始 AuthService 的构造函数类已注入(inject) AngularFireAuth，就像我在文件 support.service.ts 中的 Stackblitz 中所做的那样我在哪里实现了 AuthService 的 stub .当您扩展类，然后在覆盖组件时将其注入(inject)到 TestBed 中，然后尝试创建组件时，它会尝试在该原始类中执行构造函数。但是，没有为 AngularFireAuth 提供任何提供程序，因此它引发了您看到的错误。简单地将 AngularFireAuth 添加到 providers 数组并不是正确的解决方案，因为您要测试的是组件，而不是服务。

当我想将模拟类注入(inject)测试套件时，就像您在此处所做的那样，我通常使用 implements然后 Partial<>这样我就不必实现原始类的所有方法和属性，并且我只模拟了我想要的东西，而不是拖延原始类的实现细节。

关于 implements 之间的差异有很好的讨论和 extends here .

一些进一步的说明:

• 我不得不为 Router 添加另外两个模拟服务和 GithubService .请注意，我做这些是作为 spy 而不是服务类模拟，只是为了展示一种不同的方式来做这些。我注意到你已经导入了 NO_ERRORS_SCHEMA ，可能是为了避免必须定义这些。我自己不使用该模式，尽管它看起来相当流行，因为我不想掩盖错误——我宁愿让它们暴露并修复它们。 :)
• 我还添加了另一个规范，只是为了展示您如何通过测试 signInWithGithub() 的一部分来采取下一步行动方法。

希望对您有所帮助。