I have one component render a flyout as following HTML code once flyout is opened. I would like to write the test using test-library to verify the aria-expanded value is false after clicking the flyoutItem. is there any better way for me to verify the aria-expanded?
// component
<body>
<div>
<div >
<button aria-expanded="true" class="btn">
Flyout button
</button>
<div class="flyoutContainer>
<ul class="flyoutItem" role="listbox" >
<li aria-selected="false" class="item" role="option" >
<div class="option" >
<span >Data is here</span>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
// test
render(<flyout />);
const item = screen.getByText(/Data is here/, {selector: 'span'});
fireEvent.click(item);
const flyoutButton = screen.getByRole('button', {name: 'Flyout button'});
expect(flyoutButton).toHaveClass('aria-expanded').;
expect(flyoutButton).toHaveAttribute('aria-expanded', 'false')
You could use getByRole() option expanded: false like this
expect(
screen.getByRole("button", {
name: "Flyout button",
expanded: false,
})
).toBeInTheDocument();