Merge pull request #6573 from logseq/enhance/whiteboards-tests

e2e-tests/whiteboards.spec.ts

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test'
+import { test } from './fixtures'
+
+test('enable whiteboards', async ({ page }) => {
+    await page.click('#head .toolbar-dots-btn')
+    await page.click('#head .dropdown-wrapper .ti-settings')
+    await page.click('.settings-modal a[data-id=features]')
+    await page.click('text=Whiteboards >> .. >> .ui__toggle')
+    await page.keyboard.press('Escape')
+    await expect(page.locator('.nav-header .whiteboard')).toBeVisible()
+})
+
+test('create new whiteboard', async ({ page }) => {
+    await page.click('.nav-header .whiteboard')
+    await page.click('#tl-create-whiteboard')
+    await expect(page.locator('.logseq-tldraw')).toBeVisible()
+})
+
+test('set whiteboard title', async ({ page }) => {
+    const title = "my-whiteboard"
+    await page.click('.whiteboard-page-title')
+    await page.type('.whiteboard-page-title .title', title)
+    await page.keyboard.press('Enter')
+    await expect(page.locator('.whiteboard-page-title .title')).toContainText(title);
+})
+
+test('select rectangle tool', async ({ page }) => {
+    await page.keyboard.press('R')
+    await expect(page.locator('.tl-geometry-tools-pane-anchor [title="Rectangle (r)"]')).toHaveAttribute('data-selected', 'true')
+})
+
+test('draw a rectangle', async ({ page }) => {
+    const canvas = await page.waitForSelector('.logseq-tldraw');
+    const bounds = (await canvas.boundingBox())!;
+
+    await page.keyboard.press('R')
+
+    await page.mouse.move(bounds.x, bounds.y);
+    await page.mouse.down();
+
+    await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + bounds.height / 2);
+    await page.mouse.up();
+
+    await expect(page.locator('.logseq-tldraw .tl-positioned-svg rect')).not.toHaveCount(0);
+})
+
+test('zoom in', async ({ page }) => {
+    await page.click('#tl-zoom-in')
+    await expect(page.locator('#tl-zoom')).toContainText('125%');
+})
+
+test('zoom out', async ({ page }) => {
+    await page.click('#tl-zoom-out')
+    await expect(page.locator('#tl-zoom')).toContainText('100%');
+})
+
+test('open context menu', async ({ page }) => {
+    await page.locator('.logseq-tldraw').click({button: "right"})
+    await expect(page.locator('.tl-context-menu')).toBeVisible()
+})
+
+test('close context menu on esc', async ({ page }) => {
+    await page.keyboard.press('Escape')
+    await expect(page.locator('.tl-context-menu')).toBeHidden()
+})

src/main/frontend/components/whiteboard.cljs

@@ -120,7 +120,7 @@
 
 (rum/defc dashboard-create-card
   []
-  [:div.dashboard-card.dashboard-create-card.cursor-pointer
+  [:div.dashboard-card.dashboard-create-card.cursor-pointer#tl-create-whiteboard
    {:on-click
     (fn [e]
       (util/stop e)

tldraw/apps/tldraw-logseq/src/components/ActionBar/ActionBar.tsx

@@ -37,10 +37,10 @@ export const ActionBar = observer(function ActionBar(): JSX.Element {
       </div>
 
       <div className="tl-zoom-bar">
-        <button title="Zoom in" onClick={zoomIn}>
+        <button title="Zoom in" onClick={zoomIn} id="tl-zoom-in">
           <TablerIcon name="plus" />
         </button>
-        <button title="Zoom out" onClick={zoomOut}>
+        <button title="Zoom out" onClick={zoomOut} id="tl-zoom-out">
           <TablerIcon name="minus" />
         </button>
         <ZoomMenu />

tldraw/apps/tldraw-logseq/src/components/ZoomMenu/ZoomMenu.tsx

@@ -11,7 +11,7 @@ export const ZoomMenu = observer(function ZoomMenu(): JSX.Element {
 
   return (
     <DropdownMenuPrimitive.Root>
-      <DropdownMenuPrimitive.Trigger>
+      <DropdownMenuPrimitive.Trigger id="tl-zoom">
         {(app.viewport.camera.zoom * 100).toFixed(0) + '%'}
       </DropdownMenuPrimitive.Trigger>
       <DropdownMenuPrimitive.Content