Angular 6 - 生命周期 Hook 中的 promise 使其他测试失败

Question

我对 Angular Testing 有疑问。我不知道这是一个错误还是我做错了什么。

我有 2 个组件。一种在 ngOnInit 中使用 promises，另一种是完全空的。

使用 promises 的组件如下所示:

import {Component, OnInit} from '@angular/core';
import {User, UserManager} from 'oidc-client';

@Component({
  selector: 'app-test',
  templateUrl: './test-promise.component.html',
  styleUrls: ['./test-promise.component.css']
})
export class TestPromiseComponent implements OnInit {
  private readonly userManager: UserManager;

  public async ngOnInit(): Promise<any> {
    return this.getDataStore('', '', '');
  }

  public getDataStore(url: string, key: string, keyType: string): Promise<any> {

    return this.getToken();
  }

  public getToken(): Promise<string> {

    return this.getUser().then(user => {
      return user.access_token;
    });
  }

  public getUser(): Promise<User> {

    return this.userManager.getUser();
  }
}

在导入语句中，您可以看到我有哪些依赖项以及我使用的是 Oidc 客户端。

我的其他组件看起来像这样(只是空的):

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

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent {

}

当您创建一个新组件时，两个组件的测试规范都遵循标准规范，因此对于使用 promises 的组件如下所示:

describe('TestPromiseComponent', () => {
  let component: TestPromiseComponent;
  let fixture: ComponentFixture<TestPromiseComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestPromiseComponent
      ]
    }).compileComponents().then();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestPromiseComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should create', () => {
    expect(component).toBeTruthy();
  });
});

这是我的设置。现在非常奇怪的是，当我运行测试时，TestComponent 失败了——尽管实际上是 TestPromiseComponent 失败了。在这里查看结果:

那么现在有个大问题:为什么 TestComponent 失败了，即使实际上是 TestPromiseComponent 失败了？

谁能给我解释一下:)

编辑 1:

这是 TestComponent 的测试:

describe('TestComponent', () => {
  let component: TestComponent;
  let fixture: ComponentFixture<TestComponent>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ]
    }).compileComponents().then();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(TestComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should create', () => {
    expect(component).toBeTruthy();
  });
});

编辑 2: 我正在运行这些版本的 karma 和 jasmine:

• “ Jasmine 核心”:“~2.99.1”，
• "jasmine-spec-reporter": "~4.2.1",
• “karma ”:“~1.7.1”，
• "karma-chrome-launcher": "~2.2.0",
• "karma-coverage-istanbul-reporter": "~2.0.0",
• "karma Jasmine ": "~1.1.1",
• "karma-jasmine-html-reporter": "^0.2.2",

Answer 1

有 2 个 beforeEach(还有一个 async)很奇怪 我不知道 jasmine 将如何调用相同的(并行？是它们定义的顺序吗？顺便说一句，你错过了 await 关键字你的异步函数，所以你没有正确返回一个 promise ，这将导致测试的奇怪行为 :)

beforeEach 应该更像是:

beforeEach(() => {
    return TestBed.configureTestingModule({
      declarations: [
        TestComponent
      ]
    }).compileComponents().then( () => {
      fixture = TestBed.createComponent(TestComponent);
      component = fixture.componentInstance;
      fixture.detectChanges();
    });
  }));