测试库以验证 aria-expanded 值为 false

Question

一旦打开浮出控件，我有一个组件会按照HTML代码呈现浮出控件。 我想使用 test-library 编写测试，以在单击 flyoutItem 后验证aria-expanded值是否为false 。 我有什么更好的方法来验证 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')

Answer 1

您可以使用getByRole()选项 expand expanded: false像这样

expect(
    screen.getByRole("button", {
        name: "Flyout button",
        expanded: false,
    })
).toBeInTheDocument();

测试库以验证 aria-expanded 值为 false

问题描述

1 个解决方案

解决方案1
0 2022-05-19 11:26:49

测试库以验证 aria-expanded 值为 false

问题描述

1 个解决方案

解决方案1 0 2022-05-19 11:26:49

解决方案1
0 2022-05-19 11:26:49