Стратегия тестирования и отлова ошибок

Контекст

Для обеспечения качества frontend-приложений необходима комплексная стратегия тестирования, охватывающая все уровни: от unit-тестов до мониторинга ошибок в production.

Текущая ситуация:

• Отсутствует единый подход к тестированию
• Нет автоматического отслеживания регрессий
• Ошибки в production обнаруживаются пользователями

Требования:

• Покрытие всех уровней тестирования
• Автоматизация в CI/CD
• Мониторинг production-ошибок
• Визуальное тестирование компонентов
• Отслеживание производительности

Решение

Внедрить многоуровневую стратегию тестирования на уровне каждого проекта и модуля.

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

Обоснование

Unit: Vitest

Выбор: Vitest — нативная интеграция с Nuxt, одна конфигурация с проектом.

Документация: https://vitest.dev/

Component: Storybook + Chromatic

Выбор: Storybook для документации + Chromatic для visual regression testing.

Документация:

• https://storybook.js.org/
• https://www.chromatic.com/

E2E: Cypress Studio

Выбор: Cypress с Cypress Studio — возможность записи тестов без кода, отличный debugging.

Документация: https://docs.cypress.io/

Load: Artillery

Выбор: Artillery — простота конфигурации, интеграция с Node.js проектами.

Документация: https://www.artillery.io/

Performance: Unlighthouse

Выбор: Unlighthouse — автоматическое сканирование всех страниц, интеграция в CI.

Документация: https://unlighthouse.dev/

Errors: Sentry

Выбор: Sentry — стандарт индустрии, отличная интеграция с Vue/Nuxt.

Документация: https://docs.sentry.io/platforms/javascript/guides/vue/

Архитектура тестирования

Пирамида тестов

        /\
       /  \     E2E (Cypress)
      /----\    Критические user flows
     /      \
    /--------\  Component (Storybook + Chromatic)
   /          \ Визуальные регрессии
  /------------\
 /              \ Unit (Vitest)
/________________\ Логика, utils, composables

Что тестировать на каждом уровне

Структура в проекте

app-name/
├── app/
│   └── components/
│       └── OrderCard/
│           ├── OrderCard.vue
│           ├── OrderCard.stories.ts    # Storybook
│           └── OrderCard.test.ts       # Vitest
├── tests/
│   ├── e2e/                            # Cypress
│   │   ├── auth.cy.ts
│   │   └── orders.cy.ts
│   ├── load/                           # Artillery
│   │   └── api-load.yml
│   └── setup.ts                        # Vitest setup
├── .storybook/                         # Storybook config
├── cypress.config.ts
├── vitest.config.ts
└── unlighthouse.config.ts

CI/CD интеграция

Pipeline stages

# .gitlab-ci.yml / .github/workflows/ci.yml

stages:
  - lint
  - test
  - visual
  - e2e
  - performance
  - deploy

unit-tests:
  stage: test
  script:
    - pnpm test:unit

storybook-build:
  stage: visual
  script:
    - pnpm storybook:build
    - pnpm chromatic --project-token=$CHROMATIC_TOKEN

e2e-tests:
  stage: e2e
  script:
    - pnpm test:e2e

performance:
  stage: performance
  script:
    - pnpm unlighthouse
  only:
    - main

Когда запускать

Sentry интеграция

Настройка

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@sentry/nuxt/module'],

  sentry: {
    dsn: process.env.SENTRY_DSN,
    environment: process.env.NODE_ENV,
  },
})

Что отслеживать

• JavaScript errors
• Unhandled promise rejections
• API errors (4xx, 5xx)
• Performance transactions
• User feedback

Source Maps

// nuxt.config.ts
export default defineNuxtConfig({
  sourcemap: {
    client: true,
  },

  sentry: {
    uploadSourcemaps: true,
  },
})

Последствия

Положительные

• Раннее обнаружение багов
• Автоматическое отслеживание визуальных регрессий
• Мониторинг production-ошибок в реальном времени
• Контроль производительности
• Документация компонентов через Storybook
• Уверенность при рефакторинге

Отрицательные

• Время на написание и поддержку тестов
• Дополнительная инфраструктура (Chromatic, Sentry)
• Увеличение времени CI/CD pipeline
• Требуется обучение команды

Coverage требования

Минимальные пороги

Приоритеты покрытия

1. Обязательно: composables, utils, stores
2. Обязательно: shared компоненты (UI layer)
3. Обязательно: критические user flows (auth, core actions)
4. Желательно: page components
5. Желательно: edge cases

Связанные решения

• adr-001-nuxt-4-spa
• adr-002-monorepo-modules
• standard-testing
• runbook-testing-setup