Merge branch 'dev' into feature/#227-add-icons

README.md

@@ -125,6 +125,17 @@ Team members participating in this project
   <a href="https://github.com/Pableras90">
     <kbd><img src="https://github.com/Pableras90.png" alt="Pablo Reinaldo" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>
+
+  <a href="https://github.com/Alber-Writer">
+    <kbd><img src="https://github.com/Alber-Writer.png" alt="Alberto Escribano" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/El-Mito-de-Giralda">
+    <kbd><img src="https://github.com/El-Mito-de-Giralda.png" alt="Jorge Miranda de la quintana" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+  <a href="https://github.com/josemitoribio">
+    <kbd><img src="https://github.com/josemitoribio.png" alt="Josemi Toribio" width="50" height="50" style="border-radius: 50%;"></kbd>
+  </a>
+
   <a href="https://github.com/IonutGabi">
     <kbd><img src="https://github.com/IonutGabi.png" alt="Gabi Birsan" width="50" height="50" style="border-radius: 50%;"></kbd>
   </a>  

e2e/helpers/konva-testing.helpers.ts

@@ -62,6 +62,15 @@ export const getTransformer = async (page: Page): Promise<any> => {
   return transformer;
 };
 
+export const getIndexFromCanvasShape = async (
+  page: Page,
+  shapeId: number
+): Promise<number> => {
+  const children = await getChildren(page);
+  const index = children.findIndex(child => child._id === shapeId);
+  return index;
+};
+
 export const getWithinCanvasItemList = async (
   page: Page
 ): Promise<Group['attrs'][]> => {

e2e/helpers/position.helpers.ts

@@ -1,7 +1,7 @@
 import { Locator, Page } from '@playwright/test';
 import { Group } from 'konva/lib/Group';
 
-interface Position {
+export interface Position {
   x: number;
   y: number;
 }
@@ -43,7 +43,8 @@ export const dragAndDrop = async (
 
 export const addComponentsToCanvas = async (
   page: Page,
-  components: string[]
+  components: string[],
+  displacementQty: number = 120
 ) => {
   const stageCanvas = await page.locator('#konva-stage canvas').first();
   const canvasPosition = await stageCanvas.boundingBox();
@@ -65,7 +66,7 @@ export const addComponentsToCanvas = async (
       };
     };
 
-    await dragAndDrop(page, position, targetPosition(120, index));
+    await dragAndDrop(page, position, targetPosition(displacementQty, index));
   }
 };
 

e2e/thumb-pages/create-new-thumb-page.spec.ts

@@ -0,0 +1,17 @@
+import { test, expect } from '@playwright/test';
+
+test('create-and-verify-new-thumb-page', async ({ page }) => {
+  await page.goto('');
+
+  await page.getByText('Pages').click();
+
+  await expect(page.getByText('Page 2', { exact: true })).toHaveCount(0);
+
+  const addButton = page.getByRole('button', { name: 'add new page' });
+  await expect(addButton).toBeVisible();
+  await addButton.click();
+
+  const siblingElement = page.getByText('Page 2', { exact: true });
+  const thumb = siblingElement.locator('..');
+  await expect(thumb).toBeVisible();
+});

e2e/thumb-pages/rename-thumb-page.spec.ts

@@ -0,0 +1,34 @@
+import { test, expect } from '@playwright/test';
+
+test('rename-thumb-page-through-direct-edit-and-context-menu', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  await page.getByText('Pages').click();
+  const thumb = page.getByText('Page 1', { exact: true });
+  await expect(thumb).toBeVisible();
+  await expect(thumb).toHaveText('Page 1');
+
+  await thumb.dblclick();
+  const input = page.getByRole('textbox');
+  const newTextContent = 'Change the name';
+  await input.fill(newTextContent);
+  await page.keyboard.press('Enter');
+  const renamedPage = page.getByText(newTextContent, { exact: true });
+  await expect(renamedPage).toBeVisible();
+
+  const siblingElement = page.getByText('Change the name', { exact: true });
+  const divThumb = siblingElement.locator('..');
+  await divThumb.click({ button: 'right' });
+  await page.getByText('Rename').click();
+
+  const secondNewTextContent = 'Other name';
+  await expect(input).toBeVisible();
+  await input.fill(secondNewTextContent);
+  await page.keyboard.press('Enter');
+  const secondRenamedPage = page.getByText(secondNewTextContent, {
+    exact: true,
+  });
+  await expect(secondRenamedPage).toBeVisible();
+});

