mirror of
https://github.com/penpot/penpot.git
synced 2025-05-28 15:46:11 +02:00
🐛 Fix layers tree not expanding towards the bottom edge
This commit is contained in:
parent
00f7ea2b56
commit
04f341ce1d
9 changed files with 57 additions and 25 deletions
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
23
frontend/playwright/ui/specs/sidebar.spec.js
Normal file
23
frontend/playwright/ui/specs/sidebar.spec.js
Normal file
|
@ -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);
|
||||
});
|
||||
});
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue