Блог

Главная - Вопросы по программированию - тест-библиотека для проверки расширенного значения aria как ложного

тест-библиотека для проверки расширенного значения aria как ложного

#javascript #typescript #unit-testing #react-testing-library

Вопрос:

У меня есть один компонент, отображающий всплывающее окно в виде следующего HTML кода после открытия всплывающего окна. Я хотел бы написать тест с помощью тестовой библиотеки, чтобы проверить aria-expanded значение false после нажатия на всплывающий элемент. есть ли для меня лучший способ проверить расширение арии?

 // 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')

Комментарии:

1. Если вы динамически не добавляете пользовательский класс с именем aria-expanded и не хотите проверить, правильно ли он добавляется, первое утверждение ( ...toHaveClass ) не потребуется. Кроме этого, я не вижу проблемы. Вы получаете сообщение об ошибке?

Метки: