Deployment

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

@@ -3,6 +3,7 @@ import { Layer } from 'konva/lib/Layer';
 import { Shape } from 'konva/lib/Shape';
 import { Group } from 'konva/lib/Group';
 import { E2E_CanvasItemKeyAttrs } from './types/e2e-types';
+import { getCanvasBoundingBox } from './position.helpers';
 
 const getLayer = async (page: Page): Promise<Layer> =>
   await page.evaluate(() => {
@@ -77,7 +78,8 @@ export const clickOnCanvasItem = async (
   item: E2E_CanvasItemKeyAttrs
 ) => {
   const { x, y } = item;
-  const canvasWindowPos = await page.locator('canvas').boundingBox();
+  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const canvasWindowPos = await stageCanvas.boundingBox();
   if (!canvasWindowPos) throw new Error('Canvas is not loaded on ui');
   await page.mouse.move(
     canvasWindowPos?.x + x + 20,
@@ -90,6 +92,19 @@ export const clickOnCanvasItem = async (
   return item;
 };
 
+export const dbClickOnCanvasItem = async (
+  page: Page,
+  item: E2E_CanvasItemKeyAttrs
+) => {
+  const { x, y } = item;
+  const canvasWindowPos = await getCanvasBoundingBox(page);
+  await page.mouse.dblclick(
+    canvasWindowPos?.x + x + 20,
+    canvasWindowPos?.y + y + 20
+  );
+  return item;
+};
+
 export const ctrlClickOverCanvasItems = async (
   page: Page,
   itemList: E2E_CanvasItemKeyAttrs[]

e2e/helpers/position.helpers.ts

@@ -9,6 +9,7 @@ interface Position {
 export const getLocatorPosition = async (
   locator: Locator
 ): Promise<Position> => {
+  await locator.scrollIntoViewIfNeeded();
   const box = (await locator.boundingBox()) || {
     x: 0,
     y: 0,
@@ -18,6 +19,17 @@ export const getLocatorPosition = async (
   return { x: box.x + box.width / 2, y: box.y + box.height / 2 };
 };
 
+export const getCanvasBoundingBox = async (page: Page) => {
+  const canvasWindowPos = await page
+    .locator('#konva-stage canvas')
+    .boundingBox();
+  if (canvasWindowPos) {
+    return canvasWindowPos;
+  } else {
+    throw new Error('Canvas is not loaded on ui');
+  }
+};
+
 export const dragAndDrop = async (
   page: Page,
   aPosition: Position,
@@ -33,7 +45,8 @@ export const addComponentsToCanvas = async (
   page: Page,
   components: string[]
 ) => {
-  const canvasPosition = await page.locator('canvas').boundingBox();
+  const stageCanvas = await page.locator('#konva-stage canvas').first();
+  const canvasPosition = await stageCanvas.boundingBox();
   if (!canvasPosition) throw new Error('No canvas found');
 
   for await (const [index, c] of components.entries()) {

e2e/helpers/ui-buttons.helpers.ts

@@ -0,0 +1,13 @@
+import { Page } from '@playwright/test';
+
+export const clickUndoUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Undo' }).click();
+
+export const clickRedoUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Redo' }).click();
+
+export const clickCopyUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Copy' }).click();
+
+export const clickPasteUiButton = async (page: Page) =>
+  await page.getByRole('button', { name: 'Paste' }).click();

e2e/inline-edit/multiple-line-inline-edit.spec.ts

@@ -0,0 +1,121 @@
+import { test, expect } from '@playwright/test';
+import { Group } from 'konva/lib/Group';
+import { dragAndDrop, getByShapeType, getLocatorPosition } from '../helpers';
+
+test('can add textarea to canvas, edit content, and verify shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+  const textareaContent = await textarea.inputValue();
+  expect(textareaContent).toEqual('Your text here...');
+
+  const textContent = 'Hello';
+  await textarea.fill(textContent);
+  await page.mouse.click(800, 130);
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === textContent
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('cancels textarea edit on Escape and verifies original shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'Hello';
+  await textarea.fill(textContent);
+  await page.keyboard.press('Escape');
+  const originalTextContent = 'Your text here...';
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === originalTextContent
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('can add and edit input, and delete last letter', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'World';
+  await textarea.fill(textContent);
+  await page.keyboard.press('Backspace');
+  const updatedTextareaContent = await textarea.inputValue();
+  expect(updatedTextareaContent).toEqual('Worl');
+
+  await page.mouse.click(800, 130);
+
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === 'Worl'
+  );
+  expect(textShape).toBeDefined();
+});
+
+test('adds multi-line text to textarea on canvas and verifies shape text', async ({
+  page,
+}) => {
+  await page.goto('');
+  const component = page.getByAltText('Textarea');
+  await component.scrollIntoViewIfNeeded();
+
+  const position = await getLocatorPosition(component);
+  const targetPosition = {
+    x: position.x + 500,
+    y: position.y - 240,
+  };
+  await dragAndDrop(page, position, targetPosition);
+  await page.mouse.dblclick(targetPosition.x, targetPosition.y + 40);
+  const textarea = page.getByRole('textbox').first();
+
+  const textContent = 'Line 1\nLine 2';
+  await textarea.fill(textContent);
+
+  await page.mouse.click(800, 130);
+
+  const textareaShape = (await getByShapeType(page, 'textarea')) as Group;
+  expect(textareaShape).toBeDefined();
+  const textShape = textareaShape.children.find(
+    child => child.attrs.text === textContent
+  );
+  expect(textShape).toBeDefined();
+});

e2e/selection/shape-selection.spec.ts

@@ -46,7 +46,8 @@ test('drop shape in canvas, click on canvas, drop diselected', async ({
   const inputShape = (await getByShapeType(page, 'input')) as Group;
   expect(inputShape).toBeDefined();
 
-  await page.click('canvas');
+  //Click Away
+  await page.mouse.click(800, 130);
 
   const transformer = await getTransformer(page);
   expect(transformer).toBeDefined();

e2e/ui-functionality/copy-paste.spec.ts

@@ -0,0 +1,158 @@
+import { test, expect } from '@playwright/test';
+import {
+  addComponentsToCanvas,
+  dragAndDrop,
+  getWithinCanvasItemList,
+} from '../helpers';
+import { E2E_CanvasItemKeyAttrs } from '../helpers/types/e2e-types';
+import {
+  clickCopyUiButton,
+  clickPasteUiButton,
+} from '../helpers/ui-buttons.helpers';
+
+test.describe('Copy/Paste functionality tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('');
+  });
+
+  test('Should copy and paste a single shape using the ToolBar UI buttons', async ({
+    page,
+  }) => {
+    //Arrange one Input component
+    const addInputIntoCanvas = ['Input'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Copy and assert there are only one component within the canvas
+    await clickCopyUiButton(page);
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    expect(insideCanvasItemList.length).toEqual(1);
+
+    //Paste and assert there are 2 Input Components and that they have different IDs
+    await clickPasteUiButton(page);
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComponent, copiedComponent] = updatedInsideCanvasItemList;
+
+    expect(updatedInsideCanvasItemList.length).toEqual(2);
+    expect(originalComponent.shapeType).toEqual(copiedComponent.shapeType);
+    expect(originalComponent['data-id']).not.toEqual(
+      copiedComponent['data-id']
+    );
+  });
+
+  test('Should copy and paste a single shape using keyboard commands', async ({
+    page,
+  }) => {
+    // NOTE: This test has the same steps as the previous one, except for the keyboard commands.
+    //Arrange one Input component
+    const addInputIntoCanvas = ['Input'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Copy and assert there are only one component within the canvas
+    await page.keyboard.press('ControlOrMeta+c');
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    expect(insideCanvasItemList.length).toEqual(1);
+
+    //Paste and assert there are 2 Input Components and that they have different IDs
+    await page.keyboard.press('ControlOrMeta+v');
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComponent, copiedComponent] = updatedInsideCanvasItemList;
+
+    expect(updatedInsideCanvasItemList.length).toEqual(2);
+    expect(originalComponent.shapeType).toEqual(copiedComponent.shapeType);
+    expect(originalComponent['data-id']).not.toEqual(
+      copiedComponent['data-id']
+    );
+  });
+
+  /*
+  test('Should copy and paste a multiple shapes using the ToolBar UI buttons', async ({
+    page,
+  }) => {
+    //Add several components into the canvas
+    const addInputIntoCanvas = ['Input', 'Combobox', 'Icon'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Select items by drag and drop
+    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+    //Copy and assert there are 3 components within the canvas
+    await clickCopyUiButton(page);
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComp_1, originalComp_2, originalComp_3] =
+      insideCanvasItemList;
+    expect(insideCanvasItemList.length).toEqual(3);
+
+    //Paste
+    await clickPasteUiButton(page);
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [, , , copiedComp_1, copiedComp_2, copiedComp_3] =
+      updatedInsideCanvasItemList;
+
+    //Assert there are 6 Components,
+    expect(updatedInsideCanvasItemList.length).toEqual(6);
+
+    //Assert they match the same shapes respectively
+    expect(originalComp_1.shapeType).toEqual(copiedComp_1.shapeType);
+    expect(originalComp_2.shapeType).toEqual(copiedComp_2.shapeType);
+    expect(originalComp_3.shapeType).toEqual(copiedComp_3.shapeType);
+
+    //Assert they have different IDs
+    expect(originalComp_1['data-id']).not.toEqual(copiedComp_1['data-id']);
+    expect(originalComp_2['data-id']).not.toEqual(copiedComp_2['data-id']);
+    expect(originalComp_3['data-id']).not.toEqual(copiedComp_3['data-id']);
+  });
+*/
+  test('Should copy and paste a multiple shapes using keyboard commands', async ({
+    page,
+  }) => {
+    // NOTE: This test has the same steps as the previous one, except for the keyboard commands.
+    //Add several components into the canvas
+    const addInputIntoCanvas = ['Input', 'Combobox', 'Icon'];
+    await addComponentsToCanvas(page, addInputIntoCanvas);
+
+    //Select items by drag and drop
+    await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+    //Copy and assert there are 3 components within the canvas
+    await page.keyboard.press('ControlOrMeta+c');
+    const insideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [originalComp_1, originalComp_2, originalComp_3] =
+      insideCanvasItemList;
+    expect(insideCanvasItemList.length).toEqual(3);
+
+    //Paste
+    await page.keyboard.press('ControlOrMeta+v');
+    const updatedInsideCanvasItemList = (await getWithinCanvasItemList(
+      page
+    )) as E2E_CanvasItemKeyAttrs[];
+    const [, , , copiedComp_1, copiedComp_2, copiedComp_3] =
+      updatedInsideCanvasItemList;
+
+    //Assert there are 6 Components,
+    expect(updatedInsideCanvasItemList.length).toEqual(6);
+
+    //Assert they match the same shapes respectively
+    expect(originalComp_1.shapeType).toEqual(copiedComp_1.shapeType);
+    expect(originalComp_2.shapeType).toEqual(copiedComp_2.shapeType);
+    expect(originalComp_3.shapeType).toEqual(copiedComp_3.shapeType);
+
+    //Assert they have different IDs
+    expect(originalComp_1['data-id']).not.toEqual(copiedComp_1['data-id']);
+    expect(originalComp_2['data-id']).not.toEqual(copiedComp_2['data-id']);
+    expect(originalComp_3['data-id']).not.toEqual(copiedComp_3['data-id']);
+  });
+});