Merge branch 'dev' into feature/#765-Add-calculator-icon-to-set-of-icons

Author: brauliodiez

e2e/helpers/index.ts

@@ -1,2 +1,3 @@
 export * from './konva-testing.helpers';
 export * from './position.helpers';
+export * from './properties.helpers';

e2e/helpers/position.helpers.ts

@@ -5,6 +5,11 @@ export interface Position {
   y: number;
 }
 
+export interface ComponentWithCategory {
+  name: string;
+  category?: string;
+}
+
 export const getLocatorPosition = async (
   locator: Locator
 ): Promise<Position> => {
@@ -44,6 +49,18 @@ export const dragAndDrop = async (
   await page.mouse.up();
 };
 
+const getTargetPosition = (
+  canvasPosition: { x: number; y: number },
+  displacementQty: number,
+  multiplyFactor: number
+): Position => {
+  const positionDisplacement = displacementQty * (multiplyFactor + 1);
+  return {
+    x: canvasPosition.x + displacementQty + positionDisplacement,
+    y: canvasPosition.y + positionDisplacement,
+  };
+};
+
 export const addComponentsToCanvas = async (
   page: Page,
   components: string[],
@@ -58,25 +75,110 @@ export const addComponentsToCanvas = async (
     await component.scrollIntoViewIfNeeded();
     const position = await getLocatorPosition(component);
 
-    const targetPosition = (
-      displacementQty: number,
-      multiplyFactor: number
-    ) => {
-      const positionDisplacement = displacementQty * (multiplyFactor + 1);
-      return {
-        x: canvasPosition.x + displacementQty + positionDisplacement,
-        y: canvasPosition.y + positionDisplacement,
-      };
-    };
-
-    await dragAndDrop(page, position, targetPosition(displacementQty, index));
+    const targetPosition = getTargetPosition(
+      canvasPosition,
+      displacementQty,
+      index
+    );
+    await dragAndDrop(page, position, targetPosition);
+  }
+};
+
+export const addComponentsWithDifferentCategoriesToCanvas = async (
+  page: Page,
+  components: ComponentWithCategory[],
+  displacementQty: number = 120
+) => {
+  // Handle empty array
+  if (components.length === 0) {
+    return;
+  }
+
+  const stageCanvas = await page.locator('#konva-stage canvas').nth(1);
+  const canvasPosition = await stageCanvas.boundingBox();
+  if (!canvasPosition) throw new Error('No canvas found');
+
+  let currentCategory: string | undefined = undefined;
+
+  for await (const [index, componentConfig] of components.entries()) {
+    try {
+      // Change category only if it's different from current one
+      if (
+        componentConfig.category &&
+        componentConfig.category !== currentCategory
+      ) {
+        const categoryButton = page.getByText(componentConfig.category, {
+          exact: true,
+        });
+
+        // Check if category exists before clicking
+        await categoryButton.waitFor({ state: 'visible', timeout: 3000 });
+        await categoryButton.click();
+
+        // Wait a bit for the category change to take effect
+        await page.waitForTimeout(500);
+        currentCategory = componentConfig.category;
+      }
+
+      // Find component with better handling for duplicates
+      let component = page.getByAltText(componentConfig.name, { exact: true });
+
+      // Check if there are multiple elements with the same alt text
+      const componentCount = await component.count();
+
+      if (componentCount > 1) {
+        // Handle duplicates by selecting the first visible one in the current category context
+        console.warn(
+          `Multiple components found with name "${componentConfig.name}". Using first visible one.`
+        );
+        component = component.first();
+      }
+
+      // Wait for component to be available
+      await component.waitFor({ state: 'visible', timeout: 5000 });
+      await component.scrollIntoViewIfNeeded();
+      const position = await getLocatorPosition(component);
+
+      const targetPosition = getTargetPosition(
+        canvasPosition,
+        displacementQty,
+        index
+      );
+      await dragAndDrop(page, position, targetPosition);
+    } catch (error) {
+      const errorMessage =
+        error instanceof Error ? error.message : String(error);
+      throw new Error(
+        `Failed to add component "${componentConfig.name}" from category "${componentConfig.category || 'default'}": ${errorMessage}`
+      );
+    }
   }
 };
 
 export const getShapePosition = async (shape: Group): Promise<Position> => {
   return { x: shape?.attrs.x, y: shape?.attrs.y };
 };
 
+export const selectAllComponentsInCanvas = async (
+  page: Page,
+  selectionArea?: { start: Position; end: Position }
+) => {
+  // Clear any existing selection first
+  await page.mouse.click(800, 130);
+
+  // Small delay to ensure the click is processed
+  await page.waitForTimeout(100);
+
+  const selectionStart = selectionArea?.start || { x: 260, y: 130 };
+  const selectionEnd = selectionArea?.end || { x: 1000, y: 650 };
+
+  // Perform drag selection using the proven coordinates
+  await dragAndDrop(page, selectionStart, selectionEnd);
+
+  // Small delay to ensure selection is processed
+  await page.waitForTimeout(200);
+};
+
 export const moveSelected = (
   page: Page,
   direction: string,

e2e/helpers/properties.helpers.ts

@@ -0,0 +1,31 @@
+import { Page, expect } from '@playwright/test';
+import { getByShapeType } from './konva-testing.helpers';
+import { Group } from 'konva/lib/Group';
+
+export const getShapeBackgroundColor = async (
+  page: Page,
+  shapeType: string
+): Promise<string> => {
+  const shape = (await getByShapeType(page, shapeType)) as Group;
+  return shape?.children?.[0]?.attrs?.fill;
+};
+
+export const checkPropertiesExist = async (
+  page: Page,
+  properties: string[]
+) => {
+  for (const property of properties) {
+    const propLocator = page.getByText(property, { exact: true });
+    await expect(propLocator).toBeVisible();
+  }
+};
+
+export const checkPropertiesDoNotExist = async (
+  page: Page,
+  properties: string[]
+) => {
+  for (const property of properties) {
+    const propLocator = page.getByText(property, { exact: true });
+    await expect(propLocator).not.toBeVisible();
+  }
+};

e2e/props/multi-select-bg-and-common-props.spec.ts

@@ -0,0 +1,79 @@
+import { test, expect } from '@playwright/test';
+import {
+  getTransformer,
+  ComponentWithCategory,
+  getShapeBackgroundColor,
+  addComponentsWithDifferentCategoriesToCanvas,
+  selectAllComponentsInCanvas,
+  checkPropertiesExist,
+} from '../helpers';
+
+test('when selecting a button and a rectangle, select both, change background color to red, both should update their bg to red', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  // Add components to canvas
+  const components: ComponentWithCategory[] = [
+    { name: 'Button' }, // Button is in default 'Components' category
+    { name: 'Rectangle', category: 'Basic Shapes' },
+  ];
+  await addComponentsWithDifferentCategoriesToCanvas(page, components);
+
+  // Select all components in canvas
+  await selectAllComponentsInCanvas(page);
+
+  // Confirm both items are selected
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(2);
+
+  // Change background color to red
+  const bgSelector = page
+    .getByText('Background')
+    .locator('..')
+    .locator('button');
+  await bgSelector.click();
+
+  const redColorBox = page.locator(
+    'div[style*="background-color: rgb(221, 0, 0)"]'
+  );
+  await redColorBox.click();
+
+  // Verify that both items have red background
+  const buttonBgColor = await getShapeBackgroundColor(page, 'button');
+  const rectangleBgColor = await getShapeBackgroundColor(page, 'rectangle');
+
+  expect(buttonBgColor).toBe('#DD0000');
+  expect(rectangleBgColor).toBe('#DD0000');
+});
+
+test('verify that in the props we can find the common props of both items', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  // Add components to canvas
+  const components: ComponentWithCategory[] = [
+    { name: 'Button' },
+    { name: 'Rectangle', category: 'Basic Shapes' },
+  ];
+  await addComponentsWithDifferentCategoriesToCanvas(page, components);
+
+  // Select all components in canvas
+  await selectAllComponentsInCanvas(page);
+
+  // Confirm both items are selected
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(2);
+
+  const commonProps: string[] = [
+    'Layering',
+    'Stroke',
+    'Stroke style',
+    'Background',
+    'Border-radius',
+  ];
+
+  // Verify common properties are visible in the properties panel
+  await checkPropertiesExist(page, commonProps);
+});

