Add collaborative text edit test

playwright/src/pages/BoardPage.ts

@@ -90,6 +90,7 @@ export function BoardPage(page: Page) {
         newNoteOnPalette,
         newTextOnPalette,
         newContainerOnPalette,
+        cloneButton: page.locator(".tool.duplicate"),
         getBoardId() {
             return assertNotNull(page.url().split("/").pop())
         },

playwright/src/pages/DashboardPage.ts

@@ -11,6 +11,7 @@ export function DashboardPage(page: Page) {
     return {
         async createNewBoard(name: string) {
             await page.getByPlaceholder("Enter board name").fill(name)
+            await page.getByText("use collaborative text editor").click()
             await page.getByRole("button", { name: "Create" }).click()
             const board = BoardPage(page)
             await board.assertBoardName(name)

playwright/src/tests/collaboration.spec.ts

@@ -1,23 +1,58 @@
-import { expect, test } from "@playwright/test"
+import { Browser, Page, expect, test } from "@playwright/test"
 import { navigateToBoard, navigateToNewBoard, semiUniqueId } from "../pages/BoardPage"
 
 test.describe("Two simultaneous users", () => {
     test("two anonymous users can see each other notes", async ({ page, browser }) => {
-        const userPage = await navigateToNewBoard(page, "Collab test board")
-
-        const boardId = userPage.getBoardId()
-        const anotherUserPage = await navigateToBoard(await (await browser.newContext()).newPage(), boardId)
-
-        await userPage.userInfo.dismiss()
-        await anotherUserPage.userInfo.dismiss()
-
+        const { user1Page: userPage, user2Page } = await createBoardWithTwoUsers(page, browser)
         // create 2 notes, one on each page
         const userPageNoteText = `note-${semiUniqueId()}`
         await userPage.createNoteWithText(100, 200, userPageNoteText)
         const anotherUserPageNoteText = `another-${semiUniqueId()}`
-        await anotherUserPage.createNoteWithText(500, 200, anotherUserPageNoteText)
+        await user2Page.createNoteWithText(500, 200, anotherUserPageNoteText)
 
-        await expect(anotherUserPage.getNote(userPageNoteText)).toBeVisible()
+        await expect(user2Page.getNote(userPageNoteText)).toBeVisible()
         await expect(userPage.getNote(anotherUserPageNoteText)).toBeVisible()
     })
+
+    test("users can collaboratively edit a text area", async ({ page, browser }) => {
+        const { user1Page, user2Page } = await createBoardWithTwoUsers(page, browser)
+        await user1Page.createArea(100, 200, "initialText")
+        await test.step("Both users edit text", async () => {
+            await user1Page.getArea("initialText").dblclick()
+            await user2Page.getArea("initialText").press("ArrowDown")
+            await user1Page.getArea("initialText").pressSequentially("User1Text")
+            await user2Page.getArea("initialText").dblclick()
+            await user2Page.getArea("initialText").press("ArrowDown")
+            await user2Page.getArea("initialText").pressSequentially("User2Text")
+            await expect(user1Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
+            await expect(user2Page.getArea("initialTextUser1TextUser2Text")).toBeVisible()
+        })
+        await test.step("User 1 duplicates text area", async () => {
+            await user1Page.cloneButton.click()
+        })
+        await test.step("Text changes to new area do not affect old area", async () => {
+            const oldArea = user1Page.getArea("initialTextUser1TextUser2Text").first()
+            const newArea = user1Page.getArea("initialTextUser1TextUser2Text").last()
+            await newArea.press("Escape")
+            await user1Page.dragItem(newArea, 300, 300)
+            await newArea.dblclick()
+            await newArea.press("ArrowDown")
+            await newArea.pressSequentially("NewText")
+            await expect(newArea).toHaveText("initialTextUser1TextUser2TextNewText")
+            await expect(oldArea).toHaveText("initialTextUser1TextUser2Text")
+            await expect(user2Page.getArea("initialTextUser1TextUser2TextNewText")).toBeVisible()
+        })
+    })
+
+    async function createBoardWithTwoUsers(page: Page, browser: Browser) {
+        const user1Page = await navigateToNewBoard(page, "Collab test board")
+
+        const boardId = user1Page.getBoardId()
+        const user2Page = await navigateToBoard(await (await browser.newContext()).newPage(), boardId)
+
+        await user1Page.userInfo.dismiss()
+        await user2Page.userInfo.dismiss()
+
+        return { user1Page, user2Page, boardId }
+    }
 })