openpencil/packages/docs/ru/development/testing.md

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

## Обзор

| Тип                      | Фреймворк  | Команда              | Расположение    |
| ------------------------ | ---------- | -------------------- | --------------- |
| 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.

```sh
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 для снятия эталонных скриншотов для попиксельного сравнения.

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

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

## Юнит-тесты

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

```sh
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/`)

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

```typescript
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 (попиксельно) |