Покрытие кода тестами

Основы тестирования в Quasar

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

Для организации тестирования Quasar использует стандартные инструменты экосистемы Vue, такие как Jest для юнит-тестов и Cypress для E2E. Встроенная CLI-команда quasar test позволяет быстро запускать тесты и генерировать отчёты о покрытии кода.

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

Юнит-тестирование фокусируется на тестировании отдельных компонентов или функций без зависимости от внешних сервисов. В Quasar каждый компонент — это Vue-компонент, и тестирование строится на проверке:

  • корректности рендеринга шаблона,
  • реактивности данных,
  • работы методов и вычисляемых свойств (computed properties).

Пример структуры юнит-теста для компонента:

import { mount } from '@vue/test-utils';
import QButton from 'quasar/src/components/button/QButton.vue';

describe('QButton', () => {
  it('должен отображать переданный label', () => {
    const wrapper = mount(QButton, {
      props: { label: 'Нажми меня' }
    });
    expect(wrapper.text()).toBe('Нажми меня');
  });

  it('вызывает событие click при нажатии', async () => {
    const wrapper = mount(QButton);
    await wrapper.trigger('click');
    expect(wrapper.emitted()).toHaveProperty('click');
  });
});

Ключевой момент: использование mount позволяет полностью смонтировать компонент в виртуальном DOM, что важно для проверки взаимодействия с шаблоном и реактивными свойствами.

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

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

Пример интеграционного теста с Vuex:

import { mount } from '@vue/test-utils';
import { createStore } from 'vuex';
import MyComponent from 'src/components/MyComponent.vue';

const store = createStore({
  state() {
    return { counter: 0 };
  },
  mutations: {
    increment(state) {
      state.counter++;
    }
  }
});

describe('MyComponent', () => {
  it('увеличивает счетчик при нажатии кнопки', async () => {
    const wrapper = mount(MyComponent, {
      global: { plugins: [store] }
    });
    await wrapper.find('button').trigger('click');
    expect(store.state.counter).toBe(1);
  });
});

Важно: для интеграционных тестов требуется подключение глобальных плагинов Quasar, таких как Notify, Dialog, Loading, чтобы поведение компонентов соответствовало реальной работе приложения.

End-to-End тестирование (E2E)

E2E-тестирование проверяет приложение целиком, включая пользовательский интерфейс и взаимодействие с сервером. В Quasar стандартом является Cypress, интегрируемый через команду quasar test e2e.

Пример E2E-теста:

describe('Главная страница', () => {
  it('должна показывать заголовок', () => {
    cy.visit('/');
    cy.get('h1').should('contain', 'Добро пожаловать в Quasar');
  });

  it('кнопка увеличивает счетчик', () => {
    cy.get('button.increment').click();
    cy.get('.counter').should('contain', '1');
  });
});

Особенности E2E в Quasar:

  • Автоматическая сборка приложения перед тестом через quasar dev или quasar build.
  • Возможность использовать кастомные команды Cypress для Quasar-компонентов.
  • Тесты выполняются в реальном браузере, что обеспечивает проверку визуальных и интерактивных эффектов.

Покрытие кода (Code Coverage)

Покрытие кода показывает процент кода, который проверяется тестами. В Quasar для юнит-тестов используется Jest с инструментом istanbul, а для E2E — встроенные отчёты Cypress.

Пример настройки покрытия в package.json:

"jest": {
  "collectCoverage": true,
  "collectCoverageFrom": [
    "src/components/**/*.{js,vue}",
    "src/pages/**/*.{js,vue}"
  ],
  "coverageReporters": ["html", "text-summary"]
}

Рекомендации по повышению покрытия:

  • Писать тесты на методы компонентов, которые изменяют состояние.
  • Тестировать все ветви условных операторов (if, switch).
  • Проверять реакции компонентов на события и пользовательские действия.
  • Интеграционные тесты должны покрывать сценарии работы с Vuex, маршрутизацией и API.

Практические советы

  • Использовать shallowMount для юнит-тестов, когда не требуется рендеринг дочерних компонентов, что ускоряет тестирование.
  • Для тестирования глобальных плагинов Quasar подключать их через global.plugins при монтировании.
  • В E2E-тестах избегать зависимости от конкретного времени или внешних API — использовать мок-данные.
  • Автоматически запускать тесты через CI/CD, чтобы каждый коммит имел актуальное покрытие кода.

Понимание и правильное применение этих техник позволяет поддерживать Quasar-приложения с высоким качеством кода, стабильностью и предсказуемостью поведения при изменениях.

Оглавление