Проверка отступов и размеров

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

Доступ к элементам и их стилям

Для проверки стилей необходимо получить объект обёртки (wrapper) с помощью mount или shallowMount из Vue Test Utils:

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

const wrapper = mount(MyComponent)

Объект wrapper предоставляет метод find, который возвращает обёртку конкретного DOM-элемента:

const button = wrapper.find('button')

Для получения текущих CSS-стилей элемента используется element.style или getComputedStyle:

const styles = getComputedStyle(button.element)
console.log(styles.marginTop, styles.paddingLeft)

Важно: element.style возвращает только инлайновые стили. Если стили задаются через классы CSS, нужно использовать getComputedStyle.

Проверка отступов (margin, padding)

Отступы задаются через свойства margin и padding. Для тестирования удобно использовать точное сравнение числовых значений:

expect(styles.marginTop).toBe('16px')
expect(styles.paddingLeft).toBe('8px')

Можно проверять сразу несколько сторон:

expect(styles.margin).toBe('16px 0 16px 0')
expect(styles.padding).toBe('8px 12px 8px 12px')

Если проект использует переменные CSS или препроцессоры (Sass, Less), проверка может потребовать предварительного вычисления этих переменных.

Проверка размеров элементов

Для контроля ширины и высоты элементов применяются свойства width, height, min-width, max-width:

expect(styles.width).toBe('200px')
expect(styles.height).toBe('50px')

Для динамически изменяемых размеров, например при рендеринге контента, полезно использовать wrapper.element.getBoundingClientRect():

const rect = button.element.getBoundingClientRect()
expect(rect.width).toBeCloseTo(200, 1)
expect(rect.height).toBeCloseTo(50, 1)

Метод getBoundingClientRect возвращает точные числовые значения в пикселях, учитывая текущий рендер и масштабирование, что особенно важно при тестировании адаптивных компонентов.

Проверка позиционирования и компоновки

Для элементов с flex, grid или абсолютным позиционированием проверка может включать:

offsetTop, offsetLeft — позиция относительно родителя
clientWidth, clientHeight — видимая область элемента
scrollWidth, scrollHeight — размер содержимого с учётом прокрутки

Пример проверки выравнивания кнопки внутри контейнера:

const container = wrapper.find('.container')
const button = wrapper.find('button')

const containerRect = container.element.getBoundingClientRect()
const buttonRect = button.element.getBoundingClientRect()

expect(buttonRect.top).toBe(containerRect.top + 16)
expect(buttonRect.left).toBe(containerRect.left + 8)

Это позволяет убедиться, что визуальная компоновка соответствует макету, а не только классы CSS.

Тестирование при изменении состояния

Если размеры или отступы зависят от состояния компонента, важно сначала изменить состояние, затем проверить стили:

await wrapper.setProps({ expanded: true })
const panel = wrapper.find('.panel')
const styles = getComputedStyle(panel.element)

expect(styles.height).toBe('300px')

Для асинхронных изменений в DOM используется nextTick:

import { nextTick } from 'vue'

wrapper.setData({ showDetails: true })
await nextTick()

const details = wrapper.find('.details')
const styles = getComputedStyle(details.element)
expect(styles.marginTop).toBe('12px')

Валидация через CSS-классы

Иногда проще проверять наличие классов, задающих нужные размеры или отступы, вместо вычисления точных значений:

expect(button.classes()).toContain('button-large')
expect(panel.classes()).toContain('panel-expanded')

Этот метод быстрее и удобнее при поддержке CSS-модулей или Tailwind.