92 lines
4.6 KiB
Markdown
92 lines
4.6 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/fig-import.test.ts`)
|
|||
|
|
- **Вычисление компоновки** — Yoga auto-layout: направление, gap, padding, justify, align, размер потомков (fixed/fill/hug), размер по поперечной оси, перенос, вложенные компоновки (`tests/engine/layout.test.ts`)
|
|||
|
|
|
|||
|
|
### Написание юнит-тестов
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
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 (попиксельно) |
|