From 04f341ce1dcb7df41674e5944eccfd75cf5b702b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 13:37:32 +0200 Subject: [PATCH 1/3] :bug: Fix layers tree not expanding towards the bottom edge --- CHANGES.md | 3 ++- frontend/playwright/ui/pages/WorkspacePage.js | 24 +++++++++++-------- frontend/playwright/ui/specs/sidebar.spec.js | 23 ++++++++++++++++++ .../playwright/ui/specs/workspace.spec.js | 17 ++++++++----- .../app/main/ui/components/tab_container.cljs | 1 - .../src/app/main/ui/workspace/sidebar.cljs | 9 ++++--- .../src/app/main/ui/workspace/sidebar.scss | 2 -- .../app/main/ui/workspace/sidebar/layers.cljs | 2 +- .../main/ui/workspace/sidebar/sitemap.cljs | 1 - 9 files changed, 57 insertions(+), 25 deletions(-) create mode 100644 frontend/playwright/ui/specs/sidebar.spec.js diff --git a/CHANGES.md b/CHANGES.md index 5999d5c16..beeea77a4 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -19,7 +19,8 @@ ### :bug: Bugs fixed -- Fix guides move when board is moved by inputs [Taiga 8010](https://tree.taiga.io/project/penpot/issue/8010) +- Fix layer tree not expanding to the bottom edge [Taiga #7466](https://tree.taiga.io/project/penpot/issue/7466) +- Fix guides move when board is moved by inputs [Taiga #8010](https://tree.taiga.io/project/penpot/issue/8010) - Fix clickable area of Penptot logo in the viewer [Taiga #7988](https://tree.taiga.io/project/penpot/issue/7988) - Fix constraints dropdown when selecting multiple shapes [Taiga #7686](https://tree.taiga.io/project/penpot/issue/7686) - Layout and scrollign fixes for the bottom palette [Taiga #7559](https://tree.taiga.io/project/penpot/issue/7559) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index 72e0fa9fd..e2c7b11d8 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -45,10 +45,9 @@ export class WorkspacePage extends BaseWebSocketPage { this.rootShape = page.locator(`[id="shape-00000000-0000-0000-0000-000000000000"]`); this.rectShapeButton = page.getByRole("button", { name: "Rectangle (R)" }); this.colorpicker = page.getByTestId("colorpicker"); - this.layers = page.getByTestId("layers"); + this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); - this.assets = page.getByTestId("assets"); - this.libraries = page.getByTestId("libraries"); + this.sidebar = page.getByTestId("left-sidebar"); this.closeLibraries = page.getByTestId("close-libraries"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -102,6 +101,11 @@ export class WorkspacePage extends BaseWebSocketPage { await this.page.mouse.up(); } + async togglePages() { + const pagesToggle = this.page.getByText("Pages"); + await pagesToggle.click(); + } + async clickLeafLayer(name, clickOptions = {}) { const layer = this.layers.getByText(name); await layer.click(clickOptions); @@ -113,15 +117,17 @@ export class WorkspacePage extends BaseWebSocketPage { } async expectSelectedLayer(name) { - await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass(/selected/); + await expect(this.layers.getByTestId("layer-row").filter({ has: this.page.getByText(name) })).toHaveClass( + /selected/, + ); } async clickAssets(clickOptions = {}) { - await this.assets.click(clickOptions); + await this.sidebar.getByText("Assets").click(clickOptions); } async clickLibraries(clickOptions = {}) { - await this.libraries.click(clickOptions); + await this.sidebar.getByText("Libraries").click(clickOptions); } async clickLibrary(name, clickOptions = {}) { @@ -129,7 +135,7 @@ export class WorkspacePage extends BaseWebSocketPage { .getByTestId("library-item") .filter({ hasText: name }) .getByRole("button") - .click(clickOptions); + .click(clickOptions); } async clickCloseLibraries(clickOptions = {}) { @@ -137,8 +143,6 @@ export class WorkspacePage extends BaseWebSocketPage { } async clickColorPalette(clickOptions = {}) { - await this.palette - .getByRole("button", { name: "Color Palette (Alt+P)" }) - .click(clickOptions); + await this.palette.getByRole("button", { name: "Color Palette (Alt+P)" }).click(clickOptions); } } diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js new file mode 100644 index 000000000..f88fd613c --- /dev/null +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -0,0 +1,23 @@ +import { test, expect } from "@playwright/test"; +import { WorkspacePage } from "../pages/WorkspacePage"; + +test.beforeEach(async ({ page }) => { + await WorkspacePage.init(page); +}); + +test.describe("Layers tab", () => { + test("BUG 7466 - Layers tab height extends to the bottom when 'Pages' is collapsed", async ({ page }) => { + const workspace = new WorkspacePage(page); + await workspace.setupEmptyFile(); + + await workspace.goToWorkspace(); + + const { height: heightExpanded } = await workspace.layers.boundingBox(); + await workspace.togglePages(); + const { height: heightCollapsed } = await workspace.layers.boundingBox(); + + console.log(heightExpanded, heightCollapsed); + + expect(heightExpanded > heightCollapsed); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index f391949b4..c0d495b7e 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -44,8 +44,11 @@ test("User adds a library and its automatically selected in the color palette", await workspacePage.setupEmptyFile(); await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); - await workspacePage.mockRPC("get-team-shared-files?team-id=*", "workspace/get-team-shared-libraries-non-empty.json"); - + await workspacePage.mockRPC( + "get-team-shared-files?team-id=*", + "workspace/get-team-shared-libraries-non-empty.json", + ); + await workspacePage.goToWorkspace(); // Add Testing library 1 @@ -54,17 +57,19 @@ test("User adds a library and its automatically selected in the color palette", // Now the get-file call should return a library await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") - await workspacePage.clickCloseLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); // Remove Testing library 1 await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1") + await workspacePage.clickLibrary("Testing library 1"); await workspacePage.clickCloseLibraries(); - await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible(); + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); }); diff --git a/frontend/src/app/main/ui/components/tab_container.cljs b/frontend/src/app/main/ui/components/tab_container.cljs index 1e3b99079..20c79a417 100644 --- a/frontend/src/app/main/ui/components/tab_container.cljs +++ b/frontend/src/app/main/ui/components/tab_container.cljs @@ -59,7 +59,6 @@ [:div {:key (str/concat "tab-" sid) :title tooltip :data-id sid - :data-testid sid :on-click on-click :class (stl/css-case :tab-container-tab-title true diff --git a/frontend/src/app/main/ui/workspace/sidebar.cljs b/frontend/src/app/main/ui/workspace/sidebar.cljs index d64842075..1aaf88c7b 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar.cljs @@ -38,8 +38,7 @@ (let [options-mode (mf/deref refs/options-mode-global) mode-inspect? (= options-mode :inspect) project (mf/deref refs/workspace-project) - show-pages? (mf/use-state true) - toggle-pages (mf/use-callback #(reset! show-pages? not)) + section (cond (or mode-inspect? (contains? layout :layers)) :layers (contains? layout :assets) :assets) @@ -50,9 +49,12 @@ {on-pointer-down :on-pointer-down on-lost-pointer-capture :on-lost-pointer-capture on-pointer-move :on-pointer-move parent-ref :parent-ref size :size} (use-resize-hook :left-sidebar 275 275 500 :x false :left) - {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages :size} + {on-pointer-down-pages :on-pointer-down on-lost-pointer-capture-pages :on-lost-pointer-capture on-pointer-move-pages :on-pointer-move size-pages-opened :size} (use-resize-hook :sitemap 200 38 400 :y false nil) + show-pages? (mf/use-state true) + toggle-pages (mf/use-callback #(reset! show-pages? not)) + size-pages (mf/use-memo (mf/deps show-pages? size-pages-opened) (fn [] (if @show-pages? size-pages-opened 32))) handle-collapse (mf/use-fn #(st/emit! (dw/toggle-layout-flag :collapse-left-sidebar))) @@ -63,6 +65,7 @@ [:& (mf/provider muc/sidebar) {:value :left} [:aside {:ref parent-ref :id "left-sidebar-aside" + :data-testid "left-sidebar" :data-size (str size) :class (stl/css-case :left-settings-bar true :global/two-row (<= size 300) diff --git a/frontend/src/app/main/ui/workspace/sidebar.scss b/frontend/src/app/main/ui/workspace/sidebar.scss index 192a8416e..f70e37e5e 100644 --- a/frontend/src/app/main/ui/workspace/sidebar.scss +++ b/frontend/src/app/main/ui/workspace/sidebar.scss @@ -84,10 +84,8 @@ $width-settings-bar-max: $s-500; .resize-area-horiz { position: absolute; - // top: calc($s-88 + var(--height, 200px)); left: 0; width: 100%; - // height: $s-8; border-bottom: $s-2 solid var(--resize-area-border-color); cursor: ns-resize; } diff --git a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs index 737f80fdd..ec072f367 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/layers.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/layers.cljs @@ -510,7 +510,7 @@ (mf/use-fn #(st/emit! (dw/toggle-focus-mode)))] - [:div#layers {:class (stl/css :layers) :data-testid "layers"} + [:div#layers {:class (stl/css :layers) :data-testid "layer-tree"} (if (d/not-empty? focus) [:div {:class (stl/css :tool-window-bar)} [:button {:class (stl/css :focus-title) diff --git a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs index 39064f7c7..1d9cc9e4d 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/sitemap.cljs @@ -205,7 +205,6 @@ (fn [event] (st/emit! (dw/create-page {:file-id file-id :project-id project-id})) (-> event dom/get-current-target dom/blur!))) - size (if show-pages? size 32) read-only? (mf/use-ctx ctx/workspace-read-only?)] [:div {:class (stl/css :sitemap) From 7719cd8d0b6cdd182b1ba649f02d9b9f5ec29e30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 15:43:28 +0200 Subject: [PATCH 2/3] :recycle: Move libraries test to sidebar spec file --- frontend/playwright/ui/specs/sidebar.spec.js | 35 ++++++++++++++++ .../playwright/ui/specs/workspace.spec.js | 40 ++----------------- 2 files changed, 38 insertions(+), 37 deletions(-) diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index f88fd613c..9333749f8 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -21,3 +21,38 @@ test.describe("Layers tab", () => { expect(heightExpanded > heightCollapsed); }); }); + +test.describe("Assets tab", () => { + test("User adds a library and its automatically selected in the color palette", async ({ page }) => { + const workspacePage = new WorkspacePage(page); + await workspacePage.setupEmptyFile(); + await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); + await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); + await workspacePage.mockRPC( + "get-team-shared-files?team-id=*", + "workspace/get-team-shared-libraries-non-empty.json", + ); + + await workspacePage.goToWorkspace(); + + // Add Testing library 1 + await workspacePage.clickColorPalette(); + await workspacePage.clickAssets(); + // Now the get-file call should return a library + await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); + await workspacePage.clickLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); + + await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); + + // Remove Testing library 1 + await workspacePage.clickLibraries(); + await workspacePage.clickLibrary("Testing library 1"); + await workspacePage.clickCloseLibraries(); + + await expect( + workspacePage.palette.getByText("There are no color styles in your library yet"), + ).toBeVisible(); + }); +}); diff --git a/frontend/playwright/ui/specs/workspace.spec.js b/frontend/playwright/ui/specs/workspace.spec.js index c0d495b7e..c96967384 100644 --- a/frontend/playwright/ui/specs/workspace.spec.js +++ b/frontend/playwright/ui/specs/workspace.spec.js @@ -39,49 +39,15 @@ test("User draws a rect", async ({ page }) => { await expect(shape).toHaveAttribute("height", "100"); }); -test("User adds a library and its automatically selected in the color palette", async ({ page }) => { - const workspacePage = new WorkspacePage(page); - await workspacePage.setupEmptyFile(); - await workspacePage.mockRPC("link-file-to-library", "workspace/link-file-to-library.json"); - await workspacePage.mockRPC("unlink-file-from-library", "workspace/unlink-file-from-library.json"); - await workspacePage.mockRPC( - "get-team-shared-files?team-id=*", - "workspace/get-team-shared-libraries-non-empty.json", - ); - - await workspacePage.goToWorkspace(); - - // Add Testing library 1 - await workspacePage.clickColorPalette(); - await workspacePage.clickAssets(); - // Now the get-file call should return a library - await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); - await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); - - await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); - - // Remove Testing library 1 - await workspacePage.clickLibraries(); - await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); - - await expect( - workspacePage.palette.getByText("There are no color styles in your library yet"), - ).toBeVisible(); -}); - - test("User makes a group", async ({ page }) => { const workspacePage = new WorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-not-empty.json"); await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-create-rect.json"); - await workspacePage.goToWorkspace({ - fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", - pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375" + await workspacePage.goToWorkspace({ + fileId: "6191cd35-bb1f-81f7-8004-7cc63d087374", + pageId: "6191cd35-bb1f-81f7-8004-7cc63d087375", }); await workspacePage.clickLeafLayer("Rectangle"); await workspacePage.page.keyboard.press("ControlOrMeta+g"); From f417445f31325370100aea478acb982d11b5fc62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bel=C3=A9n=20Albeza?= Date: Tue, 11 Jun 2024 15:48:18 +0200 Subject: [PATCH 3/3] :sparkles: Refactor WorkspacePage so it has more semantic locators --- frontend/playwright/ui/pages/WorkspacePage.js | 7 +++---- frontend/playwright/ui/specs/sidebar.spec.js | 8 ++++---- frontend/src/app/main/ui/workspace/libraries.cljs | 2 +- 3 files changed, 8 insertions(+), 9 deletions(-) diff --git a/frontend/playwright/ui/pages/WorkspacePage.js b/frontend/playwright/ui/pages/WorkspacePage.js index e2c7b11d8..131f94943 100644 --- a/frontend/playwright/ui/pages/WorkspacePage.js +++ b/frontend/playwright/ui/pages/WorkspacePage.js @@ -48,7 +48,6 @@ export class WorkspacePage extends BaseWebSocketPage { this.layers = page.getByTestId("layer-tree"); this.palette = page.getByTestId("palette"); this.sidebar = page.getByTestId("left-sidebar"); - this.closeLibraries = page.getByTestId("close-libraries"); this.librariesModal = page.getByTestId("libraries-modal"); } @@ -126,7 +125,7 @@ export class WorkspacePage extends BaseWebSocketPage { await this.sidebar.getByText("Assets").click(clickOptions); } - async clickLibraries(clickOptions = {}) { + async openLibrariesModal(clickOptions = {}) { await this.sidebar.getByText("Libraries").click(clickOptions); } @@ -138,8 +137,8 @@ export class WorkspacePage extends BaseWebSocketPage { .click(clickOptions); } - async clickCloseLibraries(clickOptions = {}) { - await this.closeLibraries.click(clickOptions); + async closeLibrariesModal(clickOptions = {}) { + await this.librariesModal.getByRole("button", { name: "Close" }).click(clickOptions); } async clickColorPalette(clickOptions = {}) { diff --git a/frontend/playwright/ui/specs/sidebar.spec.js b/frontend/playwright/ui/specs/sidebar.spec.js index 9333749f8..468a661fa 100644 --- a/frontend/playwright/ui/specs/sidebar.spec.js +++ b/frontend/playwright/ui/specs/sidebar.spec.js @@ -40,16 +40,16 @@ test.describe("Assets tab", () => { await workspacePage.clickAssets(); // Now the get-file call should return a library await workspacePage.mockRPC(/get\-file\?/, "workspace/get-file-library.json"); - await workspacePage.clickLibraries(); + await workspacePage.openLibrariesModal(); await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); + await workspacePage.closeLibrariesModal(); await expect(workspacePage.palette.getByRole("button", { name: "test-color-187cd5" })).toBeVisible(); // Remove Testing library 1 - await workspacePage.clickLibraries(); + await workspacePage.openLibrariesModal(); await workspacePage.clickLibrary("Testing library 1"); - await workspacePage.clickCloseLibraries(); + await workspacePage.closeLibrariesModal(); await expect( workspacePage.palette.getByText("There are no color styles in your library yet"), diff --git a/frontend/src/app/main/ui/workspace/libraries.cljs b/frontend/src/app/main/ui/workspace/libraries.cljs index d07517c7b..6d5813c0d 100644 --- a/frontend/src/app/main/ui/workspace/libraries.cljs +++ b/frontend/src/app/main/ui/workspace/libraries.cljs @@ -519,7 +519,7 @@ [:div {:class (stl/css :modal-dialog)} [:button {:class (stl/css :close-btn) :on-click close-dialog - :data-testid "close-libraries"} + :aria-label (tr "labels.close")} close-icon] [:div {:class (stl/css :modal-title)} (tr "workspace.libraries.libraries")]