Автоматическое тестирование

Quasar — это фреймворк на базе Vue.js, предоставляющий мощный набор инструментов для создания как веб-приложений, так и мобильных и десктопных приложений. Автоматическое тестирование в Quasar строится на тех же принципах, что и в Vue.js, с расширениями, упрощающими интеграцию с компонентами и CLI Quasar. Основные типы тестирования включают модульные тесты (unit tests), тесты компонентов (component tests), интеграционные тесты и end-to-end тесты.

Настройка тестового окружения

Для начала необходимо установить тестовую среду. Quasar поддерживает Jest и Cypress из коробки. Установка выполняется через CLI:

quasar new test

Или вручную через npm:

npm install --save-dev @quasar/testing jest @vue/test-utils
npm install --save-dev cypress
  • Jest используется для unit и component тестов.
  • Vue Test Utils обеспечивает удобное API для рендеринга компонентов и проверки их состояния.
  • Cypress применяется для end-to-end тестирования, имитируя действия пользователя.

Конфигурация тестов в Quasar хранится в quasar.conf.js в секции testing, где можно задать пути, окружение и другие параметры.

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

Unit-тесты проверяют отдельные функции или методы компонентов без зависимости от внешних сервисов. Основной подход — изоляция логики. Например, тестирование кнопки с методом клика:

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

describe('MyButton', () => {
  it('вызывает метод при клике', async () => {
    const wrapper = mount(MyButton)
    await wrapper.find('button').trigger('click')
    expect(wrapper.emitted('click')).toHaveLength(1)
  })
})
  • mount создает экземпляр компонента.
  • trigger симулирует событие.
  • emitted проверяет сгенерированные события.

Важно тестировать props, computed свойства и методы отдельно, чтобы обеспечить максимальное покрытие.

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

Quasar предоставляет компоненты UI, которые часто зависят от Vuex, роутера или плагинов. Для их тестирования необходимо использовать мок-объекты:

import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import MyComponent from 'src/components/MyComponent.vue'

const localVue = createLocalVue()
localVue.use(Vuex)

const store = new Vuex.Store({
  state: { count: 0 },
  mutations: { increment: state => state.count++ }
})

describe('MyComponent', () => {
  it('отображает значение из store', () => {
    const wrapper = mount(MyComponent, { store, localVue })
    expect(wrapper.text()).toContain('0')
  })
})
  • createLocalVue изолирует тестовую среду от основного приложения.
  • store позволяет проверять реактивность и интеграцию с Vuex.

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

Интеграционные тесты проверяют взаимодействие нескольких компонентов и модулей. В Quasar это особенно важно для страниц с несколькими виджетами. Пример интеграционного теста:

import { mount } from '@vue/test-utils'
import PageDashboard from 'src/pages/PageDashboard.vue'

describe('PageDashboard', () => {
  it('отображает список элементов', async () => {
    const wrapper = mount(PageDashboard)
    expect(wrapper.findAll('.item')).toHaveLength(5)
  })
})
  • Проверяется правильность рендеринга нескольких компонентов на одной странице.
  • Можно комбинировать с моками API для имитации внешних данных.

End-to-End тестирование с Cypress

Cypress обеспечивает тестирование приложения от начала до конца, включая пользовательский интерфейс и сетевые запросы. Пример теста страницы входа:

describe('Login Page', () => {
  it('успешный вход', () => {
    cy.visit('/login')
    cy.get('input[name=email]').type('user@example.com')
    cy.get('input[name=password]').type('password123')
    cy.get('button[type=submit]').click()
    cy.url().should('include', '/dashboard')
  })
})
  • cy.visit открывает страницу приложения.
  • cy.get ищет элементы по селекторам.
  • cy.url проверяет результат навигации после действий пользователя.

Quasar CLI позволяет запускать Cypress с интеграцией в проект, автоматически используя маршруты и сборку приложения.

Мокирование и заглушки

Для эффективного тестирования компонентов часто используют мокирование API-запросов и зависимостей:

import axios from 'axios'
jest.mock('axios')

test('получение данных', async () => {
  axios.get.mockResolvedValue({ data: [1, 2, 3] })
  const result = await fetchData()
  expect(result).toEqual([1, 2, 3])
})
  • jest.mock подменяет реальный модуль.
  • mockResolvedValue возвращает нужные данные для теста.

Это позволяет тестировать компоненты независимо от серверной логики и сети.

Покрытие тестами и CI/CD

Quasar легко интегрируется с CI/CD системами, такими как GitHub Actions, GitLab CI или Jenkins. Использование Jest с флагом --coverage позволяет получать отчеты о покрытии кода, выделяя не протестированные участки. Хорошая практика — ставить порог покрытия не ниже 80% для основных компонентов.

Встроенные утилиты Quasar для тестирования

  • Quasar Test Utils расширяет стандартные Vue Test Utils, предоставляя методы для работы с компонентами Quasar, такими как QBtn, QDialog, QTable.
  • Методы findComponent и trigger позволяют управлять сложными элементами UI.
  • Специальные хелперы упрощают тестирование асинхронного взаимодействия с компонентами Quasar.

Стратегии тестирования

  • Unit-тесты — проверяют отдельные методы и простую логику компонентов.
  • Component-тесты — тестируют поведение UI с props и событиями.
  • Интеграционные тесты — оценивают взаимодействие нескольких компонентов и модулей.
  • E2E тесты — имитируют реальное использование приложения пользователем.

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

Оглавление