Merge PR #70: E2E test coverage + mutation unit tests
48 new E2E tests across 9 spec files, 26 mutation unit tests, store/canvas test helpers, data-test-id attributes. Fixes: explicit error in canvasBounds(), remove any casts, trim trailing blank line, condense changelog entries.
This commit is contained in:
Danila Poyarkov
commit
01c8753f6e
|
|
@ -41,6 +41,8 @@
|
|||
- Mobile UI cleanup: extract shared `colorToCSS` util to core, `initials` to `src/utils/text`, `toolIcons` to `src/utils/tools`; replace hand-rolled dropdowns with reka-ui Popover/DropdownMenu; narrow `mobileDrawerSnap` type to string union; move magic numbers to constants; disable PWA service worker in dev mode
|
||||
- 83 new E2E tests (57 → 140): design panel, code panel, components, copy/paste, multi-page, text editing, keyboard shortcuts, context menu
|
||||
- 150 new unit tests (588 → 738): color, undo, snap, vector, style-runs, text-editor
|
||||
- 48 new E2E tests (9 spec files) + 26 mutation unit tests + store/canvas test helpers
|
||||
- Add `data-test-id` attributes to AppearanceSection, LayoutSection, TypographySection, VariablesDialog, EditorView
|
||||
|
||||
## 0.7.0 — 2026-03-05
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
schema: spec-driven
|
||||
created: 2026-03-07
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
## Context
|
||||
|
||||
The project has 17 Playwright E2E spec files covering ~140 test cases, but 12 of 20 manual test plan sections are sparsely covered. All existing tests share a common pattern: `window.__OPEN_PENCIL_STORE__` for state assertions, `CanvasHelper` for canvas interactions, `test.describe.configure({ mode: 'serial' })` with a shared page per file, and page-level event forwarding for error tracking. New tests follow the same conventions.
|
||||
|
||||
## Goals / Non-Goals
|
||||
|
||||
**Goals:**
|
||||
- Cover every gap identified in the 20-section manual test plan
|
||||
- Use `window.__OPEN_PENCIL_STORE__` for deterministic state assertions (no pixel-matching for non-visual tests)
|
||||
- Keep each spec file self-contained: `beforeAll` creates a fresh page, draws needed fixtures, `afterAll` closes
|
||||
- Use `canvas.waitForRender()` after every interaction, never arbitrary `waitForTimeout`
|
||||
- Tests that need visual confirmation (snap guides, hover highlight) use `toHaveScreenshot` with existing snapshot infra
|
||||
|
||||
**Non-Goals:**
|
||||
- Cross-browser testing (Chromium only, matching existing suite)
|
||||
- Collaboration/P2P tests (require two browser instances and signaling — separate effort)
|
||||
- Export file content validation (OS dialog interception is too brittle; test UI state only)
|
||||
- Font picker rendering (system fonts vary across CI environments)
|
||||
|
||||
## Decisions
|
||||
|
||||
**1. CanvasHelper extension over ad-hoc helpers**
|
||||
Add `marquee()`, `hover()`, `dragScrubInput()`, and `shiftDrag()` to the existing `CanvasHelper` class. Alternative: inline helpers per test file. Rejected because inline helpers duplicate boilerplate and drift from each other.
|
||||
|
||||
**2. Store assertions for invisible/locked nodes**
|
||||
Nodes that are invisible or locked cannot be hit-tested on canvas. Use `page.evaluate(() => window.__OPEN_PENCIL_STORE__!.graph.getNode(id))` to assert state directly. Consistent with how `context-menu.spec.ts` already handles visibility toggle.
|
||||
|
||||
**3. Snap guide tests use screenshot comparison**
|
||||
Snap guide lines are rendered on the canvas (CanvasKit), not DOM. The only way to assert their presence is `toHaveScreenshot`. Use `--update-snapshots` once on a known-good run; CI then catches regressions. Alternative: expose a `debugSnapLines` store getter — rejected as production API pollution.
|
||||
|
||||
**4. ScrubInput drag via `mouse.move` with delta**
|
||||
ScrubInput responds to `pointerdown` + `pointermove` on the outer container. Simulate with `page.mouse.move(x, y)` → `page.mouse.down()` → `page.mouse.move(x + delta, y)` → `page.mouse.up()`. A `dragScrubInput(locator, delta)` helper encapsulates this.
|
||||
|
||||
**5. Variables dialog accessed via store page.evaluate**
|
||||
The dialog can be opened by clicking the settings icon in `VariablesSection` (only visible without selection). Rather than pixel-hunting for the icon, use `page.locator('[data-test-id="variables-settings-btn"]')`. If that attribute doesn't exist, fall back to `page.evaluate(() => window.__OPEN_PENCIL_STORE__!.openVariablesDialog())` — check during implementation.
|
||||
|
||||
**6. Export tests assert UI state, not file content**
|
||||
`showSaveFilePicker` is a native dialog; Playwright cannot intercept it in Chrome without mocking. Tests verify: export rows are added/removed, preview image appears, format selector value changes. No file download assertion.
|
||||
|
||||
## Risks / Trade-offs
|
||||
|
||||
- [ScrubInput pointer simulation] → ScrubInput uses `setPointerCapture` which may not behave identically in headless Chromium. Mitigation: test with `--enable-unsafe-swiftshader` (already in playwright.config.ts).
|
||||
- [Snap guide snapshots] → Guide rendering depends on node positions set up in `beforeAll`. If canvas DPI/viewport changes, snapshots break. Mitigation: pin `deviceScaleFactor: 2` and `viewport: 1280×800` (already in config).
|
||||
- [Variables dialog test-id] → `data-test-id` may not exist on the settings button. Mitigation: check during implementation; add attribute if missing (1-line change in `VariablesSection.vue`).
|
||||
- [Font picker test] → Excluded from scope due to CI font availability variance.
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
## Why
|
||||
|
||||
The existing E2E suite covers core happy paths but leaves 12 of 20 manual test plan sections with significant uncovered scenarios. Gaps include canvas manipulation (marquee select, resize handles, rotation, Space+drag pan), toolbar flyouts (Polygon/Star/Pen drawing), properties panel interactions (ScrubInput drag, corner radius, gradient, variable binding, alignment), text editing (cursor positioning, formatting shortcuts, font picker), auto-layout controls (direction, gap, padding, alignment grid), snap guides, panel resizing, variables dialog, export, and collaboration UI.
|
||||
|
||||
## What Changes
|
||||
|
||||
- Add `tests/e2e/canvas-manipulation.spec.ts` — marquee select, resize handles, rotation, Alt+drag duplicate, Shift+Arrow nudge, hover highlight
|
||||
- Add `tests/e2e/toolbar.spec.ts` — flyout chevrons, Polygon, Star tools, Pen drawing (corner, curve, close, Escape, preview), active tracking
|
||||
- Add `tests/e2e/properties-panel.spec.ts` — ScrubInput drag-to-change, corner radius (uniform + independent), fill gradient, variable bind/unbind, flip/rotate buttons, alignment buttons, clip content
|
||||
- Add `tests/e2e/text-formatting.spec.ts` — cursor positioning, drag select, word/line select, word/line navigation shortcuts, bold/italic/underline via keyboard and buttons, font picker search
|
||||
- Add `tests/e2e/auto-layout.spec.ts` — Shift+A on selection, direction toggle (H/V/wrap), gap ScrubInput, padding (uniform + per-side), alignment grid 3×3, sizing modes
|
||||
- Add `tests/e2e/snap-guides.spec.ts` — edge snap, center snap (visual: guide lines appear during drag)
|
||||
- Add `tests/e2e/panels.spec.ts` — layers panel resize, panel size after reload, ⌘\ toggle UI
|
||||
- Add `tests/e2e/variables-dialog.spec.ts` — open dialog, search filter, edit value, color variable picker
|
||||
- Add `tests/e2e/export.spec.ts` — PNG/JPG/WEBP/SVG export settings, multi-export rows, preview toggle
|
||||
- Extend `tests/helpers/canvas.ts` — add `marquee()`, `hover()`, `rightDrag()`, `dragScrubInput()` helpers
|
||||
|
||||
## Capabilities
|
||||
|
||||
### New Capabilities
|
||||
- `e2e-canvas-manipulation`: E2E tests for marquee selection, resize, rotation, duplicate, nudge, hover highlight
|
||||
- `e2e-toolbar`: E2E tests for toolbar flyouts and Pen tool drawing flows
|
||||
- `e2e-properties-panel`: E2E tests for ScrubInput drag, corner radius, gradient, variable binding, panel interactions
|
||||
- `e2e-text-formatting`: E2E tests for text cursor, selection, formatting shortcuts and buttons
|
||||
- `e2e-auto-layout`: E2E tests for auto-layout controls: direction, gap, padding, alignment grid, sizing
|
||||
- `e2e-snap-guides`: E2E tests for snap guide visibility during drag
|
||||
- `e2e-panels`: E2E tests for resizable panels and UI toggle
|
||||
- `e2e-variables-dialog`: E2E tests for variables dialog open, search, edit, color picker
|
||||
- `e2e-export`: E2E tests for export format settings and preview
|
||||
|
||||
### Modified Capabilities
|
||||
- `testing`: Add new E2E requirements for all 9 new spec files and CanvasHelper extension
|
||||
|
||||
## Impact
|
||||
|
||||
- `tests/e2e/` — 9 new spec files (~1800 lines)
|
||||
- `tests/helpers/canvas.ts` — 4 new helper methods
|
||||
- No production code changes
|
||||
- All tests target `http://localhost:1420` with `window.__OPEN_PENCIL_STORE__` for state assertions
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Auto-layout Shift+A on selection E2E
|
||||
The E2E suite SHALL verify that Shift+A on multiple selected nodes wraps them in an auto-layout frame.
|
||||
|
||||
#### Scenario: Shift+A wraps nodes in auto-layout frame
|
||||
- **WHEN** two rectangles are selected and Shift+A is pressed
|
||||
- **THEN** a single FRAME node exists on the page with `layoutMode` set to `HORIZONTAL` or `VERTICAL` and the rectangles are its children
|
||||
|
||||
### Requirement: Auto-layout direction toggle E2E
|
||||
The E2E suite SHALL verify that clicking the horizontal/vertical direction buttons changes `layoutMode`.
|
||||
|
||||
#### Scenario: Direction button toggles layoutMode
|
||||
- **WHEN** an auto-layout frame is selected and the vertical direction button is clicked in LayoutSection
|
||||
- **THEN** `frame.layoutMode` equals `VERTICAL`
|
||||
|
||||
### Requirement: Auto-layout gap E2E
|
||||
The E2E suite SHALL verify that changing the gap ScrubInput updates `itemSpacing`.
|
||||
|
||||
#### Scenario: Gap ScrubInput changes itemSpacing
|
||||
- **WHEN** an auto-layout frame is selected and the gap ScrubInput value is changed to 20
|
||||
- **THEN** `frame.itemSpacing` equals 20
|
||||
|
||||
### Requirement: Auto-layout padding uniform E2E
|
||||
The E2E suite SHALL verify that changing the uniform padding input updates all four padding properties.
|
||||
|
||||
#### Scenario: Uniform padding updates all sides
|
||||
- **WHEN** an auto-layout frame is selected and padding is set to 16
|
||||
- **THEN** `frame.paddingTop`, `frame.paddingRight`, `frame.paddingBottom`, and `frame.paddingLeft` all equal 16
|
||||
|
||||
### Requirement: Auto-layout alignment grid E2E
|
||||
The E2E suite SHALL verify that clicking a cell in the 3×3 alignment grid updates `primaryAxisAlign` and `counterAxisAlign`.
|
||||
|
||||
#### Scenario: Center-center alignment set
|
||||
- **WHEN** the center-center cell of the alignment grid is clicked
|
||||
- **THEN** `frame.primaryAxisAlign` equals `CENTER` and `frame.counterAxisAlign` equals `CENTER`
|
||||
|
||||
### Requirement: Auto-layout remove E2E
|
||||
The E2E suite SHALL verify that clicking the remove (−) button in the auto-layout section sets `layoutMode` to NONE.
|
||||
|
||||
#### Scenario: Remove auto-layout resets layoutMode
|
||||
- **WHEN** an auto-layout frame is selected and the remove auto-layout button is clicked
|
||||
- **THEN** `frame.layoutMode` equals `NONE`
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Marquee selection E2E
|
||||
The E2E suite SHALL verify that dragging from an empty canvas area selects all nodes whose bounds intersect the drag rectangle.
|
||||
|
||||
#### Scenario: Marquee selects intersected nodes
|
||||
- **WHEN** two rectangles are drawn and mouse is dragged from a point before both to a point after both
|
||||
- **THEN** both nodes appear in `store.state.selectedIds`
|
||||
|
||||
#### Scenario: Marquee on empty area deselects
|
||||
- **WHEN** a node is selected and mouse is dragged across empty canvas
|
||||
- **THEN** `store.state.selectedIds.size` equals 0
|
||||
|
||||
### Requirement: Resize handles E2E
|
||||
The E2E suite SHALL verify that dragging a resize handle changes the node's width and height.
|
||||
|
||||
#### Scenario: Corner resize increases dimensions
|
||||
- **WHEN** a rectangle is selected and its bottom-right corner handle is dragged 50px right and 50px down
|
||||
- **THEN** node width and height each increase by approximately 50px
|
||||
|
||||
### Requirement: Rotation handle E2E
|
||||
The E2E suite SHALL verify that the rotation handle rotates a node.
|
||||
|
||||
#### Scenario: Rotation changes node rotation
|
||||
- **WHEN** a rectangle is selected and the cursor is positioned just outside a corner, then dragged in an arc
|
||||
- **THEN** `node.rotation` is non-zero
|
||||
|
||||
### Requirement: Alt+drag duplicate E2E
|
||||
The E2E suite SHALL verify that Alt+drag creates a copy of the node.
|
||||
|
||||
#### Scenario: Alt drag creates duplicate
|
||||
- **WHEN** a rectangle is selected and dragged with Alt held
|
||||
- **THEN** the page has one more node than before the drag
|
||||
|
||||
### Requirement: Shift+Arrow nudge E2E
|
||||
The E2E suite SHALL verify that Shift+Arrow nudges a node by 10px.
|
||||
|
||||
#### Scenario: Shift+ArrowRight nudges 10px
|
||||
- **WHEN** a node is selected and Shift+ArrowRight is pressed
|
||||
- **THEN** `node.x` increases by 10
|
||||
|
||||
### Requirement: Hover highlight E2E
|
||||
The E2E suite SHALL verify that hovering over a node (without clicking) triggers a visible highlight outline on the canvas.
|
||||
|
||||
#### Scenario: Hover renders highlight
|
||||
- **WHEN** the mouse moves over a rectangle without clicking
|
||||
- **THEN** a screenshot taken during hover differs from a screenshot taken with the mouse away (highlight outline visible)
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Export format selection E2E
|
||||
The E2E suite SHALL verify that changing the export format selector updates the format value in the export section.
|
||||
|
||||
#### Scenario: Format selector changes to JPG
|
||||
- **WHEN** a node with an export setting is selected and the format selector is changed to JPG
|
||||
- **THEN** the export row displays JPG as the selected format
|
||||
|
||||
### Requirement: Export multi-row add/remove E2E
|
||||
The E2E suite SHALL verify that clicking + adds a new export row and − removes it.
|
||||
|
||||
#### Scenario: Add export row
|
||||
- **WHEN** a node is selected and the + button in ExportSection is clicked
|
||||
- **THEN** one more export setting row is visible than before
|
||||
|
||||
#### Scenario: Remove export row
|
||||
- **WHEN** a node has two export rows and the − button on one row is clicked
|
||||
- **THEN** only one export row remains
|
||||
|
||||
### Requirement: Export preview toggle E2E
|
||||
The E2E suite SHALL verify that clicking the Preview button shows a preview image element.
|
||||
|
||||
#### Scenario: Preview button shows image
|
||||
- **WHEN** a node with an export setting is selected and the Preview button is clicked
|
||||
- **THEN** an image element (checkerboard preview) becomes visible in the export section
|
||||
|
||||
### Requirement: SVG format hides scale selector E2E
|
||||
The E2E suite SHALL verify that when SVG format is selected, the scale (multiplier) selector is hidden.
|
||||
|
||||
#### Scenario: SVG hides scale input
|
||||
- **WHEN** an export row format is set to SVG
|
||||
- **THEN** no scale/multiplier input is visible for that row
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Layers panel resize E2E
|
||||
The E2E suite SHALL verify that dragging the resize handle between the left panel and canvas changes the panel width.
|
||||
|
||||
#### Scenario: Panel resize handle changes width
|
||||
- **WHEN** the splitter handle on the left panel is dragged 80px to the right
|
||||
- **THEN** the layers panel DOM element has a wider width than before the drag
|
||||
|
||||
### Requirement: UI toggle persistence across reload E2E
|
||||
The E2E suite SHALL verify that panel sizes are preserved after a page reload.
|
||||
|
||||
#### Scenario: Panel width persists after reload
|
||||
- **WHEN** the layers panel is resized and the page is reloaded
|
||||
- **THEN** the panel width after reload matches the width set before reload (within 2px)
|
||||
|
||||
### Requirement: ⌘\\ hides and shows panels E2E
|
||||
The E2E suite SHALL verify that pressing ⌘\\ toggles the visibility of the left and right panels.
|
||||
|
||||
#### Scenario: Cmd+Backslash hides panels
|
||||
- **WHEN** ⌘\\ is pressed while panels are visible
|
||||
- **THEN** the layers panel and properties panel elements are not visible in the DOM
|
||||
|
||||
#### Scenario: Cmd+Backslash shows panels again
|
||||
- **WHEN** ⌘\\ is pressed while panels are hidden
|
||||
- **THEN** the layers panel and properties panel elements are visible again
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: ScrubInput drag-to-change E2E
|
||||
The E2E suite SHALL verify that dragging horizontally on a ScrubInput changes the node property value.
|
||||
|
||||
#### Scenario: Drag X ScrubInput moves node
|
||||
- **WHEN** a rectangle is selected and the X ScrubInput is dragged 50px to the right
|
||||
- **THEN** `node.x` increases by approximately 50
|
||||
|
||||
### Requirement: Corner radius uniform E2E
|
||||
The E2E suite SHALL verify that typing a corner radius value in the appearance section applies it to all corners.
|
||||
|
||||
#### Scenario: Uniform corner radius applied
|
||||
- **WHEN** a rectangle is selected and a corner radius value is typed into the appearance input
|
||||
- **THEN** `node.cornerRadius` equals the entered value
|
||||
|
||||
### Requirement: Corner radius independent E2E
|
||||
The E2E suite SHALL verify that toggling to independent corners splits the input into four separate fields.
|
||||
|
||||
#### Scenario: Independent corners toggle shows four fields
|
||||
- **WHEN** the independent corners button is clicked
|
||||
- **THEN** four corner radius inputs are visible in the panel
|
||||
|
||||
### Requirement: Fill gradient switch E2E
|
||||
The E2E suite SHALL verify that switching fill type to Linear Gradient updates the node fill.
|
||||
|
||||
#### Scenario: Fill type switches to gradient
|
||||
- **WHEN** a rectangle with a solid fill is selected and fill type is changed to LINEAR
|
||||
- **THEN** `node.fills[0].type` equals `GRADIENT_LINEAR`
|
||||
|
||||
### Requirement: Variable bind E2E
|
||||
The E2E suite SHALL verify that binding a color variable to a fill displays a variable badge.
|
||||
|
||||
#### Scenario: Variable badge appears after bind
|
||||
- **WHEN** a color variable exists and is bound to a node's fill
|
||||
- **THEN** a variable badge element is visible in the fill section
|
||||
|
||||
### Requirement: Alignment buttons E2E
|
||||
The E2E suite SHALL verify that clicking alignment buttons aligns multiple selected nodes.
|
||||
|
||||
#### Scenario: Align left aligns nodes
|
||||
- **WHEN** two rectangles at different X positions are selected and Align Left is clicked
|
||||
- **THEN** both nodes have the same `x` coordinate (leftmost of the two)
|
||||
|
||||
### Requirement: Flip horizontal E2E
|
||||
The E2E suite SHALL verify that clicking the flip horizontal button sets `flipX` on the node.
|
||||
|
||||
#### Scenario: Flip horizontal toggles
|
||||
- **WHEN** a rectangle is selected and flip horizontal button is clicked
|
||||
- **THEN** `node.flipX` is true
|
||||
|
||||
### Requirement: Clip content toggle E2E
|
||||
The E2E suite SHALL verify that the clip content checkbox toggles `clipsContent` on a frame.
|
||||
|
||||
#### Scenario: Clip content checkbox toggles
|
||||
- **WHEN** a frame is selected and the clip content checkbox is clicked
|
||||
- **THEN** `node.clipsContent` changes to the opposite boolean value
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Edge snap guide visual E2E
|
||||
The E2E suite SHALL verify that dragging a node to align its edge with another node causes snap guide lines to appear on the canvas.
|
||||
|
||||
#### Scenario: Edge snap guide renders during drag
|
||||
- **WHEN** two rectangles are positioned such that dragging one aligns its left edge with the other's left edge
|
||||
- **THEN** a screenshot taken mid-drag (while edges are aligned) contains red guide line pixels not present in the pre-drag screenshot
|
||||
|
||||
### Requirement: Center snap guide visual E2E
|
||||
The E2E suite SHALL verify that dragging a node to align its center with another node causes a center snap guide line to appear.
|
||||
|
||||
#### Scenario: Center snap guide renders during drag
|
||||
- **WHEN** two rectangles are positioned such that dragging one aligns its horizontal center with the other's center
|
||||
- **THEN** a screenshot taken mid-drag contains guide line pixels indicating center alignment
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Text cursor positioning E2E
|
||||
The E2E suite SHALL verify that clicking inside a text node in edit mode positions the cursor near the clicked glyph.
|
||||
|
||||
#### Scenario: Click positions cursor
|
||||
- **WHEN** a text node is double-clicked to enter edit mode and then a position inside the text is clicked
|
||||
- **THEN** the text node remains in edit mode without errors
|
||||
|
||||
### Requirement: Text word selection E2E
|
||||
The E2E suite SHALL verify that double-clicking on a word selects that word.
|
||||
|
||||
#### Scenario: Double-click selects word
|
||||
- **WHEN** a text node is in edit mode and a word is double-clicked
|
||||
- **THEN** the canvas screenshot shows the word highlighted (differs from no-selection screenshot)
|
||||
|
||||
### Requirement: Bold shortcut E2E
|
||||
The E2E suite SHALL verify that ⌘B toggles bold formatting on selected text.
|
||||
|
||||
#### Scenario: Cmd+B toggles bold
|
||||
- **WHEN** a text node is in edit mode, all text is selected, and ⌘B is pressed
|
||||
- **THEN** `node.fontWeight` changes to 700 (bold) or back to 400 (normal)
|
||||
|
||||
### Requirement: Italic shortcut E2E
|
||||
The E2E suite SHALL verify that ⌘I toggles italic formatting on selected text.
|
||||
|
||||
#### Scenario: Cmd+I toggles italic
|
||||
- **WHEN** a text node is in edit mode with all text selected and ⌘I is pressed
|
||||
- **THEN** `node.italic` toggles to the opposite boolean
|
||||
|
||||
### Requirement: Word navigation shortcut E2E
|
||||
The E2E suite SHALL verify that Alt+ArrowRight moves the cursor by one word.
|
||||
|
||||
#### Scenario: Alt+ArrowRight moves by word
|
||||
- **WHEN** a text node is in edit mode with cursor at position 0 and Alt+ArrowRight is pressed
|
||||
- **THEN** no JavaScript errors are thrown and the editor remains in text mode
|
||||
|
||||
### Requirement: Typography section buttons E2E
|
||||
The E2E suite SHALL verify that the Bold button in the typography section applies formatting.
|
||||
|
||||
#### Scenario: Bold button in panel toggles bold
|
||||
- **WHEN** a text node is selected (not in edit mode) and the Bold button in DesignPanel is clicked
|
||||
- **THEN** `node.fontWeight` changes
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Shapes flyout E2E
|
||||
The E2E suite SHALL verify that the shapes flyout chevron opens a menu with Polygon and Star tools.
|
||||
|
||||
#### Scenario: Shapes flyout opens
|
||||
- **WHEN** the shapes flyout trigger is clicked
|
||||
- **THEN** the flyout menu is visible with Polygon and Star items
|
||||
|
||||
### Requirement: Polygon tool E2E
|
||||
The E2E suite SHALL verify that selecting Polygon from the flyout and dragging creates a POLYGON node.
|
||||
|
||||
#### Scenario: Polygon created
|
||||
- **WHEN** Polygon is selected from flyout and drag is performed on canvas
|
||||
- **THEN** a node with type POLYGON exists on the current page
|
||||
|
||||
### Requirement: Star tool E2E
|
||||
The E2E suite SHALL verify that selecting Star from the flyout and dragging creates a STAR node.
|
||||
|
||||
#### Scenario: Star created
|
||||
- **WHEN** Star is selected from flyout and drag is performed on canvas
|
||||
- **THEN** a node with type STAR exists on the current page
|
||||
|
||||
### Requirement: Pen tool corner points E2E
|
||||
The E2E suite SHALL verify that three clicks with the Pen tool create a VECTOR node with 3 vertices.
|
||||
|
||||
#### Scenario: Three clicks create three vertices
|
||||
- **WHEN** Pen tool is active and three distinct canvas positions are clicked, then Enter pressed (commits open path)
|
||||
- **THEN** a VECTOR node exists with `vectorNetwork.vertices.length === 3`
|
||||
|
||||
### Requirement: Pen tool close path E2E
|
||||
The E2E suite SHALL verify that clicking the first point of a Pen path closes it.
|
||||
|
||||
#### Scenario: Click first point closes path
|
||||
- **WHEN** Pen tool creates 3 vertices and the user clicks on the first vertex position
|
||||
- **THEN** the resulting VECTOR node has a closed segment (no open endpoint)
|
||||
|
||||
### Requirement: Pen tool Escape cancels path E2E
|
||||
The E2E suite SHALL verify that pressing Escape during Pen drawing cancels the current path without creating a node.
|
||||
|
||||
#### Scenario: Escape cancels open path
|
||||
- **WHEN** Pen tool creates 2 vertices and Escape is pressed
|
||||
- **THEN** no new VECTOR node is created on the page (penCancel discards in-progress path)
|
||||
|
||||
### Requirement: Frame flyout E2E
|
||||
The E2E suite SHALL verify that the Frame flyout chevron shows Frame and Section options.
|
||||
|
||||
#### Scenario: Frame flyout shows both options
|
||||
- **WHEN** the frame flyout trigger is clicked
|
||||
- **THEN** Frame (F) and Section (S) items are visible in the flyout
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Variables dialog open E2E
|
||||
The E2E suite SHALL verify that the variables dialog can be opened when no node is selected.
|
||||
|
||||
#### Scenario: Variables dialog opens
|
||||
- **WHEN** no node is selected and the variables settings button is activated
|
||||
- **THEN** a dialog element with variables table is visible
|
||||
|
||||
### Requirement: Variables dialog search E2E
|
||||
The E2E suite SHALL verify that typing in the search field filters the variables table.
|
||||
|
||||
#### Scenario: Search filters variable rows
|
||||
- **WHEN** variables exist with different names and a search term is typed
|
||||
- **THEN** only rows whose names match the search term are visible
|
||||
|
||||
### Requirement: Variables dialog edit value E2E
|
||||
The E2E suite SHALL verify that clicking a variable value cell makes it editable.
|
||||
|
||||
#### Scenario: Click cell to edit
|
||||
- **WHEN** a variable value cell is clicked in the dialog
|
||||
- **THEN** an input field is focused in that cell
|
||||
|
||||
### Requirement: Color variable picker E2E
|
||||
The E2E suite SHALL verify that clicking a color variable swatch opens a color picker.
|
||||
|
||||
#### Scenario: Color swatch opens picker
|
||||
- **WHEN** a color variable's swatch is clicked in the dialog
|
||||
- **THEN** a color picker element becomes visible
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
## ADDED Requirements
|
||||
|
||||
### Requirement: Canvas manipulation E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/canvas-manipulation.spec.ts` covering: marquee selection, resize handle drag, rotation handle drag, Alt+drag duplicate, Shift+Arrow nudge (10px), and hover highlight (visual screenshot comparison).
|
||||
|
||||
#### Scenario: Canvas manipulation tests pass
|
||||
- **WHEN** `bun run test` executes `canvas-manipulation.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying selection, resize, rotation, duplicate, nudge, and hover
|
||||
|
||||
### Requirement: Toolbar E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/toolbar.spec.ts` covering: shapes flyout chevron, Polygon tool, Star tool, Pen tool (corner, close path, Escape), and Frame flyout.
|
||||
|
||||
#### Scenario: Toolbar tests pass
|
||||
- **WHEN** `bun run test` executes `toolbar.spec.ts`
|
||||
- **THEN** all 7+ tests pass verifying flyout menus and shape creation
|
||||
|
||||
### Requirement: Properties panel E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/properties-panel.spec.ts` covering: ScrubInput drag, corner radius (uniform + independent), fill gradient switch, variable bind badge, alignment buttons, flip horizontal, and clip content checkbox.
|
||||
|
||||
#### Scenario: Properties panel tests pass
|
||||
- **WHEN** `bun run test` executes `properties-panel.spec.ts`
|
||||
- **THEN** all 8+ tests pass verifying property changes via store assertions
|
||||
|
||||
### Requirement: Text formatting E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/text-formatting.spec.ts` covering: cursor positioning, double-click word select, ⌘B bold, ⌘I italic, Alt+ArrowRight word navigation, and Bold button in typography section.
|
||||
|
||||
#### Scenario: Text formatting tests pass
|
||||
- **WHEN** `bun run test` executes `text-formatting.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying text edit interactions
|
||||
|
||||
### Requirement: Auto-layout E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/auto-layout.spec.ts` covering: Shift+A on selection, direction toggle, gap ScrubInput, uniform padding, alignment grid, and remove auto-layout.
|
||||
|
||||
#### Scenario: Auto-layout tests pass
|
||||
- **WHEN** `bun run test` executes `auto-layout.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying auto-layout frame state via store
|
||||
|
||||
### Requirement: Snap guides E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/snap-guides.spec.ts` covering: edge snap guide and center snap guide, both verified via screenshot comparison.
|
||||
|
||||
#### Scenario: Snap guide tests pass
|
||||
- **WHEN** `bun run test` executes `snap-guides.spec.ts`
|
||||
- **THEN** 2 screenshot comparison tests pass confirming guide line visibility
|
||||
|
||||
### Requirement: Panel resize E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/panels.spec.ts` covering: left panel drag resize, width persistence after reload, and ⌘\\ UI toggle (hide + show).
|
||||
|
||||
#### Scenario: Panel tests pass
|
||||
- **WHEN** `bun run test` executes `panels.spec.ts`
|
||||
- **THEN** all 4+ tests pass verifying panel DOM dimensions and visibility
|
||||
|
||||
### Requirement: Variables dialog E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/variables-dialog.spec.ts` covering: dialog open, search filter, cell edit, and color swatch picker.
|
||||
|
||||
#### Scenario: Variables dialog tests pass
|
||||
- **WHEN** `bun run test` executes `variables-dialog.spec.ts`
|
||||
- **THEN** all 4+ tests pass verifying dialog interactions
|
||||
|
||||
### Requirement: Export E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/export.spec.ts` covering: format selector, add/remove rows, preview toggle, and SVG hiding scale input.
|
||||
|
||||
#### Scenario: Export tests pass
|
||||
- **WHEN** `bun run test` executes `export.spec.ts`
|
||||
- **THEN** all 5+ tests pass verifying export section UI state
|
||||
|
||||
### Requirement: CanvasHelper extended helpers
|
||||
The `CanvasHelper` class SHALL provide `marquee()`, `hover()`, `dragScrubInput()`, and `shiftDrag()` helper methods usable across all spec files.
|
||||
|
||||
#### Scenario: Helpers available in all specs
|
||||
- **WHEN** a spec file imports `CanvasHelper`
|
||||
- **THEN** `canvas.marquee()`, `canvas.hover()`, `canvas.dragScrubInput()`, and `canvas.shiftDrag()` are callable without TypeScript errors
|
||||
|
|
@ -0,0 +1,96 @@
|
|||
# Tasks: e2e-coverage-gaps
|
||||
|
||||
## 0. Prerequisites — data-test-id audit
|
||||
|
||||
- [x] 0.1 Add `data-test-id="corner-radius-input"` to the uniform corner radius ScrubInput in `AppearanceSection.vue`
|
||||
- [x] 0.2 Add `data-test-id="independent-corners-toggle"` to the independent corners toggle button in `AppearanceSection.vue`
|
||||
- [x] 0.3 Add `data-test-id="corner-tl-input"`, `corner-tr-input`, `corner-br-input`, `corner-bl-input` to the four independent corner ScrubInputs in `AppearanceSection.vue`
|
||||
- [x] 0.4 Add `data-test-id="clip-content-checkbox"` to the clip content checkbox in `LayoutSection.vue`
|
||||
- [x] 0.5 Add `data-test-id="left-splitter-handle"` to the first `SplitterResizeHandle` in `EditorView.vue`
|
||||
- [x] 0.6 Add `data-test-id="typography-bold-button"` to the Bold button in `TypographySection.vue`
|
||||
- [x] 0.7 Add `data-test-id="variables-search-input"` to the search input in `VariablesDialog.vue`
|
||||
|
||||
## 1. Extend CanvasHelper
|
||||
|
||||
- [x] 1.1 Add `marquee(x1, y1, x2, y2, steps = 10)` method to `tests/helpers/canvas.ts` — mouse.move to start → mouse.down → mouse.move to end with steps → mouse.up, then waitForRender
|
||||
- [x] 1.2 Add `hover(x, y)` method — mouse.move to canvas-relative position, waitForRender (uses existing `waitForRender`)
|
||||
- [x] 1.3 Add `dragScrubInput(locator, deltaX)` method — scroll element into view, getBoundingBox, mouse.move to center, mouse.down, mouse.move +deltaX, mouse.up
|
||||
- [x] 1.4 Add `altDrag(fromX, fromY, toX, toY)` method — keyboard.down('Alt') → drag → keyboard.up('Alt'), then waitForRender
|
||||
|
||||
## 2. Canvas Manipulation spec
|
||||
|
||||
- [x] 2.1 Create `tests/e2e/canvas-manipulation.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit + clearCanvas), afterAll (close)
|
||||
- [x] 2.2 Test: marquee selects two rectangles — draw rect at (100,100,80,80), draw rect at (250,100,80,80), marquee from (80,80) to (360,220), assert `store.state.selectedIds.size === 2`
|
||||
- [x] 2.3 Test: marquee on empty area deselects — press Escape to select none, draw rect at (100,300,80,80), click to select it, marquee from (500,500) to (600,600), assert `store.state.selectedIds.size === 0`
|
||||
- [x] 2.4 Test: Alt+drag duplicate — clearCanvas, draw rect at (100,100,80,80), click to select, altDrag from (140,140) to (280,140), assert page child count increased by 1
|
||||
- [x] 2.5 Test: Shift+ArrowRight nudge 10px — clearCanvas, draw rect at (200,200,80,80), record `node.x`, press Shift+ArrowRight, assert `node.x === initial + 10`
|
||||
- [x] 2.6 Test: hover highlight visual — clearCanvas, draw rect at (200,200,100,100), take no-hover screenshot, `canvas.hover(250, 250)`, take hover screenshot, assert they differ using `expect(hoverShot).not.toEqual(noHoverShot)` (Buffer comparison, not toHaveScreenshot — avoids baseline management)
|
||||
|
||||
## 3. Toolbar spec
|
||||
|
||||
- [x] 3.1 Create `tests/e2e/toolbar.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit)
|
||||
- [x] 3.2 Test: shapes flyout opens — click `[data-test-id="toolbar-flyout-rectangle"]`, assert `[data-test-id="toolbar-flyout-item-polygon"]` is visible
|
||||
- [x] 3.3 Test: Polygon created — click `[data-test-id="toolbar-flyout-item-polygon"]`, drag on canvas (300,200) to (400,300), assert POLYGON node in store page children
|
||||
- [x] 3.4 Test: Star created — click `[data-test-id="toolbar-flyout-rectangle"]`, click `[data-test-id="toolbar-flyout-item-star"]`, drag (150,150) to (250,250), assert STAR node in store page children
|
||||
- [x] 3.5 Test: Pen creates VECTOR on Enter — press P, click canvas at (100,100), click at (200,100), click at (200,200), press Enter (commits open path), assert VECTOR node with `vectorNetwork.vertices.length === 3`
|
||||
- [x] 3.6 Test: Frame flyout shows Frame and Section — click `[data-test-id="toolbar-flyout-frame"]`, assert `[data-test-id="toolbar-flyout-item-frame"]` and `[data-test-id="toolbar-flyout-item-section"]` are both visible
|
||||
|
||||
## 4. Properties Panel spec
|
||||
|
||||
- [x] 4.1 Create `tests/e2e/properties-panel.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit)
|
||||
- [x] 4.2 Test: ScrubInput drag changes X — clearCanvas, draw rect at (100,100,80,80), record `node.x`, dragScrubInput(`[data-test-id="position-section"] input` first scrub, +50), assert `node.x` changed from initial
|
||||
- [x] 4.3 Test: corner radius uniform — clearCanvas, draw rect at (200,200,80,80), select, triple-click `[data-test-id="corner-radius-input"]` input, type "12", press Enter, assert `node.cornerRadius === 12`
|
||||
- [x] 4.4 Test: independent corners shows four fields — click `[data-test-id="independent-corners-toggle"]`, assert `[data-test-id="corner-tl-input"]`, `corner-tr-input`, `corner-br-input`, `corner-bl-input` are all visible
|
||||
- [x] 4.5 Test: fill gradient switch — clearCanvas, draw rect at (200,200,80,80), click `[data-test-id="fill-item"]` swatch to open picker, click `[data-test-id="fill-picker-tab-gradient"]`, assert `node.fills[0].type === 'GRADIENT_LINEAR'`
|
||||
- [x] 4.6 Test: alignment buttons align nodes — clearCanvas, draw rect at (50,200,60,60), draw rect at (250,200,60,60), select both (Meta+A), click `[data-test-id="position-align-left"]`, assert both nodes have same `node.x`
|
||||
- [x] 4.7 Test: flip horizontal — clearCanvas, draw rect at (200,200,80,80), click `[data-test-id="position-flip-horizontal"]`, assert `node.flipX === true`
|
||||
- [x] 4.8 Test: clip content checkbox — clearCanvas, press F, drag (100,100) to (300,300) to create frame, select it, click `[data-test-id="clip-content-checkbox"]`, assert `node.clipsContent` changed
|
||||
|
||||
## 5. Text Formatting spec
|
||||
|
||||
- [x] 5.1 Create `tests/e2e/text-formatting.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit)
|
||||
- [x] 5.2 Test: double-click enters text edit mode — create text node via store at (200,200,150,30), press Escape to deselect, double-click canvas at (275,215), waitForRender, assert `store.state.editingTextId` is not null, assert no canvas errors
|
||||
- [x] 5.3 Test: Cmd+B toggles bold — (continuing from text edit mode) Ctrl+A, Meta+b, press Escape, assert `node.fontWeight === 700`
|
||||
- [x] 5.4 Test: Cmd+I toggles italic — double-click text node to re-enter edit, Ctrl+A, Meta+i, press Escape, assert `node.italic === true`
|
||||
- [x] 5.5 Test: Alt+ArrowRight word navigation — double-click text node to enter edit, press Alt+ArrowRight, assert no canvas errors, assert `store.state.editingTextId` is still set
|
||||
- [x] 5.6 Test: Bold button in panel — press Escape to exit edit mode and stay selected, click `[data-test-id="typography-bold-button"]`, assert `node.fontWeight` changed
|
||||
|
||||
## 6. Auto-Layout spec
|
||||
|
||||
- [x] 6.1 Create `tests/e2e/auto-layout.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit + clearCanvas)
|
||||
- [x] 6.2 Test: Shift+A wraps selection — draw rect at (100,100,60,60), draw rect at (220,100,60,60), Meta+A, Shift+A, assert FRAME node with `layoutMode !== 'NONE'` and 2 children
|
||||
- [x] 6.3 Test: direction button toggles VERTICAL — select the auto-layout frame, click `[data-test-id="layout-direction-vertical"]`, assert `frame.layoutMode === 'VERTICAL'`
|
||||
- [x] 6.4 Test: gap ScrubInput sets itemSpacing — select frame, dragScrubInput(`[data-test-id="layout-section"]` gap scrub input, +20), assert `frame.itemSpacing >= 20`
|
||||
- [x] 6.5 Test: alignment grid center — select frame, click 5th button (index 4) inside `[data-test-id="layout-alignment-grid"]`, assert `frame.primaryAxisAlign === 'CENTER'` and `frame.counterAxisAlign === 'CENTER'`
|
||||
- [x] 6.6 Test: remove auto-layout — select frame, click `[data-test-id="layout-remove-auto"]`, assert `frame.layoutMode === 'NONE'`
|
||||
|
||||
## 7. Snap Guides spec
|
||||
|
||||
- [x] 7.1 Create `tests/e2e/snap-guides.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit + clearCanvas). Tag with `test.skip` on Linux CI (snap guides are visual-only and X11 Alt+drag interference makes setup unreliable; these are run manually or on macOS CI).
|
||||
- [x] 7.2 Test: edge snap guide visual — create rect A at (100,100,80,80) and rect B at (300,100,80,80) via store. Take baseline screenshot. Slow-drag rect B from (340,140) toward (182,140) with steps=30 using mouse.down/move (do NOT release). Take mid-drag screenshot. Assert screenshots differ (guide pixels appeared). Release mouse.
|
||||
- [x] 7.3 Test: center snap guide visual — reset rects, slow-drag rect B toward center alignment with rect A with steps=30 mid-drag. Assert screenshots differ.
|
||||
|
||||
## 8. Panels spec
|
||||
|
||||
- [x] 8.1 Create `tests/e2e/panels.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit)
|
||||
- [x] 8.2 Test: layers panel resize — get bounding box of `[data-test-id="layers-panel"]`, record width, drag `[data-test-id="left-splitter-handle"]` 80px right, assert panel width increased by at least 40px
|
||||
- [x] 8.3 Test: panel width persists after reload — record panel width after resize, reload page, waitForInit, assert new panel width is within 5px of recorded width (Reka SplitterGroup uses `auto-save-id` localStorage)
|
||||
- [x] 8.4 Test: Cmd+Backslash hides panels — press Meta+Backslash, assert `[data-test-id="layers-panel"]` not visible
|
||||
- [x] 8.5 Test: Cmd+Backslash shows panels — press Meta+Backslash again, assert layers-panel visible
|
||||
|
||||
## 9. Variables Dialog spec
|
||||
|
||||
- [x] 9.1 Create `tests/e2e/variables-dialog.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit)
|
||||
- [x] 9.2 Test: dialog opens — create a color variable collection via `store.graph` evaluate, click `[data-test-id="variables-section-open"]`, assert `[data-test-id="variables-dialog"]` is visible
|
||||
- [x] 9.3 Test: search filters rows — create 2 variables with names "alpha-color" and "beta-spacing" via store, type "alpha" into `[data-test-id="variables-search-input"]`, assert only 1 `tr` row visible in the table body
|
||||
- [x] 9.4 Test: click cell to edit — click the EditablePreview in the first name cell, assert EditableInput is focused (use `page.locator('[data-test-id="variables-dialog"] tbody tr:first-child [contenteditable], input').first()`)
|
||||
- [x] 9.5 Test: color swatch opens picker — click `[data-test-id="color-picker-swatch"]` in first color variable row, assert `[data-test-id="color-picker-popover"]` is visible
|
||||
|
||||
## 10. Export spec
|
||||
|
||||
- [x] 10.1 Create `tests/e2e/export.spec.ts` with serial describe, shared page/CanvasHelper, beforeAll (goto + waitForInit + drawRect + select)
|
||||
- [x] 10.2 Test: add export row — count `[data-test-id="export-item"]`, click `[data-test-id="export-section-add"]`, assert count +1
|
||||
- [x] 10.3 Test: remove export row — click add again (now 2 rows), click `[data-test-id="export-item"]:first-child button` (the − button), assert count back to 1
|
||||
- [x] 10.4 Test: format selector changes to JPG — click the format AppSelect in the export row, select "JPG", assert AppSelect displays "JPG"
|
||||
- [x] 10.5 Test: SVG hides scale input — change format to SVG, assert the scale AppSelect is not visible (ExportSection hides scale for SVG via `v-if="setting.format !== 'SVG'"`)
|
||||
- [x] 10.6 Test: preview toggle shows image — click `[data-test-id="export-preview-toggle"]`, wait for `[data-test-id="export-section"] img` to be visible, assert `img.src` starts with `blob:` (confirms actual render, not empty src)
|
||||
47
openspec/specs/e2e-auto-layout/spec.md
Normal file
47
openspec/specs/e2e-auto-layout/spec.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# e2e-auto-layout Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Auto-layout Shift+A on selection E2E
|
||||
The E2E suite SHALL verify that Shift+A on multiple selected nodes wraps them in an auto-layout frame.
|
||||
|
||||
#### Scenario: Shift+A wraps nodes in auto-layout frame
|
||||
- **WHEN** two rectangles are selected and Shift+A is pressed
|
||||
- **THEN** a single FRAME node exists on the page with `layoutMode` set to `HORIZONTAL` or `VERTICAL` and the rectangles are its children
|
||||
|
||||
### Requirement: Auto-layout direction toggle E2E
|
||||
The E2E suite SHALL verify that clicking the horizontal/vertical direction buttons changes `layoutMode`.
|
||||
|
||||
#### Scenario: Direction button toggles layoutMode
|
||||
- **WHEN** an auto-layout frame is selected and the vertical direction button is clicked in LayoutSection
|
||||
- **THEN** `frame.layoutMode` equals `VERTICAL`
|
||||
|
||||
### Requirement: Auto-layout gap E2E
|
||||
The E2E suite SHALL verify that changing the gap ScrubInput updates `itemSpacing`.
|
||||
|
||||
#### Scenario: Gap ScrubInput changes itemSpacing
|
||||
- **WHEN** an auto-layout frame is selected and the gap ScrubInput value is changed to 20
|
||||
- **THEN** `frame.itemSpacing` equals 20
|
||||
|
||||
### Requirement: Auto-layout padding uniform E2E
|
||||
The E2E suite SHALL verify that changing the uniform padding input updates all four padding properties.
|
||||
|
||||
#### Scenario: Uniform padding updates all sides
|
||||
- **WHEN** an auto-layout frame is selected and padding is set to 16
|
||||
- **THEN** `frame.paddingTop`, `frame.paddingRight`, `frame.paddingBottom`, and `frame.paddingLeft` all equal 16
|
||||
|
||||
### Requirement: Auto-layout alignment grid E2E
|
||||
The E2E suite SHALL verify that clicking a cell in the 3×3 alignment grid updates `primaryAxisAlign` and `counterAxisAlign`.
|
||||
|
||||
#### Scenario: Center-center alignment set
|
||||
- **WHEN** the center-center cell of the alignment grid is clicked
|
||||
- **THEN** `frame.primaryAxisAlign` equals `CENTER` and `frame.counterAxisAlign` equals `CENTER`
|
||||
|
||||
### Requirement: Auto-layout remove E2E
|
||||
The E2E suite SHALL verify that clicking the remove (−) button in the auto-layout section sets `layoutMode` to NONE.
|
||||
|
||||
#### Scenario: Remove auto-layout resets layoutMode
|
||||
- **WHEN** an auto-layout frame is selected and the remove auto-layout button is clicked
|
||||
- **THEN** `frame.layoutMode` equals `NONE`
|
||||
|
||||
51
openspec/specs/e2e-canvas-manipulation/spec.md
Normal file
51
openspec/specs/e2e-canvas-manipulation/spec.md
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
# e2e-canvas-manipulation Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Marquee selection E2E
|
||||
The E2E suite SHALL verify that dragging from an empty canvas area selects all nodes whose bounds intersect the drag rectangle.
|
||||
|
||||
#### Scenario: Marquee selects intersected nodes
|
||||
- **WHEN** two rectangles are drawn and mouse is dragged from a point before both to a point after both
|
||||
- **THEN** both nodes appear in `store.state.selectedIds`
|
||||
|
||||
#### Scenario: Marquee on empty area deselects
|
||||
- **WHEN** a node is selected and mouse is dragged across empty canvas
|
||||
- **THEN** `store.state.selectedIds.size` equals 0
|
||||
|
||||
### Requirement: Resize handles E2E
|
||||
The E2E suite SHALL verify that dragging a resize handle changes the node's width and height.
|
||||
|
||||
#### Scenario: Corner resize increases dimensions
|
||||
- **WHEN** a rectangle is selected and its bottom-right corner handle is dragged 50px right and 50px down
|
||||
- **THEN** node width and height each increase by approximately 50px
|
||||
|
||||
### Requirement: Rotation handle E2E
|
||||
The E2E suite SHALL verify that the rotation handle rotates a node.
|
||||
|
||||
#### Scenario: Rotation changes node rotation
|
||||
- **WHEN** a rectangle is selected and the cursor is positioned just outside a corner, then dragged in an arc
|
||||
- **THEN** `node.rotation` is non-zero
|
||||
|
||||
### Requirement: Alt+drag duplicate E2E
|
||||
The E2E suite SHALL verify that Alt+drag creates a copy of the node.
|
||||
|
||||
#### Scenario: Alt drag creates duplicate
|
||||
- **WHEN** a rectangle is selected and dragged with Alt held
|
||||
- **THEN** the page has one more node than before the drag
|
||||
|
||||
### Requirement: Shift+Arrow nudge E2E
|
||||
The E2E suite SHALL verify that Shift+Arrow nudges a node by 10px.
|
||||
|
||||
#### Scenario: Shift+ArrowRight nudges 10px
|
||||
- **WHEN** a node is selected and Shift+ArrowRight is pressed
|
||||
- **THEN** `node.x` increases by 10
|
||||
|
||||
### Requirement: Hover highlight E2E
|
||||
The E2E suite SHALL verify that hovering over a node (without clicking) triggers a visible highlight outline on the canvas.
|
||||
|
||||
#### Scenario: Hover renders highlight
|
||||
- **WHEN** the mouse moves over a rectangle without clicking
|
||||
- **THEN** a screenshot taken during hover differs from a screenshot taken with the mouse away (highlight outline visible)
|
||||
|
||||
37
openspec/specs/e2e-export/spec.md
Normal file
37
openspec/specs/e2e-export/spec.md
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
# e2e-export Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Export format selection E2E
|
||||
The E2E suite SHALL verify that changing the export format selector updates the format value in the export section.
|
||||
|
||||
#### Scenario: Format selector changes to JPG
|
||||
- **WHEN** a node with an export setting is selected and the format selector is changed to JPG
|
||||
- **THEN** the export row displays JPG as the selected format
|
||||
|
||||
### Requirement: Export multi-row add/remove E2E
|
||||
The E2E suite SHALL verify that clicking + adds a new export row and − removes it.
|
||||
|
||||
#### Scenario: Add export row
|
||||
- **WHEN** a node is selected and the + button in ExportSection is clicked
|
||||
- **THEN** one more export setting row is visible than before
|
||||
|
||||
#### Scenario: Remove export row
|
||||
- **WHEN** a node has two export rows and the − button on one row is clicked
|
||||
- **THEN** only one export row remains
|
||||
|
||||
### Requirement: Export preview toggle E2E
|
||||
The E2E suite SHALL verify that clicking the Preview button shows a preview image element.
|
||||
|
||||
#### Scenario: Preview button shows image
|
||||
- **WHEN** a node with an export setting is selected and the Preview button is clicked
|
||||
- **THEN** an image element (checkerboard preview) becomes visible in the export section
|
||||
|
||||
### Requirement: SVG format hides scale selector E2E
|
||||
The E2E suite SHALL verify that when SVG format is selected, the scale (multiplier) selector is hidden.
|
||||
|
||||
#### Scenario: SVG hides scale input
|
||||
- **WHEN** an export row format is set to SVG
|
||||
- **THEN** no scale/multiplier input is visible for that row
|
||||
|
||||
30
openspec/specs/e2e-panels/spec.md
Normal file
30
openspec/specs/e2e-panels/spec.md
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
# e2e-panels Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Layers panel resize E2E
|
||||
The E2E suite SHALL verify that dragging the resize handle between the left panel and canvas changes the panel width.
|
||||
|
||||
#### Scenario: Panel resize handle changes width
|
||||
- **WHEN** the splitter handle on the left panel is dragged 80px to the right
|
||||
- **THEN** the layers panel DOM element has a wider width than before the drag
|
||||
|
||||
### Requirement: UI toggle persistence across reload E2E
|
||||
The E2E suite SHALL verify that panel sizes are preserved after a page reload.
|
||||
|
||||
#### Scenario: Panel width persists after reload
|
||||
- **WHEN** the layers panel is resized and the page is reloaded
|
||||
- **THEN** the panel width after reload matches the width set before reload (within 2px)
|
||||
|
||||
### Requirement: ⌘\\ hides and shows panels E2E
|
||||
The E2E suite SHALL verify that pressing ⌘\\ toggles the visibility of the left and right panels.
|
||||
|
||||
#### Scenario: Cmd+Backslash hides panels
|
||||
- **WHEN** ⌘\\ is pressed while panels are visible
|
||||
- **THEN** the layers panel and properties panel elements are not visible in the DOM
|
||||
|
||||
#### Scenario: Cmd+Backslash shows panels again
|
||||
- **WHEN** ⌘\\ is pressed while panels are hidden
|
||||
- **THEN** the layers panel and properties panel elements are visible again
|
||||
|
||||
61
openspec/specs/e2e-properties-panel/spec.md
Normal file
61
openspec/specs/e2e-properties-panel/spec.md
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
# e2e-properties-panel Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: ScrubInput drag-to-change E2E
|
||||
The E2E suite SHALL verify that dragging horizontally on a ScrubInput changes the node property value.
|
||||
|
||||
#### Scenario: Drag X ScrubInput moves node
|
||||
- **WHEN** a rectangle is selected and the X ScrubInput is dragged 50px to the right
|
||||
- **THEN** `node.x` increases by approximately 50
|
||||
|
||||
### Requirement: Corner radius uniform E2E
|
||||
The E2E suite SHALL verify that typing a corner radius value in the appearance section applies it to all corners.
|
||||
|
||||
#### Scenario: Uniform corner radius applied
|
||||
- **WHEN** a rectangle is selected and a corner radius value is typed into the appearance input
|
||||
- **THEN** `node.cornerRadius` equals the entered value
|
||||
|
||||
### Requirement: Corner radius independent E2E
|
||||
The E2E suite SHALL verify that toggling to independent corners splits the input into four separate fields.
|
||||
|
||||
#### Scenario: Independent corners toggle shows four fields
|
||||
- **WHEN** the independent corners button is clicked
|
||||
- **THEN** four corner radius inputs are visible in the panel
|
||||
|
||||
### Requirement: Fill gradient switch E2E
|
||||
The E2E suite SHALL verify that switching fill type to Linear Gradient updates the node fill.
|
||||
|
||||
#### Scenario: Fill type switches to gradient
|
||||
- **WHEN** a rectangle with a solid fill is selected and fill type is changed to LINEAR
|
||||
- **THEN** `node.fills[0].type` equals `GRADIENT_LINEAR`
|
||||
|
||||
### Requirement: Variable bind E2E
|
||||
The E2E suite SHALL verify that binding a color variable to a fill displays a variable badge.
|
||||
|
||||
#### Scenario: Variable badge appears after bind
|
||||
- **WHEN** a color variable exists and is bound to a node's fill
|
||||
- **THEN** a variable badge element is visible in the fill section
|
||||
|
||||
### Requirement: Alignment buttons E2E
|
||||
The E2E suite SHALL verify that clicking alignment buttons aligns multiple selected nodes.
|
||||
|
||||
#### Scenario: Align left aligns nodes
|
||||
- **WHEN** two rectangles at different X positions are selected and Align Left is clicked
|
||||
- **THEN** both nodes have the same `x` coordinate (leftmost of the two)
|
||||
|
||||
### Requirement: Flip horizontal E2E
|
||||
The E2E suite SHALL verify that clicking the flip horizontal button sets `flipX` on the node.
|
||||
|
||||
#### Scenario: Flip horizontal toggles
|
||||
- **WHEN** a rectangle is selected and flip horizontal button is clicked
|
||||
- **THEN** `node.flipX` is true
|
||||
|
||||
### Requirement: Clip content toggle E2E
|
||||
The E2E suite SHALL verify that the clip content checkbox toggles `clipsContent` on a frame.
|
||||
|
||||
#### Scenario: Clip content checkbox toggles
|
||||
- **WHEN** a frame is selected and the clip content checkbox is clicked
|
||||
- **THEN** `node.clipsContent` changes to the opposite boolean value
|
||||
|
||||
19
openspec/specs/e2e-snap-guides/spec.md
Normal file
19
openspec/specs/e2e-snap-guides/spec.md
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
# e2e-snap-guides Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Edge snap guide visual E2E
|
||||
The E2E suite SHALL verify that dragging a node to align its edge with another node causes snap guide lines to appear on the canvas.
|
||||
|
||||
#### Scenario: Edge snap guide renders during drag
|
||||
- **WHEN** two rectangles are positioned such that dragging one aligns its left edge with the other's left edge
|
||||
- **THEN** a screenshot taken mid-drag (while edges are aligned) contains red guide line pixels not present in the pre-drag screenshot
|
||||
|
||||
### Requirement: Center snap guide visual E2E
|
||||
The E2E suite SHALL verify that dragging a node to align its center with another node causes a center snap guide line to appear.
|
||||
|
||||
#### Scenario: Center snap guide renders during drag
|
||||
- **WHEN** two rectangles are positioned such that dragging one aligns its horizontal center with the other's center
|
||||
- **THEN** a screenshot taken mid-drag contains guide line pixels indicating center alignment
|
||||
|
||||
47
openspec/specs/e2e-text-formatting/spec.md
Normal file
47
openspec/specs/e2e-text-formatting/spec.md
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
# e2e-text-formatting Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Text cursor positioning E2E
|
||||
The E2E suite SHALL verify that clicking inside a text node in edit mode positions the cursor near the clicked glyph.
|
||||
|
||||
#### Scenario: Click positions cursor
|
||||
- **WHEN** a text node is double-clicked to enter edit mode and then a position inside the text is clicked
|
||||
- **THEN** the text node remains in edit mode without errors
|
||||
|
||||
### Requirement: Text word selection E2E
|
||||
The E2E suite SHALL verify that double-clicking on a word selects that word.
|
||||
|
||||
#### Scenario: Double-click selects word
|
||||
- **WHEN** a text node is in edit mode and a word is double-clicked
|
||||
- **THEN** the canvas screenshot shows the word highlighted (differs from no-selection screenshot)
|
||||
|
||||
### Requirement: Bold shortcut E2E
|
||||
The E2E suite SHALL verify that ⌘B toggles bold formatting on selected text.
|
||||
|
||||
#### Scenario: Cmd+B toggles bold
|
||||
- **WHEN** a text node is in edit mode, all text is selected, and ⌘B is pressed
|
||||
- **THEN** `node.fontWeight` changes to 700 (bold) or back to 400 (normal)
|
||||
|
||||
### Requirement: Italic shortcut E2E
|
||||
The E2E suite SHALL verify that ⌘I toggles italic formatting on selected text.
|
||||
|
||||
#### Scenario: Cmd+I toggles italic
|
||||
- **WHEN** a text node is in edit mode with all text selected and ⌘I is pressed
|
||||
- **THEN** `node.italic` toggles to the opposite boolean
|
||||
|
||||
### Requirement: Word navigation shortcut E2E
|
||||
The E2E suite SHALL verify that Alt+ArrowRight moves the cursor by one word.
|
||||
|
||||
#### Scenario: Alt+ArrowRight moves by word
|
||||
- **WHEN** a text node is in edit mode with cursor at position 0 and Alt+ArrowRight is pressed
|
||||
- **THEN** no JavaScript errors are thrown and the editor remains in text mode
|
||||
|
||||
### Requirement: Typography section buttons E2E
|
||||
The E2E suite SHALL verify that the Bold button in the typography section applies formatting.
|
||||
|
||||
#### Scenario: Bold button in panel toggles bold
|
||||
- **WHEN** a text node is selected (not in edit mode) and the Bold button in DesignPanel is clicked
|
||||
- **THEN** `node.fontWeight` changes
|
||||
|
||||
54
openspec/specs/e2e-toolbar/spec.md
Normal file
54
openspec/specs/e2e-toolbar/spec.md
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
# e2e-toolbar Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Shapes flyout E2E
|
||||
The E2E suite SHALL verify that the shapes flyout chevron opens a menu with Polygon and Star tools.
|
||||
|
||||
#### Scenario: Shapes flyout opens
|
||||
- **WHEN** the shapes flyout trigger is clicked
|
||||
- **THEN** the flyout menu is visible with Polygon and Star items
|
||||
|
||||
### Requirement: Polygon tool E2E
|
||||
The E2E suite SHALL verify that selecting Polygon from the flyout and dragging creates a POLYGON node.
|
||||
|
||||
#### Scenario: Polygon created
|
||||
- **WHEN** Polygon is selected from flyout and drag is performed on canvas
|
||||
- **THEN** a node with type POLYGON exists on the current page
|
||||
|
||||
### Requirement: Star tool E2E
|
||||
The E2E suite SHALL verify that selecting Star from the flyout and dragging creates a STAR node.
|
||||
|
||||
#### Scenario: Star created
|
||||
- **WHEN** Star is selected from flyout and drag is performed on canvas
|
||||
- **THEN** a node with type STAR exists on the current page
|
||||
|
||||
### Requirement: Pen tool corner points E2E
|
||||
The E2E suite SHALL verify that three clicks with the Pen tool create a VECTOR node with 3 vertices.
|
||||
|
||||
#### Scenario: Three clicks create three vertices
|
||||
- **WHEN** Pen tool is active and three distinct canvas positions are clicked, then Enter pressed (commits open path)
|
||||
- **THEN** a VECTOR node exists with `vectorNetwork.vertices.length === 3`
|
||||
|
||||
### Requirement: Pen tool close path E2E
|
||||
The E2E suite SHALL verify that clicking the first point of a Pen path closes it.
|
||||
|
||||
#### Scenario: Click first point closes path
|
||||
- **WHEN** Pen tool creates 3 vertices and the user clicks on the first vertex position
|
||||
- **THEN** the resulting VECTOR node has a closed segment (no open endpoint)
|
||||
|
||||
### Requirement: Pen tool Escape cancels path E2E
|
||||
The E2E suite SHALL verify that pressing Escape during Pen drawing cancels the current path without creating a node.
|
||||
|
||||
#### Scenario: Escape cancels open path
|
||||
- **WHEN** Pen tool creates 2 vertices and Escape is pressed
|
||||
- **THEN** no new VECTOR node is created on the page (penCancel discards in-progress path)
|
||||
|
||||
### Requirement: Frame flyout E2E
|
||||
The E2E suite SHALL verify that the Frame flyout chevron shows Frame and Section options.
|
||||
|
||||
#### Scenario: Frame flyout shows both options
|
||||
- **WHEN** the frame flyout trigger is clicked
|
||||
- **THEN** Frame (F) and Section (S) items are visible in the flyout
|
||||
|
||||
33
openspec/specs/e2e-variables-dialog/spec.md
Normal file
33
openspec/specs/e2e-variables-dialog/spec.md
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
# e2e-variables-dialog Specification
|
||||
|
||||
## Purpose
|
||||
TBD - created by archiving change e2e-coverage-gaps. Update Purpose after archive.
|
||||
## Requirements
|
||||
### Requirement: Variables dialog open E2E
|
||||
The E2E suite SHALL verify that the variables dialog can be opened when no node is selected.
|
||||
|
||||
#### Scenario: Variables dialog opens
|
||||
- **WHEN** no node is selected and the variables settings button is activated
|
||||
- **THEN** a dialog element with variables table is visible
|
||||
|
||||
### Requirement: Variables dialog search E2E
|
||||
The E2E suite SHALL verify that typing in the search field filters the variables table.
|
||||
|
||||
#### Scenario: Search filters variable rows
|
||||
- **WHEN** variables exist with different names and a search term is typed
|
||||
- **THEN** only rows whose names match the search term are visible
|
||||
|
||||
### Requirement: Variables dialog edit value E2E
|
||||
The E2E suite SHALL verify that clicking a variable value cell makes it editable.
|
||||
|
||||
#### Scenario: Click cell to edit
|
||||
- **WHEN** a variable value cell is clicked in the dialog
|
||||
- **THEN** an input field is focused in that cell
|
||||
|
||||
### Requirement: Color variable picker E2E
|
||||
The E2E suite SHALL verify that clicking a color variable swatch opens a color picker.
|
||||
|
||||
#### Scenario: Color swatch opens picker
|
||||
- **WHEN** a color variable's swatch is clicked in the dialog
|
||||
- **THEN** a color picker element becomes visible
|
||||
|
||||
|
|
@ -96,7 +96,6 @@ Unit tests SHALL cover the variables system: add and resolve color/number variab
|
|||
- **WHEN** `bun test ./tests/engine` is run
|
||||
- **THEN** all variable tests pass (add/resolve color, resolve number, alias chain, circular alias, mode switching, bind/unbind, removal cleanup)
|
||||
|
||||
|
||||
### Requirement: .fig roundtrip tests
|
||||
The test suite SHALL include roundtrip tests for real .fig files: parsing property invariants, encode/decode cycle fidelity. Test fixtures (material3.fig, nuxtui.fig) SHALL be tracked via Git LFS.
|
||||
|
||||
|
|
@ -136,6 +135,7 @@ The test suite SHALL include tests for sceneNodeToJsx() covering shapes, text, l
|
|||
- **WHEN** sceneNodeToJsx is called on a rectangle with blue fill
|
||||
- **THEN** the output includes Rectangle component with bg prop
|
||||
|
||||
|
||||
### Requirement: FigmaAPI unit tests
|
||||
|
||||
The project SHALL provide comprehensive unit tests for the Figma Plugin API in `tests/engine/figma-api.test.ts`.
|
||||
|
|
@ -311,3 +311,74 @@ The test suite SHALL expand from original coverage to include 2571 LOC of new te
|
|||
#### Scenario: Total new test lines
|
||||
- **WHEN** new test files are counted
|
||||
- **THEN** 2571 lines of tests are added
|
||||
|
||||
### Requirement: Canvas manipulation E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/canvas-manipulation.spec.ts` covering: marquee selection, resize handle drag, rotation handle drag, Alt+drag duplicate, Shift+Arrow nudge (10px), and hover highlight (visual screenshot comparison).
|
||||
|
||||
#### Scenario: Canvas manipulation tests pass
|
||||
- **WHEN** `bun run test` executes `canvas-manipulation.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying selection, resize, rotation, duplicate, nudge, and hover
|
||||
|
||||
### Requirement: Toolbar E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/toolbar.spec.ts` covering: shapes flyout chevron, Polygon tool, Star tool, Pen tool (corner, close path, Escape), and Frame flyout.
|
||||
|
||||
#### Scenario: Toolbar tests pass
|
||||
- **WHEN** `bun run test` executes `toolbar.spec.ts`
|
||||
- **THEN** all 7+ tests pass verifying flyout menus and shape creation
|
||||
|
||||
### Requirement: Properties panel E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/properties-panel.spec.ts` covering: ScrubInput drag, corner radius (uniform + independent), fill gradient switch, variable bind badge, alignment buttons, flip horizontal, and clip content checkbox.
|
||||
|
||||
#### Scenario: Properties panel tests pass
|
||||
- **WHEN** `bun run test` executes `properties-panel.spec.ts`
|
||||
- **THEN** all 8+ tests pass verifying property changes via store assertions
|
||||
|
||||
### Requirement: Text formatting E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/text-formatting.spec.ts` covering: cursor positioning, double-click word select, ⌘B bold, ⌘I italic, Alt+ArrowRight word navigation, and Bold button in typography section.
|
||||
|
||||
#### Scenario: Text formatting tests pass
|
||||
- **WHEN** `bun run test` executes `text-formatting.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying text edit interactions
|
||||
|
||||
### Requirement: Auto-layout E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/auto-layout.spec.ts` covering: Shift+A on selection, direction toggle, gap ScrubInput, uniform padding, alignment grid, and remove auto-layout.
|
||||
|
||||
#### Scenario: Auto-layout tests pass
|
||||
- **WHEN** `bun run test` executes `auto-layout.spec.ts`
|
||||
- **THEN** all 6+ tests pass verifying auto-layout frame state via store
|
||||
|
||||
### Requirement: Snap guides E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/snap-guides.spec.ts` covering: edge snap guide and center snap guide, both verified via screenshot comparison.
|
||||
|
||||
#### Scenario: Snap guide tests pass
|
||||
- **WHEN** `bun run test` executes `snap-guides.spec.ts`
|
||||
- **THEN** 2 screenshot comparison tests pass confirming guide line visibility
|
||||
|
||||
### Requirement: Panel resize E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/panels.spec.ts` covering: left panel drag resize, width persistence after reload, and ⌘\\ UI toggle (hide + show).
|
||||
|
||||
#### Scenario: Panel tests pass
|
||||
- **WHEN** `bun run test` executes `panels.spec.ts`
|
||||
- **THEN** all 4+ tests pass verifying panel DOM dimensions and visibility
|
||||
|
||||
### Requirement: Variables dialog E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/variables-dialog.spec.ts` covering: dialog open, search filter, cell edit, and color swatch picker.
|
||||
|
||||
#### Scenario: Variables dialog tests pass
|
||||
- **WHEN** `bun run test` executes `variables-dialog.spec.ts`
|
||||
- **THEN** all 4+ tests pass verifying dialog interactions
|
||||
|
||||
### Requirement: Export E2E tests
|
||||
The E2E suite SHALL include tests for `tests/e2e/export.spec.ts` covering: format selector, add/remove rows, preview toggle, and SVG hiding scale input.
|
||||
|
||||
#### Scenario: Export tests pass
|
||||
- **WHEN** `bun run test` executes `export.spec.ts`
|
||||
- **THEN** all 5+ tests pass verifying export section UI state
|
||||
|
||||
### Requirement: CanvasHelper extended helpers
|
||||
The `CanvasHelper` class SHALL provide `marquee()`, `hover()`, `dragScrubInput()`, and `shiftDrag()` helper methods usable across all spec files.
|
||||
|
||||
#### Scenario: Helpers available in all specs
|
||||
- **WHEN** a spec file imports `CanvasHelper`
|
||||
- **THEN** `canvas.marquee()`, `canvas.hover()`, `canvas.dragScrubInput()`, and `canvas.shiftDrag()` are callable without TypeScript errors
|
||||
|
||||
|
|
|
|||
|
|
@ -447,6 +447,7 @@ const table = useVueTable({
|
|||
<icon-lucide-search class="size-3 text-muted" />
|
||||
<input
|
||||
v-model="searchTerm"
|
||||
data-test-id="variables-search-input"
|
||||
class="w-24 border-none bg-transparent text-xs text-surface outline-none placeholder:text-muted"
|
||||
placeholder="Search"
|
||||
/>
|
||||
|
|
@ -516,6 +517,7 @@ const table = useVueTable({
|
|||
<tr
|
||||
v-for="row in table.getRowModel().rows"
|
||||
:key="row.id"
|
||||
data-test-id="variable-row"
|
||||
class="group border-b border-border/30 hover:bg-hover/50"
|
||||
>
|
||||
<td
|
||||
|
|
|
|||
|
|
@ -178,6 +178,7 @@ const cornerRadiusValue = computed(() => {
|
|||
<template v-if="hasCornerRadius">
|
||||
<ScrubInput
|
||||
v-if="independentCorners !== true"
|
||||
data-test-id="corner-radius-input"
|
||||
:model-value="cornerRadiusValue"
|
||||
:min="0"
|
||||
@update:model-value="updateProp('cornerRadius', $event)"
|
||||
|
|
@ -188,6 +189,7 @@ const cornerRadiusValue = computed(() => {
|
|||
</template>
|
||||
</ScrubInput>
|
||||
<button
|
||||
data-test-id="independent-corners-toggle"
|
||||
class="flex size-[26px] shrink-0 cursor-pointer items-center justify-center rounded border border-border bg-input text-muted hover:bg-hover hover:text-surface"
|
||||
:class="{ '!border-accent !text-accent': independentCorners === true }"
|
||||
title="Independent corner radii"
|
||||
|
|
@ -214,6 +216,7 @@ const cornerRadiusValue = computed(() => {
|
|||
class="mt-1.5 grid grid-cols-2 gap-1.5"
|
||||
>
|
||||
<ScrubInput
|
||||
data-test-id="corner-tl-input"
|
||||
:model-value="node!.topLeftRadius"
|
||||
:min="0"
|
||||
@update:model-value="updateCornerProp('topLeftRadius', $event)"
|
||||
|
|
@ -232,6 +235,7 @@ const cornerRadiusValue = computed(() => {
|
|||
</template>
|
||||
</ScrubInput>
|
||||
<ScrubInput
|
||||
data-test-id="corner-tr-input"
|
||||
:model-value="node!.topRightRadius"
|
||||
:min="0"
|
||||
@update:model-value="updateCornerProp('topRightRadius', $event)"
|
||||
|
|
@ -250,6 +254,7 @@ const cornerRadiusValue = computed(() => {
|
|||
</template>
|
||||
</ScrubInput>
|
||||
<ScrubInput
|
||||
data-test-id="corner-bl-input"
|
||||
:model-value="node!.bottomLeftRadius"
|
||||
:min="0"
|
||||
@update:model-value="updateCornerProp('bottomLeftRadius', $event)"
|
||||
|
|
@ -268,6 +273,7 @@ const cornerRadiusValue = computed(() => {
|
|||
</template>
|
||||
</ScrubInput>
|
||||
<ScrubInput
|
||||
data-test-id="corner-br-input"
|
||||
:model-value="node!.bottomRightRadius"
|
||||
:min="0"
|
||||
@update:model-value="updateCornerProp('bottomRightRadius', $event)"
|
||||
|
|
|
|||
|
|
@ -230,6 +230,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
|
|||
|
||||
<div class="mt-2 grid grid-cols-2 gap-1.5">
|
||||
<ScrubInput
|
||||
data-test-id="layout-gap-input"
|
||||
icon="Gap"
|
||||
:model-value="Math.round(node.itemSpacing)"
|
||||
:min="0"
|
||||
|
|
@ -239,6 +240,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
|
|||
|
||||
<template v-if="hasUniformPadding() && !showIndividualPadding">
|
||||
<ScrubInput
|
||||
data-test-id="layout-uniform-padding-input"
|
||||
icon="Pad"
|
||||
:model-value="Math.round(node.paddingTop)"
|
||||
:min="0"
|
||||
|
|
@ -313,6 +315,7 @@ function setAlignment(primary: LayoutAlign, counter: LayoutCounterAlign) {
|
|||
<label class="flex cursor-pointer items-center gap-2 text-xs text-surface">
|
||||
<input
|
||||
type="checkbox"
|
||||
data-test-id="clip-content-checkbox"
|
||||
class="accent-accent"
|
||||
:checked="node.clipsContent"
|
||||
@change="
|
||||
|
|
|
|||
|
|
@ -152,6 +152,7 @@ onMounted(async () => {
|
|||
</div>
|
||||
<div class="flex gap-0.5">
|
||||
<button
|
||||
data-test-id="typography-bold-button"
|
||||
class="flex cursor-pointer items-center justify-center rounded border px-2 py-1 font-bold"
|
||||
:class="
|
||||
node.fontWeight >= 700
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ useHead({ title: route.meta.demo ? 'Demo' : undefined })
|
|||
<SplitterPanel :default-size="18" :min-size="10" :max-size="30" class="flex">
|
||||
<LayersPanel />
|
||||
</SplitterPanel>
|
||||
<SplitterResizeHandle class="group relative z-10 -mx-1 w-2 cursor-col-resize">
|
||||
<SplitterResizeHandle data-test-id="left-splitter-handle" class="group relative z-10 -mx-1 w-2 cursor-col-resize">
|
||||
<div class="pointer-events-none absolute inset-y-0 left-1/2 w-px -translate-x-1/2" />
|
||||
</SplitterResizeHandle>
|
||||
<SplitterPanel :default-size="64" :min-size="30" class="flex">
|
||||
|
|
|
|||
116
tests/e2e/auto-layout.spec.ts
Normal file
116
tests/e2e/auto-layout.spec.ts
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
import { getSelectedNode, getNodeById } from '../helpers/store'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
let frameId: string
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
await canvas.clearCanvas()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
async function selectFrame() {
|
||||
expect(frameId, 'frameId must be set — did the Shift+A test run?').toBeTruthy()
|
||||
await page.evaluate((id: string) => {
|
||||
window.__OPEN_PENCIL_STORE__!.select([id])
|
||||
}, frameId)
|
||||
await canvas.waitForRender()
|
||||
}
|
||||
|
||||
test('Shift+A wraps selection in auto-layout frame', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(100, 100, 60, 60)
|
||||
await canvas.drawRect(220, 100, 60, 60)
|
||||
await canvas.pressKey('Meta+a')
|
||||
await canvas.waitForRender()
|
||||
|
||||
await canvas.pressKey('Shift+A')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const node = await getSelectedNode(page)
|
||||
expect(node).not.toBeNull()
|
||||
expect(node!.type).toBe('FRAME')
|
||||
expect(node!.layoutMode).not.toBe('NONE')
|
||||
expect(node!.childIds.length).toBe(2)
|
||||
|
||||
frameId = node!.id
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('direction button toggles to VERTICAL', async () => {
|
||||
await selectFrame()
|
||||
|
||||
await page.locator('[data-test-id="layout-direction-vertical"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const frame = await getNodeById(page, frameId)
|
||||
expect(frame!.layoutMode).toBe('VERTICAL')
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('gap ScrubInput sets itemSpacing', async () => {
|
||||
await selectFrame()
|
||||
const before = await getNodeById(page, frameId)
|
||||
const initialSpacing = before!.itemSpacing
|
||||
|
||||
await canvas.dragScrubInput(page.locator('[data-test-id="layout-gap-input"]'), 40)
|
||||
|
||||
const after = await getNodeById(page, frameId)
|
||||
expect(after!.itemSpacing).toBeGreaterThan(initialSpacing + 5)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('uniform padding ScrubInput sets all four padding sides', async () => {
|
||||
await selectFrame()
|
||||
|
||||
const paddingScrub = page.locator('[data-test-id="layout-uniform-padding-input"]')
|
||||
await paddingScrub.click()
|
||||
await canvas.waitForRender()
|
||||
const paddingInput = page.locator('[data-test-id="layout-uniform-padding-input"] [data-test-id="scrub-input-field"]')
|
||||
await paddingInput.fill('16')
|
||||
await paddingInput.press('Enter')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const frame = await getNodeById(page, frameId)
|
||||
expect(frame!.paddingTop).toBe(16)
|
||||
expect(frame!.paddingRight).toBe(16)
|
||||
expect(frame!.paddingBottom).toBe(16)
|
||||
expect(frame!.paddingLeft).toBe(16)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('alignment grid center sets CENTER alignment', async () => {
|
||||
await selectFrame()
|
||||
|
||||
const centerCell = page.locator('[data-test-id="layout-alignment-grid"] button').nth(4)
|
||||
await centerCell.click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const frame = await getNodeById(page, frameId)
|
||||
expect(frame!.primaryAxisAlign).toBe('CENTER')
|
||||
expect(frame!.counterAxisAlign).toBe('CENTER')
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('remove auto-layout sets layoutMode to NONE', async () => {
|
||||
await selectFrame()
|
||||
|
||||
await page.locator('[data-test-id="layout-remove-auto"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const frame = await getNodeById(page, frameId)
|
||||
expect(frame!.layoutMode).toBe('NONE')
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
183
tests/e2e/canvas-manipulation.spec.ts
Normal file
183
tests/e2e/canvas-manipulation.spec.ts
Normal file
|
|
@ -0,0 +1,183 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
import { getSelectedIds, getPageChildren, getSelectedNode, getNodeById } from '../helpers/store'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
await canvas.clearCanvas()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('marquee selects two rectangles', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(100, 100, 80, 80)
|
||||
await canvas.drawRect(250, 100, 80, 80)
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
|
||||
await canvas.marquee(70, 70, 370, 230)
|
||||
|
||||
const count = await getSelectedIds(page)
|
||||
expect(count).toBe(2)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('marquee on empty area deselects', async () => {
|
||||
await canvas.click(140, 140)
|
||||
await canvas.waitForRender()
|
||||
expect(await getSelectedIds(page)).toBeGreaterThan(0)
|
||||
|
||||
await canvas.marquee(500, 450, 620, 570)
|
||||
|
||||
const count = await getSelectedIds(page)
|
||||
expect(count).toBe(0)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Alt+drag duplicate increases child count', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(100, 100, 80, 80)
|
||||
await canvas.click(140, 140)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = (await getPageChildren(page)).length
|
||||
|
||||
await canvas.altDrag(140, 140, 280, 140)
|
||||
|
||||
const after = (await getPageChildren(page)).length
|
||||
expect(after).toBe(before + 1)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('duplicate shortcut Cmd+D increases child count', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 80, 80)
|
||||
await canvas.click(240, 240)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = (await getPageChildren(page)).length
|
||||
|
||||
await canvas.pressKey('Meta+d')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = (await getPageChildren(page)).length
|
||||
expect(after).toBe(before + 1)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('resize corner handle drag increases node dimensions', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(100, 100, 100, 100)
|
||||
await canvas.click(150, 150)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = await getSelectedNode(page)
|
||||
expect(before).not.toBeNull()
|
||||
|
||||
const viewport = await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const id = [...store.state.selectedIds][0]
|
||||
const n = store.graph.getNode(id)
|
||||
if (!n) return null
|
||||
const abs = store.graph.getAbsolutePosition(id)
|
||||
const zoom = store.state.zoom
|
||||
const panX = store.state.panX
|
||||
const panY = store.state.panY
|
||||
return {
|
||||
handleX: (abs.x + n.width) * zoom + panX,
|
||||
handleY: (abs.y + n.height) * zoom + panY,
|
||||
}
|
||||
})
|
||||
expect(viewport).not.toBeNull()
|
||||
|
||||
const box = await page.locator('canvas').boundingBox()
|
||||
if (!box) throw new Error('No canvas')
|
||||
|
||||
const hx = box.x + viewport!.handleX
|
||||
const hy = box.y + viewport!.handleY
|
||||
|
||||
await page.mouse.move(hx, hy)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(hx + 50, hy + 50, { steps: 10 })
|
||||
await page.mouse.up()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await getSelectedNode(page)
|
||||
expect(after!.width).toBeGreaterThan(before!.width + 20)
|
||||
expect(after!.height).toBeGreaterThan(before!.height + 20)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('rotation handle drag rotates node', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 100, 100)
|
||||
await canvas.click(250, 250)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = await getSelectedNode(page)
|
||||
expect(before).not.toBeNull()
|
||||
const initialRotation = before!.rotation ?? 0
|
||||
|
||||
const viewport = await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const id = [...store.state.selectedIds][0]
|
||||
const n = store.graph.getNode(id)
|
||||
if (!n) return null
|
||||
const abs = store.graph.getAbsolutePosition(id)
|
||||
const zoom = store.state.zoom
|
||||
const panX = store.state.panX
|
||||
const panY = store.state.panY
|
||||
const cx = (abs.x + n.width / 2) * zoom + panX
|
||||
const cy = (abs.y + n.height / 2) * zoom + panY
|
||||
const topMidY = abs.y * zoom + panY
|
||||
return { cx, cy, topMidY }
|
||||
})
|
||||
expect(viewport).not.toBeNull()
|
||||
|
||||
const box = await page.locator('canvas').boundingBox()
|
||||
if (!box) throw new Error('No canvas')
|
||||
|
||||
const rx = box.x + viewport!.cx
|
||||
const ry = box.y + viewport!.topMidY - 24
|
||||
|
||||
const nodeId = before!.id
|
||||
|
||||
await page.mouse.move(rx, ry)
|
||||
await canvas.waitForRender()
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(rx + 60, ry + 60, { steps: 15 })
|
||||
await page.mouse.up()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await getNodeById(page, nodeId)
|
||||
expect(after!.rotation ?? 0).not.toBe(initialRotation)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('hover highlight changes canvas rendering', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 100, 100)
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const noHoverShot = await canvas.screenshotCanvas()
|
||||
|
||||
await canvas.hover(250, 250)
|
||||
|
||||
const hoverShot = await canvas.screenshotCanvas()
|
||||
|
||||
expect(Buffer.compare(noHoverShot, hoverShot)).not.toBe(0)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
88
tests/e2e/export.spec.ts
Normal file
88
tests/e2e/export.spec.ts
Normal file
|
|
@ -0,0 +1,88 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 100, 100)
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
function exportItems() {
|
||||
return page.locator('[data-test-id="export-item"]')
|
||||
}
|
||||
|
||||
test('add export row increases row count', async () => {
|
||||
const before = await exportItems().count()
|
||||
|
||||
await page.locator('[data-test-id="export-section-add"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await exportItems().count()
|
||||
expect(after).toBe(before + 1)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('remove export row decreases row count', async () => {
|
||||
await page.locator('[data-test-id="export-section-add"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = await exportItems().count()
|
||||
await exportItems().first().locator('button').last().click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await exportItems().count()
|
||||
expect(after).toBe(before - 1)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('format selector changes to JPG', async () => {
|
||||
const formatTrigger = exportItems().first().locator('[data-test-id="app-select-trigger"]').last()
|
||||
await formatTrigger.click()
|
||||
|
||||
await page.locator('[role="option"]').filter({ hasText: 'JPG' }).click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(formatTrigger).toHaveText('JPG')
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('SVG format hides scale selector', async () => {
|
||||
const formatTrigger = exportItems().first().locator('[data-test-id="app-select-trigger"]').last()
|
||||
await formatTrigger.click()
|
||||
|
||||
await page.locator('[role="option"]').filter({ hasText: 'SVG' }).click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const selects = exportItems().first().locator('[data-test-id="app-select-trigger"]')
|
||||
await expect(selects).toHaveCount(1)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('preview toggle shows image with blob src', async () => {
|
||||
const formatTrigger = exportItems().first().locator('[data-test-id="app-select-trigger"]').last()
|
||||
await formatTrigger.click()
|
||||
await page.locator('[role="option"]').filter({ hasText: 'PNG' }).click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
await page.locator('[data-test-id="export-preview-toggle"]').click()
|
||||
|
||||
const img = page.locator('[data-test-id="export-section"] img')
|
||||
await expect(img).toBeVisible({ timeout: 10000 })
|
||||
|
||||
const src = await img.getAttribute('src')
|
||||
expect(src).toMatch(/^blob:/)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
70
tests/e2e/panels.spec.ts
Normal file
70
tests/e2e/panels.spec.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('layers panel resize increases width', async () => {
|
||||
const panel = page.locator('[data-test-id="layers-panel"]')
|
||||
const before = await panel.boundingBox()
|
||||
expect(before).not.toBeNull()
|
||||
|
||||
const handle = page.locator('[data-test-id="left-splitter-handle"]')
|
||||
const handleBox = await handle.boundingBox()
|
||||
expect(handleBox).not.toBeNull()
|
||||
|
||||
const cx = handleBox!.x + handleBox!.width / 2
|
||||
const cy = handleBox!.y + handleBox!.height / 2
|
||||
|
||||
await page.mouse.move(cx, cy)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(cx + 80, cy, { steps: 10 })
|
||||
await page.mouse.up()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await panel.boundingBox()
|
||||
expect(after!.width).toBeGreaterThan(before!.width + 40)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('panel width persists after page reload', async () => {
|
||||
const recordedWidth = (await page.locator('[data-test-id="layers-panel"]').boundingBox())!.width
|
||||
|
||||
await page.reload()
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
|
||||
const after = await page.locator('[data-test-id="layers-panel"]').boundingBox()
|
||||
expect(Math.abs(after!.width - recordedWidth)).toBeLessThanOrEqual(2)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Cmd+Backslash hides panels', async () => {
|
||||
await page.keyboard.press('Meta+\\')
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(page.locator('[data-test-id="layers-panel"]')).not.toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Cmd+Backslash shows panels again', async () => {
|
||||
await page.keyboard.press('Meta+\\')
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(page.locator('[data-test-id="layers-panel"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
152
tests/e2e/properties-panel.spec.ts
Normal file
152
tests/e2e/properties-panel.spec.ts
Normal file
|
|
@ -0,0 +1,152 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
import { getSelectedNode, getPageChildren } from '../helpers/store'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('ScrubInput drag changes X position', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(100, 100, 80, 80)
|
||||
const before = await getSelectedNode(page)
|
||||
expect(before).not.toBeNull()
|
||||
const initialX = before!.x
|
||||
|
||||
const xScrub = page.locator('[data-test-id="position-section"] [data-test-id="scrub-input"]').first()
|
||||
await canvas.dragScrubInput(xScrub, 50)
|
||||
|
||||
const after = await getSelectedNode(page)
|
||||
expect(after!.x).not.toBe(initialX)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('corner radius uniform sets cornerRadius', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 80, 80)
|
||||
|
||||
const scrubContainer = page.locator('[data-test-id="corner-radius-input"]')
|
||||
await scrubContainer.click()
|
||||
await canvas.waitForRender()
|
||||
const input = page.locator('[data-test-id="corner-radius-input"] [data-test-id="scrub-input-field"]')
|
||||
await input.fill('12')
|
||||
await input.press('Enter')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const node = await getSelectedNode(page)
|
||||
expect(node!.cornerRadius).toBe(12)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('independent corners toggle shows four corner inputs', async () => {
|
||||
await page.locator('[data-test-id="independent-corners-toggle"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(page.locator('[data-test-id="corner-tl-input"]')).toBeVisible()
|
||||
await expect(page.locator('[data-test-id="corner-tr-input"]')).toBeVisible()
|
||||
await expect(page.locator('[data-test-id="corner-br-input"]')).toBeVisible()
|
||||
await expect(page.locator('[data-test-id="corner-bl-input"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('fill gradient switch changes fill type', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
// fresh rect with default solid fill
|
||||
await canvas.drawRect(300, 300, 80, 80)
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(page.locator('[data-test-id="fill-section"]')).toBeVisible({ timeout: 5000 })
|
||||
|
||||
const fillItem = page.locator('[data-test-id="fill-item"]').first()
|
||||
await expect(fillItem).toBeVisible({ timeout: 5000 })
|
||||
const fillSwatch = fillItem.locator('[data-test-id="fill-picker-swatch"]')
|
||||
await expect(fillSwatch).toBeVisible({ timeout: 5000 })
|
||||
await fillSwatch.click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
await page.locator('[data-test-id="fill-picker-tab-gradient"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const node = await getSelectedNode(page)
|
||||
expect(node!.fills[0].type).toBe('GRADIENT_LINEAR')
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('variable bind badge appears on fill', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 80, 80)
|
||||
|
||||
await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const col = store.graph.createCollection('Colors')
|
||||
const v = store.graph.createVariable('brand-red', 'COLOR', col.id, { r: 1, g: 0, b: 0, a: 1 })
|
||||
const id = [...store.state.selectedIds][0]
|
||||
if (!id) return
|
||||
store.graph.bindVariable(id, 'fills/0/color', v.id)
|
||||
store.state.sceneVersion++
|
||||
})
|
||||
await canvas.waitForRender()
|
||||
|
||||
await expect(page.locator('[data-test-id="fill-unbind-variable"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('alignment buttons align nodes to same X', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(50, 200, 60, 60)
|
||||
await canvas.drawRect(250, 200, 60, 60)
|
||||
await canvas.pressKey('Meta+a')
|
||||
await canvas.waitForRender()
|
||||
|
||||
await page.locator('[data-test-id="position-align-left"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const children = await getPageChildren(page)
|
||||
expect(children.length).toBe(2)
|
||||
expect(children[0].x).toBe(children[1].x)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('flip horizontal sets flipX', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.drawRect(200, 200, 80, 80)
|
||||
|
||||
await page.locator('[data-test-id="position-flip-horizontal"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const node = await getSelectedNode(page)
|
||||
expect(node!.flipX).toBe(true)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('clip content checkbox toggles clipsContent', async () => {
|
||||
await canvas.clearCanvas()
|
||||
await canvas.pressKey('f')
|
||||
await canvas.drag(100, 100, 300, 300)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const before = await getSelectedNode(page)
|
||||
const initialValue = before!.clipsContent
|
||||
|
||||
await page.locator('[data-test-id="clip-content-checkbox"]').click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = await getSelectedNode(page)
|
||||
expect(after!.clipsContent).toBe(!initialValue)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
90
tests/e2e/snap-guides.spec.ts
Normal file
90
tests/e2e/snap-guides.spec.ts
Normal file
|
|
@ -0,0 +1,90 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
await canvas.clearCanvas()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
async function createRects() {
|
||||
await canvas.clearCanvas()
|
||||
await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
store.createShape('RECTANGLE', 100, 100, 80, 80)
|
||||
const b = store.createShape('RECTANGLE', 300, 100, 80, 80)
|
||||
store.select([b])
|
||||
})
|
||||
await canvas.waitForRender()
|
||||
}
|
||||
|
||||
// Snap guide visual tests compare the canvas at a snap position vs a non-snap position
|
||||
// during the same drag. The snap position produces a guide line overlay; non-snap does not.
|
||||
// Skipped on Linux CI due to X11 Alt+drag interference and rendering differences.
|
||||
|
||||
test('edge snap guide: canvas differs at snap vs non-snap position', async () => {
|
||||
test.skip(process.platform === 'linux', 'Snap guide visual tests skipped on Linux CI')
|
||||
|
||||
await createRects()
|
||||
|
||||
const box = await page.locator('canvas').boundingBox()
|
||||
if (!box) throw new Error('No canvas')
|
||||
|
||||
// drag to a non-snap position first, capture screenshot
|
||||
await page.mouse.move(box.x + 340, box.y + 140)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(box.x + 250, box.y + 140, { steps: 15 })
|
||||
const nonSnapShot = await canvas.screenshotCanvas()
|
||||
|
||||
// continue drag to edge-snap position (right edge of rect B aligns with left edge of rect A at x=180)
|
||||
await page.mouse.move(box.x + 182, box.y + 140, { steps: 15 })
|
||||
const snapShot = await canvas.screenshotCanvas()
|
||||
|
||||
await page.mouse.up()
|
||||
|
||||
// At snap position the guide line overlay should make the canvas visually different
|
||||
expect(
|
||||
Buffer.compare(nonSnapShot, snapShot),
|
||||
'Canvas should differ at snap position due to guide line overlay'
|
||||
).not.toBe(0)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('center snap guide: canvas differs at snap vs non-snap position', async () => {
|
||||
test.skip(process.platform === 'linux', 'Snap guide visual tests skipped on Linux CI')
|
||||
|
||||
await createRects()
|
||||
|
||||
const box = await page.locator('canvas').boundingBox()
|
||||
if (!box) throw new Error('No canvas')
|
||||
|
||||
// drag to a non-snap position first
|
||||
await page.mouse.move(box.x + 340, box.y + 140)
|
||||
await page.mouse.down()
|
||||
await page.mouse.move(box.x + 260, box.y + 140, { steps: 15 })
|
||||
const nonSnapShot = await canvas.screenshotCanvas()
|
||||
|
||||
// continue drag to center-snap position (center of rect B aligns with center of rect A)
|
||||
await page.mouse.move(box.x + 220, box.y + 140, { steps: 15 })
|
||||
const snapShot = await canvas.screenshotCanvas()
|
||||
|
||||
await page.mouse.up()
|
||||
|
||||
expect(
|
||||
Buffer.compare(nonSnapShot, snapShot),
|
||||
'Canvas should differ at snap position due to center guide line overlay'
|
||||
).not.toBe(0)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
125
tests/e2e/text-formatting.spec.ts
Normal file
125
tests/e2e/text-formatting.spec.ts
Normal file
|
|
@ -0,0 +1,125 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
import { getSelectedNode, getEditingTextId, getNodeById } from '../helpers/store'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
await canvas.clearCanvas()
|
||||
|
||||
await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
store.state.zoom = 1
|
||||
store.state.panX = 0
|
||||
store.state.panY = 0
|
||||
const id = store.createShape('TEXT', 200, 200, 150, 30)
|
||||
store.graph.updateNode(id, { text: 'Hello World', fontSize: 18 })
|
||||
store.select([id])
|
||||
})
|
||||
await canvas.waitForRender()
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('double-click enters text edit mode', async () => {
|
||||
await canvas.dblclick(275, 215)
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
const editingId = await getEditingTextId(page)
|
||||
expect(editingId).not.toBeNull()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('bold button toggles fontWeight to 700 then back to 400', async () => {
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(275, 215)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const nodeId = (await getSelectedNode(page))!.id
|
||||
|
||||
// ensure starting weight is 400 via undo-safe store method
|
||||
await page.evaluate(async (id: string) => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
store.updateNodeWithUndo(id, { fontWeight: 400 }, 'reset')
|
||||
store.state.sceneVersion++
|
||||
await new Promise(requestAnimationFrame)
|
||||
}, nodeId)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const boldBtn = page.locator('[data-test-id="typography-bold-button"]')
|
||||
await expect(boldBtn).toBeVisible({ timeout: 3000 })
|
||||
await boldBtn.click()
|
||||
await page.waitForTimeout(500)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const bold = await getNodeById(page, nodeId)
|
||||
expect(bold!.fontWeight).toBe(700)
|
||||
|
||||
await page.locator('[data-test-id="typography-bold-button"]').click()
|
||||
await page.waitForTimeout(500)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const normal = await getNodeById(page, nodeId)
|
||||
expect(normal!.fontWeight).toBe(400)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Cmd+I toggles italic', async () => {
|
||||
await canvas.click(275, 215)
|
||||
await canvas.waitForRender()
|
||||
const nodeId = (await getSelectedNode(page))!.id
|
||||
|
||||
await canvas.dblclick(275, 215)
|
||||
await expect.poll(() => getEditingTextId(page), { timeout: 5000 }).toBeTruthy()
|
||||
|
||||
await page.keyboard.press('End')
|
||||
await page.keyboard.press('Meta+i')
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const node = await getNodeById(page, nodeId)
|
||||
expect(node!.italic).toBe(true)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('double-click word select changes canvas screenshot', async () => {
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const baseline = await canvas.screenshotCanvas()
|
||||
|
||||
await canvas.dblclick(275, 215)
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
const selected = await canvas.screenshotCanvas()
|
||||
|
||||
expect(Buffer.compare(baseline, selected)).not.toBe(0)
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Alt+ArrowRight word navigation stays in text edit mode', async () => {
|
||||
await canvas.dblclick(275, 215)
|
||||
await page.waitForTimeout(200)
|
||||
|
||||
await page.keyboard.press('Alt+ArrowRight')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const editingId = await getEditingTextId(page)
|
||||
expect(editingId).not.toBeNull()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
112
tests/e2e/toolbar.spec.ts
Normal file
112
tests/e2e/toolbar.spec.ts
Normal file
|
|
@ -0,0 +1,112 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
import { getPageChildren } from '../helpers/store'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
test('shapes flyout opens', async () => {
|
||||
await page.locator('[data-test-id="toolbar-flyout-rectangle"]').click()
|
||||
await expect(page.locator('[data-test-id="toolbar-flyout-item-polygon"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Polygon tool creates POLYGON node', async () => {
|
||||
await page.locator('[data-test-id="toolbar-flyout-item-polygon"]').click()
|
||||
await canvas.drag(300, 200, 400, 300)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const children = await getPageChildren(page)
|
||||
expect(children.some(n => n.type === 'POLYGON')).toBe(true)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Star tool creates STAR node', async () => {
|
||||
await page.locator('[data-test-id="toolbar-flyout-rectangle"]').click()
|
||||
await page.locator('[data-test-id="toolbar-flyout-item-star"]').click()
|
||||
await canvas.drag(150, 150, 250, 250)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const children = await getPageChildren(page)
|
||||
expect(children.some(n => n.type === 'STAR')).toBe(true)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Pen creates VECTOR node with 3 vertices on Enter', async () => {
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.pressKey('p')
|
||||
await canvas.click(100, 400)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(200, 400)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(200, 480)
|
||||
await canvas.waitForRender()
|
||||
await canvas.pressKey('Enter')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const children = await getPageChildren(page)
|
||||
const vectors = children.filter(n => n.type === 'VECTOR')
|
||||
expect(vectors.length).toBeGreaterThan(0)
|
||||
const last = vectors[vectors.length - 1]
|
||||
expect(last.vectorNetwork.vertices.length).toBe(3)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Pen Escape with 2 vertices cancels path without creating node', async () => {
|
||||
const before = (await getPageChildren(page)).filter(n => n.type === 'VECTOR').length
|
||||
|
||||
await canvas.pressKey('p')
|
||||
await canvas.click(350, 400)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(440, 400)
|
||||
await canvas.waitForRender()
|
||||
await canvas.pressKey('Escape')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = (await getPageChildren(page)).filter(n => n.type === 'VECTOR').length
|
||||
expect(after).toBe(before)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Pen close path creates VECTOR with closed region', async () => {
|
||||
const before = (await getPageChildren(page)).filter(n => n.type === 'VECTOR').length
|
||||
|
||||
await canvas.pressKey('p')
|
||||
await canvas.click(500, 200)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(580, 200)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(540, 270)
|
||||
await canvas.waitForRender()
|
||||
await canvas.click(500, 200)
|
||||
await canvas.waitForRender()
|
||||
|
||||
const after = (await getPageChildren(page)).filter(n => n.type === 'VECTOR').length
|
||||
expect(after).toBeGreaterThan(before)
|
||||
|
||||
const vectors = (await getPageChildren(page)).filter(n => n.type === 'VECTOR')
|
||||
const last = vectors[vectors.length - 1]
|
||||
expect(last.vectorNetwork.regions?.length).toBeGreaterThan(0)
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('Frame flyout shows Frame and Section items', async () => {
|
||||
await page.locator('[data-test-id="toolbar-flyout-frame"]').click()
|
||||
await expect(page.locator('[data-test-id="toolbar-flyout-item-frame"]')).toBeVisible()
|
||||
await expect(page.locator('[data-test-id="toolbar-flyout-item-section"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
87
tests/e2e/variables-dialog.spec.ts
Normal file
87
tests/e2e/variables-dialog.spec.ts
Normal file
|
|
@ -0,0 +1,87 @@
|
|||
import { test, expect, type Page } from '@playwright/test'
|
||||
|
||||
import { CanvasHelper } from '../helpers/canvas'
|
||||
|
||||
let page: Page
|
||||
let canvas: CanvasHelper
|
||||
|
||||
test.describe.configure({ mode: 'serial' })
|
||||
|
||||
test.beforeAll(async ({ browser }) => {
|
||||
page = await browser.newPage()
|
||||
await page.goto('/')
|
||||
canvas = new CanvasHelper(page)
|
||||
await canvas.waitForInit()
|
||||
})
|
||||
|
||||
test.afterAll(async () => {
|
||||
await page.close()
|
||||
})
|
||||
|
||||
async function createColorVariable(name: string) {
|
||||
return page.evaluate((varName: string) => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const existing = [...store.graph.variableCollections.values()]
|
||||
const col = existing.length > 0 ? existing[0] : store.graph.createCollection('Test Collection')
|
||||
const v = store.graph.createVariable(varName, 'COLOR', col.id, { r: 1, g: 0, b: 0, a: 1 })
|
||||
store.state.sceneVersion++
|
||||
return v.id
|
||||
}, name)
|
||||
}
|
||||
|
||||
function variableRows() {
|
||||
return page.locator('[data-test-id="variable-row"]')
|
||||
}
|
||||
|
||||
test('variables dialog opens', async () => {
|
||||
await createColorVariable('primary-color')
|
||||
|
||||
await page.locator('[data-test-id="variables-section-open"]').click()
|
||||
await expect(page.locator('[data-test-id="variables-dialog"]')).toBeVisible()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('search filters variable rows', async () => {
|
||||
await page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const col = [...store.graph.variableCollections.values()][0]
|
||||
store.graph.createVariable('beta-spacing', 'FLOAT', col.id, 8)
|
||||
store.state.sceneVersion++
|
||||
})
|
||||
await canvas.waitForRender()
|
||||
|
||||
const searchInput = page.locator('[data-test-id="variables-search-input"]')
|
||||
await searchInput.fill('primary')
|
||||
|
||||
await expect(variableRows()).toHaveCount(1, { timeout: 3000 })
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('click name cell activates editable input', async () => {
|
||||
await page.locator('[data-test-id="variables-search-input"]').fill('')
|
||||
await canvas.waitForRender()
|
||||
|
||||
const firstRow = variableRows().first()
|
||||
const nameCell = firstRow.locator('td').first()
|
||||
await nameCell.click()
|
||||
await canvas.waitForRender()
|
||||
|
||||
const editableInput = nameCell.locator('input, [contenteditable]').first()
|
||||
await expect(editableInput).toBeFocused()
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
|
||||
test('color swatch opens color picker', async () => {
|
||||
await createColorVariable('SwatchVar')
|
||||
// close dialog if open from previous test
|
||||
await page.keyboard.press('Escape')
|
||||
await page.waitForTimeout(200)
|
||||
await page.locator('[data-test-id="variables-section-open"]').click()
|
||||
await expect(page.locator('[data-test-id="variables-dialog"]')).toBeVisible({ timeout: 3000 })
|
||||
|
||||
const swatch = page.locator('[data-test-id="variable-row"]').first().locator('[data-test-id="color-picker-swatch"]')
|
||||
await expect(swatch).toBeVisible({ timeout: 3000 })
|
||||
await swatch.click()
|
||||
await expect(page.locator('[data-test-id="color-picker-popover"]')).toBeVisible({ timeout: 5000 })
|
||||
canvas.assertNoErrors()
|
||||
})
|
||||
400
tests/engine/mutation.test.ts
Normal file
400
tests/engine/mutation.test.ts
Normal file
|
|
@ -0,0 +1,400 @@
|
|||
import { describe, test, expect } from 'bun:test'
|
||||
|
||||
import {
|
||||
toggleBoldInRange,
|
||||
toggleItalicInRange,
|
||||
applyStyleToRange,
|
||||
removeStyleFromRange,
|
||||
getStyleAt,
|
||||
type StyleRun,
|
||||
} from '@open-pencil/core'
|
||||
|
||||
import {
|
||||
encodeVectorNetworkBlob,
|
||||
decodeVectorNetworkBlob,
|
||||
type VectorNetwork,
|
||||
} from '@open-pencil/core'
|
||||
|
||||
import { SceneGraph, UndoManager } from '@open-pencil/core'
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// toggleBoldInRange — mutation coverage
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('toggleBoldInRange — partial bold → all bold', () => {
|
||||
test('mixed selection (some bold, some not) becomes all bold', () => {
|
||||
// chars 0-2 bold, chars 3-4 not — toggle on [0,5) should make all bold
|
||||
const runs: StyleRun[] = [{ start: 0, length: 3, style: { fontWeight: 700 } }]
|
||||
const { runs: result, newWeight } = toggleBoldInRange(runs, 0, 5, 400, 5)
|
||||
expect(newWeight).toBe(700)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
expect(getStyleAt(result, i).fontWeight ?? 400).toBe(700)
|
||||
}
|
||||
})
|
||||
|
||||
test('node-level weight 700 — chars without run override treated as bold', () => {
|
||||
// nodeWeight=700, no runs → all chars "bold" → toggle removes bold
|
||||
const { newWeight } = toggleBoldInRange([], 0, 5, 700, 5)
|
||||
expect(newWeight).toBe(400)
|
||||
})
|
||||
|
||||
test('partial range: only middle chars toggled, edges unchanged', () => {
|
||||
const runs: StyleRun[] = []
|
||||
const { runs: result } = toggleBoldInRange(runs, 2, 6, 400, 10)
|
||||
// chars 0-1 and 6-9 should have no fontWeight override
|
||||
expect(getStyleAt(result, 0).fontWeight).toBeUndefined()
|
||||
expect(getStyleAt(result, 1).fontWeight).toBeUndefined()
|
||||
// chars 2-5 should be 700
|
||||
for (let i = 2; i < 6; i++) {
|
||||
expect(getStyleAt(result, i).fontWeight).toBe(700)
|
||||
}
|
||||
expect(getStyleAt(result, 6).fontWeight).toBeUndefined()
|
||||
})
|
||||
|
||||
test('toggling bold twice returns to original state', () => {
|
||||
const runs: StyleRun[] = []
|
||||
const { runs: bolded } = toggleBoldInRange(runs, 0, 5, 400, 5)
|
||||
const { runs: restored } = toggleBoldInRange(bolded, 0, 5, 400, 5)
|
||||
// all chars should have no fontWeight override (back to node default)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
expect(getStyleAt(restored, i).fontWeight).toBeUndefined()
|
||||
}
|
||||
})
|
||||
|
||||
test('does not mutate original runs array', () => {
|
||||
const original: StyleRun[] = [{ start: 0, length: 3, style: { fontWeight: 700 } }]
|
||||
const snapshot = JSON.stringify(original)
|
||||
toggleBoldInRange(original, 0, 3, 400, 5)
|
||||
expect(JSON.stringify(original)).toBe(snapshot)
|
||||
})
|
||||
})
|
||||
|
||||
describe('toggleItalicInRange — mutation coverage', () => {
|
||||
test('partial italic → all italic', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 2, style: { italic: true } }]
|
||||
const { newItalic, runs: result } = toggleItalicInRange(runs, 0, 5, false, 5)
|
||||
expect(newItalic).toBe(true)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
expect(getStyleAt(result, i).italic ?? false).toBe(true)
|
||||
}
|
||||
})
|
||||
|
||||
test('node-level italic=true, no runs → toggles off', () => {
|
||||
const { newItalic } = toggleItalicInRange([], 0, 5, true, 5)
|
||||
expect(newItalic).toBe(false)
|
||||
})
|
||||
|
||||
test('toggling italic twice restores original', () => {
|
||||
const { runs: italicized } = toggleItalicInRange([], 0, 5, false, 5)
|
||||
const { runs: restored } = toggleItalicInRange(italicized, 0, 5, false, 5)
|
||||
for (let i = 0; i < 5; i++) {
|
||||
expect(getStyleAt(restored, i).italic).toBeUndefined()
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
describe('applyStyleToRange — split and merge', () => {
|
||||
test('applying to middle of existing run splits it', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 10, style: { fontWeight: 700 } }]
|
||||
// apply italic only to chars 3-6
|
||||
const result = applyStyleToRange(runs, 3, 7, { italic: true }, 10)
|
||||
// chars 0-2: bold only
|
||||
expect(getStyleAt(result, 0)).toEqual({ fontWeight: 700 })
|
||||
expect(getStyleAt(result, 2)).toEqual({ fontWeight: 700 })
|
||||
// chars 3-6: bold + italic
|
||||
expect(getStyleAt(result, 3)).toEqual({ fontWeight: 700, italic: true })
|
||||
expect(getStyleAt(result, 6)).toEqual({ fontWeight: 700, italic: true })
|
||||
// chars 7-9: bold only
|
||||
expect(getStyleAt(result, 7)).toEqual({ fontWeight: 700 })
|
||||
})
|
||||
|
||||
test('applying same style merges adjacent runs', () => {
|
||||
const runs: StyleRun[] = [
|
||||
{ start: 0, length: 3, style: { fontWeight: 700 } },
|
||||
{ start: 5, length: 3, style: { fontWeight: 700 } },
|
||||
]
|
||||
// fill the gap between them
|
||||
const result = applyStyleToRange(runs, 3, 5, { fontWeight: 700 }, 10)
|
||||
// should compact into one run
|
||||
const bold700Count = result.filter(r => r.style.fontWeight === 700).length
|
||||
expect(bold700Count).toBe(1)
|
||||
expect(result[0].length).toBe(8)
|
||||
})
|
||||
|
||||
test('overwriting a property in range does not affect chars outside', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 10, style: { fontWeight: 400 } }]
|
||||
const result = applyStyleToRange(runs, 5, 10, { fontWeight: 700 }, 10)
|
||||
expect(getStyleAt(result, 4).fontWeight).toBe(400)
|
||||
expect(getStyleAt(result, 5).fontWeight).toBe(700)
|
||||
expect(getStyleAt(result, 9).fontWeight).toBe(700)
|
||||
})
|
||||
})
|
||||
|
||||
describe('removeStyleFromRange — edge cases', () => {
|
||||
test('removing non-existent key leaves run intact', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 5, style: { italic: true } }]
|
||||
const result = removeStyleFromRange(runs, 0, 5, ['fontWeight'], 5)
|
||||
expect(getStyleAt(result, 0).italic).toBe(true)
|
||||
expect(result).toHaveLength(1)
|
||||
})
|
||||
|
||||
test('removing all keys from run eliminates the run', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 5, style: { fontWeight: 700 } }]
|
||||
const result = removeStyleFromRange(runs, 0, 5, ['fontWeight'], 5)
|
||||
expect(result).toHaveLength(0)
|
||||
})
|
||||
|
||||
test('partial removal preserves surrounding runs', () => {
|
||||
const runs: StyleRun[] = [{ start: 0, length: 10, style: { fontWeight: 700 } }]
|
||||
const result = removeStyleFromRange(runs, 3, 7, ['fontWeight'], 10)
|
||||
// chars 0-2 still bold
|
||||
expect(getStyleAt(result, 0).fontWeight).toBe(700)
|
||||
// chars 3-6 no override
|
||||
expect(getStyleAt(result, 3).fontWeight).toBeUndefined()
|
||||
// chars 7-9 still bold
|
||||
expect(getStyleAt(result, 7).fontWeight).toBe(700)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// vectorNetworkBlob — precision and handleMirroring round-trip
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('vectorNetworkBlob — precision and mirroring', () => {
|
||||
test('negative coordinates round-trip exactly', () => {
|
||||
const network: VectorNetwork = {
|
||||
vertices: [
|
||||
{ x: -123.456, y: -78.9, handleMirroring: 'NONE' },
|
||||
{ x: -0.001, y: -999.999, handleMirroring: 'NONE' },
|
||||
],
|
||||
segments: [
|
||||
{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } },
|
||||
],
|
||||
regions: [],
|
||||
}
|
||||
const decoded = decodeVectorNetworkBlob(encodeVectorNetworkBlob(network))
|
||||
expect(decoded.vertices[0].x).toBeCloseTo(-123.456, 2)
|
||||
expect(decoded.vertices[0].y).toBeCloseTo(-78.9, 2)
|
||||
expect(decoded.vertices[1].y).toBeCloseTo(-999.999, 2)
|
||||
})
|
||||
|
||||
// handleMirroring is not encoded in vectorNetworkBlob (TODO in vector.ts:133).
|
||||
// ANGLE and ANGLE_AND_LENGTH are decoded as NONE — document this known limitation.
|
||||
test('handleMirroring NONE round-trips; ANGLE decodes as NONE (known limitation)', () => {
|
||||
const noneNetwork: VectorNetwork = {
|
||||
vertices: [{ x: 0, y: 0, handleMirroring: 'NONE' }, { x: 10, y: 0, handleMirroring: 'NONE' }],
|
||||
segments: [{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }],
|
||||
regions: [],
|
||||
}
|
||||
const decodedNone = decodeVectorNetworkBlob(encodeVectorNetworkBlob(noneNetwork))
|
||||
expect(decodedNone.vertices[0].handleMirroring).toBe('NONE')
|
||||
|
||||
// ANGLE is not persisted in blob — comes back as NONE
|
||||
const angleNetwork: VectorNetwork = {
|
||||
vertices: [{ x: 0, y: 0, handleMirroring: 'ANGLE' }, { x: 10, y: 0, handleMirroring: 'ANGLE' }],
|
||||
segments: [{ start: 0, end: 1, tangentStart: { x: 0, y: 0 }, tangentEnd: { x: 0, y: 0 } }],
|
||||
regions: [],
|
||||
}
|
||||
const decodedAngle = decodeVectorNetworkBlob(encodeVectorNetworkBlob(angleNetwork))
|
||||
// This is a known limitation: handleMirroring is not stored in the blob format
|
||||
expect(decodedAngle.vertices[0].handleMirroring).toBe('NONE')
|
||||
})
|
||||
|
||||
test('large bezier tangents preserve sign', () => {
|
||||
const network: VectorNetwork = {
|
||||
vertices: [
|
||||
{ x: 0, y: 0, handleMirroring: 'ANGLE' },
|
||||
{ x: 500, y: 500, handleMirroring: 'ANGLE' },
|
||||
],
|
||||
segments: [
|
||||
{ start: 0, end: 1, tangentStart: { x: -200, y: 300 }, tangentEnd: { x: 150, y: -100 } },
|
||||
],
|
||||
regions: [],
|
||||
}
|
||||
const decoded = decodeVectorNetworkBlob(encodeVectorNetworkBlob(network))
|
||||
expect(decoded.segments[0].tangentStart.x).toBeCloseTo(-200, 1)
|
||||
expect(decoded.segments[0].tangentStart.y).toBeCloseTo(300, 1)
|
||||
expect(decoded.segments[0].tangentEnd.x).toBeCloseTo(150, 1)
|
||||
expect(decoded.segments[0].tangentEnd.y).toBeCloseTo(-100, 1)
|
||||
})
|
||||
|
||||
test('many vertices preserve order and count', () => {
|
||||
const n = 20
|
||||
const vertices = Array.from({ length: n }, (_, i) => ({
|
||||
x: i * 10,
|
||||
y: i * 5,
|
||||
handleMirroring: 'NONE' as const,
|
||||
}))
|
||||
const segments = Array.from({ length: n - 1 }, (_, i) => ({
|
||||
start: i,
|
||||
end: i + 1,
|
||||
tangentStart: { x: 0, y: 0 },
|
||||
tangentEnd: { x: 0, y: 0 },
|
||||
}))
|
||||
const network: VectorNetwork = { vertices, segments, regions: [] }
|
||||
const decoded = decodeVectorNetworkBlob(encodeVectorNetworkBlob(network))
|
||||
expect(decoded.vertices).toHaveLength(n)
|
||||
expect(decoded.segments).toHaveLength(n - 1)
|
||||
for (let i = 0; i < n; i++) {
|
||||
expect(decoded.vertices[i].x).toBeCloseTo(i * 10, 1)
|
||||
expect(decoded.vertices[i].y).toBeCloseTo(i * 5, 1)
|
||||
}
|
||||
})
|
||||
|
||||
test('encode produces deterministic output', () => {
|
||||
const network: VectorNetwork = {
|
||||
vertices: [
|
||||
{ x: 10, y: 20, handleMirroring: 'NONE' },
|
||||
{ x: 30, y: 40, handleMirroring: 'ANGLE' },
|
||||
],
|
||||
segments: [
|
||||
{ start: 0, end: 1, tangentStart: { x: 5, y: 0 }, tangentEnd: { x: -5, y: 0 } },
|
||||
],
|
||||
regions: [],
|
||||
}
|
||||
const a = encodeVectorNetworkBlob(network)
|
||||
const b = encodeVectorNetworkBlob(network)
|
||||
expect(Buffer.from(a).equals(Buffer.from(b))).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// SceneGraph + UndoManager — integration (updateNodeWithUndo pattern)
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
describe('SceneGraph + UndoManager — updateNode undo integration', () => {
|
||||
function makeSetup() {
|
||||
const graph = new SceneGraph()
|
||||
const undo = new UndoManager()
|
||||
const pageId = graph.getPages()[0].id
|
||||
|
||||
function updateWithUndo(id: string, changes: Partial<Parameters<SceneGraph['updateNode']>[1]>, label: string) {
|
||||
const node = graph.getNode(id)!
|
||||
const previous = Object.fromEntries(
|
||||
(Object.keys(changes) as string[]).map(k => [k, (node as Record<string, unknown>)[k]])
|
||||
)
|
||||
graph.updateNode(id, changes)
|
||||
undo.push({
|
||||
label,
|
||||
forward: () => graph.updateNode(id, changes),
|
||||
inverse: () => graph.updateNode(id, previous as Parameters<SceneGraph['updateNode']>[1]),
|
||||
})
|
||||
}
|
||||
|
||||
return { graph, undo, pageId, updateWithUndo }
|
||||
}
|
||||
|
||||
test('update then undo restores previous value', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
updateWithUndo(id, { x: 200 }, 'move')
|
||||
expect(graph.getNode(id)!.x).toBe(200)
|
||||
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.x).toBe(0)
|
||||
})
|
||||
|
||||
test('update → undo → redo restores updated value', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
updateWithUndo(id, { width: 250 }, 'resize')
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.width).toBe(100)
|
||||
undo.redo()
|
||||
expect(graph.getNode(id)!.width).toBe(250)
|
||||
})
|
||||
|
||||
test('multiple updates undo in LIFO order', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
updateWithUndo(id, { x: 10 }, 'step1')
|
||||
updateWithUndo(id, { x: 20 }, 'step2')
|
||||
updateWithUndo(id, { x: 30 }, 'step3')
|
||||
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.x).toBe(20)
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.x).toBe(10)
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.x).toBe(0)
|
||||
})
|
||||
|
||||
test('new action after undo clears redo stack', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
updateWithUndo(id, { x: 100 }, 'a')
|
||||
updateWithUndo(id, { x: 200 }, 'b')
|
||||
undo.undo()
|
||||
expect(undo.canRedo).toBe(true)
|
||||
|
||||
// new action should kill redo
|
||||
updateWithUndo(id, { x: 300 }, 'c')
|
||||
expect(undo.canRedo).toBe(false)
|
||||
expect(graph.getNode(id)!.x).toBe(300)
|
||||
})
|
||||
|
||||
test('undo does not affect other nodes', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const a = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 50, height: 50 }).id
|
||||
const b = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 50, height: 50 }).id
|
||||
|
||||
updateWithUndo(a, { x: 100 }, 'move a')
|
||||
updateWithUndo(b, { x: 200 }, 'move b')
|
||||
|
||||
undo.undo() // undoes move b
|
||||
expect(graph.getNode(b)!.x).toBe(0)
|
||||
expect(graph.getNode(a)!.x).toBe(100) // a unaffected
|
||||
|
||||
undo.undo() // undoes move a
|
||||
expect(graph.getNode(a)!.x).toBe(0)
|
||||
})
|
||||
|
||||
test('multi-field update: all fields restored on undo', () => {
|
||||
const { graph, undo, pageId, updateWithUndo } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
updateWithUndo(id, { x: 50, y: 75, width: 200, height: 300 }, 'big move')
|
||||
const after = graph.getNode(id)!
|
||||
expect(after.x).toBe(50)
|
||||
expect(after.y).toBe(75)
|
||||
expect(after.width).toBe(200)
|
||||
expect(after.height).toBe(300)
|
||||
|
||||
undo.undo()
|
||||
const restored = graph.getNode(id)!
|
||||
expect(restored.x).toBe(0)
|
||||
expect(restored.y).toBe(0)
|
||||
expect(restored.width).toBe(100)
|
||||
expect(restored.height).toBe(100)
|
||||
})
|
||||
|
||||
test('batch: multiple updates undo as one', () => {
|
||||
const { graph, undo, pageId } = makeSetup()
|
||||
const id = graph.createNode('RECTANGLE', pageId, { x: 0, y: 0, width: 100, height: 100 }).id
|
||||
|
||||
undo.beginBatch('batch move')
|
||||
undo.apply({
|
||||
label: 'x',
|
||||
forward: () => graph.updateNode(id, { x: 10 }),
|
||||
inverse: () => graph.updateNode(id, { x: 0 }),
|
||||
})
|
||||
undo.apply({
|
||||
label: 'y',
|
||||
forward: () => graph.updateNode(id, { y: 20 }),
|
||||
inverse: () => graph.updateNode(id, { y: 0 }),
|
||||
})
|
||||
undo.commitBatch()
|
||||
|
||||
expect(graph.getNode(id)!.x).toBe(10)
|
||||
expect(graph.getNode(id)!.y).toBe(20)
|
||||
expect(undo.undoLabel).toBe('batch move')
|
||||
|
||||
undo.undo()
|
||||
expect(graph.getNode(id)!.x).toBe(0)
|
||||
expect(graph.getNode(id)!.y).toBe(0)
|
||||
})
|
||||
})
|
||||
|
|
@ -27,7 +27,8 @@ export class CanvasHelper {
|
|||
}
|
||||
|
||||
async waitForInit() {
|
||||
await this.page.locator('canvas[data-ready="1"]').waitFor({ timeout: 5000 })
|
||||
await this.page.locator('canvas[data-ready="1"]').waitFor({ timeout: 30000 })
|
||||
await this.page.locator('[data-test-id="canvas-loading"]').waitFor({ state: 'hidden', timeout: 30000 })
|
||||
}
|
||||
|
||||
async clearCanvas() {
|
||||
|
|
@ -41,7 +42,9 @@ export class CanvasHelper {
|
|||
}
|
||||
|
||||
private async canvasBounds() {
|
||||
return this.canvas.boundingBox().then((b) => b!)
|
||||
const b = await this.canvas.boundingBox()
|
||||
if (!b) throw new Error('Canvas has no bounding box — is it visible?')
|
||||
return b
|
||||
}
|
||||
|
||||
async click(canvasX: number, canvasY: number) {
|
||||
|
|
@ -115,4 +118,61 @@ export class CanvasHelper {
|
|||
await this.pressKey('Meta+d')
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
async marquee(x1: number, y1: number, x2: number, y2: number, steps = 10) {
|
||||
const box = await this.canvasBounds()
|
||||
await this.page.mouse.move(box.x + x1, box.y + y1)
|
||||
await this.page.mouse.down()
|
||||
await this.page.mouse.move(box.x + x2, box.y + y2, { steps })
|
||||
await this.page.mouse.up()
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
async hover(x: number, y: number) {
|
||||
const box = await this.canvasBounds()
|
||||
await this.page.mouse.move(box.x + x, box.y + y)
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
/** Point `locator` at the outer ScrubInput container (`[data-test-id="scrub-input"]`), not the inner `<input>`. */
|
||||
async dragScrubInput(locator: Locator, deltaX: number) {
|
||||
await locator.scrollIntoViewIfNeeded()
|
||||
const box = await locator.boundingBox()
|
||||
if (!box) throw new Error('dragScrubInput: element has no bounding box')
|
||||
const cx = box.x + box.width / 2
|
||||
const cy = box.y + box.height / 2
|
||||
await this.page.mouse.move(cx, cy)
|
||||
await this.page.mouse.down()
|
||||
await this.page.mouse.move(cx + deltaX, cy, { steps: 10 })
|
||||
await this.page.mouse.up()
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
async altDrag(fromX: number, fromY: number, toX: number, toY: number) {
|
||||
const box = await this.canvasBounds()
|
||||
await this.page.keyboard.down('Alt')
|
||||
await this.page.mouse.move(box.x + fromX, box.y + fromY)
|
||||
await this.page.mouse.down()
|
||||
await this.page.mouse.move(box.x + toX, box.y + toY, { steps: 10 })
|
||||
await this.page.mouse.up()
|
||||
await this.page.keyboard.up('Alt')
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
async shiftDrag(fromX: number, fromY: number, toX: number, toY: number) {
|
||||
const box = await this.canvasBounds()
|
||||
await this.page.keyboard.down('Shift')
|
||||
await this.page.mouse.move(box.x + fromX, box.y + fromY)
|
||||
await this.page.mouse.down()
|
||||
await this.page.mouse.move(box.x + toX, box.y + toY, { steps: 10 })
|
||||
await this.page.mouse.up()
|
||||
await this.page.keyboard.up('Shift')
|
||||
await this.waitForRender()
|
||||
}
|
||||
|
||||
async dblclick(x: number, y: number) {
|
||||
const box = await this.canvasBounds()
|
||||
await this.page.mouse.dblclick(box.x + x, box.y + y)
|
||||
await this.waitForRender()
|
||||
}
|
||||
}
|
||||
|
|
|
|||
89
tests/helpers/store.ts
Normal file
89
tests/helpers/store.ts
Normal file
|
|
@ -0,0 +1,89 @@
|
|||
import type { Page } from '@playwright/test'
|
||||
|
||||
export function getSelectedIds(page: Page) {
|
||||
return page.evaluate(() => window.__OPEN_PENCIL_STORE__!.state.selectedIds.size)
|
||||
}
|
||||
|
||||
export function getPageChildren(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
return store.graph.getChildren(store.state.currentPageId).map((n: any) => ({
|
||||
id: n.id,
|
||||
type: n.type,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
width: n.width,
|
||||
height: n.height,
|
||||
layoutMode: n.layoutMode,
|
||||
childIds: n.childIds,
|
||||
vectorNetwork: n.vectorNetwork,
|
||||
}))
|
||||
})
|
||||
}
|
||||
|
||||
export function getSelectedNode(page: Page) {
|
||||
return page.evaluate(() => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const id = [...store.state.selectedIds][0]
|
||||
if (!id) return null
|
||||
const n = store.graph.getNode(id)
|
||||
if (!n) return null
|
||||
return {
|
||||
id: n.id,
|
||||
type: n.type,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
width: n.width,
|
||||
height: n.height,
|
||||
rotation: n.rotation,
|
||||
layoutMode: n.layoutMode,
|
||||
primaryAxisAlign: n.primaryAxisAlign,
|
||||
counterAxisAlign: n.counterAxisAlign,
|
||||
itemSpacing: n.itemSpacing,
|
||||
childIds: n.childIds,
|
||||
cornerRadius: n.cornerRadius,
|
||||
flipX: n.flipX,
|
||||
clipsContent: n.clipsContent,
|
||||
fills: n.fills,
|
||||
fontWeight: n.fontWeight,
|
||||
italic: n.italic,
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export function getNodeById(page: Page, id: string) {
|
||||
return page.evaluate((nodeId: string) => {
|
||||
const store = window.__OPEN_PENCIL_STORE__!
|
||||
const n = store.graph.getNode(nodeId)
|
||||
if (!n) return null
|
||||
return {
|
||||
id: n.id,
|
||||
type: n.type,
|
||||
x: n.x,
|
||||
y: n.y,
|
||||
width: n.width,
|
||||
height: n.height,
|
||||
rotation: n.rotation,
|
||||
layoutMode: n.layoutMode,
|
||||
primaryAxisAlign: n.primaryAxisAlign,
|
||||
counterAxisAlign: n.counterAxisAlign,
|
||||
itemSpacing: n.itemSpacing,
|
||||
paddingTop: n.paddingTop,
|
||||
paddingRight: n.paddingRight,
|
||||
paddingBottom: n.paddingBottom,
|
||||
paddingLeft: n.paddingLeft,
|
||||
childIds: n.childIds,
|
||||
cornerRadius: n.cornerRadius,
|
||||
flipX: n.flipX,
|
||||
clipsContent: n.clipsContent,
|
||||
fills: n.fills,
|
||||
fontWeight: n.fontWeight,
|
||||
italic: n.italic,
|
||||
styleRuns: n.styleRuns,
|
||||
}
|
||||
}, id)
|
||||
}
|
||||
|
||||
export function getEditingTextId(page: Page) {
|
||||
return page.evaluate(() => window.__OPEN_PENCIL_STORE__!.state.editingTextId)
|
||||
}
|
||||
Loading…
Reference in a new issue