3pp-mirror/penpot
1
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-05-10 23:36:42 +02:00
Code Issues Projects Releases Packages Wiki Activity

✨ Add test for drawing a shape in the workspace

Browse source
This commit is contained in:
Belén Albeza 2024-05-09 12:57:51 +02:00
parent e28d56e670
commit 00430d63eb
4 changed files with 35 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
frontend/playwright/data/workspace/update-file-create-rect.json Normal file
View file

@ -0,0 +1,9 @@
[
{
"~:id": "~u088df3d4-d383-80f6-8004-527e50ea4f1f",
"~:revn": 21,
"~:file-id": "~uc7ce0794-0992-8105-8004-38f280443849",
"~:session-id": "~u1dc6d4fa-7bd3-803a-8004-527dd9df2c62",
"~:changes": []
}
]

12
frontend/playwright/ui/pages/WorkspacePage.js
View file

@ -39,9 +39,11 @@ export class WorkspacePage extends BaseWebSocketPage {
constructor(page) { constructor(page) {
super(page); super(page);
// TODO: add locators
this.pageName = page.getByTestId("page-name"); this.pageName = page.getByTestId("page-name");
this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia"); this.presentUserListItems = page.getByTestId("active-users-list").getByAltText("Princesa Leia");
this.viewport = page.getByTestId("viewport");
this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`);
this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" });
} }
async goToWorkspace() { async goToWorkspace() {
@ -86,4 +88,12 @@ export class WorkspacePage extends BaseWebSocketPage {
await this.mockRPC("get-file-fragment?file-id=*", "workspace/get-file-fragment-blank.json"); await this.mockRPC("get-file-fragment?file-id=*", "workspace/get-file-fragment-blank.json");
await this.mockRPC("get-file-libraries?file-id=*", "workspace/get-file-libraries-empty.json"); await this.mockRPC("get-file-libraries?file-id=*", "workspace/get-file-libraries-empty.json");
} }
async clickWithDragViewportAt(x, y, width, height) {
await this.page.waitForTimeout(100);
await this.viewport.hover({ position: { x, y } });
await this.page.mouse.down();
await this.viewport.hover({ position: { x: x + width, y: y + height } });
await this.page.mouse.up();
}
} }

14
frontend/playwright/ui/specs/workspace.spec.js
View file

@ -24,3 +24,17 @@ test("User receives presence notifications updates in the workspace", async ({ p
await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2); await expect(page.getByTestId("active-users-list").getByAltText("Princesa Leia")).toHaveCount(2);
}); });
test("User draws a rect", async ({ page }) => {
const workspacePage = new WorkspacePage(page);
await workspacePage.setupEmptyFile();
await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json");
await workspacePage.goToWorkspace();
await workspacePage.rectShapeButton.click();
await workspacePage.clickWithDragViewportAt(128, 128, 200, 100);
const shape = await workspacePage.rootShape.locator("rect");
expect(shape).toHaveAttribute("width", "200");
expect(shape).toHaveAttribute("height", "100");
});

2
frontend/src/app/main/ui/workspace/viewport.cljs
View file

@ -276,7 +276,7 @@
(hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?) (hooks/setup-shortcuts node-editing? drawing-path? text-editing? grid-editing?)
(hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox) (hooks/setup-active-frames base-objects hover-ids selected active-frames zoom transform vbox)
[:div.viewport {:style #js {"--zoom" zoom}} [:div.viewport {:style #js {"--zoom" zoom} :data-testid "viewport"}
[:& top-bar/top-bar {:layout layout}] [:& top-bar/top-bar {:layout layout}]
[:div.viewport-overlays [:div.viewport-overlays
;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap ;; The behaviour inside a foreign object is a bit different that in plain HTML so we wrap