Работа с querySelector и querySelectorAll

Методы querySelector и querySelectorAll являются важными инструментами для работы с DOM в JavaScript. Эти методы позволяют искать элементы на странице по CSS-селекторам, что значительно упрощает процесс выбора нужных элементов для тестирования. В контексте тестирования с Jest, правильное использование этих методов критично для успешных и эффективных тестов взаимодействия с DOM.

querySelector: выбор одного элемента

Метод querySelector позволяет найти первый элемент в документе, который соответствует указанному CSS-селектору. Он возвращает этот элемент, если он найден, или null, если таких элементов нет. Это полезно, когда требуется работать с единственным элементом на странице.

Пример использования:

const button = document.querySelector('.submit-button');

Здесь button будет ссылаться на первый элемент с классом submit-button. Если такой элемент не существует в DOM, метод вернет null. Этот метод является предпочтительным в тех случаях, когда на странице ожидается только один элемент с заданным селектором.

Особенности:

  • Метод всегда возвращает только один элемент — первый из подходящих.
  • Селектор может быть любым CSS-селектором, включая классы, id, атрибуты, псевдоклассы и другие.
  • Если элемент не найден, метод возвращает null.

querySelectorAll: выбор всех элементов

Метод querySelectorAll возвращает коллекцию всех элементов, которые соответствуют указанному селектору. Коллекция не является массивом, но имеет большинство свойств, характерных для массивов, таких как forEach. В отличие от querySelector, который возвращает только один элемент, querySelectorAll предоставляет все подходящие элементы.

Пример использования:

const buttons = document.querySelectorAll('.submit-button');

В этом примере переменная buttons будет содержать коллекцию всех элементов с классом submit-button. Если таких элементов несколько, метод вернет их все. Если элементы не найдены, будет возвращена пустая коллекция.

Особенности:

  • Возвращает NodeList — коллекцию всех найденных элементов.
  • Коллекция является «живой», то есть она обновляется в реальном времени при изменении DOM.
  • Для работы с коллекцией можно использовать методы, такие как forEach, но для некоторых случаев может понадобиться преобразовать коллекцию в массив с помощью Array.from().

Взаимодействие с DOM в тестах

Когда речь идет о тестировании в Jest, эти методы часто используются для имитации взаимодействия с элементами на странице. Например, можно использовать querySelector и querySelectorAll, чтобы находить кнопки, поля ввода, ссылки и другие элементы для проверки их состояния или выполнения действий (например, клик).

Пример теста с querySelector:

test('should display submit button', () => {
  document.body.innerHTML = `
    <button class="submit-button">Submit</button>
  `;
  const button = document.querySelector('.submit-button');
  expect(button).not.toBeNull();
  expect(button.textContent).toBe('Submit');
});

В этом тесте мы используем querySelector, чтобы найти кнопку с классом submit-button, а затем проверяем, что она существует и содержит текст “Submit”.

Пример теста с querySelectorAll:

test('should have two submit buttons', () => {
  document.body.innerHTML = `
    <button class="submit-button">Submit</button>
    <button class="submit-button">Submit</button>
  `;
  const buttons = document.querySelectorAll('.submit-button');
  expect(buttons.length).toBe(2);
});

Здесь с помощью querySelectorAll мы находим все кнопки с классом submit-button и проверяем, что их количество равно 2.

Сравнение методов

  1. Когда использовать querySelector:

    • Если на странице ожидается только один элемент с заданным селектором.
    • Для удобства работы с первым найденным элементом.

  2. Когда использовать querySelectorAll:

    • Когда нужно работать с несколькими элементами, которые могут быть на странице.
    • Когда важно проверить или взаимодействовать с каждым из найденных элементов.

Важные замечания при тестировании

  • Отсутствие элементов: Если метод querySelector или querySelectorAll не находит элементов, важно понимать, что возвращаемое значение будет либо null, либо пустая коллекция. Это следует учитывать при написании тестов, чтобы избежать ошибок.

  • Использование асинхронных методов: Иногда элементы могут быть динамически добавлены на страницу после того, как тест уже начал выполняться. В таких случаях следует использовать асинхронные методы Jest, такие как waitFor, чтобы дождаться появления элементов перед проверкой.

Пример асинхронного теста:

test('should load submit button asynchronously', async () => {
  document.body.innerHTML = '<div id="container"></div>';
  setTimeout(() => {
    document.getElementById('container').innerHTML = '<button class="submit-button">Submit</button>';
  }, 100);

  await waitFor(() => document.querySelector('.submit-button'));

  const button = document.querySelector('.submit-button');
  expect(button).not.toBeNull();
  expect(button.textContent).toBe('Submit');
});

Здесь используется waitFor, чтобы дождаться появления кнопки перед её проверкой.

Заключение

Методы querySelector и querySelectorAll являются мощными инструментами для работы с DOM в JavaScript, и их правильное использование является неотъемлемой частью написания эффективных тестов с Jest. Они позволяют точно и гибко искать элементы на странице, что важно при тестировании интерфейсов и взаимодействий в веб-приложениях.

Оглавление