Проверка класса (classes)

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

classes() — получение списка классов элемента

Метод classes() позволяет получить массив всех классов, применённых к корневому элементу компонента или к выбранному элементу через селектор.

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

const wrapper = mount(Button, {
  props: { primary: true }
})

// Проверка всех классов корневого элемента
const classList = wrapper.classes() 
console.log(classList) // ['button', 'button--primary']

// Проверка наличия конкретного класса
expect(wrapper.classes()).toContain('button--primary')

Особенности:

  • Возвращается массив строк.
  • Работает только с корневым элементом, если не указан find() для конкретного селектора.

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

Для тестирования классов, применённых к вложенным элементам, используется метод find() с последующим classes().

const wrapper = mount(Button)
const icon = wrapper.find('svg')
expect(icon.classes()).toContain('icon')

Можно проверять наличие нескольких классов одновременно:

expect(icon.classes()).toEqual(expect.arrayContaining(['icon', 'icon--small']))

hasClass() — проверка конкретного класса

Метод hasClass(className) возвращает true, если элемент содержит указанный класс, и false — в противном случае.

expect(wrapper.hasClass('button')).toBe(true)
expect(wrapper.hasClass('button--disabled')).toBe(false)

Преимущества:

  • Простота проверки одного класса.
  • Удобно для условий v-if/v-show или динамических классов.

Динамические классы и реактивность

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

<template>
  <button :class="{ active: isActive, disabled: isDisabled }">Click</button>
</template>

<script>
export default {
  data() {
    return { isActive: false, isDisabled: true }
  }
}
</script>

Тестирование динамических классов:

const wrapper = mount(MyButton)
expect(wrapper.classes()).toContain('disabled')
expect(wrapper.classes()).not.toContain('active')

// Изменение состояния
await wrapper.setData({ isActive: true, isDisabled: false })
expect(wrapper.classes()).toContain('active')
expect(wrapper.classes()).not.toContain('disabled')

Ключевой момент: метод setData() или setProps() автоматически обновляет DOM компонента, что позволяет тестировать реактивное поведение классов.

Комбинированные селекторы и вложенные элементы

Для сложных компонентов с несколькими вложенными элементами удобно использовать цепочку find() или findAll() с последующей проверкой классов:

const wrapper = mount(Card)
const headers = wrapper.findAll('.card__header')

headers.forEach(header => {
  expect(header.classes()).toContain('card__header')
})

Если нужно проверить конкретный класс у определённого элемента:

expect(wrapper.find('.card__header--highlighted').exists()).toBe(true)

Работа с условными и вычисляемыми классами

Часто классы вычисляются через вычисляемые свойства или методы:

<template>
  <div :class="statusClass">Status</div>
</template>

<script>
export default {
  props: { status: String },
  computed: {
    statusClass() {
      return {
        'status--ok': this.status === 'ok',
        'status--error': this.status === 'error'
      }
    }
  }
}
</script>

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

const wrapper = mount(StatusLabel, { props: { status: 'ok' } })
expect(wrapper.classes()).toContain('status--ok')
expect(wrapper.classes()).not.toContain('status--error')

await wrapper.setProps({ status: 'error' })
expect(wrapper.classes()).toContain('status--error')
expect(wrapper.classes()).not.toContain('status--ok')

Советы по проверке классов

  • Использовать classes() для проверки нескольких классов одновременно.
  • Для одиночного класса удобнее hasClass().
  • Всегда тестировать динамические изменения через setProps() или setData().
  • Для вложенных элементов использовать find() и findAll().
  • В сложных компонентах проверять конкретные комбинации классов через arrayContaining.

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

Оглавление