93 lines
5.2 KiB
Markdown
93 lines
5.2 KiB
Markdown
# Тестирование
|
||
|
||
## Обзор
|
||
|
||
| Тип | Фреймворк | Команда | Расположение |
|
||
| ------------------------ | ---------- | -------------------- | --------------- |
|
||
| 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 (попиксельно) |
|