Question

我有以下问题：

我想检查是否在拒绝承诺后填写了错误消息。

login.component.spec

  it('Login should display error', () => {
    spyOn(service, 'returnfalse').and.returnValue(Promise.reject('auth/popup-closed-by-user'));
    component.signInWithGithub();
    expect(component.loginError).toBe('The popup has been closed before authentication');
  });

login.component

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(res => { 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';
          }
        }
      );
  }}

但是在诺言被拒绝后， this.loginError 仍然为空。

有什么想法可以解决吗？

Answer 1

您应该使用fakeAsync() and tick()，这可以确保在执行期望之前执行在promise.then()/promise.catch()方法中指定的回调。

使用angular v11 +的工作示例：

login.component.ts：

import { Component, OnInit } from '@angular/core';
import { AuthService } from './auth.service';

const Errorcode = {
  FIREBASE_POPUP_CLOSED: 'auth/popup-closed-by-user',
  FIREBASE_REQUEST_EXESS: 'auth/request',
};

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

  constructor(public authService: AuthService) {}
  ngOnInit() {}
  public signInWithGithub(): void {
    this.authService
      .loginwithGithubProvider()
      .then((res) => {
        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';
        }
      });
  }
}

auth.service.ts：

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

@Injectable()
export class AuthService {
  async loginwithGithubProvider() {
    return 'real implementation';
  }
}

login.component.spec.ts：

import {
  ComponentFixture,
  fakeAsync,
  TestBed,
  tick,
  waitForAsync,
} from '@angular/core/testing';
import { AuthService } from './auth.service';
import { LoginComponent } from './login.component';

fdescribe('53833383', () => {
  let component: LoginComponent;
  let fixture: ComponentFixture<LoginComponent>;
  let service: AuthService;
  beforeEach(
    waitForAsync(() => {
      service = jasmine.createSpyObj('AuthService', [
        'loginwithGithubProvider',
      ]);

      TestBed.configureTestingModule({
        declarations: [LoginComponent],
        providers: [AuthService],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(LoginComponent);
          component = fixture.componentInstance;
          service = TestBed.inject(AuthService);
        });
    })
  );

  it('Login should display error', fakeAsync(() => {
    spyOn(service, 'loginwithGithubProvider').and.returnValue(
      Promise.reject('auth/popup-closed-by-user')
    );
    component.signInWithGithub();
    tick();
    expect(component.loginError).toBe(
      'The popup has been closed before authentication'
    );
  }));
});

单元测试结果：

承诺茉莉花后检查“此”值

1 个答案: