Angular fakeAsync测试分辨率分辨率

Question

出于某种原因，我的fakeAsync测试不会解决简单的承诺。我创建了一个显示问题的最小示例（主要是ng生成的样板）。

我的测试组件在其ngOnInit方法中包含一个简单的直接承诺解决方案：

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

@Component({
  selector: 'app-simple-test',
  templateUrl: './simple-test.component.html',
  styleUrls: ['./simple-test.component.scss']
})
export class SimpleTestComponent implements OnInit {

  constructor() { }

  message: string;

  ngOnInit() {
    Promise.resolve('hello').then((content: string) => this.message = content);
  }

}

我正在通过以下测试来测试此承诺：

import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';

import { SimpleTestComponent } from './simple-test.component';

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

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

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

  it('should display "hello"', fakeAsync(() => {
    tick();
    expect(component.message).toBe('hello');
  }));
});

但是测试失败了，这意味着尽管通过expect强制许诺解决，但在tick()时尚未解决。

它在测试开始时向component.ngOnInit()添加另一个显式调用时有效。但这导致ngOnInit()被召唤两次。据我所知，fixture.detectChanges()的beforeEach()无论如何应该照顾ngOnInit()。

我错过了什么？为什么在tick()期间没有解决这个承诺？

Answer 1

编辑你需要首先调用component.ngOnInit（），然后调用tick（），然后调用expect方法。在每个测试方法中执行此操作，即适用于我的测试。

Answer 2

发现了这个问题。 ng g component在fixture.detectChanges()区域外的beforeEach(...)函数中使用fakeAsync进行测试，因此tick()无法解决这个问题。

将fixture.detectChanges()移动到fakeAsync区域为我修复它：

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

  it('should display "hello"', fakeAsync(() => {
    fixture.detectChanges();
    tick();
    expect(component.message).toBe('hello');
  }));