test: debug screenshot tests

workspaces/e2e/.gitignore

@@ -1,4 +1,5 @@
 /test-results/
 /playwright-report/
 /blob-report/
-/playwright/.cache/
+/playwright/.cache/
+/tests/**/*darwin*.png

workspaces/e2e/package.json

@@ -5,7 +5,8 @@
     "playwright": "playwright test",
     "playwright:install": "playwright install --with-deps",
     "vite": "vite",
-    "tsc": "tsc -p tsconfig.json"
+    "tsc": "tsc -p tsconfig.json",
+    "playwright:update-snapshots": "docker run --rm --ipc=host --mount type=bind,src=./../../,dst=/app --mount type=volume,dst=/app/node_modules --mount type=volume,dst=/app/.pnpm-store mcr.microsoft.com/playwright:v1.54.1-noble /bin/sh -c 'cd app && corepack enable && pnpm install --frozen-lockfile && pnpm e2e playwright --update-snapshots'"
   },
   "dependencies": {
     "@flows/js": "workspace:*",

workspaces/e2e/pages/js.ts

@@ -15,6 +15,7 @@ const apiUrl = new URLSearchParams(window.location.search).get("apiUrl") ?? unde
 const noCurrentBlocks =
   new URLSearchParams(window.location.search).get("noCurrentBlocks") === "true";
 const language = new URLSearchParams(window.location.search).get("language") as LanguageOption;
+const organizationId = new URLSearchParams(window.location.search).get("organizationId");
 
 const Card: Component<{ text: string }> = (props) => {
   const card = document.createElement("div");
@@ -116,7 +117,7 @@ const StateMemory: Component<{ title: string; checked: IStateMemory }> = (props)
 
 init({
   environment: "prod",
-  organizationId: "orgId",
+  organizationId: organizationId ?? "orgId",
   userId: "testUserId",
   language,
   apiUrl,

workspaces/e2e/pages/react.tsx

@@ -21,6 +21,7 @@ const noUserId = new URLSearchParams(window.location.search).get("noUserId") ===
 const noCurrentBlocks =
   new URLSearchParams(window.location.search).get("noCurrentBlocks") === "true";
 const language = new URLSearchParams(window.location.search).get("language") as LanguageOption;
+const organizationId = new URLSearchParams(window.location.search).get("organizationId");
 
 const Card: FC<ComponentProps<{ text: string }>> = (props) => (
   <div
@@ -97,7 +98,7 @@ const App: FC = () => {
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <FlowsProvider
-      organizationId="orgId"
+      organizationId={organizationId ?? "orgId"}
       environment="prod"
       userId={noUserId ? null : "testUserId"}
       language={language}

workspaces/e2e/tests/debug.spec.ts

@@ -0,0 +1,44 @@
+import test, { expect } from "@playwright/test";
+import { mockBlocksEndpoint } from "./utils";
+
+const organizationId = "480760cf-706e-43cf-a257-969f7d2623ac";
+
+const run = (packageName: string) => {
+  test(`${packageName} - should show debug panel`, async ({ page, context }) => {
+    mockBlocksEndpoint(page, []);
+
+    await page.goto(`/${packageName}.html?organizationId=${organizationId}`);
+
+    await expect(page.locator(".flows-debug-menu")).toBeVisible();
+    await page.locator(".flows-debug-menu").click();
+
+    await expect(page.locator(".flows-debug-popover")).toBeVisible();
+    await expect(page).toHaveScreenshot(`${packageName}-home.png`);
+
+    expect(await page.locator("a.flows-debug-item").getAttribute("href")).toEqual(
+      `https://app.flows.sh/org/${organizationId}`,
+    );
+
+    await page.getByText("User", { exact: true }).click();
+    await expect(page).toHaveScreenshot(`${packageName}-user.png`);
+
+    await page.locator(".flows-debug-section-close").click();
+    await page.getByText("SDK setup", { exact: true }).click();
+    await expect(page).toHaveScreenshot(`${packageName}-sdk-setup.png`);
+
+    await page.locator(".flows-debug-section-close").click();
+    await page.getByText("Blocks", { exact: true }).click();
+    await expect(page).toHaveScreenshot(`${packageName}-blocks.png`);
+
+    await page.locator(".flows-debug-section-close").click();
+    await page.getByText("Pathname", { exact: true }).click();
+    await expect(page).toHaveScreenshot(`${packageName}-pathname.png`);
+
+    await page.locator(".flows-debug-section-close").click();
+    await page.getByText("Settings", { exact: true }).click();
+    await expect(page).toHaveScreenshot(`${packageName}-settings.png`);
+  });
+};
+
+run("js");
+run("react");