Проверка встроенных стилей (style)

Vue Test Utils предоставляет мощные инструменты для тестирования компонентов Vue, включая возможность проверки встроенных стилей элементов. Встроенные стили задаются через атрибут style или через объект :style в шаблоне компонента. Проверка этих стилей критична при тестировании динамического отображения элементов, реактивных изменений стилей и условного применения CSS через inline-стили.

Доступ к встроенным стилям

При рендеринге компонента с помощью функции mount или shallowMount возвращается объект wrapper, который инкапсулирует компонент и его DOM. Для проверки стилей используется метод .element или .get(), чтобы получить доступ к DOM-узлу.

Пример доступа к элементу и проверке встроенного стиля:

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

test('проверка встроенного цвета текста', () => {
  const wrapper = mount(MyComponent)
  const element = wrapper.get('p').element
  expect(element.style.color).toBe('red')
})

Важный момент: свойство style у DOM-элемента возвращает только inline-стили, применённые через атрибут style или через объект :style. Стили из CSS-файлов или <style> блока не будут видны через element.style.

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

Vue позволяет задавать стили через объекты и массивы. Для тестирования реактивных изменений необходимо сначала установить состояние, затем вызвать wrapper.vm.$nextTick() для ожидания обновления DOM, и только потом проверять стиль.

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

test('изменение фона при клике', async () => {
  const wrapper = mount(DynamicStyle)
  
  const button = wrapper.get('button')
  await button.trigger('click')
  
  await wrapper.vm.$nextTick()
  expect(wrapper.get('div').element.style.backgroundColor).toBe('blue')
})

Здесь важно помнить:

  • trigger имитирует события DOM.
  • await wrapper.vm.$nextTick() гарантирует, что Vue обработает реактивные изменения и обновит DOM.
  • Свойство element.style возвращает стили в формате camelCase (backgroundColor, fontSize).

Проверка нескольких свойств стиля

Если inline-стиль содержит несколько CSS-свойств, их можно проверять через объект style или строку getAttribute('style').

const style = wrapper.get('div').element.style
expect(style.color).toBe('white')
expect(style.fontSize).toBe('16px')

// Или как строку
const styleString = wrapper.get('div').element.getAttribute('style')
expect(styleString).toContain('color: white')
expect(styleString).toContain('font-size: 16px')

Метод .getAttribute('style') позволяет проверять оригинальный атрибут style, сохраняя порядок и точное оформление.

Тестирование стилей при условных рендерах

Для компонентов с условными стилями важно тестировать оба состояния:

test('стиль меняется в зависимости от пропса', async () => {
  const wrapper = mount(MyComponent, {
    props: { isActive: false }
  })

  expect(wrapper.get('div').element.style.opacity).toBe('0.5')

  await wrapper.setProps({ isActive: true })
  expect(wrapper.get('div').element.style.opacity).toBe('1')
})

Ключевые моменты:

  • setProps позволяет обновлять входные параметры компонента.
  • После обновления пропсов стиль компонента меняется автоматически, что проверяется через element.style.

Проверка вычисляемых стилей

Иногда inline-стиль задаётся через вычисляемые свойства. В таких случаях необходимо убедиться, что computed возвращает правильный объект, и затем проверять стиль через DOM.

computed: {
  dynamicStyle() {
    return { color: this.active ? 'green' : 'gray' }
  }
}

// Тест
test('computed стиль применяется корректно', async () => {
  const wrapper = mount(MyComponent, { props: { active: false } })
  expect(wrapper.get('span').element.style.color).toBe('gray')

  await wrapper.setProps({ active: true })
  expect(wrapper.get('span').element.style.color).toBe('green')
})

Проверка стилей с v-bind:style массивом

Vue позволяет передавать массив объектов стилей, где свойства могут перекрывать друг друга. В тестах проверяется итоговый стиль после объединения объектов.

<div :style="[baseStyle, overrideStyle]"></div>

// Тест
test('стили массива объединяются корректно', () => {
  const wrapper = mount(MyComponent)
  const element = wrapper.get('div').element
  expect(element.style.color).toBe('blue') // overrideStyle
  expect(element.style.fontSize).toBe('14px') // baseStyle
})

Итоговые рекомендации по тестированию стилей

  • Использовать .element.style для проверки inline-стилей, применённых через Vue.
  • Для динамических стилей вызывать await wrapper.vm.$nextTick() после изменения состояния.
  • Для сложных объектов стилей или массивов проверять итоговые значения через .element.style.
  • Для проверки полного атрибута использовать .getAttribute('style').

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

Оглавление