Я тестирую компонент панели меню. У меня есть кнопка, которая открывает раскрывающееся меню при нажатии, и я хочу убедиться, что раскрывающийся список расширился после нажатия на кнопку.
Я использую Angular 6, использую Jasmin + Karma.
При проверке элементов в Chrome соответствующая кнопка имеет атрибут «aria-extended», но при отладке теста в коде Visual Studio этот элемент не имеет этого атрибута.
При нажатии на кнопку этот атрибут переключается между истиной и ложью. Несколько других атрибутов связанных элементов изменяются в зависимости от нажатия кнопки, но ни один из этих атрибутов не задан в шаблоне, и они не являются атрибутами этих элементов в отладчике.
Код кнопки из моего шаблона
<div ngbDropdown class="d-inline-block">
<button class="btn btn-outline-light" id="status" ngbDropdownToggle>Status</button>
<div ngbDropdownMenu id="statusDropDown" aria-labelledby="status">
<button id="logData" (click)=onClick(Button1.name) [disabled]=isDisabled() class="dropdown-item">Log Data</button>
<button id="settings" (click)=onClick(Button2.name) [disabled]=isDisabled() class="dropdown-item">Settings</button>
</div>
</div>
модульный тест
it('clicking status button opens the drop down list', () => {
statusButtonEL = fixture.debugElement.query(By.css('#status'));
logDataOptionEL = fixture.debugElement.query(By.css('#logData'));
settingsOptionEL = fixture.debugElement.query(By.css('#settings'));
statusButtonEL.triggerEventHandler('click', null);
expect(statusButtonEL.nativeElement.getAttribute('aria-expanded')).toBeTruthy();
});
Я бы хотел, чтобы тест был пройден, но он проваливается из-за следующей ошибки в этом модульном тесте "Ожидается, что значение null будет верным".
отладка, StatusButtonEL.nativeElement не имеет элемента «aria-extended», но в браузере, использующем инспектор при запуске приложения, он явно имеет этот атрибут, и его истинное значение изменяется при нажатии.