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

Обзор

Тип	Фреймворк	Команда	Расположение
E2E визуальная регрессия	Playwright	bun run test	tests/e2e/
Figma CDP референс	Playwright	bun run test:figma	tests/figma/
Юнит-тесты	bun:test	bun run test:unit	tests/engine/

E2E визуальная регрессия

Playwright создаёт фигуры на холсте и сравнивает скриншоты с эталонными PNG.

bun run test              # Запуск тестов, сравнение с эталонами
bun run test:update       # Пересоздание эталонных скриншотов

Как это работает

1. Тесты загружают редактор в headless-браузере
2. Редактор сигнализирует о готовности через HTML-атрибут data-ready
3. Тесты создают фигуры через API редактора
4. Скриншоты снимаются и сравниваются с эталонами с помощью toMatchSnapshot
5. Страница переиспользуется между тест-кейсами для скорости (~2с на все)

Режим без оформления

Редактор поддерживает тестовый режим, скрывающий элементы интерфейса (панель инструментов, панели) для чистого снятия скриншотов. Активируется через URL-параметр.

Figma CDP референсные тесты

Отдельный Playwright-проект подключается к Figma через Chrome DevTools Protocol для снятия эталонных скриншотов для попиксельного сравнения.

bun run figma:debug       # Запустить Figma с портом отладки
bun run test:figma        # Подключиться к Figma, снять эталоны

Требуется запущенное десктопное приложение Figma с --remote-debugging-port=9222.

Юнит-тесты

Юнит-тесты движка используют bun:test и нацелены на время выполнения < 50мс:

bun run test:unit

Тесты покрывают:

• CRUD-операции графа сцены, связи родитель-потомок, z-упорядочивание, проверку попадания
• Конвейер fig-import — маппинг типов узлов, трансформации, заливки/обводки/эффекты, градиенты, изображения, дуги, вложенные иерархии (tests/engine/fig-import.test.ts)
• Вычисление компоновки — Yoga auto-layout: направление, gap, padding, justify, align, размер потомков (fixed/fill/hug), размер по поперечной оси, перенос, вложенные компоновки (tests/engine/layout.test.ts)

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

import { describe, expect, it } from 'bun:test'
import { SceneGraph } from '../../src/engine/scene-graph'

describe('SceneGraph', () => {
  it('creates and retrieves a node', () => {
    const sg = new SceneGraph()
    const node = sg.createNode('RECTANGLE', sg.root, { name: 'Test' })
    expect(sg.getNode(node.guid)).toBeDefined()
  })
})

Покрытие E2E-тестами

Файл теста	Область
tests/e2e/layers-panel.spec.ts	Древовидная структура панели слоёв, переключатели видимости, синхронизация выделения
tests/e2e/visual.spec.ts	Визуальная регрессия скриншотов для фигур и отрисовки

Вспомогательные модули

Файл	Назначение
tests/helpers/canvas.ts	Утилиты настройки и взаимодействия с холстом
tests/helpers/figma.ts	Хелперы подключения к Figma по CDP

Целевые показатели производительности

Метрика	Цель
Полный E2E-набор	< 3с
Полный набор юнит-тестов	< 50мс
Сравнение скриншотов	toMatchSnapshot (попиксельно)