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

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

Основные методы для проверки классов

Vue Test Utils предоставляет несколько методов для работы с классами через объект wrapper, который создаётся с помощью mount или shallowMount.

1. classes()

Метод classes() возвращает массив всех классов элемента или компонента.

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

const wrapper = mount(MyComponent)
console.log(wrapper.classes()) // ['base-class', 'active']

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

  • Если вызывается без аргументов, возвращает массив всех классов.
  • Подходит для точного сравнения с ожидаемым списком классов.
  • Работает как на корневом элементе компонента, так и на вложенных через find.

2. classes(className)

При передаче строки метод возвращает true, если элемент содержит указанный класс, и false, если не содержит.

expect(wrapper.classes('active')).toBe(true)
expect(wrapper.classes('disabled')).toBe(false)

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

Проверка классов на вложенных элементах

Для работы с внутренними элементами компонента используется метод find или findAll:

const button = wrapper.find('button')
expect(button.classes()).toContain('btn-primary')
expect(button.classes('disabled')).toBe(false)

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

  • find возвращает первый найденный элемент, findAll — массив обёрток.
  • В случае с findAll можно итерировать по результатам и проверять классы каждого элемента.

Динамические классы

Vue часто использует привязку классов через объект или массив в :class. Тестирование таких случаев требует проверки изменений после изменения состояния:

const wrapper = mount(MyComponent, {
  data() {
    return { isActive: false }
  }
})

expect(wrapper.classes('active')).toBe(false)

await wrapper.setData({ isActive: true })
expect(wrapper.classes('active')).toBe(true)

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

  • setData позволяет изменять реактивные данные компонента.
  • После изменения данных необходимо использовать await для ожидания обновления DOM.
  • Проверка классов является способом убедиться в корректной реактивности.

Проверка классов с условной логикой

Часто компоненты применяют классы по условию, например, для ошибок или состояния загрузки:

const wrapper = mount(MyComponent, {
  props: { error: true }
})

expect(wrapper.classes()).toContain('error')

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

  • Проверка может включать несколько классов одновременно.
  • Метод classes() удобно комбинировать с toContain для проверки конкретных классов среди множества.

Практические рекомендации

  1. Для точной проверки используйте комбинацию classes() и toContain или toEqual.
  2. Для динамических классов обязательно обновляйте состояние компонента и ждите реактивного обновления через await.
  3. Проверка на наличие конкретного класса более читаема, чем сравнение массивов целиком, особенно если компонент имеет базовые стили.
  4. Для повторяющихся элементов используйте findAll и проверку классов в цикле, чтобы убедиться в корректной стилизации всех элементов списка.

Примеры сложных проверок

Проверка нескольких классов одновременно:

const wrapper = mount(MyComponent, {
  props: { isActive: true, isDisabled: false }
})

expect(wrapper.classes()).toEqual(expect.arrayContaining(['active', 'base-class']))
expect(wrapper.classes('disabled')).toBe(false)

Проверка классов на массиве элементов:

const items = wrapper.findAll('li')
items.forEach(item => {
  expect(item.classes()).toContain('list-item')
})

Использование условной логики с реактивными данными:

await wrapper.setData({ isLoading: true })
expect(wrapper.classes()).toContain('loading')

await wrapper.setData({ isLoading: false })
expect(wrapper.classes()).not.toContain('loading')

Методы проверки классов в Vue Test Utils позволяют тестировать визуальное состояние компонентов, динамические изменения и условную стилизацию. Правильное использование classes() обеспечивает надёжное покрытие тестами поведения элементов и реактивности.

Оглавление