From 5345be40e8e550230e2c95c73f02e58d2431bbb1 Mon Sep 17 00:00:00 2001
From: Alber EE <122263897+Alber-Writer@users.noreply.github.com>
Date: Mon, 14 Oct 2024 01:06:24 +0200
Subject: [PATCH] QA add multiple selection test

---
 e2e/helpers/position.helpers.ts          | 26 ++++++++++++++++++++++++
 e2e/selection/multiple-selection.spec.ts | 22 ++++++++++++++++++++
 2 files changed, 48 insertions(+)
 create mode 100644 e2e/selection/multiple-selection.spec.ts

diff --git a/e2e/helpers/position.helpers.ts b/e2e/helpers/position.helpers.ts
index 7b11dc50..84485272 100644
--- a/e2e/helpers/position.helpers.ts
+++ b/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));
+  }
+};
diff --git a/e2e/selection/multiple-selection.spec.ts b/e2e/selection/multiple-selection.spec.ts
new file mode 100644
index 00000000..5992b0ee
--- /dev/null
+++ b/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);
+});