Danila Poyarkov 96d8ab5789 Move docs to packages/docs, add Cloudflare Pages deploy

- Move docs/ → packages/docs/ as @open-pencil/docs workspace package
- Add screenshot.png as hero image on landing page
- Add GitHub Actions workflow for Cloudflare Pages deploy (openpencil.dev)
- Remove vitepress from root devDependencies
- Root docs:* scripts delegate via bun --filter

2026-03-01 15:16:16 +03:00

2.9 KiB

Raw Blame History

Testing

Overview

Type	Framework	Command	Location
E2E visual regression	Playwright	`bun run test`	`tests/e2e/`
Figma CDP reference	Playwright	`bun run test:figma`	`tests/figma/`
Unit tests	bun:test	`bun run test:unit`	`tests/engine/`

E2E Visual Regression

Playwright creates shapes on the canvas and compares screenshots against baseline PNGs.

bun run test              # Run tests, compare against baselines
bun run test:update       # Regenerate baseline screenshots

How It Works

Tests load the editor in a headless browser
The editor signals readiness via a data-ready HTML attribute
Tests create shapes via the editor's API
Screenshots are taken and compared against baselines using toMatchSnapshot
Page is reused across test cases for speed (~2s total)

No-Chrome Test Mode

The editor supports a test mode that hides UI chrome (toolbar, panels) for clean screenshot capture. Activated via URL parameter.

Figma CDP Reference Tests

A separate Playwright project connects to Figma via Chrome DevTools Protocol to capture reference screenshots for pixel-perfect comparison.

bun run figma:debug       # Launch Figma with debugging port
bun run test:figma        # Connect to Figma, capture references

Requires Figma desktop app running with --remote-debugging-port=9222.

Unit Tests

Engine unit tests use bun:test and target < 50ms execution:

bun run test:unit

Tests cover:

Scene graph CRUD operations, parent-child relationships, z-ordering, hit testing
Fig-import pipeline — node type mapping, transforms, fills/strokes/effects, gradients, images, arcs, nested hierarchies (tests/engine/fig-import.test.ts)
Layout computation — Yoga auto-layout: direction, gap, padding, justify, align, child sizing (fixed/fill/hug), cross-axis sizing, wrap, nested layouts (tests/engine/layout.test.ts)

Writing Unit Tests

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 Test Coverage

Test file	Scope
`tests/e2e/layers-panel.spec.ts`	Layers panel tree structure, visibility toggles, selection sync
`tests/e2e/visual.spec.ts`	Visual regression screenshots for shapes and rendering

Test Helpers

File	Purpose
`tests/helpers/canvas.ts`	Canvas setup and interaction utilities
`tests/helpers/figma.ts`	Figma CDP connection helpers

Performance Targets

Metric	Target
E2E suite total	< 3s
Unit test suite total	< 50ms
Screenshot comparison	toMatchSnapshot (pixel-level)

2.9 KiB Raw Blame History