Angular 6-生命周期挂钩中的承诺使其他测试失败

时间:2018-09-24 08:39:04

标签: angular typescript testing jasmine karma-jasmine

角度测试有问题。我不知道这是一个错误还是做错了什么。

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

在import语句中,您可以看到我具有哪些依赖性以及使用的是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 fails even though TestPromiseComponent is the one failing

所以现在有一个大问题:为什么即使实际上是TestPromiseComponent失败,TestComponent还是会失败?

谁能向我解释一下:)

编辑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: 我正在运行以下版本的业力和茉莉花:

  • “茉莉花芯”:“〜2.99.1”,
  • “ jasmine-spec-reporter”:“〜4.2.1”,
  • “业力”:“〜1.7.1”,
  • “业力铬发射器”:“〜2.2.0”,
  • “ karma-coverage-istanbul-reporter”:“〜2.0.0”,
  • “业力茉莉花”:“〜1.1.1”,
  • “ karma-jasmine-html-reporter”:“ ^ 0.2.2”,

1 个答案:

答案 0 :(得分:1)

在每个(还有一个异步)事件之前有2个奇怪的是我很奇怪,我不知道茉莉花将如何调用(并行?是它们的定义顺序吗?顺便说一句,您错过了 await 关键字您的异步功能,因此您没有正确返回承诺,这将导致测试的奇怪行为:)

beforeEach应该更像:

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