Проверка видимости элемента

В тестировании пользовательских интерфейсов с использованием библиотеки Enzyme для React одной из распространённых задач является проверка видимости элементов на странице. Это важно для того, чтобы убедиться, что компоненты корректно рендерятся в зависимости от состояния приложения и могут быть взаимодействованы пользователем. Видимость элемента — это состояние, которое указывает на то, видим ли элемент на экране, или он скрыт, например, с помощью CSS-стилей.

В Enzyme для выполнения тестов видимости используются методы рендеринга и различные инструменты для симуляции взаимодействий с DOM.

Проверка наличия элемента в DOM

Прежде чем проверять видимость элемента, необходимо убедиться, что он существует в DOM. В Enzyme для этого используется метод .find(). Этот метод позволяет найти элементы по селекторам, переданным в качестве аргументов, и возвращает коллекцию найденных элементов.

import { shallow } from 'enzyme';
import MyComponent from './MyComponent';

test('проверка, что элемент существует', () => {
  const wrapper = shallow(<MyComponent />);
  const element = wrapper.find('.my-element');
  expect(element.exists()).toBe(true);
});

Метод .exists() возвращает true, если элемент найден в DOM, и false, если его нет.

Проверка видимости элемента

После того как подтверждено существование элемента, можно проверить его видимость. В Enzyme для этого используется метод .is(':visible'), который является оберткой для jQuery и позволяет проверить, виден ли элемент в текущем контексте.

test('проверка, что элемент видим', () => {
  const wrapper = shallow(<MyComponent />);
  const element = wrapper.find('.my-element');
  expect(element.is(':visible')).toBe(true);
});

Этот метод проверяет, не скрыт ли элемент с помощью CSS-свойств, таких как display: none или visibility: hidden.

Пример скрытого элемента

Когда элемент скрыт с помощью CSS, его видимость становится недоступной для пользователя, но он может оставаться в DOM. Рассмотрим пример компонента, где элемент скрывается с помощью класса, изменяющего стиль:

import React, { useState } from 'react';

function MyComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onCl ick={() => setIsVisible(!isVisible)}>Переключить видимость</button>
      <div className={`my-element ${isVisible ? 'visible' : 'hidden'}`}>Текст</div>
    </div>
  );
}

В этом примере элемент скрывается или показывается в зависимости от состояния компонента. Для тестирования видимости в этом случае можно использовать сочетание методов .find() и .is(':visible').

test('проверка, что элемент скрыт по умолчанию', () => {
  const wrapper = shallow(<MyComponent />);
  const element = wrapper.find('.my-element');
  expect(element.is(':visible')).toBe(false);
});

test('проверка, что элемент становится видимым при изменении состояния', () => {
  const wrapper = shallow(<MyComponent />);
  wrapper.find('button').simulate('click');
  const element = wrapper.find('.my-element');
  expect(element.is(':visible')).toBe(true);
});

Учет скрытых элементов в DOM

Когда элемент скрыт с помощью CSS-свойства display: none, он физически удаляется из потока документа, что делает его недоступным для большинства методов тестирования, включая .is(':visible'). В случае необходимости проверки, скрыт ли элемент через display: none, можно использовать дополнительные подходы.

Для такого тестирования стоит использовать getDOMNode() для получения прямого доступа к DOM-элементу:

test('проверка, что элемент скрыт через display: none', () => {
  const wrapper = shallow(<MyComponent />);
  const element = wrapper.find('.my-element').getDOMNode();
  expect(element.style.display).toBe('none');
});

Этот способ позволяет детально проверить стили элемента, даже если он не видим на странице.

Проверка элементов с использованием mount()

Если задача заключается в тестировании реального рендеринга компонентов с их состоянием и поведением в DOM, то стоит использовать метод mount(), который выполняет полное рендеринг компонента и позволяет проверять не только видимость, но и взаимодействие с реальным DOM.

import { mount } from 'enzyme';

test('проверка видимости элемента после клика', () => {
  const wrapper = mount(<MyComponent />);
  const button = wrapper.find('button');
  button.simulate('click');
  const element = wrapper.find('.my-element');
  expect(element.is(':visible')).toBe(true);
});

Метод mount() позволяет проводить более сложные тесты, где нужно учесть все особенности поведения компонента в реальном окружении.

Специфические проверки видимости

В некоторых случаях для проверки видимости элемента требуется более точная настройка условий тестирования. Например, нужно проверить, виден ли элемент только при наличии определённого контекста или состояния, связанного с родительскими элементами.

В таких ситуациях можно комбинировать методы Enzyme с условными операциями, чтобы точно моделировать поведение компонента. Например:

test('проверка видимости элемента в зависимости от родительского компонента', () => {
  const wrapper = mount(<ParentComponent />);
  const element = wrapper.find('.child-element');
  
  if (wrapper.find('.parent-element').hasClass('active')) {
    expect(element.is(':visible')).toBe(true);
  } else {
    expect(element.is(':visible')).toBe(false);
  }
});

Этот тест проверяет, что дочерний элемент становится видимым только в случае, если родительский элемент активен.

Заключение

Проверка видимости элемента является важной частью тестирования интерфейсов, так как она позволяет убедиться в корректном отображении и функциональности компонентов. В Enzyme для этого существует ряд удобных методов, таких как .find(), .is(':visible'), .getDOMNode(), а также использование методов рендеринга shallow() и mount(). Важно учитывать различные способы скрытия элементов (CSS-свойства, состояние компонента) и выбирать соответствующие методы для тестирования видимости в зависимости от контекста.

Оглавление