From cf53e0d233fb5ee5622bdfdedc7c42d495306179 Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Fri, 24 Jan 2025 10:40:45 +0100 Subject: [PATCH] :bug: Fix view modem forward button not working --- .../get-file-fragment-multiple-boards.json | 303 ++++++++++++++++++ .../get-view-only-bundle-multiple-boards.json | 85 +++++ frontend/playwright/ui/pages/ViewerPage.js | 15 + .../ui/specs/viewer-content.spec.js | 26 ++ frontend/src/app/main/data/viewer.cljs | 2 +- frontend/src/app/main/ui/viewer.cljs | 6 +- 6 files changed, 434 insertions(+), 3 deletions(-) create mode 100644 frontend/playwright/data/viewer/get-file-fragment-multiple-boards.json create mode 100644 frontend/playwright/data/viewer/get-view-only-bundle-multiple-boards.json create mode 100644 frontend/playwright/ui/specs/viewer-content.spec.js diff --git a/frontend/playwright/data/viewer/get-file-fragment-multiple-boards.json b/frontend/playwright/data/viewer/get-file-fragment-multiple-boards.json new file mode 100644 index 000000000..239e5efd8 --- /dev/null +++ b/frontend/playwright/data/viewer/get-file-fragment-multiple-boards.json @@ -0,0 +1,303 @@ +{ + "~:id": "~u0b5bcbca-32ab-81eb-8005-a13d7c92eb59", + "~:file-id": "~uudd5cc0bb-91ff-81b9-8004-77df9cd3edb0", + "~:created-at": "~m1737715191353", + "~:data": { + "~:options": { + + }, + "~:objects": { + "~u00000000-0000-0000-0000-000000000000": { + "~#shape": { + "~:y": 0, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:name": "Root Frame", + "~:width": 0.01, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 0, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0 + } + }, + { + "~#point": { + "~:x": 0.01, + "~:y": 0.01 + } + }, + { + "~#point": { + "~:x": 0, + "~:y": 0.01 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 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, + "~: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": [ + "~u4154c6c4-a727-80f2-8005-a122af7b1cfd", + "~u4154c6c4-a727-80f2-8005-a122b2303e43" + ] + } + }, + "~u4154c6c4-a727-80f2-8005-a122af7b1cfd": { + "~#shape": { + "~:y": 510, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:hide-in-viewer": false, + "~:name": "Board", + "~:width": 278, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": -263, + "~:y": 510 + } + }, + { + "~#point": { + "~:x": 15, + "~:y": 510 + } + }, + { + "~#point": { + "~:x": 15, + "~:y": 766 + } + }, + { + "~#point": { + "~:x": -263, + "~:y": 766 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:interactions": [ + { + "~:event-type": "~:click", + "~:action-type": "~:navigate", + "~:destination": "~u4154c6c4-a727-80f2-8005-a122b2303e43", + "~:position-relative-to": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd", + "~:preserve-scroll": false + } + ], + "~:r1": 0, + "~:id": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": -263, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": -263, + "~:y": 510, + "~:width": 278, + "~:height": 256, + "~:x1": -263, + "~:y1": 510, + "~:x2": 15, + "~:y2": 766 + } + }, + "~:fills": [ + { + "~:fill-color": "#FFFFFF", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 256, + "~:flip-y": null, + "~:shapes": [] + } + }, + "~u4154c6c4-a727-80f2-8005-a122b2303e43": { + "~#shape": { + "~:y": 356, + "~:hide-fill-on-export": false, + "~:transform": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:rotation": 0, + "~:grow-type": "~:fixed", + "~:name": "Board", + "~:width": 238, + "~:type": "~:frame", + "~:points": [ + { + "~#point": { + "~:x": 558, + "~:y": 356 + } + }, + { + "~#point": { + "~:x": 796, + "~:y": 356 + } + }, + { + "~#point": { + "~:x": 796, + "~:y": 583 + } + }, + { + "~#point": { + "~:x": 558, + "~:y": 583 + } + } + ], + "~:r2": 0, + "~:proportion-lock": false, + "~:transform-inverse": { + "~#matrix": { + "~:a": 1, + "~:b": 0, + "~:c": 0, + "~:d": 1, + "~:e": 0, + "~:f": 0 + } + }, + "~:r3": 0, + "~:r1": 0, + "~:id": "~u4154c6c4-a727-80f2-8005-a122b2303e43", + "~:parent-id": "~u00000000-0000-0000-0000-000000000000", + "~:frame-id": "~u00000000-0000-0000-0000-000000000000", + "~:strokes": [], + "~:x": 558, + "~:proportion": 1, + "~:r4": 0, + "~:selrect": { + "~#rect": { + "~:x": 558, + "~:y": 356, + "~:width": 238, + "~:height": 227, + "~:x1": 558, + "~:y1": 356, + "~:x2": 796, + "~:y2": 583 + } + }, + "~:fills": [ + { + "~:fill-color": "#d30d0d", + "~:fill-opacity": 1 + } + ], + "~:flip-x": null, + "~:height": 227, + "~:flip-y": null, + "~:shapes": [] + } + } + }, + "~:id": "~u0b5bcbca-32ab-81eb-8005-a122abf8bc82", + "~:name": "Page 1", + "~:flows": { + "~u4154c6c4-a727-80f2-8005-a122b9d4c70c": { + "~:id": "~u4154c6c4-a727-80f2-8005-a122b9d4c70c", + "~:name": "Flow 1", + "~:starting-frame": "~u4154c6c4-a727-80f2-8005-a122af7b1cfd" + } + } + } +} \ No newline at end of file diff --git a/frontend/playwright/data/viewer/get-view-only-bundle-multiple-boards.json b/frontend/playwright/data/viewer/get-view-only-bundle-multiple-boards.json new file mode 100644 index 000000000..bcecc6e05 --- /dev/null +++ b/frontend/playwright/data/viewer/get-view-only-bundle-multiple-boards.json @@ -0,0 +1,85 @@ +{ + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true, + "~:in-team": true + }, + "~:libraries": [], + "~:file": { + "~:features": { + "~#set": [ + "layout/grid", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:has-media-trimmed": false, + "~:comment-thread-seqn": 0, + "~:name": "Nuevo Archivo 1", + "~:revn": 3, + "~:modified-at": "~m1737715191361", + "~:vern": 0, + "~:id": "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb0", + "~:is-shared": false, + "~:version": 61, + "~:project-id": "~u0b5bcbca-32ab-81eb-8005-a12049f428c2", + "~:created-at": "~m1737708162019", + "~:data": { + "~:id": "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb0", + "~:options": { + "~:components-v2": true + }, + "~:pages": [ + "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb3" + ], + "~:pages-index": { + "~udd5cc0bb-91ff-81b9-8004-77df9cd3edb3": { + "~#penpot/pointer": [ + "~u0b5bcbca-32ab-81eb-8005-a13d7c92eb59", + { + "~:created-at": "~m1737715191371" + } + ] + } + } + } + }, + "~:team": { + "~:id": "~u0b5bcbca-32ab-81eb-8005-a12049f3a82a", + "~:created-at": "~m1737707537358", + "~:modified-at": "~m1737707537358", + "~:name": "1", + "~:is-default": false, + "~:features": { + "~#set": [ + "layout/grid", + "fdata/pointer-map", + "fdata/objects-map", + "components/v2", + "fdata/shape-data-type" + ] + }, + "~:permissions": { + "~:type": "~:membership", + "~:is-owner": true, + "~:is-admin": true, + "~:can-edit": true, + "~:can-read": true, + "~:is-logged": true, + "~:in-team": true + } + }, + "~:project": { + "~:id": "~u0b5bcbca-32ab-81eb-8005-a12049f428c2", + "~:name": "Drafts", + "~:team-id": "~u0b5bcbca-32ab-81eb-8005-a12049f3a82a" + }, + "~:share-links": [], + "~:fonts": [] +} \ No newline at end of file diff --git a/frontend/playwright/ui/pages/ViewerPage.js b/frontend/playwright/ui/pages/ViewerPage.js index 7a2a96bce..cf97f80fc 100644 --- a/frontend/playwright/ui/pages/ViewerPage.js +++ b/frontend/playwright/ui/pages/ViewerPage.js @@ -51,6 +51,21 @@ export class ViewerPage extends BaseWebSocketPage { ); } + async setupFileWithMultipleBoards() { + await this.mockRPC( + /get\-view\-only\-bundle\?/, + "viewer/get-view-only-bundle-multiple-boards.json", + ); + await this.mockRPC( + "get-comment-threads?file-id=*", + "workspace/get-comment-threads-empty.json", + ); + await this.mockRPC( + "get-file-fragment?file-id=*&fragment-id=*", + "viewer/get-file-fragment-multiple-boards.json", + ); + } + async setupFileWithComments() { await this.mockRPC( /get\-view\-only\-bundle\?/, diff --git a/frontend/playwright/ui/specs/viewer-content.spec.js b/frontend/playwright/ui/specs/viewer-content.spec.js new file mode 100644 index 000000000..ab85f1802 --- /dev/null +++ b/frontend/playwright/ui/specs/viewer-content.spec.js @@ -0,0 +1,26 @@ +import { test, expect } from "@playwright/test"; +import { ViewerPage } from "../pages/ViewerPage"; + +test.beforeEach(async ({ page }) => { + await ViewerPage.init(page); +}); + +const multipleBoardsFileId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb0"; +const multipleBoardsPageId = "dd5cc0bb-91ff-81b9-8004-77df9cd3edb3"; + +test("Navigate with arrows", async ({ page }) => { + const viewer = new ViewerPage(page); + await viewer.setupLoggedInUser(); + await viewer.setupFileWithMultipleBoards(viewer); + + await viewer.goToViewer({ + fileId: multipleBoardsFileId, + pageId: multipleBoardsPageId, + }); + + const nextButton = viewer.page.getByRole("button", { + name: "Next", + }); + await nextButton.click(); + await expect(viewer.page).toHaveURL(/&index=1/); +}); diff --git a/frontend/src/app/main/data/viewer.cljs b/frontend/src/app/main/data/viewer.cljs index 409c1819d..2aa9299ca 100644 --- a/frontend/src/app/main/data/viewer.cljs +++ b/frontend/src/app/main/data/viewer.cljs @@ -414,7 +414,7 @@ (when (< index (dec total)) (rx/of (dcmt/close-thread) - (rt/nav :viewer params (assoc params :index (inc index))))))))) + (rt/nav :viewer (assoc params :index (inc index))))))))) (def select-first-frame (ptk/reify ::select-first-frame diff --git a/frontend/src/app/main/ui/viewer.cljs b/frontend/src/app/main/ui/viewer.cljs index 6e2562b77..6a1507cb5 100644 --- a/frontend/src/app/main/ui/viewer.cljs +++ b/frontend/src/app/main/ui/viewer.cljs @@ -101,13 +101,15 @@ (when (pos? index) [:button {:class (stl/css-case :viewer-go-prev true :left-bar left-bar) - :on-click go-prev-frame} + :on-click go-prev-frame + :aria-label (tr "labels.previous")} i/arrow]) (when (< (+ index 1) num-frames) [:button {:class (stl/css-case :viewer-go-next true :comment-sidebar comment-sidebar :right-bar right-bar) - :on-click go-next-frame} + :on-click go-next-frame + :aria-label (tr "labels.next")} i/arrow]) [:div {:class (stl/css-case :viewer-bottom true :left-bar left-bar)}