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

Обзор

Тип	Фреймворк	Команда	Расположение
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       # Пересоздание эталонных скриншотов

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

Тесты загружают редактор в headless-браузере
Редактор сигнализирует о готовности через HTML-атрибут data-ready
Тесты создают фигуры через API редактора
Скриншоты снимаются и сравниваются с эталонами с помощью toMatchSnapshot
Страница переиспользуется между тест-кейсами для скорости (~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/io/fig/import/legacy/*.test.ts)
Вычисление компоновки — Yoga auto-layout: направление, gap, padding, justify, align, размер потомков (fixed/fill/hug), размер по поперечной оси, перенос, вложенные компоновки (tests/engine/layout/)

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

import { describe, expect, it } from 'bun:test'
import { SceneGraph } from '@open-pencil/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 (попиксельно)

5.2 KiB Raw Blame History Unescape Escape