snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/examples/e2e/tests/test-toolbar.spec.ts

@@ -0,0 +1,137 @@
+import { expect } from '@playwright/test'
+import test from '../fixtures/fixtures'
+import { getAllShapeTypes, setupOrReset } from '../shared-e2e'
+
+test.describe('when selecting a tool from the toolbar', () => {
+	test.beforeEach(setupOrReset)
+
+	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()
+		})
+	})
+})
+
+test.describe('when dragging a tool from the toolbar', () => {
+	test.beforeEach(setupOrReset)
+
+	test('dragging from main toolbar creates and positions shapes', async ({
+		page,
+		toolbar,
+		isMobile,
+	}) => {
+		if (isMobile) return
+
+		const { rectangle, arrow, text } = toolbar.tools
+
+		await test.step('dragging rectangle tool creates a rectangle', async () => {
+			const startPoint = { x: 100, y: 100 }
+			const endPoint = { x: 200, y: 200 }
+
+			// Start dragging from the rectangle tool
+			await rectangle.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a rectangle was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(1)
+			expect(shapes).toContain('geo')
+		})
+
+		await test.step('dragging arrow tool creates an arrow', async () => {
+			const startPoint = { x: 300, y: 100 }
+			const endPoint = { x: 400, y: 200 }
+
+			// Start dragging from the arrow tool
+			await arrow.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify an arrow was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(2)
+			expect(shapes).toContain('geo')
+			expect(shapes).toContain('arrow')
+		})
+
+		await test.step('dragging text tool creates editable text', async () => {
+			const startPoint = { x: 500, y: 100 }
+			const endPoint = { x: 600, y: 200 }
+
+			// Start dragging from the text tool
+			await text.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a text shape was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(3)
+			expect(shapes).toContain('geo')
+			expect(shapes).toContain('arrow')
+			expect(shapes).toContain('text')
+
+			// Verify text is in edit mode
+			const hasTextInputFocused = await page.evaluate(() => {
+				return document.activeElement?.classList.contains('tiptap')
+			})
+			expect(hasTextInputFocused).toBe(true)
+		})
+	})
+
+	test('dragging from overflow toolbar creates shapes', async ({ page, toolbar }) => {
+		// Open the overflow menu
+		await toolbar.moreToolsButton.click()
+		await expect(toolbar.moreToolsPopover).toBeVisible()
+
+		const { popoverCloud } = toolbar.popOverTools
+
+		await test.step('dragging cloud tool from overflow creates a cloud', async () => {
+			const startPoint = { x: 100, y: 100 }
+			const endPoint = { x: 200, y: 200 }
+
+			// Start dragging from the cloud tool in overflow
+			await popoverCloud.hover()
+			await page.mouse.down()
+			await page.mouse.move(startPoint.x, startPoint.y)
+			await page.mouse.move(endPoint.x, endPoint.y)
+			await page.mouse.up()
+
+			// Verify a cloud shape was created
+			const shapes = await getAllShapeTypes(page)
+			expect(shapes).toHaveLength(1)
+			expect(shapes).toContain('geo')
+		})
+	})
+})