johanels/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-12-12 06:24:17 +01:00
Code Issues Actions 9 Packages Projects Releases Wiki Activity

✨ Replace overlapping bubbles with a bubble group (#6059)

Browse Source
This commit is contained in:
luisδμ
2025-03-12 14:37:39 +01:00
committed by GitHub
parent 0efbebd94f
commit 86022a967c
9 changed files with 299 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/playwright/ui/pages/WorkspacePage.js
View File

@@ -171,6 +171,25 @@ export class WorkspacePage extends BaseWebSocketPage {
);
}
async setupFileWithComments() {
await this.mockRPC(
"get-comment-threads?file-id=*",
"workspace/get-comment-threads-unread.json",
);
await this.mockRPC(
"get-file-fragment?file-id=*&fragment-id=*",
"viewer/get-file-fragment-single-board.json",
);
await this.mockRPC(
"get-comments?thread-id=*",
"workspace/get-thread-comments.json",
);
await this.mockRPC(
"update-comment-thread-status",
"workspace/update-comment-thread-status.json",
);
}
async clickWithDragViewportAt(x, y, width, height) {
await this.page.waitForTimeout(100);
await this.viewport.hover({ position: { x, y } });
@@ -266,4 +285,10 @@ export class WorkspacePage extends BaseWebSocketPage {
await this.tokenThemesSetsSidebar.getByText("Edit").click(clickOptions);
await expect(this.tokenThemeUpdateCreateModal).toBeVisible();
}
async showComments(clickOptions = {}) {
await this.page
.getByRole("button", { name: "Comments (C)" })
.click(clickOptions);
}
}

37
frontend/playwright/ui/specs/workspace-comments.spec.js Normal file
View File

@@ -0,0 +1,37 @@
import { test, expect } from "@playwright/test";
import { WorkspacePage } from "../pages/WorkspacePage";
test.beforeEach(async ({ page }) => {
await WorkspacePage.init(page);
});
test("Group bubbles when zooming out if they overlap", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.setupFileWithComments();
await workspacePage.goToWorkspace();
await workspacePage.showComments();
await expect(page.getByTestId("floating-thread-bubble-1")).toBeVisible();
await expect(page.getByTestId("floating-thread-bubble-2")).toBeVisible();
await expect(page.getByTestId("floating-thread-bubble-1-2")).toBeHidden();
const zoom = page.getByTitle("Zoom");
await zoom.click();
const zoomOut = page.getByTitle("Zoom out");
await zoomOut.click();
await zoomOut.click();
await zoomOut.click();
await zoomOut.click();
await expect(page.getByTestId("floating-thread-bubble-1")).toBeHidden();
await expect(page.getByTestId("floating-thread-bubble-2")).toBeHidden();
await expect(page.getByTestId("floating-thread-bubble-1-2")).toBeVisible();
await expect(page.getByTestId("floating-thread-bubble-1-2")).toHaveClass(
/unread/,
);
});