5371ed11b8
- Share compact item-row and paint-field anatomy across Fill, Stroke, Effects, and Export - Add COLOR binding transactions with picker rollback and one-step undo - Replace bespoke panel test hooks with semantic selectors and visual coverage
125 lines
3.8 KiB
TypeScript
125 lines
3.8 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test'
|
|
|
|
import { CanvasHelper } from '#tests/helpers/canvas'
|
|
import { propertySection } from '#tests/helpers/properties'
|
|
|
|
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 getSelectedNodeFlags() {
|
|
return page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const id = [...store.state.selectedIds][0]
|
|
if (!id) return null
|
|
const n = store.graph.getNode(id)
|
|
if (!n) return null
|
|
return {
|
|
type: n.type,
|
|
independentCorners: n.independentCorners,
|
|
independentStrokeWeights: n.independentStrokeWeights
|
|
}
|
|
})
|
|
}
|
|
|
|
async function drawFrame(x: number, y: number, w: number, h: number) {
|
|
await canvas.pressKey('f')
|
|
await canvas.drag(x, y, x + w, y + h)
|
|
await canvas.waitForRender()
|
|
}
|
|
|
|
test('independent corners toggle shows per-corner inputs', async () => {
|
|
await drawFrame(120, 120, 120, 80)
|
|
await canvas.waitForRender()
|
|
|
|
const flags = await getSelectedNodeFlags()
|
|
expect(flags?.type).toBe('FRAME')
|
|
expect(flags?.independentCorners).toBe(false)
|
|
|
|
const toggle = propertySection(page, 'Appearance').getByRole('button', {
|
|
name: 'Independent corner radii'
|
|
})
|
|
await expect(toggle).toBeVisible()
|
|
|
|
await toggle.click()
|
|
await canvas.waitForRender()
|
|
|
|
expect((await getSelectedNodeFlags())?.independentCorners).toBe(true)
|
|
const grid = page.locator('[data-corner-grid]')
|
|
await expect(grid).toBeVisible()
|
|
const cornerInputs = grid.getByRole('spinbutton')
|
|
expect(await cornerInputs.count()).toBe(4)
|
|
|
|
await toggle.click()
|
|
await canvas.waitForRender()
|
|
await expect(grid).not.toBeVisible()
|
|
})
|
|
|
|
test('multi-selection independent corners toggle is one undo step', async () => {
|
|
await canvas.clearCanvas()
|
|
await drawFrame(80, 80, 100, 70)
|
|
await drawFrame(240, 80, 100, 70)
|
|
await canvas.pressKey('Meta+a')
|
|
await canvas.waitForRender()
|
|
|
|
const independentStates = () =>
|
|
page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
return [...store.state.selectedIds].map(
|
|
(id) => store.graph.getNode(id)?.independentCorners ?? null
|
|
)
|
|
})
|
|
|
|
const toggle = propertySection(page, 'Appearance').getByRole('button', {
|
|
name: 'Independent corner radii'
|
|
})
|
|
await toggle.click()
|
|
await canvas.waitForRender()
|
|
expect(await independentStates()).toEqual([true, true])
|
|
|
|
await canvas.pressKey('Meta+z')
|
|
await canvas.waitForRender()
|
|
expect(await independentStates()).toEqual([false, false])
|
|
})
|
|
|
|
test('stroke sides toggle shows per-side weight inputs', async () => {
|
|
await drawFrame(300, 50, 120, 80)
|
|
await canvas.waitForRender()
|
|
|
|
const addStroke = propertySection(page, 'Stroke').getByRole('button', { name: 'Add stroke' })
|
|
await expect(addStroke).toBeVisible()
|
|
await addStroke.click()
|
|
await canvas.waitForRender()
|
|
|
|
const toggle = page.locator('[data-property="stroke-sides"]')
|
|
await expect(toggle).toBeVisible({ timeout: 5000 })
|
|
|
|
const sectionInputsBefore = await propertySection(page, 'Stroke').getByRole('spinbutton').count()
|
|
|
|
await toggle.click()
|
|
await canvas.waitForRender()
|
|
|
|
const sectionInputsAfter = await propertySection(page, 'Stroke').getByRole('spinbutton').count()
|
|
expect(sectionInputsAfter).toBeGreaterThan(sectionInputsBefore)
|
|
|
|
await toggle.click()
|
|
await canvas.waitForRender()
|
|
|
|
const sectionInputsFinal = await propertySection(page, 'Stroke').getByRole('spinbutton').count()
|
|
expect(sectionInputsFinal).toBe(sectionInputsBefore)
|
|
})
|