test(e2e): add tests about multiple selection

writer · Dec 20, 2024 · a1c78a3 · a1c78a3
1 parent 0e48095
commit a1c78a3
Show file tree

Hide file tree

Showing 2 changed files with 117 additions and 13 deletions.
diff --git a/src/ui/src/builder/settings/BuilderSettingsActions.vue b/src/ui/src/builder/settings/BuilderSettingsActions.vue
@@ -121,6 +121,7 @@
 			class="actionButton"
 			variant="neutral"
 			size="small"
+			data-automation-action="clear-selection"
 			data-writer-tooltip="Clear selection"
 			data-writer-tooltip-placement="left"
 			@click="ssbm.setSelection(null)"

diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, Locator } from "@playwright/test";
 
 test.describe("Workflows", () => {
 	let url: string;
@@ -14,7 +14,7 @@ test.describe("Workflows", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url, {waitUntil: "domcontentloaded"});
+		await page.goto(url, { waitUntil: "domcontentloaded" });
 	});
 
 	const inputData = [
@@ -27,9 +27,12 @@ test.describe("Workflows", () => {
 			page,
 		}) => {
 			await page.getByPlaceholder(object).fill(color);
-			await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
-			const rowsLocator = page
-				.locator(".BuilderPanelSwitcher div.row");
+			await page
+				.locator(
+					`[data-automation-action="toggle-panel"][data-automation-key="log"]`,
+				)
+				.click();
+			const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
 			await expect(rowsLocator).toHaveCount(3);
 			const rowLocator = rowsLocator.filter({ hasText: "Return value" });
 			await rowLocator.getByRole("button", { name: "Details" }).click();
@@ -61,7 +64,9 @@ test.describe("Workflows", () => {
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 100, y: 100 },
 			});
-		const runWorkflowBlock = page.locator(`.WorkflowsNode.wf-type-workflows_runworkflow`);
+		const runWorkflowBlock = page.locator(
+			`.WorkflowsNode.wf-type-workflows_runworkflow`,
+		);
 
 		await page
 			.locator(
@@ -70,30 +75,128 @@ test.describe("Workflows", () => {
 			.dragTo(page.locator(".WorkflowsWorkflow"), {
 				targetPosition: { x: 400, y: 100 },
 			});
-		const returnValueBlock = page.locator(`.WorkflowsNode.wf-type-workflows_returnvalue`);
+		const returnValueBlock = page.locator(
+			`.WorkflowsNode.wf-type-workflows_returnvalue`,
+		);
 
 		await runWorkflowBlock.click();
-		await page.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`).fill("repeat_payload");
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="workflowKey"] input`)
+			.fill("repeat_payload");
 		const payload = "blue";
-		await page.locator(`.BuilderFieldsText[data-automation-key="payload"] textarea`).fill(payload);
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="payload"] textarea`)
+			.fill(payload);
 		await page.locator(`[data-automation-action="collapse-settings"]`).click();
 
 		await runWorkflowBlock.locator(".ball.success").dragTo(returnValueBlock);
 
 		await returnValueBlock.click();
-		await page.locator(`.BuilderFieldsText[data-automation-key="value"] textarea`).fill("@{result}");
+		await page
+			.locator(`.BuilderFieldsText[data-automation-key="value"] textarea`)
+			.fill("@{result}");
 
 		await page.locator(`[data-automation-action="run-workflow"]`).click();
 
-		await page.locator(`[data-automation-action="toggle-panel"][data-automation-key="log"]`).click();
+		await page
+			.locator(
+				`[data-automation-action="toggle-panel"][data-automation-key="log"]`,
+			)
+			.click();
 		const rowsLocator = page.locator(".BuilderPanelSwitcher div.row");
 		await expect(rowsLocator).toHaveCount(3);
-		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();;
+		const rowLocator = rowsLocator.filter({ hasText: "Return value" }).first();
 		await rowLocator.getByRole("button", { name: "Details" }).click();
 		await expect(page.locator(".BuilderModal")).toBeVisible();
 		const returnValueLocator = page.locator(
 			`.BuilderModal [data-automation-key="return-value"]`,
 		);
 		await expect(returnValueLocator).toContainText("blue");
 	});
-});
+
+	test.describe("multiple selection", () => {
+		let runWorkflowBlock: Locator;
+		let returnValueBlock: Locator;
+
+		test.beforeEach(async ({ page }) => {
+			await page
+				.locator(`[data-automation-action="set-mode-workflows"]`)
+				.click();
+			await page.locator(`[data-automation-action="add-workflow"]`).click();
+
+			await page
+				.locator(
+					`.BuilderSidebarToolkit [data-component-type="workflows_runworkflow"]`,
+				)
+				.dragTo(page.locator(".WorkflowsWorkflow"), {
+					targetPosition: { x: 100, y: 100 },
+				});
+			runWorkflowBlock = page.locator(
+				`.WorkflowsNode.wf-type-workflows_runworkflow`,
+			);
+
+			await page
+				.locator(
+					`.BuilderSidebarToolkit [data-component-type="workflows_returnvalue"]`,
+				)
+				.dragTo(page.locator(".WorkflowsWorkflow"), {
+					targetPosition: { x: 400, y: 100 },
+				});
+			returnValueBlock = page.locator(
+				`.WorkflowsNode.wf-type-workflows_returnvalue`,
+			);
+
+			await expect(page.locator(`.WorkflowsNode`)).toHaveCount(2);
+
+			await runWorkflowBlock.click();
+			await returnValueBlock.click({ modifiers: ["Shift"] });
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(2);
+
+			expect(
+				await page.locator(".BuilderSettings__selectionCount").innerText(),
+			).toBe("2");
+		});
+
+		test("clear selection", async ({ page }) => {
+			await page
+				.locator(
+					'.BuilderSettingsActions [data-automation-action="clear-selection"]',
+				)
+				.click();
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(0);
+		});
+
+		test("remove multiple elements", async ({ page }) => {
+			await page
+				.locator('.BuilderSettingsActions [data-automation-action="delete"]')
+				.click();
+
+			await expect(page.locator(`.WorkflowsNode`)).toHaveCount(0);
+		});
+
+		test("drag multiple elements", async ({ page }) => {
+			const returnValueBlockBoundingBefore =
+				await returnValueBlock.boundingBox();
+
+			await runWorkflowBlock.click();
+			await returnValueBlock.click({ modifiers: ["Shift"] });
+
+			await expect(page.locator(`.WorkflowsNode.selected`)).toHaveCount(2);
+
+			await runWorkflowBlock.dragTo(page.locator(".WorkflowsWorkflow"), {
+				targetPosition: { x: 110, y: 110 },
+			});
+
+			const returnValueBlockBounding = await returnValueBlock.boundingBox();
+
+			expect(returnValueBlockBounding?.x).not.toBe(
+				returnValueBlockBoundingBefore?.x,
+			);
+			expect(returnValueBlockBounding?.y).not.toBe(
+				returnValueBlockBoundingBefore?.y,
+			);
+		});
+	});
+});