From 83a7cc41822f8632e64d270d90daefbdbda5d574 Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Fri, 29 Nov 2024 18:20:08 +0100
Subject: [PATCH] fix: E2E

---
 src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue | 4 +++-
 tests/e2e/tests/button.spec.ts                       | 2 +-
 tests/e2e/tests/components.spec.ts                   | 4 ++--
 tests/e2e/tests/drag.spec.ts                         | 2 +-
 tests/e2e/tests/image.spec.ts                        | 2 +-
 tests/e2e/tests/jsonviewer.spec.ts                   | 2 +-
 tests/e2e/tests/lowCode.spec.ts                      | 2 +-
 tests/e2e/tests/reuse.spec.ts                        | 8 ++++----
 tests/e2e/tests/sidebar.spec.ts                      | 2 +-
 tests/e2e/tests/state.spec.ts                        | 2 +-
 tests/e2e/tests/stateAutocompletion.spec.ts          | 2 +-
 tests/e2e/tests/undoRedo.spec.ts                     | 2 +-
 tests/e2e/tests/workflows.spec.ts                    | 2 +-
 13 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
index 7528822e2..c00ef7bb1 100644
--- a/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
+++ b/src/ui/src/builder/sidebar/BuilderSidebarToolkit.vue
@@ -24,6 +24,7 @@
 					@dragstart="handleDragStart($event, tool.type)"
 				>
 					<img
+						:alt="`(Icon for ${tool.name})`"
 						:src="`./../../../../components/${tool.type}.svg`"
 						@error="
 							!isImageFallback[tool.type]
@@ -164,7 +165,8 @@ watch(activeToolkit, () => {
 }
 
 .tool img {
-	width: 18px;
+	max-width: 18px;
+	max-height: 18px;
 	aspect-ratio: 1 / 1;
 }
 
diff --git a/tests/e2e/tests/button.spec.ts b/tests/e2e/tests/button.spec.ts
index ada420843..d63a14016 100644
--- a/tests/e2e/tests/button.spec.ts
+++ b/tests/e2e/tests/button.spec.ts
@@ -16,7 +16,7 @@ test.describe("button", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/components.spec.ts b/tests/e2e/tests/components.spec.ts
index 20cf31396..2b668f39e 100644
--- a/tests/e2e/tests/components.spec.ts
+++ b/tests/e2e/tests/components.spec.ts
@@ -96,7 +96,7 @@ function fullTest({type, locator}: ComponentTestData) {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create, drag and drop and remove", async ({ page }) => {
@@ -148,7 +148,7 @@ function basicTest({type, locator}: ComponentTestData) {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/drag.spec.ts b/tests/e2e/tests/drag.spec.ts
index 760ee1004..50dceadb8 100644
--- a/tests/e2e/tests/drag.spec.ts
+++ b/tests/e2e/tests/drag.spec.ts
@@ -16,7 +16,7 @@ test.describe("drag", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("drag and drop component into itself", async ({ page }) => {
diff --git a/tests/e2e/tests/image.spec.ts b/tests/e2e/tests/image.spec.ts
index 2362ab30c..e2a602272 100644
--- a/tests/e2e/tests/image.spec.ts
+++ b/tests/e2e/tests/image.spec.ts
@@ -16,7 +16,7 @@ test.describe("image", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("configure", async ({ page }) => {
diff --git a/tests/e2e/tests/jsonviewer.spec.ts b/tests/e2e/tests/jsonviewer.spec.ts
index 27581643b..69408ad30 100644
--- a/tests/e2e/tests/jsonviewer.spec.ts
+++ b/tests/e2e/tests/jsonviewer.spec.ts
@@ -14,7 +14,7 @@ test.describe("JSON viewer", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/lowCode.spec.ts b/tests/e2e/tests/lowCode.spec.ts
index 943dd21e5..3e961e005 100644
--- a/tests/e2e/tests/lowCode.spec.ts
+++ b/tests/e2e/tests/lowCode.spec.ts
@@ -58,7 +58,7 @@ test.describe("low-code UI", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("init_ui -  ui initialization" , async ({ page }) => {
diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index a04419e43..bcbb9ef26 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -58,7 +58,6 @@ test.describe("Reuse component", () => {
 
 	const removeComponent = async (page: Page, selector: string) => {
 		await page.locator(".CorePage").click();
-		collapseSettingsBar(page);
 		await page.locator(selector).click();
 		await page
 			.locator(
@@ -90,7 +89,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test.afterEach(async ({ page }) => {
@@ -123,6 +122,7 @@ test.describe("Reuse component", () => {
 			await expandSettingsBar(page);
 			await setReuseTarget(page, id);
 			await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
+			collapseSettingsBar(page);
 		});
 	});
 
@@ -140,7 +140,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test.afterEach(async ({ page }) => {
@@ -206,7 +206,7 @@ test.describe("Reuse component", () => {
 		});
 
 		test.beforeEach(async ({ page }) => {
-			await page.goto(url);
+			await page.goto(url, {waitUntil: "domcontentloaded"});
 		});
 
 		test("create, drag and drop and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/sidebar.spec.ts b/tests/e2e/tests/sidebar.spec.ts
index bb0bae062..df28d227f 100644
--- a/tests/e2e/tests/sidebar.spec.ts
+++ b/tests/e2e/tests/sidebar.spec.ts
@@ -14,7 +14,7 @@ test.describe("sidebar", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 		test.setTimeout(5000);
 	});
 
diff --git a/tests/e2e/tests/state.spec.ts b/tests/e2e/tests/state.spec.ts
index cdedfa6f1..1e7e5f473 100644
--- a/tests/e2e/tests/state.spec.ts
+++ b/tests/e2e/tests/state.spec.ts
@@ -35,7 +35,7 @@ test.describe("state", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("increment number", async ({ page }) => {
diff --git a/tests/e2e/tests/stateAutocompletion.spec.ts b/tests/e2e/tests/stateAutocompletion.spec.ts
index b8a624cc9..47ed5c67e 100644
--- a/tests/e2e/tests/stateAutocompletion.spec.ts
+++ b/tests/e2e/tests/stateAutocompletion.spec.ts
@@ -21,7 +21,7 @@ test.describe("state autocompletion", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test.describe("text", () => {
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index b9ebc4468..cbacae79a 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -22,7 +22,7 @@ test.describe('undo and redo', () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	test("create, drag and drop, property change and remove", async ({ page }) => {
diff --git a/tests/e2e/tests/workflows.spec.ts b/tests/e2e/tests/workflows.spec.ts
index 67160107b..1d299e70f 100644
--- a/tests/e2e/tests/workflows.spec.ts
+++ b/tests/e2e/tests/workflows.spec.ts
@@ -14,7 +14,7 @@ test.describe("Workflows", () => {
 	});
 
 	test.beforeEach(async ({ page }) => {
-		await page.goto(url);
+		await page.goto(url, {waitUntil: "domcontentloaded"});
 	});
 
 	const inputData = [