Merge pull request #462 from Lemoncode/dev

prod

e2e/helpers/konva-testing.helpers.ts

@@ -2,6 +2,7 @@ import { Page } from '@playwright/test';
 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';
 
 const getLayer = async (page: Page): Promise<Layer> =>
   await page.evaluate(() => {
@@ -59,3 +60,46 @@ export const getTransformer = async (page: Page): Promise<any> => {
   });
   return transformer;
 };
+
+export const getWithinCanvasItemList = async (
+  page: Page
+): Promise<Group['attrs'][]> => {
+  const items = await page.evaluate(() => {
+    return window.__TESTING_KONVA_LAYER__.find(
+      (c: any) => c.getType('Group') && (c.attrs['data-id'] as Group)
+    );
+  });
+  return items.map(it => it.attrs);
+};
+
+export const clickOnCanvasItem = async (
+  page: Page,
+  item: E2E_CanvasItemKeyAttrs
+) => {
+  const { x, y } = item;
+  const canvasWindowPos = await page.locator('canvas').boundingBox();
+  if (!canvasWindowPos) throw new Error('Canvas is not loaded on ui');
+  await page.mouse.move(
+    canvasWindowPos?.x + x + 20,
+    canvasWindowPos?.y + y + 20
+  );
+
+  await page.mouse.down();
+  await page.mouse.up();
+
+  return item;
+};
+
+export const ctrlClickOverCanvasItems = async (
+  page: Page,
+  itemList: E2E_CanvasItemKeyAttrs[]
+) => {
+  if (!itemList.length)
+    throw new Error('Please, add an array with at least one canvas Item');
+  // NOTE: The keyboard entry 'ControlOrMeta' is the way to simulate both 'Ctrl' or 'Command' key
+  await page.keyboard.down('ControlOrMeta');
+  for (const item of itemList) {
+    await clickOnCanvasItem(page, item);
+  }
+  await page.keyboard.up('ControlOrMeta');
+};

e2e/helpers/position.helpers.ts

