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
178 lines
5.5 KiB
TypeScript
178 lines
5.5 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
import { getAllShapeTypes, setup } from '../shared-e2e'
|
|
import test from './fixtures/fixtures'
|
|
|
|
export function sleep(ms: number) {
|
|
return new Promise((resolve) => setTimeout(resolve, ms))
|
|
}
|
|
|
|
const clickableShapeCreators = [
|
|
{ tool: 'draw', shape: 'draw' },
|
|
{ tool: 'frame', shape: 'frame' },
|
|
{ tool: 'note', shape: 'note' },
|
|
{ tool: 'text', shape: 'text' },
|
|
{ tool: 'rectangle', shape: 'geo' },
|
|
{ tool: 'ellipse', shape: 'geo' },
|
|
{ tool: 'triangle', shape: 'geo' },
|
|
{ tool: 'diamond', shape: 'geo' },
|
|
{ tool: 'cloud', shape: 'geo' },
|
|
{ tool: 'hexagon', shape: 'geo' },
|
|
// { tool: 'octagon', shape: 'geo' },
|
|
{ tool: 'star', shape: 'geo' },
|
|
{ tool: 'rhombus', shape: 'geo' },
|
|
{ tool: 'oval', shape: 'geo' },
|
|
{ tool: 'trapezoid', shape: 'geo' },
|
|
{ tool: 'arrow-right', shape: 'geo' },
|
|
{ tool: 'arrow-left', shape: 'geo' },
|
|
{ tool: 'arrow-up', shape: 'geo' },
|
|
{ tool: 'arrow-down', shape: 'geo' },
|
|
{ tool: 'x-box', shape: 'geo' },
|
|
{ tool: 'check-box', shape: 'geo' },
|
|
]
|
|
|
|
const draggableShapeCreators = [
|
|
{ tool: 'draw', shape: 'draw' },
|
|
{ tool: 'arrow', shape: 'arrow' },
|
|
{ tool: 'frame', shape: 'frame' },
|
|
{ tool: 'note', shape: 'note' },
|
|
{ tool: 'text', shape: 'text' },
|
|
{ tool: 'line', shape: 'line' },
|
|
{ tool: 'rectangle', shape: 'geo' },
|
|
{ tool: 'ellipse', shape: 'geo' },
|
|
{ tool: 'triangle', shape: 'geo' },
|
|
{ tool: 'diamond', shape: 'geo' },
|
|
{ tool: 'cloud', shape: 'geo' },
|
|
{ tool: 'hexagon', shape: 'geo' },
|
|
// { tool: 'octagon', shape: 'geo' },
|
|
{ tool: 'star', shape: 'geo' },
|
|
{ tool: 'rhombus', shape: 'geo' },
|
|
{ tool: 'oval', shape: 'geo' },
|
|
{ tool: 'trapezoid', shape: 'geo' },
|
|
{ tool: 'arrow-right', shape: 'geo' },
|
|
{ tool: 'arrow-left', shape: 'geo' },
|
|
{ tool: 'arrow-up', shape: 'geo' },
|
|
{ tool: 'arrow-down', shape: 'geo' },
|
|
{ tool: 'x-box', shape: 'geo' },
|
|
{ tool: 'check-box', shape: 'geo' },
|
|
]
|
|
|
|
const otherTools = [{ tool: 'select' }, { tool: 'eraser' }, { tool: 'laser' }]
|
|
|
|
test.describe('Shape Tools', () => {
|
|
test.beforeEach(setup)
|
|
test('creates shapes with other tools', async ({ toolbar, page }) => {
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
|
|
for (const { tool } of otherTools) {
|
|
// Find and click the button
|
|
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
|
if (!(await toolbar.moreToolsButton.isVisible())) {
|
|
throw Error(`Tool more is not visible`)
|
|
}
|
|
await toolbar.moreToolsButton.click()
|
|
|
|
if (!(await page.getByTestId(`tools.more.${tool}`).isVisible())) {
|
|
throw Error(`Tool in more panel is not visible`)
|
|
}
|
|
await page.getByTestId(`tools.more.${tool}`).click()
|
|
|
|
await toolbar.moreToolsButton.click()
|
|
}
|
|
|
|
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
|
throw Error(`Tool ${tool} is not visible`)
|
|
}
|
|
|
|
await page.getByTestId(`tools.${tool}`).click()
|
|
|
|
// Button should be selected
|
|
expect(
|
|
await page
|
|
.getByTestId(`tools.${tool}`)
|
|
.elementHandle()
|
|
.then((d) => d?.getAttribute('data-state'))
|
|
).toBe('selected')
|
|
}
|
|
})
|
|
|
|
test('creates shapes clickable tools', async ({ page, toolbar }) => {
|
|
await page.keyboard.press('v')
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
|
|
for (const { tool, shape } of clickableShapeCreators) {
|
|
// Find and click the button
|
|
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
|
await toolbar.moreToolsButton.click()
|
|
await page.getByTestId(`tools.more.${tool}`).click()
|
|
await toolbar.moreToolsButton.click()
|
|
}
|
|
await page.getByTestId(`tools.${tool}`).click()
|
|
|
|
// Button should be selected
|
|
expect(
|
|
await page
|
|
.getByTestId(`tools.${tool}`)
|
|
.elementHandle()
|
|
.then((d) => d?.getAttribute('data-state'))
|
|
).toBe('selected')
|
|
|
|
// Click on the page
|
|
await page.mouse.click(200, 200)
|
|
|
|
// We should have a corresponding shape in the page
|
|
expect(await getAllShapeTypes(page)).toEqual([shape])
|
|
|
|
// Reset for next time
|
|
await page.mouse.click(50, 50) // to ensure we're not focused
|
|
await page.keyboard.press('v') // go to the select tool
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
}
|
|
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
})
|
|
|
|
test('creates shapes with draggable tools', async ({ page, toolbar }) => {
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
|
|
for (const { tool, shape } of draggableShapeCreators) {
|
|
// Find and click the button
|
|
if (!(await page.getByTestId(`tools.${tool}`).isVisible())) {
|
|
await toolbar.moreToolsButton.click()
|
|
await page.getByTestId(`tools.more.${tool}`).click()
|
|
await toolbar.moreToolsButton.click()
|
|
}
|
|
|
|
await page.getByTestId(`tools.${tool}`).click()
|
|
|
|
// Button should be selected
|
|
expect(
|
|
await page
|
|
.getByTestId(`tools.${tool}`)
|
|
.elementHandle()
|
|
.then((d) => d?.getAttribute('data-state'))
|
|
).toBe('selected')
|
|
|
|
// Click and drag
|
|
await page.mouse.move(200, 200)
|
|
await page.mouse.down()
|
|
await page.mouse.move(250, 250)
|
|
await page.mouse.up()
|
|
|
|
// We should have a corresponding shape in the page
|
|
expect(await getAllShapeTypes(page)).toEqual([shape])
|
|
|
|
// Reset for next time
|
|
await page.mouse.click(50, 50) // to ensure we're not focused
|
|
await page.keyboard.press('v')
|
|
await page.keyboard.press('Control+a')
|
|
await page.keyboard.press('Backspace')
|
|
}
|
|
})
|
|
})
|