penpot/frontend/playwright/ui/specs/multiselection.spec.js

import { test, expect } from "@playwright/test";
import { WasmWorkspacePage } from "../pages/WasmWorkspacePage";

test.beforeEach(async ({ page }) => {
  await WasmWorkspacePage.init(page);
});

test("Multiselection - check multiple values in measures", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  // Select first shape (single selection first)
  await page.getByTestId("layer-item").getByRole("button").first().click();
  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' });
  await expect(measuresSection).toBeVisible();

  // Width
  const widthInput = measuresSection.getByTitle('Width', { exact: true }).getByRole('textbox');
  await expect(widthInput).toHaveValue("360");

  // Height
  const heightInput = measuresSection.getByTitle('Height', { exact: true }).getByRole('textbox');
  await expect(heightInput).toHaveValue("53");

  // X Position (using "X axis" title)
  const xPosInput = measuresSection.getByTitle('X axis', { exact: true }).getByRole('textbox');
  await expect(xPosInput).toHaveValue("1094");

  // Y Position (using "Y axis" title)
  const yPosInput = measuresSection.getByTitle('Y axis', { exact: true }).getByRole('textbox');
  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'] });

  // 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');
});

test("Multiselection - check typography multiple values", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  await page.getByTestId("layer-item").getByRole("button").first().click();
  await workspacePage.layers.getByTestId("layer-row").nth(0).click();

  // Text section
  const textSection = workspacePage.rightSidebar.getByRole('region', { name: "Text section" });
  await expect(textSection).toBeVisible();

  // Single selection - show typography name (not multiple)
  await expect(textSection.getByText("Multiple typographies")).not.toBeVisible();

  // Multi-selection
  await workspacePage.layers.getByTestId("layer-row").nth(1).click({ modifiers: ['Shift'] });

  // Should show "Multiple typographies"
  await expect(textSection.getByText("Multiple typographies")).toBeVisible();
});

test("Multiselection - check fill multiple values", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  await page.getByTestId("layer-item").getByRole("button").first().click();
  await workspacePage.layers.getByTestId("layer-row").nth(0).click();

  // 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'] });

  // Should show "Mixed" for fills when shapes have different fill colors
  await expect(fillSection.getByText('Mixed')).toBeVisible();
});

test("Multiselection - check stroke multiple values", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  await page.getByTestId("layer-item").getByRole("button").first().click();
  await workspacePage.layers.getByTestId("layer-row").nth(0).click();

  // 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'] });

  // Should show "Mixed" for strokes when shapes have different stroke colors
  await expect(strokeSection.getByText('Mixed')).toBeVisible();
});

test("Multiselection - check rotation multiple values", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  await page.getByTestId("layer-item").getByRole("button").first().click();
  await workspacePage.layers.getByTestId("layer-row").nth(1).click();

  // Measures section contains rotation
  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');
  await expect(rotationInput).toBeVisible();

  // Rotate that shape
  await rotationInput.fill("45");
  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'] });

  // Rotation should show "Mixed" placeholder
  await expect(rotationInput).toHaveAttribute('placeholder', 'Mixed');
});

test("Multiselection typographies in reverse order", async ({ page }) => {
  const workspacePage = new WasmWorkspacePage(page);
  await workspacePage.setupEmptyFile(page);
  await workspacePage.mockRPC(
    /get\-file\?/,
    "workspace/get-file-copy-paste.json",
  );
  await workspacePage.mockRPC(
    "get-file-fragment?file-id=*&fragment-id=*",
    "workspace/get-file-copy-paste-fragment.json",
  );

  await workspacePage.goToWorkspace({
    fileId: "870f9f10-87b5-8137-8005-934804124660",
    pageId: "870f9f10-87b5-8137-8005-934804124661",
  });

  await page.getByTestId("layer-item").getByRole("button").first().click();
  await workspacePage.layers.getByTestId("layer-row").nth(1).click();

  // Text section
  const textSection = workspacePage.rightSidebar.getByRole('region', { name: "Text section" });
  await expect(textSection).not.toBeVisible();

  // Single selection - show typography name (not multiple)
  await expect(textSection.getByText("Multiple typographies")).not.toBeVisible();

  // Multi-selection
  await workspacePage.layers.getByTestId("layer-row").nth(0).click({ modifiers: ['Shift'] });
  await expect(textSection).toBeVisible();
  // Should show "Multiple typographies"
  await expect(textSection.getByText("Multiple typographies")).toBeVisible();
});