From 852042039298bb6c06dd5419ef704dfeaad1083f Mon Sep 17 00:00:00 2001
From: Ramiro Medina <64783088+ramedina86@users.noreply.github.com>
Date: Mon, 4 Nov 2024 14:14:26 +0100
Subject: [PATCH] fix: Pass E2E tests with wider settings bar
---
src/ui/src/builder/BuilderSettings.vue | 2 +-
tests/e2e/tests/reuse.spec.ts | 63 ++++++++++++++------------
tests/e2e/tests/undoRedo.spec.ts | 13 ++++--
3 files changed, 44 insertions(+), 34 deletions(-)
diff --git a/src/ui/src/builder/BuilderSettings.vue b/src/ui/src/builder/BuilderSettings.vue
index 18a35fe7f..d514b7ed1 100644
--- a/src/ui/src/builder/BuilderSettings.vue
+++ b/src/ui/src/builder/BuilderSettings.vue
@@ -19,7 +19,7 @@
class="windowAction"
tabindex="0"
title="Close (Esc)"
- data-automation-key="close"
+ data-automation-action="close"
@click="closeSettings"
>
close
diff --git a/tests/e2e/tests/reuse.spec.ts b/tests/e2e/tests/reuse.spec.ts
index 5b9925007..73b54eb2c 100644
--- a/tests/e2e/tests/reuse.spec.ts
+++ b/tests/e2e/tests/reuse.spec.ts
@@ -11,9 +11,9 @@ test.describe("Reuse component", () => {
}
const dragNewComponent = async (page: Page, type: string, where = ".CoreSection") => {
- await page
- .locator(`div.component.button[data-component-type="${type}"]`)
- .dragTo(page.locator(where));
+ await page
+ .locator(`div.component.button[data-component-type="${type}"]`)
+ .dragTo(page.locator(where));
}
const getSelectedComponentId = async (page: Page): Promise => {
@@ -50,6 +50,7 @@ test.describe("Reuse component", () => {
const removeComponent = async (page: Page, selector: string) => {
await page.locator(".CorePage").click();
+ await closeSettingsBar(page);
await page.locator(selector).click();
await page
.locator(
@@ -70,13 +71,13 @@ test.describe("Reuse component", () => {
test.describe("basic", () => {
let url: string;
- test.beforeAll(async ({request}) => {
+ test.beforeAll(async ({ request }) => {
const response = await request.post(`/preset/section`);
expect(response.ok()).toBeTruthy();
- ({url} = await response.json());
+ ({ url } = await response.json());
});
- test.afterAll(async ({request}) => {
+ test.afterAll(async ({ request }) => {
await request.delete(url);
});
@@ -88,7 +89,7 @@ test.describe("Reuse component", () => {
await removeComponent(page, '.CoreReuse');
});
- test("empty info", async ({page}) => {
+ test("empty info", async ({ page }) => {
await createReuseable(page);
await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/empty/);
});
@@ -101,31 +102,33 @@ test.describe("Reuse component", () => {
await expect(page.locator('.CoreReuse.CoreText.component')).toHaveCount(1);
});
- test("self-referencing", async ({page}) => {
+ test("self-referencing", async ({ page }) => {
const id = await createReuseable(page);
await setReuseTarget(page, id);
await expect(page.locator('.CoreReuse.component')).toHaveClass(/invalid-value/);
});
- test("reuse in incorect context", async ({page}) => {
+ test("reuse in incorect context", async ({ page }) => {
const id = await createSidebar(page);
+ await closeSettingsBar(page);
await createReuseable(page);
+ await closeSettingsBar(page);
await setReuseTarget(page, id);
- await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
await closeSettingsBar(page);
+ await expect(page.locator(COMPONENT_LOCATOR)).toHaveClass(/invalid-context/);
});
});
test.describe("between pages", () => {
let url: string;
- test.beforeAll(async ({request}) => {
+ test.beforeAll(async ({ request }) => {
const response = await request.post(`/preset/2pages`);
expect(response.ok()).toBeTruthy();
- ({url} = await response.json());
+ ({ url } = await response.json());
});
- test.afterAll(async ({request}) => {
+ test.afterAll(async ({ request }) => {
await request.delete(url);
});
@@ -134,28 +137,28 @@ test.describe("Reuse component", () => {
});
test.afterEach(async ({ page }) => {
- await page.goto(url+"#page2");
+ await page.goto(url + "#page2");
await removeComponent(page, ".CoreReuse");
- await page.goto(url+"#page1");
+ await page.goto(url + "#page1");
const c = await page.locator('.CoreSidebar').count();
if (c > 0) {
await removeComponent(page, '.CoreSidebar');
}
});
- test("reuse sloted component", async ({page}) => {
- await page.goto(url+"#page1");
+ test("reuse sloted component", async ({ page }) => {
+ await page.goto(url + "#page1");
const id = await createSidebar(page);
- await page.goto(url+"#page2");
+ await page.goto(url + "#page2");
await createReuseable(page, ".CorePage");
await setReuseTarget(page, id);
await expect(page.locator('.sidebarContainer .CoreReuse.CoreSidebar')).toHaveCount(1);
});
- test("dynamic slot change", async ({page}) => {
- await page.goto(url+"#page1");
+ test("dynamic slot change", async ({ page }) => {
+ await page.goto(url + "#page1");
const sidebarId = await createSidebar(page);
- await page.goto(url+"#page2");
+ await page.goto(url + "#page2");
await createReuseable(page, ".CorePage");
await setReuseTarget(page, sidebarId);
await expect(page.locator('.sidebarContainer .CoreReuse.CoreSidebar')).toHaveCount(1);
@@ -165,15 +168,15 @@ test.describe("Reuse component", () => {
expect(page.locator('.main .CoreReuse.CoreText')).toHaveCount(1);
});
- test("target component deleted", async ({page}) => {
- await page.goto(url+"#page1");
+ test("target component deleted", async ({ page }) => {
+ await page.goto(url + "#page1");
const sidebarId = await createSidebar(page);
- await page.goto(url+"#page2");
+ await page.goto(url + "#page2");
await createReuseable(page, ".CorePage");
await setReuseTarget(page, sidebarId);
- await page.goto(url+"#page1");
+ await page.goto(url + "#page1");
await removeComponent(page, '.CoreSidebar');
- await page.goto(url+"#page2");
+ await page.goto(url + "#page2");
await expect(page.locator('.CoreReuse.component')).toHaveClass(/invalid-value/);
});
});
@@ -185,13 +188,13 @@ test.describe("Reuse component", () => {
const COLUMN2 = ".CoreColumns .CoreColumn:nth-child(2 of .CoreColumn)";
let url: string;
- test.beforeAll(async ({request}) => {
+ test.beforeAll(async ({ request }) => {
const response = await request.post(`/preset/2columns`);
expect(response.ok()).toBeTruthy();
- ({url} = await response.json());
+ ({ url } = await response.json());
});
- test.afterAll(async ({request}) => {
+ test.afterAll(async ({ request }) => {
await request.delete(url);
});
@@ -201,6 +204,7 @@ test.describe("Reuse component", () => {
test("create, drag and drop and remove", async ({ page }) => {
await createReuseable(page, COLUMN1);
+ await closeSettingsBar(page);
await moveFromTo(page, COMPONENT_LOCATOR, COLUMN1, COLUMN2);
await removeComponent(page, COMPONENT_LOCATOR);
});
@@ -209,6 +213,7 @@ test.describe("Reuse component", () => {
const id = await createText(page, '.CorePage');
await createReuseable(page, COLUMN1);
await setReuseTarget(page, id);
+ await closeSettingsBar(page);
await moveFromTo(page, COMPONENT_LOCATOR, COLUMN1, COLUMN2);
await removeComponent(page, COMPONENT_LOCATOR);
await removeComponent(page, '.CoreText');
diff --git a/tests/e2e/tests/undoRedo.spec.ts b/tests/e2e/tests/undoRedo.spec.ts
index 072604344..cd758adc6 100644
--- a/tests/e2e/tests/undoRedo.spec.ts
+++ b/tests/e2e/tests/undoRedo.spec.ts
@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { test, expect, type Page } from "@playwright/test";
test.describe('undo and redo', () => {
const TYPE = 'button';
@@ -7,13 +7,17 @@ test.describe('undo and redo', () => {
const COLUMN2 = ".CoreColumns .CoreColumn:nth-child(2 of .CoreColumn)";
let url: string;
- test.beforeAll(async ({request}) => {
+ const closeSettingsBar = async (page: Page) => {
+ await page.locator('.BuilderSettings button[data-automation-action="close"]').click();
+ }
+
+ test.beforeAll(async ({ request }) => {
const response = await request.post(`/preset/2columns`);
expect(response.ok()).toBeTruthy();
- ({url} = await response.json());
+ ({ url } = await response.json());
});
- test.afterAll(async ({request}) => {
+ test.afterAll(async ({ request }) => {
await request.delete(url);
});
@@ -50,6 +54,7 @@ test.describe('undo and redo', () => {
await page
.locator('.BuilderFieldsText[data-automation-key="text"] input')
.fill('cool text');
+ await closeSettingsBar(page);
await page.locator("button.undo").click();
await expect(page.locator(COMPONENT_LOCATOR)).toHaveText('Button Text')
await page.locator("button.redo").click();