Компиляция и тестирование

Stencil использует специализированный инструмент для компиляции компонентов, который позволяет генерировать продуктивный и высокооптимизированный JavaScript-код. Основной особенностью Stencil является то, что он компилирует компоненты в Web Components, делая их совместимыми с различными фреймворками и библиотеками.

Преобразование компонентов

Stencil-приложение включает в себя несколько этапов компиляции:

  1. Синтаксический анализ: Stencil парсит компоненты, написанные с использованием синтаксиса TypeScript или JavaScript. Это позволяет использовать строгую типизацию и новые возможности языка.
  2. Создание Web Components: Каждый компонент компилируется в стандартный Web Component, который можно интегрировать в любые другие фреймворки.
  3. Оптимизация: Stencil применяет различные методы оптимизации, такие как Tree Shaking и Lazy Loading, для уменьшения размера итогового бандла и ускорения загрузки.
  4. Предварительная обработка стилей: Стиль компонента можно описывать с использованием CSS, SCSS или PostCSS. Stencil автоматически инкапсулирует стили каждого компонента, чтобы избежать конфликтов с другими частями приложения.

Компиляция компонентов происходит с помощью CLI-инструмента Stencil. Запуск компиляции может быть выполнен с помощью команды:

npm run build

После компиляции компоненты могут быть использованы в приложении без необходимости в дополнительных зависимостях.

Конфигурация компиляции

Для настройки компиляции в Stencil используется файл stencil.config.ts. В этом файле определяются основные параметры, такие как пути для исходных файлов, настройки для бандлеров, целевые платформы и оптимизации.

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

import { Config } from '@stencil/core';

export const config: Config = {
  namespace: 'my-components',
  globalStyle: 'src/global/styles.css',
  globalScripts: 'src/global/scripts.ts',
  outputTargets: [
    {
      type: 'www',
      serviceWorker: null, // Отключение сервис-воркера
    },
  ],
};

В этом примере настроен вывод на платформу www, а также указаны глобальные стили и скрипты для проекта.

Тестирование в Stencil

Stencil включает в себя инструменты для тестирования компонентов, что позволяет убедиться в их правильной работе на ранних этапах разработки. Для тестирования используется библиотека Jest, а также @stencil/core/testing, которая предоставляет набор инструментов для облегчения написания тестов.

Написание тестов

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

Пример простого теста для компонента:

import { newSpecPage } from '@stencil/core/testing';
import { MyComponent } from './my-component';

describe('my-component', () => {
  it('renders correctly', async () => {
    const page = await newSpecPage({
      components: [MyComponent],
      html: `<my-component></my-component>`,
    });
    expect(page.root).toEqualHtml(`
      <my-component>
        <mock:shadow-root>
          <div>Hello, World!</div>
        </mock:shadow-root>
      </my-component>
    `);
  });
});

В этом примере тестируется компонент my-component, который должен отрисовать элемент с текстом “Hello, World!”. Тест проверяет, что результат рендеринга совпадает с ожидаемым.

Запуск тестов

Для запуска тестов в Stencil используется команда:

npm test

Она инициирует выполнение Jest, который в свою очередь выполнит все тесты, проверив компоненты на корректность их работы. После выполнения тестов выводится отчет о результатах.

Тестирование на различных устройствах

Stencil поддерживает тестирование компонентов на различных устройствах и экранах. Для этого используется Puppeteer — инструмент для автоматизации браузера. Это позволяет проверять компоненты на различных разрешениях и устройствах с реальным рендерингом.

Настройка таких тестов происходит через конфигурацию Jest, а также можно использовать @stencil/core/testing для создания mock-объектов, имитирующих поведение браузера.

Визуальное тестирование

В дополнение к функциональным тестам, Stencil также позволяет использовать визуальные тесты. Это важный аспект, особенно для компонентов с комплексным стилем и анимацией. Для таких тестов могут использоваться библиотеки, такие как Percy или Chromatic, которые делают снимки экрана компонентов и сравнивают их с эталонными.

Линтинг и типизация

Stencil интегрируется с линтерами и типизаторами, чтобы поддерживать код в чистоте и гарантировать отсутствие ошибок. Для этого Stencil использует TypeScript и настроенную линтинг-конфигурацию. Примеры линтеров, которые можно использовать в проекте:

  • TSLint: для проверки TypeScript-кода.
  • Prettier: для форматирования кода.

Типизация является важной частью процесса разработки в Stencil. Использование TypeScript позволяет гарантировать, что компоненты будут иметь строгую типизацию, что снижает количество ошибок при разработке. Кроме того, конфигурация линтера может быть настроена для автоматического исправления ошибок и предупреждений в коде.

Пример конфигурации для линтера:

{
  "extends": [
    "tslint:recommended",
    "tslint-react"
  ],
  "rules": {
    "semicolon": [true, "never"],
    "no-console": false
  }
}

Автоматизация и CI/CD

Stencil легко интегрируется в процесс непрерывной интеграции (CI) и развертывания (CD). Благодаря поддержке популярных CI/CD систем, таких как GitHub Actions, GitLab CI и CircleCI, можно настроить автоматический запуск тестов и сборку проекта при каждом изменении кода.

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

name: Build and Test

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: '14'

      - name: Install dependencies
        run: npm install

      - name: Run tests
        run: npm test

      - name: Build project
        run: npm run build

Этот файл автоматически запускает процесс сборки и тестирования при каждом пуше в основную ветку репозитория. Подобные CI/CD пайплайны ускоряют разработку и гарантируют стабильность кода на всех этапах.

Оптимизация процесса сборки

Stencil предоставляет несколько опций для оптимизации процесса сборки и разработки:

  • Watch режим: позволяет отслеживать изменения в коде и автоматически перезапускать сборку.
  • Minification: включение минификации для уменьшения размера бандла.
  • Source maps: генерация исходных карт для упрощения отладки на продакшн-серверах.

Для включения этих опций можно настроить файл stencil.config.ts:

export const config: Config = {
  devMode: true, // Режим разработки с автоматической сборкой
  minifyJs: true, // Минификация JavaScript
  sourceMap: true, // Включение карт исходников
};

Stencil поддерживает гибкость и позволяет разработчикам настраивать процесс сборки под свои нужды, что значительно упрощает разработку, тестирование и оптимизацию компонентов.

Оглавление