Получение атрибутов элемента (attributes)

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

Метод attributes()

Метод attributes() используется для получения всех атрибутов элемента или значения конкретного атрибута. Он доступен для объектов Wrapper, которые оборачивают рендер компонента или отдельный DOM-элемент.

Синтаксис:

wrapper.attributes([attributeName])
  • attributeName — строка с именем атрибута, который необходимо получить. Если аргумент не передан, возвращается объект со всеми атрибутами.

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

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

const wrapper = mount(MyButton, {
  props: { disabled: true }
})

// Получение конкретного атрибута
expect(wrapper.attributes('disabled')).toBe('')

// Получение всех атрибутов элемента
console.log(wrapper.attributes())

В этом примере attributes('disabled') вернёт строку '', так как для булевых атрибутов HTML наличие атрибута соответствует true. Если атрибут отсутствует, метод вернёт undefined.

Атрибуты и реактивные пропсы

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

const wrapper = mount(MyButton, {
  props: { disabled: false }
})

expect(wrapper.attributes('disabled')).toBeUndefined()

await wrapper.setProps({ disabled: true })
expect(wrapper.attributes('disabled')).toBe('')

В данном примере изменение пропса disabled автоматически отражается на атрибуте DOM-элемента.

Работа с кастомными атрибутами

Vue Test Utils позволяет проверять не только стандартные HTML-атрибуты, но и кастомные. Кастомные атрибуты добавляются через директиву v-bind или через объект attrs:

const wrapper = mount(MyButton, {
  attrs: { 'data-test-id': 'button-1' }
})

expect(wrapper.attributes('data-test-id')).toBe('button-1')

Использование кастомных атрибутов удобно для тестов, так как они не влияют на визуальное поведение компонента и позволяют точно идентифицировать элементы.

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

Метод attributes() также может быть полезен при проверке динамических атрибутов, таких как class или style, хотя для них существуют специализированные методы classes() и element.style.

Пример проверки динамического класса через атрибут:

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

expect(wrapper.attributes('class')).toContain('btn-primary')

Отличие attributes() от props()

Метод props() используется для проверки пропсов компонента, а attributes() — для проверки атрибутов DOM-элементов, которые фактически рендерятся в браузере. Пример различия:

const wrapper = mount(MyButton, { props: { disabled: true } })

// Проверка пропса
expect(wrapper.props('disabled')).toBe(true)

// Проверка атрибута DOM
expect(wrapper.attributes('disabled')).toBe('')

Это различие важно, так как пропс может быть установлен, но ещё не отражён в атрибуте, если компонент применяет условное рендеринг или вычисляет атрибут через v-bind.

Проверка отсутствия атрибутов

Для проверки отсутствующих атрибутов attributes() возвращает undefined. Это позволяет легко тестировать условия, когда атрибут должен появляться только при определённых условиях.

const wrapper = mount(MyButton, { props: { disabled: false } })
expect(wrapper.attributes('disabled')).toBeUndefined()

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

  • attributes() лучше всего использовать для проверки наличия, значения или отсутствия конкретного HTML-атрибута.
  • Для булевых атрибутов, таких как disabled, checked, наличие атрибута соответствует true.
  • Для динамических и кастомных атрибутов удобно проверять их через v-bind или attrs.
  • Разделять проверку атрибутов DOM и пропсов компонента, чтобы тесты оставались корректными и отражали реальное поведение приложения.

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

Оглавление