Меню начальной загрузки ngx-bootstrap не открывается в модульных тестах Angular4 +

Question

Раскрывающееся меню прекрасно открывается в приложении, но не работает в модульном тесте. Я не уверен, что что-то пропустил, но я давно смотрю на это и не могу найти ошибку пользователя. Я также подал вопрос на GitHub. https://github.com/valor-software/ngx-bootstrap/issues/4282

Вот ссылка на стек: https://stackblitz.com/edit/angular-euyvq4-khflez?file=src%2Fmain.ts

для запуска приложения

// bootstrap(); // to run karma
platformBrowserDynamic().bootstrapModule(AppModule); // to run the app

чтобы запустить карму

bootstrap(); // to run karma
// platformBrowserDynamic().bootstrapModule(AppModule); // to run the app

Может кто-нибудь подтвердить, если это ошибка или ошибка пользователя? Заранее спасибо

Answer 1

Я думаю, что вы столкнулись с проблемами из-за того, как работает цикл обработки событий при ручном выполнении методов щелчка на узлах DOM.

Джейк Арчибальд (адвокат разработчика в Google) сделал отличную речь о цикле событий на JSConf Asia 2018. Я настоятельно рекомендую посмотреть все это, но на 29: 57 он говорит о проблеме , которую я верю, что у вас есть. По сути, поскольку вы вручную запускаете это событие щелчка, вам нужно будет выполнить тестовое утверждение как отдельную задачу в цикле событий.

Вы можете сделать это с помощью setTimeout(...) (и с использованием метода done) в своих тестах или предпочтительным способом сделать это в угловых тестах с использованием метода fixture.whenStable(). Изменение этого параметра позволит вашему тесту пройти:

fit('should open dropdown menu', () => {
  const h2: HTMLElement = fixture.nativeElement.querySelector('button#button-basic');
  h2.click();

  fixture.whenStable().then(() => {
    fixture.detectChanges();
    expect(fixture.nativeElement.querySelectorAll('li a.dropdown-item').length).toEqual(4);
  });
});