e2e/props/multi-select-no-common-props.spec.ts

@@ -0,0 +1,45 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsWithDifferentCategoriesToCanvas,
+  checkPropertiesDoNotExist,
+  checkPropertiesExist,
+  ComponentWithCategory,
+  getTransformer,
+  selectAllComponentsInCanvas,
+} from '../helpers';
+
+test('when selecting button and bar chart, check that there are not common props (just default layering prop)', async ({
+  page,
+}) => {
+  page.goto('');
+
+  // Add components to canvas
+  const components: ComponentWithCategory[] = [
+    { name: 'Button' },
+    { name: 'Bar Chart', category: 'Rich Components' },
+  ];
+  await addComponentsWithDifferentCategoriesToCanvas(page, components);
+
+  // Select all components in canvas
+  await selectAllComponentsInCanvas(page);
+
+  // Confirm both items are selected
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(2);
+
+  const buttonProps: string[] = [
+    'Stroke',
+    'Stroke style',
+    'Background',
+    'TextColor',
+    'Disabled',
+    'Border-radius',
+  ];
+
+  // Verify button props are not visible in the properties panel
+  await checkPropertiesDoNotExist(page, buttonProps);
+
+  // Verify layering prop to be visible
+
+  await checkPropertiesExist(page, ['Layering']);
+});

