Merge pull request #422 from Lemoncode/feature/#407-QA-Test-multiple-…

…selection-using-drag-and-drop

Feature/#407 qa test multiple selection using drag and drop

e2e/helpers/position.helpers.ts

@@ -27,3 +27,29 @@ export const dragAndDrop = async (
   await page.mouse.move(bPosition.x, bPosition.y);
   await page.mouse.up();
 };
+
+export const addComponentsToCanvas = async (
+  page: Page,
+  components: string[]
+) => {
+  const canvasPosition = await page.locator('canvas').boundingBox();
+  if (!canvasPosition) throw new Error('No canvas found');
+
+  for await (const [index, c] of components.entries()) {
+    const component = page.getByAltText(c, { exact: true });
+    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(120, index));
+  }
+};

e2e/selection/multiple-selection.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@playwright/test';
+import { dragAndDrop, addComponentsToCanvas, getTransformer } from '../helpers';
+
+test('Should perform multiple selection when dragging and dropping over multiple components in 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);
+});