From a1c6d31160f3d1e6db3bba18904a8f3baf4faee9 Mon Sep 17 00:00:00 2001 From: Xavier Julian Date: Wed, 29 Apr 2026 13:41:08 +0200 Subject: [PATCH] :recycle: Fix tests --- .../playwright/ui/specs/components.spec.js | 9 +- .../playwright/ui/specs/design-tab.spec.js | 34 +++-- .../ui/specs/multiseleccion.spec.js | 144 ++++++++++++------ .../playwright/ui/specs/profile-menu.spec.js | 8 +- .../ui/specs/workspace-modifers.spec.js | 140 ++++++++++++++--- .../src/app/main/ui/dashboard/sidebar.scss | 1 - .../sidebar/options/menus/measures.cljs | 1 + 7 files changed, 253 insertions(+), 84 deletions(-) diff --git a/frontend/playwright/ui/specs/components.spec.js b/frontend/playwright/ui/specs/components.spec.js index 50adc17eae..325549e7f0 100644 --- a/frontend/playwright/ui/specs/components.spec.js +++ b/frontend/playwright/ui/specs/components.spec.js @@ -3,9 +3,12 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]); }); -test("BUG 13267 - Component instance is not synced with parent for geometry changes", async ({ page }) => { +test("BUG 13267 - Component instance is not synced with parent for geometry changes", async ({ + page, +}) => { const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); await workspacePage.mockGetFile("components/get-file-13267.json"); @@ -21,7 +24,7 @@ test("BUG 13267 - Component instance is not synced with parent for geometry chan // Select the main component await workspacePage.clickLeafLayer("A Component", {}, 1); - const rotationInput = workspacePage.rightSidebar.getByTestId("rotation").getByRole("textbox"); + const rotationInput = workspacePage.rightSidebar.getByTestId("rotation"); await rotationInput.fill("45"); await rotationInput.press("Enter"); @@ -30,4 +33,4 @@ test("BUG 13267 - Component instance is not synced with parent for geometry chan await workspacePage.clickLeafLayer("Rectangle"); await expect(rotationInput).toHaveValue("45"); -}); \ No newline at end of file +}); diff --git a/frontend/playwright/ui/specs/design-tab.spec.js b/frontend/playwright/ui/specs/design-tab.spec.js index 8fe67b9d3a..0cf953a302 100644 --- a/frontend/playwright/ui/specs/design-tab.spec.js +++ b/frontend/playwright/ui/specs/design-tab.spec.js @@ -1,8 +1,11 @@ import { test, expect } from "@playwright/test"; import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; +const tokenInputFlag = "enable-feature-token-input"; + test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, [tokenInputFlag]); }); const multipleConstraintsFileId = `03bff843-920f-81a1-8004-756365e1eb6a`; @@ -71,7 +74,10 @@ test.describe("Shape attributes", () => { page, }) => { const workspace = new WasmWorkspacePage(page); - await workspace.mockConfigFlags(["enable-feature-render-wasm"]); + await workspace.mockConfigFlags([ + "enable-feature-render-wasm", + tokenInputFlag, + ]); await workspace.setupEmptyFile(); await workspace.mockRPC(/get\-file\?/, "design/get-file-fills-limit.json"); @@ -95,7 +101,10 @@ test.describe("Shape attributes", () => { page, }) => { const workspace = new WasmWorkspacePage(page); - await workspace.mockConfigFlags(["enable-feature-render-wasm"]); + await workspace.mockConfigFlags([ + "enable-feature-render-wasm", + tokenInputFlag, + ]); await workspace.setupEmptyFile(); await workspace.mockRPC( /get\-file\?/, @@ -236,7 +245,7 @@ test.describe("Background blur", () => { page, }) => { const workspace = new WasmWorkspacePage(page); - await workspace.mockConfigFlags(["enable-background-blur"]); + await workspace.mockConfigFlags(["enable-background-blur", tokenInputFlag]); await workspace.setupEmptyFile(); await workspace.mockGetFile("render-wasm/get-file-background-blur.json"); @@ -260,7 +269,7 @@ test.describe("Background blur", () => { page, }) => { const workspace = new WasmWorkspacePage(page); - await workspace.mockConfigFlags(["enable-background-blur"]); + await workspace.mockConfigFlags(["enable-background-blur", tokenInputFlag]); await workspace.setupEmptyFile(); await workspace.mockGetFile("render-wasm/get-file-background-blur.json"); @@ -319,6 +328,7 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async ( page, }) => { const workspace = new WasmWorkspacePage(page); + await workspace.setupEmptyFile(); await workspace.mockRPC(/get\-file\?/, "design/get-file-9543.json"); await workspace.mockRPC( @@ -338,14 +348,18 @@ test("BUG 9543 - Layout padding inputs not showing 'mixed' when needed", async ( }); await toggle.click(); - await workspace.page.getByLabel("Top padding").fill("10"); + const topPaddingInput = workspace.page.getByRole("textbox", { + name: "Top padding", + }); + await topPaddingInput.fill("10"); + await topPaddingInput.press("Enter"); await toggle.click(); - await expect(workspace.page.getByLabel("Vertical padding")).toHaveValue(""); - await expect(workspace.page.getByLabel("Vertical padding")).toHaveAttribute( - "placeholder", - "Mixed", - ); + const verticalPaddingInput = await workspace.page.getByRole("textbox", { + name: "Vertical padding", + }); + await expect(verticalPaddingInput).toHaveValue(""); + await expect(verticalPaddingInput).toHaveAttribute("placeholder", "Mixed"); }); test("BUG 11177 - Font size input not showing 'mixed' when needed", async ({ diff --git a/frontend/playwright/ui/specs/multiseleccion.spec.js b/frontend/playwright/ui/specs/multiseleccion.spec.js index 1b4be19e4c..5d7ee1c92c 100644 --- a/frontend/playwright/ui/specs/multiseleccion.spec.js +++ b/frontend/playwright/ui/specs/multiseleccion.spec.js @@ -3,6 +3,7 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]); }); test("Multiselection - check multiple values in measures", async ({ page }) => { @@ -27,37 +28,53 @@ test("Multiselection - check multiple values in measures", async ({ page }) => { await workspacePage.layers.getByTestId("layer-row").nth(0).click(); // === CHECK SINGLE SELECTION - ALL MEASURE FIELDS === - const measuresSection = workspacePage.rightSidebar.getByRole('region', { name: 'shape-measures-section' }); + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); await expect(measuresSection).toBeVisible(); // Width - const widthInput = measuresSection.getByTitle('Width', { exact: true }).getByRole('textbox'); + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + exact: true, + }); await expect(widthInput).toHaveValue("360"); // Height - const heightInput = measuresSection.getByTitle('Height', { exact: true }).getByRole('textbox'); + const heightInput = measuresSection.getByRole("textbox", { + name: "Height", + exact: true, + }); await expect(heightInput).toHaveValue("53"); // X Position (using "X axis" title) - const xPosInput = measuresSection.getByTitle('X axis', { exact: true }).getByRole('textbox'); + const xPosInput = measuresSection.getByRole("textbox", { + name: "X axis", + exact: true, + }); await expect(xPosInput).toHaveValue("1094"); // Y Position (using "Y axis" title) - const yPosInput = measuresSection.getByTitle('Y axis', { exact: true }).getByRole('textbox'); + const yPosInput = measuresSection.getByRole("textbox", { + name: "Y axis", + exact: true, + }); await expect(yPosInput).toHaveValue("856"); // === CHECK MULTI-SELECTION - MIXED VALUES === // Shift+click to add second layer to selection - await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] }); + await workspacePage.layers + .getByTestId("layer-row") + .nth(1) + .click({ modifiers: ["Shift"] }); // All measure fields should show "Mixed" placeholder when values differ - await expect(widthInput).toHaveAttribute('placeholder', 'Mixed'); - await expect(heightInput).toHaveAttribute('placeholder', 'Mixed'); - await expect(xPosInput).toHaveAttribute('placeholder', 'Mixed'); - await expect(yPosInput).toHaveAttribute('placeholder', 'Mixed'); + await expect(widthInput).toHaveAttribute("placeholder", "Mixed"); + await expect(heightInput).toHaveAttribute("placeholder", "Mixed"); + await expect(xPosInput).toHaveAttribute("placeholder", "Mixed"); + await expect(yPosInput).toHaveAttribute("placeholder", "Mixed"); }); - test("Multiselection - check fill multiple values", async ({ page }) => { const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); @@ -79,17 +96,22 @@ test("Multiselection - check fill multiple values", async ({ page }) => { await workspacePage.layers.getByTestId("layer-row").nth(0).click(); // Fill section - const fillSection = workspacePage.rightSidebar.getByRole('region', { name: "Fill section" }); + const fillSection = workspacePage.rightSidebar.getByRole("region", { + name: "Fill section", + }); await expect(fillSection).toBeVisible(); // Single selection - fill color should be visible (not "Mixed") await expect(fillSection.getByText(/Mixed/i)).not.toBeVisible(); // Multi-selection with Shift+click - await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] }); + await workspacePage.layers + .getByTestId("layer-row") + .nth(1) + .click({ modifiers: ["Shift"] }); // Should show "Mixed" for fills when shapes have different fill colors - await expect(fillSection.getByText('Mixed')).toBeVisible(); + await expect(fillSection.getByText("Mixed")).toBeVisible(); }); test("Multiselection - check stroke multiple values", async ({ page }) => { @@ -113,17 +135,22 @@ test("Multiselection - check stroke multiple values", async ({ page }) => { await workspacePage.layers.getByTestId("layer-row").nth(0).click(); // Stroke section - const strokeSection = workspacePage.rightSidebar.getByRole('region', { name: "Stroke section" }); + const strokeSection = workspacePage.rightSidebar.getByRole("region", { + name: "Stroke section", + }); await expect(strokeSection).toBeVisible(); // Single selection - stroke should be visible (not "Mixed") await expect(strokeSection.getByText(/Mixed/i)).not.toBeVisible(); // Multi-selection - await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] }); + await workspacePage.layers + .getByTestId("layer-row") + .nth(1) + .click({ modifiers: ["Shift"] }); // Should show "Mixed" for strokes when shapes have different stroke colors - await expect(strokeSection.getByText('Mixed')).toBeVisible(); + await expect(strokeSection.getByText("Mixed")).toBeVisible(); }); test("Multiselection - check rotation multiple values", async ({ page }) => { @@ -147,26 +174,33 @@ test("Multiselection - check rotation multiple values", async ({ page }) => { await workspacePage.layers.getByTestId("layer-row").nth(1).click(); // Measures section contains rotation - const measuresSection = workspacePage.rightSidebar.getByRole('region', { name: 'shape-measures-section' }); + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); await expect(measuresSection).toBeVisible(); // Rotation field exists - const rotationInput = measuresSection.getByTitle('Rotation', { exact: true }).getByRole('textbox'); + const rotationInput = measuresSection.getByRole("textbox", { + name: "Rotation", + exact: true, + }); await expect(rotationInput).toBeVisible(); // Rotate that shape await rotationInput.fill("45"); - await page.keyboard.press('Enter'); + await page.keyboard.press("Enter"); await expect(rotationInput).toHaveValue("45"); // Rotation should be 45 // Multi-selection - await workspacePage.layers.getByTestId("layer-row").nth(0).click({ modifiers: ['Shift'] }); + await workspacePage.layers + .getByTestId("layer-row") + .nth(0) + .click({ modifiers: ["Shift"] }); // Rotation should show "Mixed" placeholder - await expect(rotationInput).toHaveAttribute('placeholder', 'Mixed'); + await expect(rotationInput).toHaveAttribute("placeholder", "Mixed"); }); - test("Multiselection of text and typographies", async ({ page }) => { const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(page); @@ -181,29 +215,45 @@ test("Multiselection of text and typographies", async ({ page }) => { }); const plainTextLayer = workspacePage.layers.getByTestId("layer-row").nth(5); - const plainTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(2); - const typographyTextLayerOne = workspacePage.layers.getByTestId("layer-row").nth(7); - const typographyTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(4); - const tokenTypographyTextLayerOne = workspacePage.layers.getByTestId("layer-row").nth(6); - const tokenTypographyTextLayerTwo = workspacePage.layers.getByTestId("layer-row").nth(3); + const plainTextLayerTwo = workspacePage.layers + .getByTestId("layer-row") + .nth(2); + const typographyTextLayerOne = workspacePage.layers + .getByTestId("layer-row") + .nth(7); + const typographyTextLayerTwo = workspacePage.layers + .getByTestId("layer-row") + .nth(4); + const tokenTypographyTextLayerOne = workspacePage.layers + .getByTestId("layer-row") + .nth(6); + const tokenTypographyTextLayerTwo = workspacePage.layers + .getByTestId("layer-row") + .nth(3); const rectangleLayer = workspacePage.layers.getByTestId("layer-row").nth(1); const elipseLayer = workspacePage.layers.getByTestId("layer-row").nth(0); - const textSection = workspacePage.rightSidebar.getByRole('region', { name: "Text section" }); + const textSection = workspacePage.rightSidebar.getByRole("region", { + name: "Text section", + }); // Select rectangle and elipse together await rectangleLayer.click(); - await elipseLayer.click({ modifiers: ['Control'] }); + await elipseLayer.click({ modifiers: ["Control"] }); await expect(textSection).not.toBeVisible(); - + // Select plain text layer await plainTextLayer.click(); await expect(textSection).toBeVisible(); - await expect(textSection.getByText("Multiple typographies")).not.toBeVisible(); + await expect( + textSection.getByText("Multiple typographies"), + ).not.toBeVisible(); // Select two plain text layer with different font family - await plainTextLayerTwo.click({ modifiers: ['Control'] }); + await plainTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByTitle("Font family").getByText("--")).toBeVisible(); + await expect( + textSection.getByTitle("Font family").getByText("--"), + ).toBeVisible(); // Select typography text layer await typographyTextLayerOne.click(); @@ -211,48 +261,50 @@ test("Multiselection of text and typographies", async ({ page }) => { await expect(textSection.getByText("Typography one")).toBeVisible(); // Select two typography text layer with different typography - await typographyTextLayerTwo.click({ modifiers: ['Control'] }); + await typographyTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect(textSection.getByText("Multiple typographies")).toBeVisible(); - // Select token typography text layer + // Select token typography text layer // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY await tokenTypographyTextLayerOne.click(); await expect(textSection).toBeVisible(); - await expect(textSection.getByText('Metrophobic')).toBeVisible(); + await expect(textSection.getByText("Metrophobic")).toBeVisible(); // Select two token typography text layer with different token typography - // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY - await tokenTypographyTextLayerTwo.click({ modifiers: ['Control'] }); + // TODO: CHANGE WHEN TOKEN TYPOGRAPHY ROW IS READY + await tokenTypographyTextLayerTwo.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); - await expect(textSection.getByTitle("Font family").getByText("--")).toBeVisible(); + await expect( + textSection.getByTitle("Font family").getByText("--"), + ).toBeVisible(); //Select plain text layer and typography text layer together await plainTextLayer.click(); - await typographyTextLayerOne.click({ modifiers: ['Control'] }); + await typographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect(textSection.getByText("Multiple typographies")).toBeVisible(); //Select plain text layer and typography text layer together on reverse order await typographyTextLayerOne.click(); - await plainTextLayer.click({ modifiers: ['Control'] }); + await plainTextLayer.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect(textSection.getByText("Multiple typographies")).toBeVisible(); //Selen token typography text layer and typography text layer together await tokenTypographyTextLayerOne.click(); - await typographyTextLayerOne.click({ modifiers: ['Control'] }); + await typographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect(textSection.getByText("Multiple typographies")).toBeVisible(); //Select token typography text layer and typography text layer together on reverse order await typographyTextLayerOne.click(); - await tokenTypographyTextLayerOne.click({ modifiers: ['Control'] }); + await tokenTypographyTextLayerOne.click({ modifiers: ["Control"] }); await expect(textSection).toBeVisible(); await expect(textSection.getByText("Multiple typographies")).toBeVisible(); // Select rectangle and elipse together await rectangleLayer.click(); - await elipseLayer.click({ modifiers: ['Control'] }); + await elipseLayer.click({ modifiers: ["Control"] }); await expect(textSection).not.toBeVisible(); -}); \ No newline at end of file +}); diff --git a/frontend/playwright/ui/specs/profile-menu.spec.js b/frontend/playwright/ui/specs/profile-menu.spec.js index e86a79a826..71bdbb4199 100644 --- a/frontend/playwright/ui/specs/profile-menu.spec.js +++ b/frontend/playwright/ui/specs/profile-menu.spec.js @@ -10,12 +10,16 @@ test("Navigate to penpot changelog from profile menu", async ({ page }) => { await dashboardPage.goToDashboard(); await dashboardPage.openProfileMenu(); - await dashboardPage.clickProfileMenuItem("About Penpot"); + const aboutPenpotItem = page.getByText("About Penpot"); + await aboutPenpotItem.hover(); + + const changelogSubmenuItem = page.getByText("Penpot Changelog"); + await expect(changelogSubmenuItem).toBeVisible(); // Listen for the new page (tab) that opens when clicking "Penpot Changelog" const [newPage] = await Promise.all([ page.context().waitForEvent("page"), - dashboardPage.clickProfileMenuItem("Penpot Changelog"), + changelogSubmenuItem.click(), ]); await newPage.waitForLoadState(); diff --git a/frontend/playwright/ui/specs/workspace-modifers.spec.js b/frontend/playwright/ui/specs/workspace-modifers.spec.js index 8e5f871fd8..bbea6199f8 100644 --- a/frontend/playwright/ui/specs/workspace-modifers.spec.js +++ b/frontend/playwright/ui/specs/workspace-modifers.spec.js @@ -3,13 +3,17 @@ import { WasmWorkspacePage } from "../pages/WasmWorkspacePage"; test.beforeEach(async ({ page }) => { await WasmWorkspacePage.init(page); + await WasmWorkspacePage.mockConfigFlags(page, ["enable-feature-token-input"]); }); test("BUG 13305 - Fix resize board to fit content", async ({ page }) => { const workspacePage = new WasmWorkspacePage(page); await workspacePage.setupEmptyFile(); await workspacePage.mockGetFile("workspace/get-file-13305.json"); - await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-13305.json"); + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-13305.json", + ); await workspacePage.goToWorkspace({ fileId: "9666e946-78e8-8111-8007-8fe5f0f454bf", @@ -17,12 +21,42 @@ test("BUG 13305 - Fix resize board to fit content", async ({ page }) => { }); await workspacePage.clickLeafLayer("Board"); - await workspacePage.rightSidebar.getByRole("button", { name: "Resize board to fit content" }).click(); + await workspacePage.rightSidebar + .getByRole("button", { name: "Resize board to fit content" }) + .click(); - await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("630"); - await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("630"); - await expect(workspacePage.rightSidebar.getByTitle("X axis").getByRole("textbox")).toHaveValue("110"); - await expect(workspacePage.rightSidebar.getByTitle("Y axis").getByRole("textbox")).toHaveValue("110"); + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + + // Width + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + exact: true, + }); + await expect(widthInput).toHaveValue("630"); + + // Height + const heightInput = measuresSection.getByRole("textbox", { + name: "Height", + exact: true, + }); + await expect(heightInput).toHaveValue("630"); + + // X Position (using "X axis" title) + const xPosInput = measuresSection.getByRole("textbox", { + name: "X axis", + exact: true, + }); + await expect(xPosInput).toHaveValue("110"); + + // Y Position (using "Y axis" title) + const yPosInput = measuresSection.getByRole("textbox", { + name: "Y axis", + exact: true, + }); + await expect(yPosInput).toHaveValue("110"); }); test("BUG 13382 - Fix problem with flex layout", async ({ page }) => { @@ -35,7 +69,10 @@ test("BUG 13382 - Fix problem with flex layout", async ({ page }) => { "workspace/get-file-13382-fragment.json", ); - await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json"); + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-empty.json", + ); await workspacePage.goToWorkspace({ fileId: "52c4e771-3853-8190-8007-9506c70e8100", @@ -47,13 +84,26 @@ test("BUG 13382 - Fix problem with flex layout", async ({ page }) => { await workspacePage.clickToggableLayer("C"); await workspacePage.clickLeafLayer("R2"); - const heightText = workspacePage.rightSidebar.getByTitle("Height").getByPlaceholder('--'); - await heightText.fill("200"); - await heightText.press("Enter"); + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + + const heightInput = measuresSection.getByRole("textbox", { + name: "Height", + exact: true, + }); + await heightInput.fill("200"); + await heightInput.press("Enter"); await workspacePage.clickLeafLayer("B"); - await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("340"); + // Width + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + exact: true, + }); + await expect(widthInput).toHaveValue("393"); }); test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => { @@ -66,7 +116,10 @@ test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => { "workspace/get-file-13468-fragment.json", ); - await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json"); + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-empty.json", + ); await workspacePage.goToWorkspace({ fileId: "3a4d7ec7-c391-8146-8007-9a05c41da6b9", @@ -76,10 +129,21 @@ test("BUG 13468 - Fix problem with flex propagation", async ({ page }) => { await workspacePage.clickToggableLayer("Parent"); await workspacePage.clickToggableLayer("Container"); - await workspacePage.sidebar.getByRole('button', { name: 'Show' }).click(); + await workspacePage.sidebar.getByRole("button", { name: "Show" }).click(); await workspacePage.clickLeafLayer("Container"); - await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("76"); + + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + + const heightInput = measuresSection.getByRole("textbox", { + name: "Height", + exact: true, + }); + + await expect(heightInput).toHaveValue("76"); }); test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => { @@ -92,7 +156,10 @@ test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => { "workspace/get-file-13272-fragment.json", ); - await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json"); + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-empty.json", + ); await workspacePage.goToWorkspace({ fileId: "3b9773cc-d4f1-81e1-8007-b3f8dcaba770", @@ -102,15 +169,31 @@ test("BUG 13272 - Fix problem with snap to pixel", async ({ page }) => { await workspacePage.clickToggableLayer("Group"); await workspacePage.clickLeafLayer("Group"); - await workspacePage.page.locator('g:nth-child(11) > .cursor-resize-nesw-0').hover(); + await workspacePage.page + .locator("g:nth-child(11) > .cursor-resize-nesw-0") + .hover(); await workspacePage.page.mouse.down(); await workspacePage.page.mouse.move(1200, 800); await workspacePage.page.mouse.up(); await workspacePage.clickLeafLayer("Rectangle"); - await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("197.5"); - await expect(workspacePage.rightSidebar.getByTitle("Height").getByRole("textbox")).toHaveValue("128.28"); + + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + + const heightInput = measuresSection.getByRole("textbox", { + name: "Height", + exact: true, + }); + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + exact: true, + }); + await expect(widthInput).toHaveValue("197.5"); + await expect(heightInput).toHaveValue("128.28"); }); test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => { @@ -123,7 +206,10 @@ test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => { "workspace/get-file-13755-fragment.json", ); - await workspacePage.mockRPC("update-file?id=*", "workspace/update-file-empty.json"); + await workspacePage.mockRPC( + "update-file?id=*", + "workspace/update-file-empty.json", + ); await workspacePage.goToWorkspace({ fileId: "7fd33337-c651-80ae-8007-c357213f876e", @@ -133,9 +219,19 @@ test("BUG 13755 - Fix problem with text change modiifers", async ({ page }) => { await workspacePage.clickToggableLayer("Board"); await workspacePage.clickLeafLayer("uno dos tres cuatro"); - await workspacePage.page.keyboard.press('Enter'); - await workspacePage.page.keyboard.type('test'); + await workspacePage.page.keyboard.press("Enter"); + await workspacePage.page.keyboard.type("test"); await workspacePage.clickToggableLayer("Board"); - await expect(workspacePage.rightSidebar.getByTitle("Width").getByRole("textbox")).toHaveValue("23"); + + const measuresSection = workspacePage.rightSidebar.getByRole("region", { + name: "shape-measures-section", + }); + await expect(measuresSection).toBeVisible(); + + const widthInput = measuresSection.getByRole("textbox", { + name: "Width", + exact: true, + }); + await expect(widthInput).toHaveValue("23"); }); diff --git a/frontend/src/app/main/ui/dashboard/sidebar.scss b/frontend/src/app/main/ui/dashboard/sidebar.scss index e4bb79eea6..73e56d497a 100644 --- a/frontend/src/app/main/ui/dashboard/sidebar.scss +++ b/frontend/src/app/main/ui/dashboard/sidebar.scss @@ -26,7 +26,6 @@ margin: 0 var(--sp-l) 0 0; border-right: $b-1 solid var(--panel-border-color); background-color: var(--panel-background-color); - z-index: var(--z-index-panels); } // SIDEBAR CONTENT COMPONENT diff --git a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs index 3d1c4741b9..cca70e8ca0 100644 --- a/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs +++ b/frontend/src/app/main/ui/workspace/sidebar/options/menus/measures.cljs @@ -606,6 +606,7 @@ (if token-numeric-inputs [:> numeric-input-wrapper* {:on-change on-rotation-change + :data-testid "rotation" :on-detach on-detach-token :icon i/rotation :min -359