CSS свойства влияющие на видимость

При работе с Vue Test Utils критически важно понимать, какие CSS-свойства могут влиять на видимость элементов и как это отражается в тестах. Некоторые свойства полностью скрывают элемент визуально, другие делают его невидимым для пользователя, но элемент продолжает занимать место в DOM. Различие между этими состояниями важно при написании тестов.

display: none

Свойство display: none полностью удаляет элемент из визуального рендеринга страницы. Элемент при этом не занимает места в потоке документа и его нельзя увидеть или взаимодействовать с ним через пользовательский интерфейс.

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

<template>
  <div>
    <button v-if="isVisible">Кнопка</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: false
    };
  }
};
</script>

Тестирование с Vue Test Utils:

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

test('кнопка не видна при isVisible false', () => {
  const wrapper = mount(MyComponent);
  expect(wrapper.find('button').exists()).toBe(false);
});

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

visibility: hidden

Свойство visibility: hidden скрывает элемент визуально, но сохраняет его место в макете. Элемент остаётся в DOM, и его можно найти через wrapper.find().

Пример:

<template>
  <div>
    <span :style="{ visibility: isHidden ? 'hidden' : 'visible' }">Текст</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isHidden: true
    };
  }
};
</script>

Тестирование:

const wrapper = mount(MyComponent);
const span = wrapper.find('span');
expect(span.element.style.visibility).toBe('hidden');

Особенность: visibility: hidden полезно для тестирования состояния видимости без удаления элемента из DOM.

opacity: 0

Свойство opacity: 0 делает элемент полностью прозрачным, но он остаётся интерактивным и занимает место на странице. В тестах Vue Test Utils это свойство нужно проверять через element.style.opacity или вычисленные стили.

<template>
  <div :style="{ opacity: isTransparent ? 0 : 1 }">Контент</div>
</template>

<script>
export default {
  data() {
    return {
      isTransparent: true
    };
  }
};
</script>

Тестирование:

const wrapper = mount(MyComponent);
expect(wrapper.element.style.opacity).toBe('0');

Важно: элемент с opacity: 0 всё ещё присутствует в DOM и может быть найден и взаимодействовать через JS.

position и clip-path для скрытия

Другие методы скрытия элементов включают position: absolute с выносом за пределы видимой области и clip-path или clip. Эти техники чаще используются для анимаций или временного скрытия элементов без их удаления из DOM.

Пример с position:

<div :style="{ position: 'absolute', left: '-9999px' }">Скрытый элемент</div>

Тестирование: элемент остаётся доступным через wrapper.find(), но визуально его нет.

Скрытие с помощью классов

В Vue часто применяются динамические классы для управления видимостью:

<div :class="{ hidden: isHidden }">Контент</div>

<style>
.hidden {
  display: none;
}
</style>

Проверка состояния в тесте:

const wrapper = mount(MyComponent);
expect(wrapper.find('div').classes()).toContain('hidden');

Ключевой момент: классы позволяют централизованно управлять стилями видимости, что удобно при масштабных компонентах.

Проверка видимости в Vue Test Utils

Vue Test Utils предоставляет несколько методов, которые помогают определять видимость:

  • wrapper.isVisible() — возвращает true, если элемент рендерится и видим.
  • wrapper.exists() — проверяет наличие элемента в DOM независимо от его CSS.
  • element.style — позволяет проверить конкретные свойства CSS, такие как display, visibility и opacity.

Пример:

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

if (button.exists()) {
  expect(button.isVisible()).toBe(true);
}

Особенность: isVisible() учитывает только display: none и visibility: hidden, но не opacity: 0.

Влияние на тестируемое поведение

  • Элемент с display: none — полностью недоступен для взаимодействия.
  • Элемент с visibility: hidden или opacity: 0 — существует в DOM и может быть найден, но пользователь его не видит.
  • Проверка классов и inline-стилей позволяет точно контролировать, каким образом элемент скрыт.

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

Оглавление