More commenting test

editor/src/components/canvas/controls/comment-popup.tsx

@@ -308,6 +308,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
 
   return (
     <div
+      data-testid='comment-popup'
       style={{
         position: 'fixed',
         top: point.y,
@@ -355,7 +356,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
                 />
               </Button>
             </Tooltip>
-            <Button onClick={onClickClose}>
+            <Button data-testid='close-comment' onClick={onClickClose}>
               <Icn category='semantic' type='cross-large' width={16} height={16} color='main' />
             </Button>
           </FlexRow>

editor/src/utils/multiplayer-wrapper.tsx

@@ -32,7 +32,7 @@ export const CommentWrapper = React.memo(
       return <Comment {...commentProps} />
     }
     return (
-      <div style={{ position: 'relative' }}>
+      <div data-testid='comment-wrapper' style={{ position: 'relative' }}>
         <MultiplayerAvatar
           name={multiplayerInitialsFromName(normalizeMultiplayerName(user.name))}
           color={multiplayerColorFromIndex(user.colorIndex)}

puppeteer-tests/package.json

@@ -7,7 +7,7 @@
     "screenshot-test": "ts-node --files src/screenshot-test.ts",
     "system-test": "ts-node --files src/system-test.ts",
     "preinstall": "npx only-allow pnpm",
-    "comments-test": "jest --config ./jest.config.js comments/place-comment.spec.ts",
+    "comments-test": "jest --config ./jest.config.js comments/commenting.spec.ts",
     "collaboration-test": "jest --config ./jest.config.js comments/collaboration-test.spec.ts",
     "build": "tsc"
   },

puppeteer-tests/src/comments/comment-utils.ts

@@ -0,0 +1,37 @@
+import type { Page } from 'puppeteer'
+import type { UtopiaPuppeteerBrowser } from './test-utils'
+
+export const TIMEOUT = 120000
+
+const BRANCH_NAME = process.env.BRANCH_NAME ? `&branch_name=${process.env.BRANCH_NAME}` : ''
+const BASE_URL = process.env.BASE_URL ?? 'http://localhost:8000'
+
+export async function init(utopiaBrowser: UtopiaPuppeteerBrowser) {
+  const { page } = await utopiaBrowser.setup({
+    url: `${BASE_URL}/p/?fakeUser=alice&Multiplayer=true${BRANCH_NAME}`,
+    timeout: TIMEOUT,
+  })
+
+  const signInButton = await page.waitForSelector('div[data-testid="sign-in-button"]')
+  await signInButton!.click()
+  await page.waitForSelector('#playground-scene') // wait for the scene to render
+
+  return page
+}
+
+export async function enterCommentMode(page: Page) {
+  const commentModeButton = await page.waitForSelector(
+    'div[data-testid="canvas-toolbar-comment-mode-connected"]',
+  )
+  await commentModeButton!.click()
+}
+
+export async function placeCommentOnCanvas(page: Page, text: string, x: number, y: number) {
+  const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+  await canvasControlsContainer!.click({ offset: { x, y } })
+
+  const commentBox = await page.waitForSelector('[contenteditable="true"]')
+  await commentBox!.focus()
+  await commentBox!.type(text)
+  await page.keyboard.press('Enter')
+}

puppeteer-tests/src/comments/commenting.spec.tsx

@@ -0,0 +1,140 @@
+import { setupBrowser, wait } from '../utils'
+import type { Browser } from 'puppeteer'
+import { TIMEOUT, enterCommentMode, init, placeCommentOnCanvas } from './comment-utils'
+import { createUtopiaPuppeteerBrowser } from './test-utils'
+
+describe('Comments test', () => {
+  let utopiaBrowser = createUtopiaPuppeteerBrowser()
+  it(
+    'Basic comment workflow (place, reply)',
+    async () => {
+      const page = await init(utopiaBrowser)
+
+      // Enter comment mode using the toolbar
+      const commentModeButton = await page.waitForSelector(
+        'div[data-testid="canvas-toolbar-comment-mode-connected"]',
+      )
+      await commentModeButton!.click()
+
+      // Click on the canvas to open the comment popup
+      const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+      await canvasControlsContainer!.click({ offset: { x: 500, y: 500 } })
+
+      // Write to comment text and submit it
+      const commentBox = await page.waitForSelector('[contenteditable="true"]')
+      await commentBox!.focus()
+      await commentBox!.type('hello comments')
+      await page.keyboard.press('Enter')
+
+      // Check if the comment text is on the screen
+      const thread = await page.waitForFunction(
+        'document.querySelector("body").innerText.includes("hello comments")',
+      )
+      expect(thread).not.toBeNull()
+
+      // Click away to close the comment popup
+      await canvasControlsContainer!.click({ offset: { x: 700, y: 700 } })
+
+      // Check if the comment indicator is still visible
+      const commentIndicator = await page.waitForSelector('div[data-testid="comment-indicator"]')
+
+      expect(commentIndicator).not.toBeNull()
+
+      // Check that the comment popup is closed
+      const popupAfterClose = await page.$$('div[data-testid="comment-popup"]')
+      expect(popupAfterClose).toHaveLength(0)
+
+      // Open the comment popup again
+      const comment = await page.waitForSelector('div[data-testid="comment-wrapper"]')
+      await comment!.click({ offset: { x: 10, y: 10 } })
+
+      // Check that the comment popup is open
+      const popupAfterReopen = await page.$$('div[data-testid="comment-popup"]')
+      expect(popupAfterReopen).toHaveLength(1)
+
+      // Submit a reply
+      const commentBox2 = await page.waitForSelector('[contenteditable="true"]')
+      await commentBox2!.focus()
+      await commentBox2!.type('this is a reply')
+      await page.keyboard.press('Enter')
+
+      // Check if the original comment and the reply comment are both on the screen
+      const originalComment = await page.waitForFunction(
+        'document.querySelector("body").innerText.includes("hello comments")',
+      )
+      expect(originalComment).not.toBeNull()
+
+      const replyComment = await page.waitForFunction(
+        'document.querySelector("body").innerText.includes("this is a reply")',
+      )
+      expect(replyComment).not.toBeNull()
+
+      // Leave comment mode by pressing ESC
+      await page.keyboard.press('Escape')
+
+      // Check that the comment popup is closed
+      const popupAfterEsc = await page.$$('div[data-testid="comment-popup"]')
+      expect(popupAfterEsc).toHaveLength(0)
+    },
+    TIMEOUT,
+  )
+  it(
+    'Placing a comment without submitting does not create a comment',
+    async () => {
+      const page = await init(utopiaBrowser)
+
+      await enterCommentMode(page)
+
+      // Clicking to add a comment
+      const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container')
+      await canvasControlsContainer!.click({ offset: { x: 500, y: 500 } })
+
+      // Pressing escape without submitting
+      await page.keyboard.press('Escape')
+
+      // There are no comment indicators on the canvas
+      const commentIndicators = await page.$$('div[data-testid="comment-indicator"]')
+      expect(commentIndicators).toHaveLength(0)
+    },
+    TIMEOUT,
+  )
+  it(
+    'Resolve comment',
+    async () => {
+      const page = await init(utopiaBrowser)
+
+      await enterCommentMode(page)
+      await placeCommentOnCanvas(page, 'hello comments', 500, 500)
+
+      // Resolve the comment
+
+      const resolveButton = await page.waitForSelector('div[data-testid="resolve-thread-button"]')
+      await resolveButton!.click()
+
+      // Check that the comment indicator is gone
+      const commentIndicators = await page.$$('div[data-testid="comment-indicator"]')
+      expect(commentIndicators).toHaveLength(0)
+    },
+    TIMEOUT,
+  )
+  it(
+    'Close comment popup with the mouse',
+    async () => {
+      const page = await init(utopiaBrowser)
+
+      await enterCommentMode(page)
+      await placeCommentOnCanvas(page, 'hello comments', 500, 500)
+
+      const closeCommentButton = await page.waitForSelector('div[data-testid="close-comment"]')
+      await closeCommentButton!.click()
+
+      // Check that the comment popup is closed but the indicator is still there
+      const commentPopups = await page.$$('div[data-testid="comment-popup"]')
+      expect(commentPopups).toHaveLength(0)
+
+      const commentIndicators = await page.$$('div[data-testid="comment-indicator"]')
+      expect(commentIndicators).toHaveLength(1)
+    },
+    TIMEOUT,
+  )
+})

puppeteer-tests/src/comments/test-utils.ts

@@ -6,7 +6,7 @@ export interface UtopiaPuppeteerBrowserOptions {
   timeout: number
 }
 
-interface UtopiaPuppeteerBrowser {
+export interface UtopiaPuppeteerBrowser {
   setup: (options: UtopiaPuppeteerBrowserOptions) => Promise<BrowserForPuppeteerTest>
 }