3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-07-05 17:17:18 +02:00
Code Issues Projects Releases Packages 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
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 299 additions and 46 deletions
Download patch file Download diff file Expand all files Collapse all files

58
frontend/playwright/data/workspace/get-comment-threads-unread.json Normal file
View file

@ -0,0 +1,58 @@
[
{
"~:page-name":"Page 1",
"~:file-id":"~ud192fd06-a3e6-80d5-8004-7b7aaaea2a23",
"~:participants":{
"~#set":[
"~u0515a066-e303-8169-8004-73eb4018f4e0"
]
},
"~:content":"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacus tellus, pretium id dapibus in, suscipit eu magna. Duis rhoncus, nisl quis accumsan euismod, dolor ipsum bibendum enim, et varius turpis erat ut purus.",
"~:count-unread-comments":1,
"~:count-comments":1,
"~:modified-at":"~m1718001240857",
"~:page-id":"~udd5cc0bb-91ff-81b9-8004-77df9cd3edb2",
"~:id": "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb1",
"~:file-name":"New File 3",
"~:seqn":1,
"~:is-resolved":false,
"~:owner-id":"~u2e2da0fa-2d3e-81ec-8003-cb4453324510",
"~:position":{
"~#point":{
"~:x":120.0,
"~:y":120.0
}
},
"~:frame-id": "~uec508673-9e3b-80bf-8004-77dfa30a2b13",
"~:project-id": "~u0515a066-e303-8169-8004-73eb401b5d55",
"~:created-at":"~m1718001240857"
},
{
"~:page-name":"Page 1",
"~:file-id":"~ud192fd06-a3e6-80d5-8004-7b7aaaea2a23",
"~:participants":{
"~#set":[
"~u0515a066-e303-8169-8004-73eb4018f4e0"
]
},
"~:content":"Duis lobortis ultricies lectus, in tristique tortor. Praesent mauris mi, finibus vel imperdiet quis, congue vel erat. Sed pharetra et ipsum at vestibulum.",
"~:count-unread-comments":0,
"~:count-comments":1,
"~:modified-at":"~m1718001247587",
"~:page-id":"~udd5cc0bb-91ff-81b9-8004-77df9cd3edb2",
"~:id":"~ud192fd06-a3e6-80d5-8004-7b7ac25ac93a",
"~:file-name":"New File 44",
"~:seqn":2,
"~:is-resolved":false,
"~:owner-id":"~u2e2da0fa-2d3e-81ec-8003-cb4453324510",
"~:position":{
"~#point":{
"~:x":160.0,
"~:y":160.0
}
},
"~:frame-id": "~uec508673-9e3b-80bf-8004-77dfa30a2b13",
"~:project-id":"~u343837a3-0d75-808a-8004-659df7b7873e",
"~:created-at":"~m1718001247587"
}
]

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/,
);
});