MAESTRO: add e2e flow check for analysis

frontend/e2e/example.spec.ts

@@ -1,18 +1,61 @@
-import { test, expect } from '@playwright/test';
+import { test, expect } from "@playwright/test";
+import fs from "fs/promises";
+import path from "path";
 
-test('has title', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
+const headersPath = path.resolve(__dirname, "../../backend/tests/fixtures/sample_headers.txt");
 
-  // Expect a title "to contain" a substring.
-  await expect(page).toHaveTitle(/Playwright/);
-});
-
-test('get started link', async ({ page }) => {
-  await page.goto('https://playwright.dev/');
-
-  // Click the get started link.
-  await page.getByRole('link', { name: 'Get started' }).click();
-
-  // Expects page to have a heading with the name of Installation.
-  await expect(page.getByRole('heading', { name: 'Installation' })).toBeVisible();
+test("complete analysis flow from paste to export", async ({ page }) => {
+  const headers = await fs.readFile(headersPath, "utf8");
+
+  await page.goto("http://localhost:3100");
+
+  const headerInput = page.getByRole("textbox", { name: "Header Input" });
+  await headerInput.fill(headers);
+
+  const decodeToggle = page.getByTestId("toggle-decode-all");
+  await decodeToggle.click();
+  await expect(decodeToggle).toHaveAttribute("aria-checked", "true");
+
+  const firstCheckbox = page.locator('[data-testid^="test-checkbox-"]').first();
+  await firstCheckbox.scrollIntoViewIfNeeded();
+  await firstCheckbox.waitFor({ state: "visible" });
+  await firstCheckbox.check();
+
+  const checkboxTestId = await firstCheckbox.getAttribute("data-testid");
+  const testId = checkboxTestId?.replace("test-checkbox-", "");
+  expect(testId).toBeTruthy();
+
+  await page.getByRole("button", { name: "Analyse Headers" }).click();
+
+  const reportContainer = page.getByTestId("report-container");
+  await reportContainer.waitFor({ state: "visible", timeout: 30000 });
+
+  if (testId) {
+    await expect(page.getByTestId(`test-result-card-${testId}`)).toBeVisible();
+  }
+
+  const [jsonDownload] = await Promise.all([
+    page.waitForEvent("download"),
+    page.getByTestId("report-export-json").click(),
+  ]);
+  expect(jsonDownload.suggestedFilename()).toBe("analysis-report.json");
+  const jsonPath = await jsonDownload.path();
+  if (!jsonPath) {
+    throw new Error("JSON export did not provide a download path.");
+  }
+  const jsonContents = await fs.readFile(jsonPath, "utf8");
+  const parsed = JSON.parse(jsonContents) as { metadata?: Record<string, unknown> };
+  expect(parsed.metadata).toBeTruthy();
+
+  const [htmlDownload] = await Promise.all([
+    page.waitForEvent("download"),
+    page.getByTestId("report-export-html").click(),
+  ]);
+  expect(htmlDownload.suggestedFilename()).toBe("analysis-report.html");
+  const htmlPath = await htmlDownload.path();
+  if (!htmlPath) {
+    throw new Error("HTML export did not provide a download path.");
+  }
+  const htmlContents = await fs.readFile(htmlPath, "utf8");
+  expect(htmlContents).toContain("<title>Email Header Analysis Report</title>");
 });

frontend/playwright.config.ts

@@ -73,14 +73,17 @@ export default defineConfig({
   /* Run your local dev server before starting the tests */
   webServer: [
     {
-      command: 'python -m uvicorn backend.app.main:app --port 8000',
+      command: 'python -m uvicorn app.main:app --app-dir backend --port 8000',
       url: 'http://localhost:8000',
       reuseExistingServer: !process.env.CI,
       cwd: '..',
+      env: {
+        WHA_CORS_ORIGINS: '["http://localhost:3100"]',
+      },
     },
     {
-      command: 'npm run dev -- --port 3000',
-      url: 'http://localhost:3000',
+      command: 'npm run dev -- --port 3100',
+      url: 'http://localhost:3100',
       reuseExistingServer: !process.env.CI,
     },
   ],