From 9702956ff4d25abe0023dd213448205e223b5195 Mon Sep 17 00:00:00 2001 From: Balint Gabor <127662+gbalint@users.noreply.github.com> Date: Thu, 11 Jan 2024 10:33:18 +0100 Subject: [PATCH] More commenting test (#4719) * More commenting test * Rename --- .../canvas/controls/comment-popup.tsx | 3 +- editor/src/utils/multiplayer-wrapper.tsx | 2 +- puppeteer-tests/package.json | 2 +- puppeteer-tests/src/comments/comment-utils.ts | 37 +++++ .../src/comments/commenting.spec.tsx | 145 ++++++++++++++++++ .../src/comments/place-comment.spec.tsx | 48 ------ puppeteer-tests/src/comments/test-utils.ts | 2 +- 7 files changed, 187 insertions(+), 52 deletions(-) create mode 100644 puppeteer-tests/src/comments/comment-utils.ts create mode 100644 puppeteer-tests/src/comments/commenting.spec.tsx delete mode 100644 puppeteer-tests/src/comments/place-comment.spec.tsx diff --git a/editor/src/components/canvas/controls/comment-popup.tsx b/editor/src/components/canvas/controls/comment-popup.tsx index 19f65f23f7de..ccdc010bac1a 100644 --- a/editor/src/components/canvas/controls/comment-popup.tsx +++ b/editor/src/components/canvas/controls/comment-popup.tsx @@ -308,6 +308,7 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => { return (
{ /> - diff --git a/editor/src/utils/multiplayer-wrapper.tsx b/editor/src/utils/multiplayer-wrapper.tsx index 54c15bf539e7..2bc93254a56a 100644 --- a/editor/src/utils/multiplayer-wrapper.tsx +++ b/editor/src/utils/multiplayer-wrapper.tsx @@ -32,7 +32,7 @@ export const CommentWrapper = React.memo( return } return ( -
+
{ + let utopiaBrowser = createUtopiaPuppeteerBrowser() + it( + 'Basic comment workflow (place, reply)', + async () => { + const page = await initSignedInBrowserTest(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 initSignedInBrowserTest(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 initSignedInBrowserTest(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 initSignedInBrowserTest(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, + ) +}) diff --git a/puppeteer-tests/src/comments/place-comment.spec.tsx b/puppeteer-tests/src/comments/place-comment.spec.tsx deleted file mode 100644 index 4654efeddcf0..000000000000 --- a/puppeteer-tests/src/comments/place-comment.spec.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import { createUtopiaPuppeteerBrowser } from './test-utils' - -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' - -describe('Comments test', () => { - let utopiaBrowser = createUtopiaPuppeteerBrowser() - - it( - 'can place a comment', - async () => { - 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 - const commentModeButton = await page.waitForSelector( - 'div[data-testid="canvas-toolbar-comment-mode-connected"]', - ) - await commentModeButton!.click() - const canvasControlsContainer = await page.waitForSelector('#new-canvas-controls-container') - await canvasControlsContainer!.click({ offset: { x: 500, y: 500 } }) - - const commentBox = await page.waitForSelector('[contenteditable="true"]') - await commentBox!.focus() - await commentBox!.type('hello comments') - await page.keyboard.press('Enter') - const thread = await page.waitForFunction( - 'document.querySelector("body").innerText.includes("hello comments")', - ) - - expect(thread).not.toBeNull() - - const commentIndicator = await page.waitForSelector('div[data-testid="comment-indicator"]') - - expect(commentIndicator).not.toBeNull() - - const resolveButton = await page.waitForSelector('div[data-testid="resolve-thread-button"]') - await resolveButton!.click() - }, - TIMEOUT, - ) -}) diff --git a/puppeteer-tests/src/comments/test-utils.ts b/puppeteer-tests/src/comments/test-utils.ts index d73a1642b23a..774f6a299f2a 100644 --- a/puppeteer-tests/src/comments/test-utils.ts +++ b/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 }