e2e/thumb-pages/change-thumb-selected-add-component.spec.ts

@@ -0,0 +1,68 @@
+import { test, expect } from '@playwright/test';
+import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';
+
+test('when selecting a new thumb and adding a new shape it will be dropped in the new created page', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  await page.getByText('Devices').click();
+
+  // Drag & drop mobile device component to default page canvas
+  const componentFirstPage = page
+    .getByText('Mobile Phone', { exact: true })
+    .locator('..');
+
+  const position = await getLocatorPosition(componentFirstPage);
+  const targetPosition = { x: position.x + 500, y: position.y - 200 };
+  await dragAndDrop(page, position, targetPosition);
+
+  // Add new page
+  await page.getByText('Pages').click();
+  const addButton = page.getByRole('button', { name: 'add new page' });
+  await addButton.click();
+
+  // Verify Page 2 is automatically selected/active
+  const pageTwo = page.getByText('Page 2', { exact: true }).locator('..');
+  await expect(pageTwo).toHaveClass(/active/);
+
+  // Drag & drop browser component to second page canvas
+  await page.getByText('Devices').click();
+  const componentSecondPage = page
+    .getByText('Browser', { exact: true })
+    .locator('..');
+
+  const position2 = await getLocatorPosition(componentSecondPage);
+  const targetPosition2 = { x: position2.x + 400, y: position2.y };
+  await dragAndDrop(page, position2, targetPosition2);
+
+  await page.getByText('Pages').click();
+
+  // Verify if browser is in page 2 (current selected page)
+  const browser = await getByShapeType(page, 'browser');
+  expect(browser).toBeDefined();
+
+  // Switch to page 1
+  const pageOne = page.getByText('Page 1', { exact: true }).locator('..');
+  await pageOne.click();
+
+  // Verify if in page 1: mobile visible, browser not visible
+  const mobile = await getByShapeType(page, 'mobilePhone');
+  const browserInPage1 = await getByShapeType(page, 'browser');
+
+  expect(mobile).toBeDefined();
+  expect(browserInPage1).toBeUndefined();
+
+  // Add button to page 1 to verify shapes are added to correct active page
+  await page.getByText('Components', { exact: true }).click();
+  const button = page.getByAltText('Button', { exact: true });
+
+  const position3 = await getLocatorPosition(button);
+  const targetPosition3 = { x: position.x + 500, y: position.y - 100 };
+  await dragAndDrop(page, position3, targetPosition3);
+
+  // Verify button was added to canvas in page 1
+  const buttonInCanvas = await getByShapeType(page, 'button');
+  expect(mobile).toBeDefined();
+  expect(buttonInCanvas).toBeDefined();
+});