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

Atomico — это современная библиотека для создания веб-компонентов на JavaScript с декларативным подходом. В контексте E2E (end-to-end) тестирования важно проверять работу компонентов не только на уровне их API или внутренних состояний, но и во взаимодействии с браузером, пользовательским интерфейсом и другими компонентами.

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

Для E2E тестирования обычно используют инструменты вроде Playwright или Cypress, которые позволяют запускать браузерные сценарии и имитировать действия пользователя. В проекте на Atomico необходимо:

  1. Установить инструмент для E2E тестирования:
npm install --save-dev playwright
  1. Настроить скрипт запуска в package.json:
"scripts": {
  "test:e2e": "playwright test"
}
  1. Создать отдельную директорию для тестов, например tests/e2e, чтобы отделить их от юнит-тестов.

Структура E2E теста для компонента Atomico

Типичный E2E тест состоит из следующих шагов:

  1. Инициализация страницы — открытие тестового HTML с компонентами.
  2. Поиск элементов — использование селекторов для взаимодействия.
  3. Выполнение действий — клик, ввод текста, прокрутка.
  4. Проверка состояния — валидация видимого результата или изменений DOM.

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

import { test, expect } from '@playwright/test';

test('кнопка Atomico обновляет счетчик', async ({ page }) => {
  await page.goto('http://localhost:3000/test-page');

  const button = page.locator('my-counter button');
  const display = page.locator('my-counter .value');

  await expect(display).toHaveText('0');

  await button.click();
  await expect(display).toHaveText('1');

  await button.click();
  await expect(display).toHaveText('2');
});

Важность рендеринга и shadow DOM

Atomico активно использует shadow DOM, поэтому при поиске элементов в E2E тестах следует учитывать, что стандартные селекторы типа document.querySelector могут не находить вложенные элементы. Playwright и Cypress поддерживают shadow DOM:

const shadowButton = page.locator('my-component').shadowRoot().locator('button');
await shadowButton.click();

Поддержка shadow DOM обеспечивает правильное тестирование визуальных и интерактивных частей компонентов Atomico, что критично для сложных UI.

Мокирование внешних зависимостей

Компоненты Atomico часто взаимодействуют с API или другими сервисами. Для E2E тестов важно изолировать внешние вызовы, чтобы тесты были стабильными и воспроизводимыми:

page.route('https://api.example.com/data', route => {
  route.fulfill({
    status: 200,
    contentType: 'application/json',
    body: JSON.stringify({ value: 42 }),
  });
});

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

Асинхронное поведение и ожидания

Atomico компоненты могут обновлять DOM асинхронно, поэтому в тестах необходимо использовать явные ожидания:

await expect(display).toHaveText('1', { timeout: 2000 });

Playwright и Cypress предоставляют встроенные методы ожидания, что минимизирует ошибки, связанные с race conditions.

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

E2E тесты для Atomico компонентов легко интегрировать в поток CI/CD:

  • Настройка запуска тестов в GitHub Actions, GitLab CI или Jenkins.
  • Параллельный запуск нескольких браузеров для ускорения тестирования.
  • Снятие скриншотов и видео при падении теста для быстрого анализа.

Пример конфигурации GitHub Actions:

name: E2E Tests
on: [push, pull_request]
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 20
      - run: npm ci
      - run: npm run build
      - run: npm run test:e2e

Организация тестов компонентов

Для удобства и масштабируемости следует придерживаться принципов:

  • Один компонент — один файл теста, чтобы легко находить и поддерживать тесты.
  • Тестирование критических сценариев: пользовательский ввод, клики, асинхронные обновления DOM.
  • Использование Page Object Pattern, если компоненты сложные и имеют много интерактивных элементов.

Практика: тестирование событий

Atomico компоненты часто генерируют события через dispatch или реактивные свойства. В E2E тестах важно проверять, что события корректно вызываются:

const log = [];
page.on('console', msg => log.push(msg.text()));

await button.click();
expect(log).toContain('clicked');

Такой подход помогает убедиться, что компонент правильно взаимодействует с внешним миром и другими элементами страницы.

Производительность и параллелизация

При большом наборе компонентов стоит:

  • Разделять тесты по функциональным блокам.
  • Использовать параллельное выполнение в разных браузерах.
  • Ограничивать время ожидания асинхронных операций для предотвращения “зависаний”.

Эти меры повышают стабильность тестовой инфраструктуры и сокращают время проверки при каждом коммите.

Заключение по методикам

E2E тестирование в Atomico сочетает проверку визуального интерфейса, асинхронной логики и взаимодействия между компонентами. Важнейшие элементы — корректная работа с shadow DOM, мокирование внешних вызовов, использование явных ожиданий и интеграция в CI/CD. Эти принципы обеспечивают надежность компонентов и позволяют поддерживать высокое качество веб-приложений.

Оглавление