112 lines
2.9 KiB
TypeScript
112 lines
2.9 KiB
TypeScript
import { expect, test, type Page } from '@playwright/test'
|
|
|
|
import { CanvasHelper } from '#tests/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()
|
|
})
|
|
|
|
function codeTab() {
|
|
return page.getByTestId('properties-tab-code')
|
|
}
|
|
|
|
function designTab() {
|
|
return page.getByTestId('properties-tab-design')
|
|
}
|
|
|
|
function codePanel() {
|
|
return page.getByTestId('code-panel')
|
|
}
|
|
|
|
function codePanelEmpty() {
|
|
return page.getByTestId('code-panel-empty')
|
|
}
|
|
|
|
function formatToggle() {
|
|
return page.getByTestId('code-panel-format-toggle')
|
|
}
|
|
|
|
function copyButton() {
|
|
return page.getByTestId('code-panel-copy')
|
|
}
|
|
|
|
test('Code tab shows empty state with no selection', async () => {
|
|
await codeTab().click()
|
|
await expect(codePanelEmpty()).toBeVisible()
|
|
await expect(codePanelEmpty()).toContainText('Select a layer')
|
|
})
|
|
|
|
test('selecting a rectangle shows JSX code', async () => {
|
|
await canvas.drawRect(100, 100, 200, 150)
|
|
await canvas.waitForRender()
|
|
|
|
await expect(codePanel()).toBeVisible()
|
|
|
|
const code = await codePanel().textContent()
|
|
expect(code).toContain('Rectangle')
|
|
})
|
|
|
|
test('format toggle switches between OpenPencil and Tailwind', async () => {
|
|
await expect(formatToggle()).toBeVisible()
|
|
|
|
const initialFormat = await formatToggle().textContent()
|
|
expect(initialFormat).toContain('OpenPencil')
|
|
|
|
await formatToggle().click()
|
|
await expect(formatToggle()).toContainText('Tailwind')
|
|
|
|
const code = await codePanel().textContent()
|
|
expect(code).toContain('div')
|
|
|
|
await formatToggle().click()
|
|
await expect(formatToggle()).toContainText('OpenPencil')
|
|
})
|
|
|
|
test('copy button works and shows confirmation', async () => {
|
|
await copyButton().click()
|
|
|
|
await expect(copyButton()).toContainText('Copied')
|
|
|
|
await page.waitForTimeout(2500)
|
|
await expect(copyButton()).toContainText('Copy')
|
|
})
|
|
|
|
test('deselecting shows empty state again', async () => {
|
|
await page.keyboard.press('Escape')
|
|
await canvas.waitForRender()
|
|
|
|
await expect(codePanelEmpty()).toBeVisible()
|
|
})
|
|
|
|
test('selecting a frame shows Frame in JSX', async () => {
|
|
// Create a frame via store to avoid click-targeting issues
|
|
await page.evaluate(() => {
|
|
const store = window.openPencil?.getStore?.()
|
|
if (!store) throw new Error('OpenPencil store not initialized')
|
|
const id = store.createShape('FRAME', 300, 100, 200, 200)
|
|
store.select([id])
|
|
})
|
|
await canvas.waitForRender()
|
|
|
|
const code = await codePanel().textContent()
|
|
expect(code).toContain('Frame')
|
|
})
|
|
|
|
test('switching back to Design tab works', async () => {
|
|
await designTab().click()
|
|
|
|
await expect(page.getByTestId('design-panel-single').or(page.getByTestId('design-panel-empty')).first()).toBeVisible()
|
|
})
|