tldraw/apps/examples/e2e/tests/test-toolbar.spec.ts
Taha fcf97958e8
E2E Style Panel Tests (#2878)
This PR adds E2E tests for the style panel.

It checks that: 
- the style panel opens and closes as expected on mobile
- the style panel button is disabled for the eraser tool on mobile
- selecting a style hints the button
- changing a style changes the appearance of the shape
- It also moves a test from the toolbar tests that checks the correct
styles are exposed for the right tools


fixes tld-2222

- [x] `tests` — Changes to any test code only[^2]


### Release Notes

- Add style panel E2E tests

---------

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>
2024-02-23 14:37:15 +00:00

38 lines
1.3 KiB
TypeScript

import { expect } from '@playwright/test'
import { setup } from '../shared-e2e'
import test from './fixtures/fixtures'
test.describe('when selecting a tool from the toolbar', () => {
test.beforeEach(setup)
test('tool selection behaviors', async ({ toolbar }) => {
const { select, draw, arrow, cloud } = toolbar.tools
const { popoverCloud } = toolbar.popOverTools
await test.step('selecting a tool changes the button color', async () => {
await select.click()
await toolbar.isSelected(select)
await toolbar.isNotSelected(draw)
await draw.click()
await toolbar.isNotSelected(select)
await toolbar.isSelected(draw)
})
await test.step('selecting certain tools exposes the tool-lock button', async () => {
await draw.click()
expect(toolbar.toolLock).toBeHidden()
await arrow.click()
expect(toolbar.toolLock).toBeVisible()
})
await test.step('selecting a tool from the popover makes it appear on toolbar', async () => {
await expect(cloud).toBeHidden()
await expect(toolbar.moreToolsPopover).toBeHidden()
await toolbar.moreToolsButton.click()
await expect(toolbar.moreToolsPopover).toBeVisible()
await popoverCloud.click()
await expect(toolbar.moreToolsPopover).toBeHidden()
await expect(cloud).toBeVisible()
})
})
})