I’m attempting to test a button.btn.dropdown-toggle
element created with bootstrap 5. When the Angular project is served, clicking the button changes its aria-expanded
attribute from false to true and it gains the class show
. While the button does not have a (click)
handler, clicking the button toggles the dropdown render.
I’m writing one unit test that attempts to see if the dropdown list renders by expecting the aria-expanded
attribute, but it does not change in the midst of the test nor does the show
class appear.
The initial template and unit test:
<div class="dropdown">
<button id="strategySelectionMenu" class="btn dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
{{stratSelection}}
</button>
<ul class="dropdown-menu">
<div *ngFor="let strategy of presetStrats">
<li><button class="dropdown-item" (click)="stratSelection = strategy.name">{{strategy.name}}</button></li>
</div>
</ul>
</div>
it('should show strategy dropdown only after clicking the dropdown button', () => {
const strategyDropDown = root.getElementsByClassName('dropdown').item(0) as HTMLDivElement;
expect(strategyDropDown).toBeDefined();
let stratSelectButton = strategyDropDown.getElementsByTagName('button').namedItem('strategySelectionMenu') as HTMLButtonElement;
expect(stratSelectButton.ariaExpanded).toEqual('false');
stratSelectButton.click();
fixture.detectChanges();
expect(stratSelectButton.ariaExpanded).toEqual('true');
});
I’ve attempted the strategy listed in this solution /a/46723667/13352424 as well as setTimeout()
in place of tick()
, but it did not change the outcome.
I’ve also refactored the test to use the debugElement
instead of the nativeElement
and the test proceeds properly until the last expect.
Assuming that .click()
was the issue, I tried dispatchEvent()
with various events to no change in outcome.
Is there a proper way to test dropdown-toggle?