Тестирование рендеринга

Stencil — это мощный фреймворк для создания веб-компонентов, который позволяет разработчикам легко разрабатывать приложения с высоким уровнем производительности и широкими возможностями для тестирования. Одной из ключевых задач при разработке веб-компонентов является проверка корректности их рендеринга. В Stencil для этого предусмотрены различные инструменты и подходы, которые обеспечивают удобное и эффективное тестирование.

Важность тестирования рендеринга

Рендеринг компонентов — это процесс, в ходе которого компоненты превращаются в HTML-разметку и отображаются на веб-странице. В случае с веб-компонентами важно убедиться, что они корректно отображаются, правильно обрабатывают данные и корректно взаимодействуют с другими компонентами и элементами страницы. Тестирование рендеринга позволяет выявить ошибки на ранних этапах разработки, обеспечивая тем самым надежность приложения.

Подготовка к тестированию

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

npm install --save-dev @stencil/core jest

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

Написание тестов для рендеринга

Stencil предоставляет набор утилит для тестирования рендеринга, которые включают в себя проверку HTML-разметки компонентов, а также рендеринг с заданными данными и проверку их изменений. Основной механизм для работы с рендерингом — это метод render().

Основной пример теста

Допустим, есть компонент, который отображает простое сообщение на основе входных данных:

@Component({
  tag: 'my-message',
  styleUrl: 'my-message.css',
  shadow: true
})
export class MyMessage {
  @Prop() text: string;

  render() {
    return <div>{this.text}</div>;
  }
}

Тестирование такого компонента будет заключаться в проверке того, что при изменении пропса text рендерится правильный текст. Пример теста:

import { newSpecPage } from '@stencil/core/testing';
import { MyMessage } from './my-message';

describe('my-message', () => {
  it('renders with text prop', async () => {
    const { root } = await newSpecPage({
      components: [MyMessage],
      html: `<my-message text="Hello, world!"></my-message>`,
    });
    expect(root.textContent).toBe('Hello, world!');
  });
});

В этом тесте используется утилита newSpecPage, которая помогает создать и рендерить компонент в тестовом окружении. Мы передаем в компонент значение пропса text, а затем проверяем его рендеринг, ожидая, что в root.textContent будет содержаться строка “Hello, world!”.

Проверка динамических изменений

Stencil также поддерживает тестирование динамических изменений. Для этого можно обновлять пропсы компонента и проверять изменения в разметке. Рассмотрим пример, где текст изменяется после обновления пропса:

describe('my-message dynamic update', () => {
  it('updates text when prop changes', async () => {
    const { root, waitForChanges } = await newSpecPage({
      components: [MyMessage],
      html: `<my-message text="Initial text"></my-message>`,
    });
    
    root.text = 'Updated text';
    await waitForChanges();
    
    expect(root.textContent).toBe('Updated text');
  });
});

Здесь проверяется, что при изменении пропса text компонент перерендеривается, и текст обновляется на новый.

Использование Shadow DOM

Stencil активно использует Shadow DOM для изоляции стилей и разметки компонентов. При тестировании таких компонентов важно учитывать, что доступ к элементам внутри Shadow DOM осуществляется через специальный интерфейс.

Для тестирования компонентов с Shadow DOM в Jest можно использовать следующий подход:

describe('my-message with shadow DOM', () => {
  it('renders correctly inside shadow DOM', async () => {
    const { root } = await newSpecPage({
      components: [MyMessage],
      html: `<my-message text="Shadow DOM test"></my-message>`,
    });
    
    const shadowRoot = root.shadowRoot;
    expect(shadowRoot.querySelector('div').textContent).toBe('Shadow DOM test');
  });
});

В данном примере проверяется, что компонент корректно рендерится внутри своего Shadow DOM и отображает правильный текст.

Использование стилей

Stencil позволяет компоновать стили внутри компонентов, что также должно быть проверено в тестах. Для этого можно использовать функции Jest и Stencil для получения информации о примененных стилях.

describe('my-message styles', () => {
  it('applies styles correctly', async () => {
    const { root } = await newSpecPage({
      components: [MyMessage],
      html: `<my-message text="Styled text"></my-message>`,
    });
    
    const divElement = root.shadowRoot.querySelector('div');
    const style = window.getComputedStyle(divElement);
    
    expect(style.color).toBe('rgb(255, 0, 0)'); // Проверка, что цвет текста красный
  });
});

В этом тесте проверяется, что компонент применяет стили правильно, а именно, что цвет текста в элементе div соответствует ожидаемому значению.

Мокирование данных

Для более сложных компонентов, которые зависят от внешних данных или асинхронных запросов, можно использовать моки (mock) для имитации этих данных. Например, если компонент получает данные через API, можно замокировать эти вызовы для того, чтобы проверить корректность рендеринга без зависимости от реальных данных.

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

jest.mock('../services/api-service');

describe('my-component with mocked data', () => {
  it('renders mocked data correctly', async () => {
    ApiService.getData = jest.fn().mockResolvedValue({ message: 'Mocked response' });
    
    const { root } = await newSpecPage({
      components: [MyComponent],
      html: `<my-component></my-component>`,
    });
    
    expect(root.textContent).toBe('Mocked response');
  });
});

Здесь замокирован сервис API, который возвращает заранее заданный ответ, чтобы можно было протестировать поведение компонента без обращения к реальному серверу.

Заключение

Тестирование рендеринга в Stencil — это неотъемлемая часть разработки веб-компонентов. Использование таких утилит, как newSpecPage, позволяет быстро и эффективно проверять рендеринг компонентов, их стили, работу с пропсами и взаимодействие с внешними сервисами. Это позволяет создавать более надежные и стабильные приложения, минимизируя количество ошибок, которые могут возникнуть на стадии рендеринга компонентов.

Оглавление