253 lines
10 KiB
TypeScript
253 lines
10 KiB
TypeScript
import { expect, test, useEditorSetup } from '#tests/e2e/fixtures'
|
|
import { expectDefined } from '#tests/helpers/assert'
|
|
import { getPageChildren, getSelectedNode } from '#tests/helpers/store'
|
|
|
|
const editor = useEditorSetup()
|
|
|
|
test('ScrubInput drag changes X position', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(100, 100, 80, 80)
|
|
const before = await getSelectedNode(editor.page)
|
|
const initialX = expectDefined(before, 'selected rectangle before drag').x
|
|
|
|
const xScrub = editor.page.getByTestId('position-section').getByTestId('scrub-input').first()
|
|
await editor.canvas.dragScrubInput(xScrub, 50)
|
|
|
|
const after = await getSelectedNode(editor.page)
|
|
expect(after?.x).not.toBe(initialX)
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('corner radius uniform sets cornerRadius', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
|
|
const scrubContainer = editor.page.getByTestId('corner-radius-input')
|
|
await scrubContainer.click()
|
|
await editor.canvas.waitForRender()
|
|
const input = editor.page.getByTestId('corner-radius-input').getByTestId('scrub-input-field')
|
|
await input.fill('12')
|
|
await input.press('Enter')
|
|
await editor.canvas.waitForRender()
|
|
|
|
const node = await getSelectedNode(editor.page)
|
|
expect(node?.cornerRadius).toBe(12)
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('independent corners toggle shows four corner inputs', async () => {
|
|
await editor.page.getByTestId('independent-corners-toggle').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('corner-tl-input')).toBeVisible()
|
|
await expect(editor.page.getByTestId('corner-tr-input')).toBeVisible()
|
|
await expect(editor.page.getByTestId('corner-br-input')).toBeVisible()
|
|
await expect(editor.page.getByTestId('corner-bl-input')).toBeVisible()
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('fill gradient switch changes fill type', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.pressKey('Escape')
|
|
await editor.canvas.waitForRender()
|
|
// fresh rect with default solid fill
|
|
await editor.canvas.drawRect(300, 300, 80, 80)
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('fill-section')).toBeVisible({ timeout: 5000 })
|
|
|
|
const fillItem = editor.page.getByTestId('fill-item').first()
|
|
await expect(fillItem).toBeVisible({ timeout: 5000 })
|
|
const fillSwatch = fillItem.getByTestId('fill-picker-swatch')
|
|
await expect(fillSwatch).toBeVisible({ timeout: 5000 })
|
|
await fillSwatch.click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await editor.page.getByTestId('fill-picker-tab-gradient').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const node = expectDefined(await getSelectedNode(editor.page), 'gradient-filled node')
|
|
expect(node.fills[0]?.type).toBe('GRADIENT_LINEAR')
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('variable bind badge appears on fill', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
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 editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('fill-unbind-variable')).toBeVisible()
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('fill color can bind an existing variable', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
|
|
await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const col = store.graph.createCollection('Colors')
|
|
const variable = store.graph.createVariable('test-brand-red', 'COLOR', col.id, {
|
|
r: 1,
|
|
g: 0,
|
|
b: 0,
|
|
a: 1
|
|
})
|
|
store.state.sceneVersion++
|
|
return variable.id
|
|
})
|
|
await editor.canvas.waitForRender()
|
|
|
|
await editor.page.getByTestId('fill-apply-variable-0').click()
|
|
await editor.page.getByText('test-brand-red', { exact: true }).click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('fill-unbind-variable')).toBeVisible()
|
|
const fillSwatch = editor.page.getByTestId('fill-picker-swatch')
|
|
await expect(fillSwatch).toHaveCSS('background-color', 'rgb(255, 0, 0)')
|
|
await fillSwatch.click()
|
|
const colorInputs = editor.page.locator('[role="dialog"] input[type="number"]:not(.hidden)')
|
|
await expect(colorInputs.first()).toHaveValue('255')
|
|
await colorInputs.first().fill('0')
|
|
await colorInputs.first().press('Enter')
|
|
await editor.canvas.waitForRender()
|
|
await expect(editor.page.getByTestId('fill-unbind-variable')).toBeHidden()
|
|
const boundVariableId = await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const id = [...store.state.selectedIds][0]
|
|
return id ? (store.getNode(id)?.boundVariables['fills/0/color'] ?? null) : null
|
|
})
|
|
expect(boundVariableId).toBeNull()
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('fill color can create and bind a variable', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
|
|
await editor.page.getByTestId('fill-apply-variable-0').click()
|
|
await expect(editor.page.getByText(/Create color variable from #?[0-9A-F]{6}/)).toBeVisible()
|
|
await editor.page.getByTestId('fill-apply-variable-0-create').click()
|
|
await editor.page.getByPlaceholder('Variable name').fill('Surface/default')
|
|
await editor.page.getByTestId('fill-apply-variable-0-create').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('fill-unbind-variable')).toBeVisible()
|
|
const boundVariable = await editor.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 node = store.getNode(id)
|
|
const variableId = node?.boundVariables['fills/0/color']
|
|
return variableId ? store.getVariable(variableId)?.name : null
|
|
})
|
|
expect(boundVariable).toBe('Surface/default')
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('width can create, bind, and detach a number variable', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
await editor.page.getByTestId('layout-height-input').click()
|
|
|
|
await editor.page.getByTestId('layout-width-apply-variable').click()
|
|
await expect(editor.page.getByText('Create number variable from 80')).toBeVisible()
|
|
await editor.page.getByTestId('layout-width-apply-variable-create').click()
|
|
await editor.page.getByPlaceholder('Variable name').fill('Card/width')
|
|
await editor.page.getByTestId('layout-width-apply-variable-create').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('layout-width-unbind-variable')).toBeVisible()
|
|
const boundVariable = await editor.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 node = store.getNode(id)
|
|
const variableId = node?.boundVariables.width
|
|
return variableId ? store.getVariable(variableId)?.name : null
|
|
})
|
|
expect(boundVariable).toBe('Card/width')
|
|
|
|
const widthField = editor.page.getByTestId('layout-width-input')
|
|
await widthField.click()
|
|
const widthInput = widthField.getByTestId('scrub-input-field')
|
|
await widthInput.fill('120')
|
|
await widthInput.press('Enter')
|
|
await editor.canvas.waitForRender()
|
|
|
|
await expect(editor.page.getByTestId('layout-width-unbind-variable')).toBeHidden()
|
|
const directWidth = await editor.page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const id = [...store.state.selectedIds][0]
|
|
const node = id ? store.getNode(id) : null
|
|
return node ? { width: node.width, binding: node.boundVariables.width ?? null } : null
|
|
})
|
|
expect(directWidth).toEqual({ width: 120, binding: null })
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('alignment buttons align nodes to same X', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(50, 200, 60, 60)
|
|
await editor.canvas.drawRect(250, 200, 60, 60)
|
|
await editor.canvas.pressKey('Meta+a')
|
|
await editor.canvas.waitForRender()
|
|
|
|
await editor.page.getByTestId('position-align-left').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const children = await getPageChildren(editor.page)
|
|
expect(children.length).toBe(2)
|
|
expect(children[0].x).toBe(children[1].x)
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('flip horizontal sets flipX', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.drawRect(200, 200, 80, 80)
|
|
|
|
await editor.page.getByTestId('position-flip-horizontal').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const node = await getSelectedNode(editor.page)
|
|
expect(node?.flipX).toBe(true)
|
|
editor.canvas.assertNoErrors()
|
|
})
|
|
|
|
test('clip content checkbox toggles clipsContent', async () => {
|
|
await editor.canvas.clearCanvas()
|
|
await editor.canvas.pressKey('f')
|
|
await editor.canvas.drag(100, 100, 300, 300)
|
|
await editor.canvas.waitForRender()
|
|
|
|
// Enable auto-layout so the clip-content checkbox is visible
|
|
await editor.canvas.pressKey('Shift+a')
|
|
await editor.canvas.waitForRender()
|
|
|
|
const before = expectDefined(await getSelectedNode(editor.page), 'selected frame before clipping')
|
|
const initialValue = before.clipsContent
|
|
|
|
await editor.page.getByTestId('clip-content-checkbox').click()
|
|
await editor.canvas.waitForRender()
|
|
|
|
const after = await getSelectedNode(editor.page)
|
|
expect(after?.clipsContent).toBe(!initialValue)
|
|
editor.canvas.assertNoErrors()
|
|
})
|