From f363d6a8016b9d3e1e65fed00f38844bc7f48060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Wed, 3 Sep 2025 16:33:51 +0200 Subject: [PATCH] :sparkles: Add integration test for Flatten menu option --- .../data/workspace/get-file-8371.json | 483 ++++++++++++++++++ frontend/playwright/ui/pages/WorkspacePage.js | 1 + .../playwright/ui/specs/workspace.spec.js | 28 + .../app/main/ui/workspace/context_menu.cljs | 1 + 4 files changed, 513 insertions(+) create mode 100644 frontend/playwright/data/workspace/get-file-8371.json diff --git a/frontend/playwright/data/workspace/get-file-8371.json b/frontend/playwright/data/workspace/get-file-8371.json new file mode 100644 index 0000000000..f55a886d76 --- /dev/null +++ b/frontend/playwright/data/workspace/get-file-8371.json @@ -0,0 +1,483 @@ +{ + "~:features": { + "~#set": [ + "fdata/path-data", + "plugins/runtime", + "design-tokens/v1", + "variants/v1", + "layout/grid", + "styles/v2", + "fdata/pointer-map", + "fdata/objects-map", + "render-wasm/v1", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:team-id": "~u9e6e22b2-db76-81d6-8006-75d7cdbb8bad", + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "New File 5", + "~:revn": 2, + "~:modified-at": "~m1756907172261", + "~:vern": 0, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df2", + "~:is-shared": false, + "~:migrations": { + "~#ordered-set": [ + "legacy-2", + "legacy-3", + "legacy-5", + "legacy-6", + "legacy-7", + "legacy-8", + "legacy-9", + "legacy-10", + "legacy-11", + "legacy-12", + "legacy-13", + "legacy-14", + "legacy-16", + "legacy-17", + "legacy-18", + "legacy-19", + "legacy-25", + "legacy-26", + "legacy-27", + "legacy-28", + "legacy-29", + "legacy-31", + "legacy-32", + "legacy-33", + "legacy-34", + "legacy-36", + "legacy-37", + "legacy-38", + "legacy-39", + "legacy-40", + "legacy-41", + "legacy-42", + "legacy-43", + "legacy-44", + "legacy-45", + "legacy-46", + "legacy-47", + "legacy-48", + "legacy-49", + "legacy-50", + "legacy-51", + "legacy-52", + "legacy-53", + "legacy-54", + "legacy-55", + "legacy-56", + "legacy-57", + "legacy-59", + "legacy-62", + "legacy-65", + "legacy-66", + "legacy-67", + "0001-remove-tokens-from-groups", + "0002-normalize-bool-content-v2", + "0002-clean-shape-interactions", + "0003-fix-root-shape", + "0003-convert-path-content-v2", + "0004-clean-shadow-color", + "0005-deprecate-image-type", + "0006-fix-old-texts-fills", + "0007-clear-invalid-strokes-and-fills-v2", + "0008-fix-library-colors-v4", + "0009-clean-library-colors", + "0009-add-partial-text-touched-flags" + ] + }, + "~:version": 67, + "~:project-id": "~u9e6e22b2-db76-81d6-8006-75d7cdc30669", + "~:created-at": "~m1756907160854", + "~:data": { + "~:pages": [ + "~u7ce7750c-3efe-8009-8006-bf390a415df3" + ], + "~:pages-index": { + "~u7ce7750c-3efe-8009-8006-bf390a415df3": { + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0.0, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0.0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u00000000-0000-0000-0000-000000000000", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 0, + "~:proportion": 1.0, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 0, + "~:y": 0, + "~:width": 0.01, + "~:height": 0.01, + "~:x1": 0, + "~:y1": 0, + "~:x2": 0.01, + "~:y2": 0.01 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 0.01, + "~:flip-y": null, + "~:shapes": [ + "~u40c555bd-1810-809a-8006-bf3912728203" + ] + } + }, + "~u40c555bd-1810-809a-8006-bf390bd6383b": { + "~#shape": { + "~:y": 236, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 87, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 439, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 526, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 526, + "~:y": 299 + } + }, + { + "~#point": { + "~:x": 439, + "~:y": 299 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u40c555bd-1810-809a-8006-bf390bd6383b", + "~:parent-id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 439, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 439, + "~:y": 236, + "~:width": 87, + "~:height": 63, + "~:x1": 439, + "~:y1": 236, + "~:x2": 526, + "~:y2": 299 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 63, + "~:flip-y": null + } + }, + "~u40c555bd-1810-809a-8006-bf390cffa1cc": { + "~#shape": { + "~:y": 268, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Rectangle", + "~:width": 87, + "~:type": "~:rect", + "~:points": [ + { + "~#point": { + "~:x": 483, + "~:y": 268 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 268 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 331 + } + }, + { + "~#point": { + "~:x": 483, + "~:y": 331 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u40c555bd-1810-809a-8006-bf390cffa1cc", + "~:parent-id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 483, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 483, + "~:y": 268, + "~:width": 87, + "~:height": 63, + "~:x1": 483, + "~:y1": 268, + "~:x2": 570, + "~:y2": 331 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 63, + "~:flip-y": null + } + }, + "~u40c555bd-1810-809a-8006-bf3912728203": { + "~#shape": { + "~:y": null, + "~:transform": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:rotation": 0, + "~:bool-type": "~:union", + "~:content": { + "~#penpot/path-data": "~bAQAAAAAAAAAAAAAAAAAAAAAAAAAAgPFDAICVQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIDbQwCAlUMCAAAAAAAAAAAAAAAAAAAAAAAAAACA20MAAGxDAgAAAAAAAAAAAAAAAAAAAAAAAAAAgANEAABsQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIADRAAAhkMCAAAAAAAAAAAAAAAAAAAAAAAAAACADkQAAIZDAgAAAAAAAAAAAAAAAAAAAAAAAAAAgA5EAIClQwIAAAAAAAAAAAAAAAAAAAAAAAAAAIDxQwCApUMCAAAAAAAAAAAAAAAAAAAAAAAAAACA8UMAgJVD" + }, + "~:name": "Union", + "~:width": null, + "~:type": "~:bool", + "~:points": [ + { + "~#point": { + "~:x": 439, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 236 + } + }, + { + "~#point": { + "~:x": 570, + "~:y": 331 + } + }, + { + "~#point": { + "~:x": 439, + "~:y": 331 + } + } + ], + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1.0, + "~:b": 0.0, + "~:c": 0.0, + "~:d": 1.0, + "~:e": 0.0, + "~:f": 0.0 + } + }, + "~:id": "~u40c555bd-1810-809a-8006-bf3912728203", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": null, + "~:proportion": 1, + "~:selrect": { + "~#rect": { + "~:x": 439, + "~:y": 236, + "~:width": 131, + "~:height": 95, + "~:x1": 439, + "~:y1": 236, + "~:x2": 570, + "~:y2": 331 + } + }, + "~:fills": [ + { + "~:fill-color": "#B1B2B5", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": null, + "~:flip-y": null, + "~:shapes": [ + "~u40c555bd-1810-809a-8006-bf390bd6383b", + "~u40c555bd-1810-809a-8006-bf390cffa1cc" + ] + } + } + }, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df3", + "~:name": "Page 1" + } + }, + "~:id": "~u7ce7750c-3efe-8009-8006-bf390a415df2", + "~:options": { + "~:components-v2": true, + "~:base-font-size": "16px" + } + } +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 5afc536b9a..fab32b8d9c 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -109,6 +109,7 @@ export class WorkspacePage extends BaseWebSocketPage { this.tokenContextMenuForSet = page.getByTestId( "tokens-context-menu-for-set", ); + this.contextMenuForShape = page.getByTestId("context-menu"); } async goToWorkspace({ diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index 82a42de14b..107ea3189b 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -440,3 +440,31 @@ test("Bug 9877, user navigation to dashboard from header goes to blank page", as /&project-id=c7ce0794-0992-8105-8004-38e630f7920b/, ); }); + +test("Bug 8371 - Flatten option is not visible in context menu", async ({ + page, +}) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(page); + await workspacePage.mockGetFile("workspace/get-file-8371.json"); + await workspacePage.goToWorkspace({ + fileId: "7ce7750c-3efe-8009-8006-bf390a415df2", + pageId: "7ce7750c-3efe-8009-8006-bf390a415df3", + }); + + const shape = workspacePage.page.locator( + `[id="shape-40c555bd-1810-809a-8006-bf3912728203"]`, + ); + + await workspacePage.clickLeafLayer("Union"); + await workspacePage.page + .locator(".viewport-selrect") + .click({ button: "right" }); + await expect(workspacePage.contextMenuForShape).toBeVisible(); + await expect( + workspacePage.contextMenuForShape + .getByText("Flatten") + // there are hidden elements in the context menu (in submenus) with "Flatten" text + .filter({ visible: true }), + ).toBeVisible(); +}); diff --git a/frontend/src/app/main/ui/workspace/context_menu.cljs b/frontend/src/app/main/ui/workspace/context_menu.cljs index 9bf4c56173..e034dd7658 100644 --- a/frontend/src/app/main/ui/workspace/context_menu.cljs +++ b/frontend/src/app/main/ui/workspace/context_menu.cljs @@ -822,6 +822,7 @@ [:div {:class (stl/css :workspace-context-menu) :ref dropdown-ref :style {:top top :left left} + :data-testid "context-menu" :on-context-menu prevent-default} [:ul {:class (stl/css :context-list)}