@@ -37,6 +37,7 @@ export const addComponentsToCanvas = async (
 
   for await (const [index, c] of components.entries()) {
     const component = page.getByAltText(c, { exact: true });
+    await component.scrollIntoViewIfNeeded();
     const position = await getLocatorPosition(component);
 
     const targetPosition = (

e2e/helpers/types/e2e-types.d.ts

@@ -0,0 +1,8 @@
+export interface E2E_CanvasItemKeyAttrs {
+  x: number;
+  y: number;
+  ['data-id']: string;
+  width: number;
+  height: number;
+  shapeType: string;
+}

e2e/inline-edit/simple-inline-edit.spec.ts

@@ -61,3 +61,29 @@ test('can add and edit input, and delete last letter', async ({ page }) => {
   );
   expect(textShape).toBeDefined();
 });
+
+test('can edit input, press Esc key, and cancel edition', async ({ page }) => {
+  await page.goto('');
+  const component = page.getByAltText('Input', { exact: true });
+
+  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);
+  const input = page.getByRole('textbox').first();
+  const inputValue = await input.getAttribute('value');
+  expect(inputValue).toEqual('Placeholder');
+
+  const textContent = 'User';
+  await input.fill(textContent);
+  await page.keyboard.press('Escape');
+  const inputShape = (await getByShapeType(page, 'input')) as Group;
+  expect(inputShape).toBeDefined();
+  const textShape = inputShape.children.find(
+    child => child.attrs.text === 'Placeholder'
+  );
+  expect(textShape).toBeDefined();
+});

e2e/selection/multiple-selection.spec.ts

@@ -1,5 +1,11 @@
 import { test, expect } from '@playwright/test';
-import { dragAndDrop, addComponentsToCanvas, getTransformer } from '../helpers';
+import {
+  dragAndDrop,
+  addComponentsToCanvas,
+  getTransformer,
+  getWithinCanvasItemList,
+  ctrlClickOverCanvasItems,
+} from '../helpers';
 
 test('Should perform multiple selection when dragging and dropping over multiple components in the canvas', async ({
   page,
@@ -20,3 +26,52 @@ test('Should perform multiple selection when dragging and dropping over multiple
   const selectedItems = await getTransformer(page);
   expect(selectedItems._nodes.length).toEqual(3);
 });
+
+test('Should deselect all previously selected items when clicking on an empty point on the canvas', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Input', 'Icon', 'Label'];
+  await addComponentsToCanvas(page, componentsAtCanvas);
+
+  //Click Away
+  await page.mouse.click(800, 130);
+
+  //Perform items selection by drag and drop
+  await dragAndDrop(page, { x: 260, y: 130 }, { x: 1000, y: 550 });
+
+  //Assert
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(3);
+
+  //Click Away
+  await page.mouse.click(800, 130);
+  //Assert
+  const updatedSelectedItems = await getTransformer(page);
+  expect(updatedSelectedItems._nodes.length).toEqual(0);
+});
+
+test('Should add some in-canvas-items to the current selection, by clicking on them, while pressing the CTRL / CMD keyboard.', async ({
+  page,
+}) => {
+  await page.goto('');
+
+  //Drag and drop component to canvas
+  const componentsAtCanvas = ['Input', 'Button', 'Textarea', 'Combobox'];
+  await addComponentsToCanvas(page, componentsAtCanvas);
+  const insideCanvasItemList = await getWithinCanvasItemList(page);
+
+  //Assert no elements at current selection
+  const selectedItems = await getTransformer(page);
+  expect(selectedItems._nodes.length).toEqual(1);
+
+  // Add 2 canvas items to current selection
+  const itemsToBeSelected = insideCanvasItemList.slice(1, 3);
+  await ctrlClickOverCanvasItems(page, itemsToBeSelected);
+
+  //Assert the quantity of selected-items
+  const currentSelection = await getTransformer(page);
+  expect(currentSelection._nodes.length).toEqual(3);
+});

src/common/components/mock-components/front-basic-shapes/line-basic-shape.tsx → src/common/components/mock-components/front-basic-shapes/horizontal-line-basic-shape.tsx

@@ -7,7 +7,7 @@ import { useShapeProps } from '../../shapes/use-shape-props.hook';
 import { BASIC_SHAPE } from '../front-components/shape.const';
 import { useGroupShapeProps } from '../mock-components.utils';
 
-const lineShapeRestrictions: ShapeSizeRestrictions = {
+const horizontalLineShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
   minHeight: 10,
   maxWidth: -1,
@@ -16,12 +16,12 @@ const lineShapeRestrictions: ShapeSizeRestrictions = {
   defaultHeight: 10,
 };
 
-export const getlineShapeRestrictions = (): ShapeSizeRestrictions =>
-  lineShapeRestrictions;
+export const getHorizontalLineShapeRestrictions = (): ShapeSizeRestrictions =>
+  horizontalLineShapeRestrictions;
 
-const shapeType: ShapeType = 'line';
+const shapeType: ShapeType = 'horizontalLine';
 
-export const LineShape = forwardRef<any, ShapeProps>((props, ref) => {
+export const HorizontalLineShape = forwardRef<any, ShapeProps>((props, ref) => {
   const {
     x,
     y,
@@ -34,7 +34,7 @@ export const LineShape = forwardRef<any, ShapeProps>((props, ref) => {
     ...shapeProps
   } = props;
   const restrictedSize = fitSizeToShapeSizeRestrictions(
-    lineShapeRestrictions,
+    horizontalLineShapeRestrictions,
     width,
     height
   );

src/common/components/mock-components/front-basic-shapes/index.ts

@@ -1,7 +1,8 @@
 export * from './rectangle-basic-shape';
 export * from './postit-basic-shape';
 export * from './diamond-shape';
-export * from './line-basic-shape';
+export * from './horizontal-line-basic-shape';
+export * from './vertical-line-basic-shape';
 export * from './triangle-basic-shape';
 export * from './circle-basic-shape';
 export * from './star-shape';

src/common/components/mock-components/front-basic-shapes/vertical-line-basic-shape.tsx

@@ -0,0 +1,72 @@
+import { forwardRef } from 'react';
+import { Group, Line, Rect } from 'react-konva';
+import { ShapeSizeRestrictions, ShapeType } from '@/core/model';
+import { fitSizeToShapeSizeRestrictions } from '@/common/utils/shapes/shape-restrictions';
+import { ShapeProps } from '../shape.model';
+import { useShapeProps } from '../../shapes/use-shape-props.hook';
+import { BASIC_SHAPE } from '../front-components/shape.const';
+import { useGroupShapeProps } from '../mock-components.utils';
+
+const verticalLineShapeRestrictions: ShapeSizeRestrictions = {
+  minWidth: 10,
+  minHeight: 50,
+  maxWidth: 10,
+  maxHeight: -1,
+  defaultWidth: 10,
+  defaultHeight: 200,
+};
+
+export const getVerticalLineShapeRestrictions = (): ShapeSizeRestrictions =>
+  verticalLineShapeRestrictions;
+
+const shapeType: ShapeType = 'verticalLine';
+
+export const VerticalLineShape = forwardRef<any, ShapeProps>((props, ref) => {
+  const {
+    x,
+    y,
+    width,
+    height,
+    id,
+    onSelected,
+    text,
+    otherProps,
+    ...shapeProps
+  } = props;
+  const restrictedSize = fitSizeToShapeSizeRestrictions(
+    verticalLineShapeRestrictions,
+    width,
+    height
+  );
+
+  const { width: restrictedWidth, height: restrictedHeight } = restrictedSize;
+
+  const { stroke, strokeStyle } = useShapeProps(otherProps, BASIC_SHAPE);
+
+  const commonGroupProps = useGroupShapeProps(
+    props,
+    restrictedSize,
+    shapeType,
+    ref
+  );
+
+  return (
+    <Group {...commonGroupProps} {...shapeProps}>
+      {/* Transparent rectangle for applying margin */}
+      <Rect
+        width={restrictedWidth}
+        height={restrictedHeight}
+        fill="transparent"
+      />
+
+      <Line
+        x={restrictedWidth / 2} //TODO: alber delete. solo referencia de line x={0}
+        y={0} //TODO:alber delete. solo referencia de line y={restrictedHeight / 2}
+        points={[0, 0, 0, restrictedHeight]} //TODO:alber delete. ??? seguramente necesita modificar: points={[0, 0, restrictedWidth, 0]}
+        stroke={stroke}
+        strokeWidth={2}
+        dash={strokeStyle}
+      />
+    </Group>
+  );
+});

src/common/components/mock-components/front-components/button-shape.tsx

@@ -11,7 +11,7 @@ const buttonShapeRestrictions: ShapeSizeRestrictions = {
   minWidth: 50,
   minHeight: 35,
   maxWidth: -1,
-  maxHeight: 35,
+  maxHeight: 100,
   defaultWidth: 100,
   defaultHeight: 35,
 };
@@ -68,9 +68,9 @@ export const ButtonShape = forwardRef<any, ShapeProps>((props, ref) => {
       />
       <Text
         x={0}
-        y={10}
-        width={width}
-        height={height - 10}
+        y={restrictedHeight / 2 - 5}
+        width={restrictedWidth}
+        height={restrictedHeight - restrictedHeight / 2 - 5}
         text={text}
         fontFamily={BASIC_SHAPE.DEFAULT_FONT_FAMILY}
         fontSize={15}