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

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

Вот ссылка на stackblitz: 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

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


angular drop-down-menu ngx-bootstrap
person Sudhakar    schedule 01.05.2018    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

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

Вы можете сделать это с помощью setTimeout(...) (и используя метод done) в своих тестах или предпочтительный способ сделать это в тестах Angular с использованием метода 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);
  });
});
person Daniel W Strimpel    schedule 02.05.2018

arrow_upward
1
arrow_downward

Мне не удалось заставить ваш Stackblitz работать, но на всякий случай, если у кого-то еще возникнут проблемы с этим, если у вас есть динамически сгенерированные элементы списка (с ngFor), вам нужно добавить еще один detectChanges () после tick ()

 it('should show 8 items (fakeasync)', fakeAsync(() => {
    const h2: HTMLElement = fixture.nativeElement.querySelector('button#button-basic');
    h2.click();
    fixture.detectChanges();
    tick(); 
    fixture.detectChanges();
 expect(fixture.nativeElement.querySelector('[dropdown]').classList).toContain('open');
    expect(fixture.nativeElement.querySelectorAll('li a.dropdown-item').length).toEqual(8)
  }));
person chriscooper    schedule 01.11.2019