a774ac673a
Some checks failed
Deploy analytics worker / Deploy analytics worker to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
i18n upload strings / Upload latest strings (push) Failing after 1s
Deploy bemo / Deploy bemo to ${{ (github.ref == 'refs/heads/bemo-production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Failing after 1s
Deploy grafana resources / ${{ github.event_name == 'push' && 'Deploy grafana resources' || 'Validate grafana resources (dry run)' }} (push) Failing after 0s
End to end tests (dotcom) / Check for relevant changes (push) Failing after 0s
End to end tests (examples) / Check for relevant changes (push) Failing after 0s
End to end tests (mermaid readability) / Check for relevant changes (push) Failing after 1s
End to end tests (perf) / Check for relevant changes (push) Failing after 0s
Publish editor extensions / Publish editor extensions (push) Failing after 1s
Publish SDK packages / Remove the publish-packages label (push) Has been skipped
Checks / Tests & checks (push) Has been cancelled
Checks / Build all projects (push) Has been cancelled
Deploy templates / Deploy templates (push) Has been cancelled
End to end tests (dotcom) / End to end tests (dotcom) (push) Has been cancelled
End to end tests (mermaid readability) / End to end tests (mermaid readability) (push) Has been cancelled
End to end tests (perf) / End to end tests (perf) (push) Has been cancelled
Deploy .com / Deploy dotcom to ${{ (github.ref == 'refs/heads/production' && 'production') || (github.ref == 'refs/heads/main' && 'staging') || 'preview' }} (push) Has been cancelled
End to end tests (examples) / End to end tests (examples) (push) Has been cancelled
Publish SDK packages / Publish SDK packages (push) Has been cancelled
Publish SDK packages / Tell user released version (push) Has been cancelled
Publish SDK packages / Publishes code templates to separate repositories (push) Has been cancelled
Publish SDK packages / Deploys the template demos with the new SDK version (push) Has been cancelled
159 lines
5.0 KiB
TypeScript
159 lines
5.0 KiB
TypeScript
import { expect } from '@playwright/test'
|
|
import { Editor } from 'tldraw'
|
|
import test from '../fixtures/fixtures'
|
|
import { getAllShapeTypes, setupOrReset } from '../shared-e2e'
|
|
|
|
declare const editor: Editor
|
|
|
|
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: 'heart', 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: 'heart', 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(setupOrReset)
|
|
|
|
test('creates shapes with other tools', async ({ toolbar, page }) => {
|
|
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
|
|
await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')
|
|
}
|
|
})
|
|
|
|
test('creates shapes clickable tools', async ({ page, toolbar }) => {
|
|
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
|
|
await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')
|
|
|
|
// 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 using API (faster than keyboard)
|
|
await page.evaluate(() => {
|
|
editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
|
|
editor.setCurrentTool('select')
|
|
})
|
|
}
|
|
|
|
expect(await getAllShapeTypes(page)).toEqual([])
|
|
})
|
|
|
|
test('creates shapes with draggable tools', async ({ page, toolbar }) => {
|
|
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
|
|
await expect(page.getByTestId(`tools.${tool}`)).toHaveAttribute('aria-pressed', 'true')
|
|
|
|
// 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 using API (faster than keyboard)
|
|
await page.evaluate(() => {
|
|
editor.selectAll().deleteShapes(editor.getSelectedShapeIds())
|
|
editor.setCurrentTool('select')
|
|
})
|
|
}
|
|
})
|
|
})
|