用服务模拟dependecies导致firebase错误

Question

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();
  });
});

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() {
  }
}

我知道怎么解决这个问题吗？

Answer 1

我已经把你的问题复制了一遍。在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。

一些进一步的说明：

• 我不得不为Router和GitHubService添加另外两个被模仿的服务。请注意，我是作为间谍而不是服务类模拟来做这些的，只是为了展示一种不同的方法来做这些。我注意到您已经导入了no_errors_schema，这可能是为了避免必须定义这些。我自己不使用该模式，尽管它似乎相当流行，因为我不想掩盖错误--我宁愿公开并修复它们。:)
• 我还添加了另一个规范，只是为了说明如何通过测试SigninWithGitHub()方法的一部分来进行下一步。

我希望这能有所帮助。