Как протестировать операцию выпадающего списка при тестировании angular 2?

Я пытаюсь проверить функцию выпадающего списка. Но мне не удалось заставить его работать. Я также импортировал BsDropdownModule в файл спецификации. Примечание. Я использую ngx-bootstrap.

Вот что я пробовал:

HTML:

<div class="btnBox" dropdown placement="bottom right">
    <button class="btnIcon dropdown-toggle" dropdownToggle>
    </button>
    <ul class="btnOptionBox dropdown-menu dropdown-menu-right" *dropdownMenu>
       <li class="iconBtn" (click)="someFun()" type="button"><span>Edit</span></li>
       <li class="iconBtn" (click)="someFun1()" type="button"><span>Delete</span></li>
    </ul>
 </div>

Тестовая спецификация:

it("Should show options when toggle option is clicked",() => {
     fixture.detectChanges();
     let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
     toggleButton[0].nativeElement.click();
     fixture.detectChanges();
     /*Unable to access li tag directly. That's why I have used it's parent*/
     let list = fixture.debugElement.queryAll(By.css('div.ellipsisBox'));  
     console.log(list[0]); /*Shows the list in the children array*/
     console.log(list[0].children);  /*Doesn't show the list*/
});

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


typescript unit-testing angular ngx-bootstrap karma-jasmine
person Sanju    schedule 12.10.2017    source источник
comment
Привет, не могли бы вы рассказать мне, как вы импортировали BsDropdownModule в свою спецификацию. Когда я это делаю, это дает мне кучу статических ошибок инжектора. Я пробовал с вашим решением, но столкнулся с той же проблемой, когда даже после нажатия кнопки ul нет в доме.   -  person ChaoticTwist    schedule 18.03.2019
comment
Вы пытались вместо этого добавить FormsModule? Вы получаете ошибки инжектора для BsDropdownModule?   -  person Sanju    schedule 19.03.2019

Ответы (1)


arrow_upward
5
arrow_downward

Мне удалось решить эту проблему. Это была просто глупая ошибка. Данные в списке заполняются асинхронным процессом. Поэтому я должен был использовать fakeAsync и tick() после нажатия кнопки раскрывающегося списка. Представление было обновлено до того, как данные были добавлены в список. Это вызвало проблему. Вот фиксированный код:

it("Should show options when toggle option is clicked",fakeAsync(() => {
     fixture.detectChanges();
     let toggleButton = fixture.debugElement.queryAll(By.css('[dropdownToggle]'));
     toggleButton[0].nativeElement.click();
     tick();
     fixture.detectChanges();
     let list = fixture.debugElement.queryAll(By.css('ul.btnOptionBox'));  
     console.log(list[0]);
}));
person Sanju    schedule 13.10.2017
comment
Спасибо, мне помогло. Не уверен, что это глупая ошибка — думаю, знать и помнить, когда нужно использовать fakeAsync/tick, непросто. - person Benjamin Peter; 16.11.2018
comment
Я не вижу ваших ожиданий, разве вам не нужно иметь ожидание для этого теста? - person Girum; 10.01.2020
comment
@Girum Должны быть ожидания, я просто не включил это, так как это не имеет отношения к объяснению моей проблемы. - person Sanju; 10.01.2020
comment
Спасибо, Санджу, понял, но твой пример великолепен. - person Girum; 10.01.2020
comment
Привет, @Sanju, могу ли я использовать асинхронное ожидание в этом случае, после нажатия на раскрывающийся список? вот так await SleepForASecond(0) Это мой код внутри SleepForASecond static sleep(ms) { return new Promise(resolve => setTimeout(resolve, ms)); } static async SleepForASecond(ms) { await this.sleep(ms); } - person Anshita Singh; 31.07.2020