7e673b5e37
This PR adds some e2e tests for the toolbar. Fixtures have been set up for the toolbar and style panel, and are fairly barebones at the moment. Eventually each menu should have a fixture associated with it, and all tests will use the class defined in the fixtures file. ### Change Type - [x] `tests` — Changes to any test code only[^2] ### Release Notes - Add e2e tests for the toolbar
130 lines
4.5 KiB
TypeScript
130 lines
4.5 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
import { Editor, TLGeoShape } from '@tldraw/tldraw'
|
|
import { getAllShapeTypes, setup } from '../shared-e2e'
|
|
import test from './fixtures/fixtures'
|
|
|
|
export function sleep(ms: number) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms))
|
|
}
|
|
|
|
declare const editor: Editor
|
|
|
|
test.describe('smoke tests', () => {
|
|
test.beforeEach(setup)
|
|
|
|
test('create a shape on the canvas', async ({ page }) => {
|
|
await page.keyboard.press('r')
|
|
await page.mouse.move(10, 50)
|
|
await page.mouse.down()
|
|
await page.mouse.up()
|
|
await page.keyboard.press('r')
|
|
await page.mouse.move(10, 250)
|
|
await page.mouse.down()
|
|
await page.mouse.move(100, 350)
|
|
await page.mouse.up()
|
|
expect(await getAllShapeTypes(page)).toEqual(['geo', 'geo'])
|
|
})
|
|
|
|
test('undo and redo', async ({ page }) => {
|
|
// buttons should be disabled when there is no history
|
|
expect(page.getByTestId('quick-actions.undo')).toBeDisabled()
|
|
expect(page.getByTestId('quick-actions.redo')).toBeDisabled()
|
|
|
|
// create a shape
|
|
await page.keyboard.press('r')
|
|
await page.mouse.move(100, 100)
|
|
await page.mouse.down()
|
|
await page.mouse.move(200, 200)
|
|
await page.mouse.up()
|
|
|
|
expect(await getAllShapeTypes(page)).toEqual(['geo'])
|
|
|
|
// We should have an undoable shape
|
|
expect(page.getByTestId('quick-actions.undo')).not.toBeDisabled()
|
|
expect(page.getByTestId('quick-actions.redo')).toBeDisabled()
|
|
|
|
// Click the undo button to undo the shape
|
|
await page.getByTestId('quick-actions.undo').click()
|
|
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
expect(page.getByTestId('quick-actions.undo')).toBeDisabled()
|
|
expect(page.getByTestId('quick-actions.redo')).not.toBeDisabled()
|
|
|
|
// Click the redo button to redo the shape
|
|
await page.getByTestId('quick-actions.redo').click()
|
|
|
|
expect(await getAllShapeTypes(page)).toEqual(['geo'])
|
|
expect(await page.getByTestId('quick-actions.undo').isDisabled()).not.toBe(true)
|
|
expect(await page.getByTestId('quick-actions.redo').isDisabled()).toBe(true)
|
|
})
|
|
|
|
test('style panel + undo and redo squashing', async ({ page, toolbar }) => {
|
|
await page.keyboard.press('r')
|
|
await page.mouse.move(100, 100)
|
|
await page.mouse.down()
|
|
await page.mouse.up()
|
|
expect(await getAllShapeTypes(page)).toEqual(['geo'])
|
|
|
|
const getSelectedShapeColor = async () =>
|
|
await page.evaluate(() => (editor.getSelectedShapes()[0] as TLGeoShape).props.color)
|
|
|
|
// change style
|
|
expect(await getSelectedShapeColor()).toBe('black')
|
|
|
|
// when on a mobile device...
|
|
const hasMobileMenu = await toolbar.mobileStylesButton.isVisible()
|
|
|
|
if (hasMobileMenu) {
|
|
// open the style menu
|
|
await toolbar.mobileStylesButton.click()
|
|
}
|
|
|
|
// Click the light-blue color
|
|
await page.getByTestId('style.color.light-blue').click()
|
|
expect(await getSelectedShapeColor()).toBe('light-blue')
|
|
|
|
// now drag from blue to orange; the color should change as we drag
|
|
// but when we undo, we should ignore the colors which were changed
|
|
// before the final color was chosen; i.e. the history should think
|
|
// the color went from black to light blue to orange, though the shape
|
|
// actually changed from black to light blue to blue to light blue to
|
|
// yellow and then to orange.
|
|
|
|
// start a pointer down over the blue color button
|
|
await page.getByTestId('style.color.blue').hover()
|
|
await page.mouse.down()
|
|
expect(await getSelectedShapeColor()).toBe('blue')
|
|
|
|
// now move across to the other colors before releasing
|
|
await page.getByTestId('style.color.light-blue').hover()
|
|
expect(await getSelectedShapeColor()).toBe('light-blue')
|
|
|
|
await page.getByTestId('style.color.yellow').hover()
|
|
expect(await getSelectedShapeColor()).toBe('yellow')
|
|
|
|
await page.getByTestId('style.color.orange').hover()
|
|
expect(await getSelectedShapeColor()).toBe('orange')
|
|
|
|
await page.mouse.up()
|
|
|
|
// Now undo and redo
|
|
const undo = page.getByTestId('quick-actions.undo')
|
|
const redo = page.getByTestId('quick-actions.redo')
|
|
|
|
await undo.click() // orange -> light blue
|
|
expect(await getSelectedShapeColor()).toBe('light-blue') // skipping squashed colors!
|
|
|
|
await redo.click() // light blue -> orange
|
|
expect(await getSelectedShapeColor()).toBe('orange') // skipping squashed colors!
|
|
|
|
await undo.click() // orange -> light blue
|
|
await undo.click() // light blue -> black
|
|
expect(await getSelectedShapeColor()).toBe('black')
|
|
|
|
await redo.click() // black -> light blue
|
|
await redo.click() // light-blue -> orange
|
|
|
|
expect(await page.getByTestId('quick-actions.undo').isDisabled()).not.toBe(true)
|
|
expect(await page.getByTestId('quick-actions.redo').isDisabled()).toBe(true)
|
|
})
|
|
})
|