Проверка видимости (isVisible)

isVisible — это метод Vue Test Utils, который позволяет определить, видим ли конкретный элемент на странице. В отличие от простых проверок наличия элемента в DOM, isVisible учитывает CSS-свойства, которые могут скрывать элемент, такие как display: none, visibility: hidden, opacity: 0 или наличие родительских элементов с аналогичными стилями. Это делает его инструментом более точным для тестирования реального поведения пользовательского интерфейса.

Использование isVisible

Метод вызывается на экземпляре Wrapper компонента или элемента:

import { mount } from '@vue/test-utils';
import MyComponent from '@/components/MyComponent.vue';

const wrapper = mount(MyComponent);
const button = wrapper.find('button');

expect(button.isVisible()).toBe(true);

В этом примере проверяется, что кнопка действительно видима пользователю. Даже если кнопка присутствует в DOM, isVisible() вернёт false, если она скрыта стилями.

Поведение при разных CSS-свойствах

  1. display: none Элемент полностью удалён из визуального потока. isVisible() вернёт false.

  2. visibility: hidden Элемент остаётся в DOM, но невидим. isVisible() вернёт false.

  3. opacity: 0 Элемент прозрачный, но занимает место на странице. isVisible() вернёт true, потому что элемент физически присутствует и интерактивен, даже если его невозможно увидеть глазами.

  4. Скрытые родительские элементы Если родительский элемент имеет display: none или visibility: hidden, все дочерние элементы считаются невидимыми, и isVisible() вернёт false.

Примеры динамической видимости

Для динамически изменяющихся элементов проверка видимости часто комбинируется с реактивными свойствами:

import { mount } from '@vue/test-utils';
import ToggleComponent from '@/components/ToggleComponent.vue';

const wrapper = mount(ToggleComponent);

// Изначально скрытый элемент
const panel = wrapper.find('.panel');
expect(panel.isVisible()).toBe(false);

// Изменение состояния через props или методы
wrapper.setData({ isOpen: true });
await wrapper.vm.$nextTick();

expect(panel.isVisible()).toBe(true);

В этом случае важно вызывать await wrapper.vm.$nextTick(), чтобы Vue успел отразить изменения реактивного состояния на DOM.

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

Элементы, созданные с помощью v-if, могут отсутствовать в DOM полностью. isVisible() в этом случае автоматически вернёт false, потому что find не сможет найти элемент. Чтобы корректно тестировать такие случаи, используют методы проверки существования:

const element = wrapper.find('.optional-element');
expect(element.exists() && element.isVisible()).toBe(true);

Таким образом, проверка видимости учитывает и факт присутствия элемента, и его CSS-отображение.

Комбинирование с другими методами Vue Test Utils

  • exists() — проверка наличия элемента в DOM.
  • isVisible() — проверка фактической видимости элемента.

Использование обоих методов позволяет различать DOM-присутствие и реальную видимость:

const item = wrapper.find('.item');

if (item.exists() && item.isVisible()) {
  // Элемент существует и видим
}
  • trigger() — метод для симуляции событий, например click. Если элемент невидим, вызов событий может быть бессмысленным, поэтому часто проверяют видимость перед симуляцией.

Ограничения метода

  • isVisible() не учитывает z-index, поэтому элемент может быть перекрыт другим слоем, но считаться видимым.
  • Элемент с opacity: 0 считается видимым, так как метод проверяет только видимость через свойства display и visibility.
  • Скриптовое скрытие с помощью position: absolute; left: -9999px также будет считаться видимым.

Рекомендации по применению

  • Использовать isVisible() для тестов интерактивного интерфейса, когда важно знать, что элемент доступен пользователю.
  • Сочетать с exists() для проверки наличия элементов, создаваемых условно через v-if.
  • Для сложных CSS-перекрытий или анимаций применять end-to-end тестирование, так как isVisible() ограничен расчетом CSS-свойств, а не визуальным рендером.

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

Оглавление