b6ebe1e274
This PR: - improves the quick actions bar, enabling undo / redo actions when the eraser is selected. - for actions that effect selected shapes, calling the action when the select tool is not selected will select the select tool and run the action - actions that effect selected shapes are hidden from the menu when the select tool is not selected ### Change Type - [x] `major` ### Test Plan 1. Select the eraser tool, the undo / redo buttons should still be there. 1. Select two shapes 2. Select the draw tool 3. The menu should not display most options, e.g. cut or paste, but should display undo / redo 4. Press Shift+H 5. The shapes should not move, but the select tool should be selected again ### Release Notes - Improve the menu / kbds behavior when select tool is not active
86 lines
2.7 KiB
TypeScript
86 lines
2.7 KiB
TypeScript
import { PlaywrightTestArgs, PlaywrightWorkerArgs } from '@playwright/test'
|
|
import { Editor } from '@tldraw/tldraw'
|
|
|
|
export function sleep(ms: number) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms))
|
|
}
|
|
|
|
// export async function expectPathToBe(page: Page, path: string) {
|
|
// expect(await page.evaluate(() => editor.root.path.value)).toBe(path)
|
|
// }
|
|
|
|
// export async function expectToHaveNShapes(page: Page, numberOfShapes: number) {
|
|
// expect(await page.evaluate(() => editor.currentPageShapes.length)).toBe(numberOfShapes)
|
|
// }
|
|
|
|
// export async function expectToHaveNSelectedShapes(page: Page, numberOfSelectedShapes: number) {
|
|
// expect(await page.evaluate(() => editor.selectedShapeIds.length)).toBe(numberOfSelectedShapes)
|
|
// }
|
|
|
|
declare const editor: Editor
|
|
|
|
export async function setup({ page }: PlaywrightTestArgs & PlaywrightWorkerArgs) {
|
|
await setupPage(page)
|
|
}
|
|
|
|
export async function setupWithShapes({ page }: PlaywrightTestArgs & PlaywrightWorkerArgs) {
|
|
await setupPage(page)
|
|
await setupPageWithShapes(page)
|
|
}
|
|
|
|
export async function cleanup({ page }: PlaywrightTestArgs) {
|
|
await cleanupPage(page)
|
|
}
|
|
|
|
export async function setupPage(page: PlaywrightTestArgs['page']) {
|
|
await page.goto('http://localhost:5420/end-to-end')
|
|
await page.waitForSelector('.tl-canvas')
|
|
await page.evaluate(() => {
|
|
editor.user.updateUserPreferences({ animationSpeed: 0 })
|
|
})
|
|
}
|
|
|
|
export async function setupPageWithShapes(page: PlaywrightTestArgs['page']) {
|
|
// delete everything
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
|
|
// create shapes
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(200, 200)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(200, 250)
|
|
await page.keyboard.press('r')
|
|
await page.mouse.click(250, 300)
|
|
|
|
// deselect everything
|
|
await page.evaluate(() => editor.selectNone())
|
|
}
|
|
|
|
export async function cleanupPage(page: PlaywrightTestArgs['page']) {
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Delete')
|
|
}
|
|
|
|
export async function getAllShapeLabels(page: PlaywrightTestArgs['page']) {
|
|
return await page
|
|
.locator('.tl-shapes')
|
|
.first()
|
|
.evaluate((e) => {
|
|
const labels: { index: string; label: string }[] = []
|
|
for (const child of e.children) {
|
|
const index = (child as HTMLDivElement).style.zIndex
|
|
const label = child.querySelector('.tl-text-content') as HTMLDivElement
|
|
labels.push({ index, label: label.innerText })
|
|
}
|
|
labels.sort((a, b) => (a.index > b.index ? 1 : -1))
|
|
return labels.map((l) => l.label)
|
|
})
|
|
}
|
|
|
|
export async function getAllShapeTypes(page: PlaywrightTestArgs['page']) {
|
|
return await page
|
|
.locator('.tl-shape')
|
|
.elementHandles()
|
|
.then((handles) => Promise.all(handles.map((h) => h.getAttribute('data-shape-type'))))
|
|
}
|