109 lines
3.8 KiB
TypeScript
109 lines
3.8 KiB
TypeScript
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('add variable menu creates non-color variable types', async () => {
|
|
await page.locator('[data-test-id="variables-search-input"]').fill('')
|
|
await canvas.waitForRender()
|
|
|
|
await page.locator('[data-test-id="variables-add-variable"]').click()
|
|
await page.locator('[data-test-id="variables-add-float"]').click()
|
|
await expect(page.locator('[data-test-id="variable-row"]').filter({ hasText: 'New number' })).toHaveCount(1)
|
|
|
|
await page.locator('[data-test-id="variables-add-variable"]').click()
|
|
await page.locator('[data-test-id="variables-add-string"]').click()
|
|
await expect(page.locator('[data-test-id="variable-row"]').filter({ hasText: 'New text' })).toHaveCount(1)
|
|
|
|
await page.locator('[data-test-id="variables-add-variable"]').click()
|
|
await page.locator('[data-test-id="variables-add-boolean"]').click()
|
|
await expect(page.locator('[data-test-id="variable-row"]').filter({ hasText: 'New boolean' })).toHaveCount(1)
|
|
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()
|
|
})
|