fixture.whenStable () никогда не разрешается при тестировании моего компонента

Question

Как мне отладить ситуацию тестирования, когда await fixture.whenStable() никогда не разрешается.

Другими словами: что это говорит о моем компоненте?

У меня есть спецификация, которая выглядит следующим образом:

it('should open the modal when ?series is navigated to', async () => {
    const { instance, fixture } = await _render();
    const openSpy = spyOn(instance, 'openModal');
    expect(openSpy).not.toHaveBeenCalled();
    _updateQuery({ series: '' });
    fixture.detectChanges();
    // await fixture.whenStable(); // <- never resolves
    expect(openSpy).toHaveBeenCalled(); // <- fails
});

(мне нужно использовать актуальную асинхронную функцию для работы с моей библиотекой тестирования.)

Вызов await fixture.whenStable() зависает независимо от того, где находится тело функцииЯ положил это - кажется, указывает, что проблема присутствует правильно, когда компонент загружен.

Я действительно не понимаю, что даже делает whenStable().Возможно, если бы я это сделал, я мог бы понять это без посторонней помощи.

Answer 1

В моем конкретном случае проблема заключалась в том, что я предполагал, что хук жизненного цикла ngAfterViewchecked запускается только один раз, но фактически срабатывает несколько раз.

Я присваивал значение полю моего компонента внутри этого обработчика, поэтому значение этого поля постоянно менялось (потому что его нужно было вычислить).

Поскольку значение поля изменило вещи в представлении, и это вызывает ngAfterViewChecked, и очередь задач механизма JavaScript былаПри добавлении к нему состояние компонента не может стать «стабильным».

@Component({ ... })
export class MyComponent {
    listToRepeatOver = [];

    ngAfterViewChecked() {
        this.listToRepeatOver = getList();
    }
}

Я подозревал, что что-то произошло, потому что я увидел эффект фиолетового мигания на панели элементов Chrome devtools, который указывает, что DOMизменил элемент внутри моего компонента шаблона.(Это происходило в быстрой стрельбе).

Урок: если вы сделаете обновление внутри ловушки жизненного цикла, которое снова вызывает срабатывание ловушки жизненного цикла, то вы получите этот результат.

Answer 2

Согласно https://angular.io/guide/testing

fixture.whenStable () возвращает обещание, которое разрешается, когда очередь задач движка JavaScript становится пустой.

Так что в этом случае:

class AppComponent implements OnInit {

  someText: Observable<string>;

  ngOnInit() {
    this.someText = of('some string');
  }

}

whenStable разрешается, когда наблюдаемый в ngOnInit испускает его значение.

it('after onInit observable should be set', async(async () => {
  component.ngOnInit();
  await fixture.whenStable();
  fixture.detectChanges();
  console.log('after whenStable'); // <- now you gonna see this in console
}));