Stencil, как современный фреймворк для создания веб-компонентов, поддерживает различные способы тестирования приложений. Одним из самых мощных методов является E2E тестирование (End-to-End Testing), которое позволяет проверять взаимодействие компонентов с реальными пользователями в реальной среде. В рамках этого тестирования эмулируются настоящие пользовательские сценарии, и оно используется для проверки работы всех частей системы, от UI до backend-логики.
Stencil интегрируется с популярными инструментами для E2E тестирования, такими как Puppeteer и Playwright, что делает его удобным для разработчиков, стремящихся к стабильным и высококачественным приложениям.
Для начала работы с E2E тестированием в Stencil нужно установить соответствующие зависимости.
npm install --save-dev @stencil/core puppeteere2e, и настройте конфигурацию для тестирования. Стандартный
файл конфигурации Stencil для E2E тестирования называется
stencil.config.ts.Пример базовой настройки:
import { Config } from '@stencil/core';
export const config: Config = {
e2e: {
spec: 'e2e/**/*.spec.ts',
devServer: {
root: 'www',
watchGlob: '**/**',
},
browserHeadless: true, // Запускать тесты в headless-режиме
},
};Эта конфигурация указывает, где искать тесты, на каком сервере развернуть приложение и как запускать тесты.
Stencil использует стандартные средства тестирования, такие как Jest для unit-тестов, но для E2E тестирования подключаются другие библиотеки. Обычно для написания тестов применяется API, предоставляемое Puppeteer или Playwright. Пример кода E2E теста для компонента с использованием Puppeteer:
describe('my-component', () => {
it('should render the component and interact with it', async () => {
const page = await browser.newPage();
await page.goto('http://localhost:3333');
const button = await page.$('button');
await button.click();
const result = await page.$eval('.result', el => el.textContent);
expect(result).toBe('Expected text after button click');
});
});Этот тест открывает страницу приложения, кликает по кнопке и проверяет, изменился ли текст на экране. Такое тестирование охватывает весь жизненный цикл компонента, от загрузки страницы до пользовательского взаимодействия.
Запускать тесты можно с помощью команды:
npm run test:e2eЭта команда активирует процесс выполнения тестов, что позволяет проверить все компоненты на наличие ошибок или неправильной работы.
Тесты в Stencil обычно пишутся с использованием специфичных для фреймворка методов и команд, таких как:
Пример:
describe('my-button', () => {
let page;
beforeAll(async () => {
page = await browser.newPage();
await page.goto('http://localhost:3333');
});
it('should have the correct text content', async () => {
const button = await page.$('my-button');
const text = await button.evaluate(el => el.shadowRoot.querySelector('button').textContent);
expect(text).toBe('Click me');
});
afterAll(async () => {
await page.close();
});
});В этом примере создаётся страница, проверяется содержимое кнопки и закрывается страница после выполнения теста.
Stencil активно использует Shadow DOM для
инкапсуляции стилей и логики компонентов, что делает тестирование этих
компонентов особенным. Для взаимодействия с элементами внутри Shadow DOM
необходимо использовать метод shadowRoot, который
предоставляет доступ к элементам, инкапсулированным внутри
компонента.
Пример:
it('should have a shadow DOM with a button', async () => {
const myButton = await page.$('my-button');
const shadowRoot = await myButton.shadowRoot();
const button = await shadowRoot.$('button');
const buttonText = await button.evaluate(el => el.textContent);
expect(buttonText).toBe('Click me');
});Этот тест проверяет, что компонент my-button рендерит
кнопку внутри своего Shadow DOM с текстом «Click me».
Отладка может быть сложной, особенно если тесты не проходят или поведение компонентов отличается от ожидаемого. Чтобы упростить процесс, Stencil предоставляет несколько полезных инструментов:
Пример включения видимости браузера для отладки:
const browser = await puppeteer.launch({ headless: false });Для сложных сценариев тестирования можно использовать поддельные данные (mock data). Это позволяет тестировать компоненты в различных состояниях и проверять их работу с разными наборами данных.
Пример:
it('should display user data correctly', async () => {
const page = await browser.newPage();
await page.goto('http://localhost:3333');
const userData = { name: 'John Doe', age: 30 };
await page.evaluate((data) => {
window.localStorage.setItem('user', JSON.stringify(data));
}, userData);
const userName = await page.$eval('.user-name', el => el.textContent);
expect(userName).toBe('John Doe');
});В этом примере тестируется компонент, который использует данные
пользователя, сохранённые в localStorage.
Stencil позволяет тестировать компоненты не только на десктопных браузерах, но и на мобильных устройствах. Для этого можно использовать эмуляторы мобильных браузеров, предоставляемые такими инструментами, как Puppeteer и Playwright.
Пример:
it('should display mobile layout correctly', async () => {
const page = await browser.newPage();
await page.emulate({ viewport: { width: 375, height: 667 }, userAgent: 'Mozilla/5.0' });
await page.goto('http://localhost:3333');
const mobileView = await page.$('.mobile-view');
expect(mobileView).toBeTruthy();
});Эта настройка позволяет тестировать адаптивность и мобильную версию интерфейса, проверяя, что компоненты правильно масштабируются.
Для обеспечения стабильности и качества проекта E2E тесты можно интегрировать с процессами CI/CD. Это позволяет автоматически запускать тесты при каждом коммите или перед релизом приложения. В популярных CI-системах, таких как GitHub Actions или CircleCI, можно настроить выполнение тестов на каждом этапе сборки или деплоя.
Пример настройки для GitHub Actions:
name: E2E Testing
on:
push:
branches:
- main
jobs:
test:
runs-on: ubuntu-latest
steps:
- name: Checkout code
uses: actions/checkout@v2
- name: Install dependencies
run: npm install
- name: Run E2E tests
run: npm run test:e2eЭтот конфигурационный файл автоматически запускает E2E тесты каждый раз, когда происходит push в основную ветку репозитория.
E2E тестирование в Stencil является мощным инструментом для проверки целостности компонентов и взаимодействия между ними в реальных условиях. Используя Puppeteer, Playwright и другие инструменты, можно легко тестировать интерфейсы и логику приложения, а также интегрировать тесты в процессы CI/CD для поддержания высокого качества проекта на всех этапах разработки.