typescript - Kiểm thử fakeAsync của Angular cho việc giải quyết promise trong ngOnInit()

Vì lý do nào đó, các bài kiểm tra fakeAsync của tôi sẽ không giải quyết các promise đơn giản. Tôi đã tạo một ví dụ tối giản để hiển thị vấn đề (chủ yếu là phần mã mẫu do ng tạo).

Thành phần của tôi đang được thử nghiệm chứa một giải pháp promise trực tiếp đơn giản trong phương thức ngOnInit của nó:

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

}

Tôi đang thử nghiệm lời hứa này với bài kiểm tra sau:

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

Nhưng bài kiểm tra thất bại, có nghĩa là lời hứa không được giải quyết tại thời điểm expect, mặc dù đã ép giải quyết lời hứa thông qua tick().

Nó hoạt động khi thêm một lần gọi rõ ràng khác tới component.ngOnInit() ở đầu bài kiểm tra. Nhưng điều này dẫn đến việc ngOnInit() bị gọi hai lần. Theo như tôi biết, fixture.detectChanges() trong beforeEach() nên tự xử lý ngOnInit() bất kể.

Tôi đang thiếu gì? Tại sao lời hứa không được giải quyết trong tick()?

Câu trả lời #1

Đã tìm ra vấn đề. ng g component tạo test với fixture.detectChanges() trong hàm beforeEach(...) nằm ngoài vùng fakeAsync, vì vậy promise không thể được giải quyết bằng tick().

Di chuyển fixture.detectChanges() vào vùng fakeAsync sửa được vấn đề cho tôi:

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

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

Câu trả lời #2

ĐÃ CHỈNH SỬA Bạn cần gọi component.ngOnInit() trước, sau đó tick(), rồi đến phương thức expect của bạn. Làm điều này trong mỗi phương thức kiểm tra, đó là cách đang hoạt động cho các bài kiểm tra của tôi.

đoạn mã

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

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