e2e/thumb-pages/visible-thumb-page.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from '@playwright/test';
+
+test('verifies visibility of thumb page, chevron and add new page button', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  await page.getByText('Pages').click();
+
+  const siblingElement = page.getByText('Page 1', { exact: true });
+  const thumb = siblingElement.locator('..');
+  await expect(thumb).toBeVisible();
+
+  const svgElement = thumb.locator('span > svg');
+  await expect(svgElement).toBeVisible();
+
+  const addButton = page.getByRole('button', { name: 'add new page' });
+  await expect(addButton).toBeVisible();
+});

e2e/z-index/z-index.spec.ts

@@ -0,0 +1,92 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsToCanvas,
+  getAllByShapeType,
+  getIndexFromCanvasShape,
+  getShapePosition,
+} from '../helpers';
+import { Group } from 'konva/lib/Group';
+
+test('drop three shapes in canvas, select one, try all z-index levels', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Input', 'Input'];
+  await addComponentsToCanvas(page, componentsAtCanvas, 30);
+
+  const inputShapes: Group[] = (await getAllByShapeType(
+    page,
+    'input'
+  )) as Group[];
+  expect(inputShapes.length).toBe(3);
+
+  // Get Canvas position
+  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  expect(stageCanvas).toBeDefined();
+  const canvasPosition = await stageCanvas.boundingBox();
+  if (!canvasPosition) throw new Error('No canvas found');
+
+  // Click on empty canvas space to clear selection
+  await page.mouse.click(500, 500);
+
+  // Click on second input shape (will be the test subject)
+  const inputShapePosition = await getShapePosition(inputShapes[1]);
+  await page.mouse.click(
+    canvasPosition.x + inputShapePosition.x + 30,
+    canvasPosition.y + inputShapePosition.y + 10
+  );
+
+  // Get initial Z-index of all shapes
+  const InitialzIndexes: number[] = await Promise.all(
+    inputShapes.map(async shape => {
+      return await getIndexFromCanvasShape(page, shape._id);
+    })
+  );
+  expect(InitialzIndexes).toEqual([0, 1, 2]);
+
+  // FIRST BUTTON: Move to the top (highest z-index)
+  await page.locator('button[aria-label="Bring to front"]').click();
+
+  // Verify Z-index after moving to the top
+  const zIndexesAfterMoveToTop: number[] = await Promise.all(
+    inputShapes.map(async shape => {
+      return await getIndexFromCanvasShape(page, shape._id);
+    })
+  );
+  expect(zIndexesAfterMoveToTop).toEqual([0, 2, 1]); // Second shape is now on top
+
+  // SECOND BUTTON: Move to the bottom (lowest z-index)
+  await page.locator('button[aria-label="Send to back"]').click();
+
+  // Verify Z-index after moving to the bottom
+  const zIndexesAfterMoveToBottom: number[] = await Promise.all(
+    inputShapes.map(async shape => {
+      return await getIndexFromCanvasShape(page, shape._id);
+    })
+  );
+  expect(zIndexesAfterMoveToBottom).toEqual([1, 0, 2]); // Second shape is now at the bottom
+
+  // THIRD BUTTON: Move up one level
+  await page.locator('button[aria-label="Bring forward"]').click();
+
+  // Verify Z-index after moving up one level
+  const zIndexesAfterMoveUp: number[] = await Promise.all(
+    inputShapes.map(async shape => {
+      return await getIndexFromCanvasShape(page, shape._id);
+    })
+  );
+  expect(zIndexesAfterMoveUp).toEqual([0, 1, 2]); // Second shape moved up one level
+
+  // FOURTH BUTTON: Move down one level
+  await page.locator('button[aria-label="Send backward"]').click();
+
+  // Verify Z-index after moving down one level
+  const zIndexesAfterMoveDown: number[] = await Promise.all(
+    inputShapes.map(async shape => {
+      return await getIndexFromCanvasShape(page, shape._id);
+    })
+  );
+  expect(zIndexesAfterMoveDown).toEqual([1, 0, 2]); // Second shape moved down one level again
+});