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

Quasar Framework предоставляет полный стек инструментов для разработки Vue.js-приложений, включая возможности для тестирования компонентов. Тестирование компонентов обеспечивает стабильность интерфейса и корректность работы пользовательских элементов, особенно при масштабировании приложения. Основные подходы включают юнит-тесты, интеграционные тесты и энд-ту-энд тесты (E2E).

Юнит-тестирование компонентов

Юнит-тестирование позволяет проверить функциональность отдельного компонента изолированно. В Quasar для этого обычно используют Vue Test Utils вместе с тест-раннерами вроде Jest или Vitest.

Создание теста компонента:

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

describe('MyButton.vue', () => {
  it('рендерит текст кнопки', () => {
    const wrapper = mount(MyButton, {
      props: { label: 'Нажми меня' }
    })
    expect(wrapper.text()).toContain('Нажми меня')
  })
})

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

  • mount() создаёт полную копию компонента с его шаблоном, логикой и дочерними компонентами.
  • Можно использовать shallowMount() для изоляции компонента, чтобы дочерние компоненты не рендерились полностью.
  • Свойства (props) передаются через объект при монтировании, что позволяет тестировать разные состояния компонента.

Работа с событиями и методами

Для компонентов Quasar, таких как QBtn, QInput или QDialog, важно проверять взаимодействие с событиями:

import { mount } from '@vue/test-utils'
import { QBtn } from 'quasar'

describe('QBtn click', () => {
  it('вызывает метод при клике', async () => {
    const mockFn = jest.fn()
    const wrapper = mount(QBtn, {
      props: { label: 'Клик', onClick: mockFn }
    })
    await wrapper.trigger('click')
    expect(mockFn).toHaveBeenCalled()
  })
})

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

  • trigger('click') имитирует пользовательский клик.
  • Методы можно мокировать для проверки их вызова без выполнения реальной логики.
  • Для асинхронных действий важно использовать await и nextTick() при обновлении DOM.

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

Quasar активно использует слоты для кастомизации компонентов. Юнит-тестирование должно проверять правильное отображение содержимого слотов:

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

describe('MyCard.vue', () => {
  it('рендерит слот с контентом', () => {
    const wrapper = mount(MyCard, {
      slots: { default: '<p>Текст карточки</p>' }
    })
    expect(wrapper.html()).toContain('Текст карточки')
  })
})
  • slots позволяет передавать любой HTML или компонент для проверки визуального контента.
  • Это особенно важно для компонентов QCard, QTable или QTab, где структура динамическая.

Интеграционное тестирование

Интеграционные тесты проверяют взаимодействие нескольких компонентов и состояние приложения. Например, тестирование формы с компонентами QInput и QBtn:

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

describe('FormComponent.vue', () => {
  it('валидирует и отправляет форму', async () => {
    const wrapper = mount(FormComponent)
    await wrapper.find('input[name="email"]').setValue('test@example.com')
    await wrapper.find('button[type="submit"]').trigger('click')
    expect(wrapper.emitted()).toHaveProperty('submit')
  })
})

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

  • Проверяется передача данных между компонентами через props и события.
  • Возможна проверка валидации, состояния загрузки (loading) и ошибок.
  • Интеграционные тесты помогают выявить проблемы при взаимодействии компонентов Quasar, таких как диалоги и меню.

E2E тестирование с Quasar

Для полной проверки приложения используют Cypress или Playwright. В Quasar CLI есть готовая интеграция с Cypress.

Пример E2E теста кнопки:

describe('Главная страница', () => {
  it('открывает диалог при клике на кнопку', () => {
    cy.visit('/')
    cy.get('button[data-test="open-dialog"]').click()
    cy.get('.q-dialog').should('be.visible')
  })
})

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

  • Проверка всей цепочки взаимодействий: UI → события → DOM → отображение компонентов Quasar.
  • Использование data-test атрибутов повышает стабильность тестов и снижает зависимость от CSS-классов.
  • E2E тесты идеально подходят для тестирования сложных виджетов Quasar, таких как QTable с фильтрацией и пагинацией.

Советы по эффективному тестированию

  • Изоляция компонентов: использовать shallowMount для уменьшения зависимости от дочерних компонентов.
  • Мокирование сервисов: API-запросы и внешние библиотеки нужно мокировать для стабильных тестов.
  • Тестирование стилей и классов: Quasar активно использует динамические классы (color, dense, flat) — проверять их наличие через classes().
  • Асинхронность: использовать await wrapper.vm.$nextTick() для корректной проверки изменений в DOM после событий.
  • Покрытие всех состояний: тестировать компоненты с разными props, слотами, состояниями disabled, loading и error.

Тщательное тестирование компонентов Quasar обеспечивает высокую стабильность и предсказуемость работы интерфейса при любых изменениях. Правильное сочетание юнит-, интеграционных и E2E тестов позволяет создавать надёжные и масштабируемые приложения на базе Vue.js и Quasar Framework.

Оглавление