diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.html b/workspaces/e2e/tests/modal-overlay/modal-overlay.html new file mode 100644 index 0000000..453f5a0 --- /dev/null +++ b/workspaces/e2e/tests/modal-overlay/modal-overlay.html @@ -0,0 +1,14 @@ + + +
+ + + + + + + + + + + diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.spec.ts b/workspaces/e2e/tests/modal-overlay/modal-overlay.spec.ts new file mode 100644 index 0000000..0246522 --- /dev/null +++ b/workspaces/e2e/tests/modal-overlay/modal-overlay.spec.ts @@ -0,0 +1,21 @@ +import { expect, test } from "@playwright/test"; + +test("should show overlay without close on click by default", async ({ page }) => { + await page.goto("/modal-overlay/modal-overlay.html"); + await expect(page.locator(".flows-modal")).toBeVisible(); + await page.locator(".flows-modal-overlay").click({ position: { x: 100, y: 100 } }); + await expect(page.locator(".flows-modal")).toBeVisible(); +}); + +test("should close overlay on click", async ({ page }) => { + await page.goto("/modal-overlay/modal-overlay.html?closeOnOverlayClick=true"); + await expect(page.locator(".flows-modal")).toBeVisible(); + await page.locator(".flows-modal-overlay").click({ position: { x: 100, y: 100 } }); + await expect(page.locator(".flows-modal")).toBeHidden(); +}); + +test("should hide overlay", async ({ page }) => { + await page.goto("/modal-overlay/modal-overlay.html?hideOverlay=true"); + await expect(page.locator(".flows-modal")).toBeVisible(); + await expect(page.locator(".flows-modal-overlay")).toBeHidden(); +}); diff --git a/workspaces/e2e/tests/modal-overlay/modal-overlay.ts b/workspaces/e2e/tests/modal-overlay/modal-overlay.ts new file mode 100644 index 0000000..83a2129 --- /dev/null +++ b/workspaces/e2e/tests/modal-overlay/modal-overlay.ts @@ -0,0 +1,24 @@ +import { init } from "@flows/js/core"; + +const closeOnOverlayClick = + new URLSearchParams(window.location.search).get("closeOnOverlayClick") === "true"; +const hideOverlay = new URLSearchParams(window.location.search).get("hideOverlay") === "true"; + +init({ + flows: [ + { + id: "flow", + location: "/", + steps: [ + { + title: "Hello", + body: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.Lorem ipsum dolor sit amet, consectetur adipiscing elit.", + hideOverlay, + closeOnOverlayClick, + }, + ], + }, + ], +}); + +document.querySelector("button")?.addEventListener("click", () => console.log("Hello!")); diff --git a/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html b/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html index e2584de..6948fe3 100644 --- a/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html +++ b/workspaces/e2e/tests/tooltip-overlay/tooltip-overlay.html @@ -11,7 +11,7 @@