certifai/e2e/developer.spec.ts

import { test, expect } from "@playwright/test";

test.describe("Developer section", () => {
  test("agents page loads with sub-nav tabs", async ({ page }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".developer-shell", { timeout: 15_000 });

    const nav = page.locator(".sub-nav");
    await expect(nav.locator("a", { hasText: "Agents" })).toBeVisible();
    await expect(nav.locator("a", { hasText: "Flow" })).toBeVisible();
    await expect(nav.locator("a", { hasText: "Analytics" })).toBeVisible();
  });

  test("agents page renders informational landing", async ({ page }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    // Hero section
    await expect(page.locator(".agents-hero-title")).toContainText(
      "Agent Builder"
    );
    await expect(page.locator(".agents-hero-desc")).toBeVisible();

    // Connection status indicator is present
    await expect(page.locator(".agents-status")).toBeVisible();
  });

  test("agents page shows Not Connected when URL is empty", async ({
    page,
  }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    await expect(page.locator(".agents-status")).toContainText(
      "Not Connected"
    );
    await expect(page.locator(".agents-status-dot--off")).toBeVisible();
    await expect(page.locator(".agents-status-hint")).toBeVisible();
  });

  test("agents page shows quick start cards", async ({ page }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    const grid = page.locator(".agents-grid");
    const cards = grid.locator(".agents-card");
    await expect(cards).toHaveCount(5);

    // Verify card titles are rendered
    await expect(
      grid.locator(".agents-card-title", { hasText: "Documentation" })
    ).toBeVisible();
    await expect(
      grid.locator(".agents-card-title", { hasText: "Getting Started" })
    ).toBeVisible();
    await expect(
      grid.locator(".agents-card-title", { hasText: "GitHub" })
    ).toBeVisible();
    await expect(
      grid.locator(".agents-card-title", { hasText: "Examples" })
    ).toBeVisible();
    await expect(
      grid.locator(".agents-card-title", { hasText: "API Reference" })
    ).toBeVisible();
  });

  test("agents page disables API Reference card when not connected", async ({
    page,
  }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    // When LANGGRAPH_URL is empty, the API Reference card should be disabled
    const statusHint = page.locator(".agents-status-hint");
    if (await statusHint.isVisible()) {
      const apiCard = page.locator(".agents-card--disabled");
      await expect(apiCard).toBeVisible();
      await expect(
        apiCard.locator(".agents-card-title")
      ).toContainText("API Reference");
    }
  });

  test("agents page shows running agents section", async ({ page }) => {
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    // The running agents section title should always be visible
    await expect(
      page.locator(".agents-section-title", { hasText: "Running Agents" })
    ).toBeVisible();

    // Either the table, loading state, or empty message should appear
    await page.waitForTimeout(3000);
    const table = page.locator(".agents-table");
    const empty = page.locator(".agents-table-empty");

    const hasTable = await table.isVisible();
    const hasEmpty = await empty.isVisible();
    expect(hasTable || hasEmpty).toBeTruthy();
  });

  test("agents page shows connected status when URL is configured", async ({
    page,
  }) => {
    // This test only passes when LANGGRAPH_URL is set in the environment.
    await page.goto("/developer/agents");
    await page.waitForSelector(".agents-page", { timeout: 15_000 });

    const connectedDot = page.locator(".agents-status-dot--on");
    const disconnectedDot = page.locator(".agents-status-dot--off");

    if (await connectedDot.isVisible()) {
      await expect(page.locator(".agents-status")).toContainText("Connected");
      await expect(page.locator(".agents-status-url")).toBeVisible();
      // API Reference card should NOT be disabled
      await expect(page.locator(".agents-card--disabled")).toHaveCount(0);
    } else {
      await expect(disconnectedDot).toBeVisible();
      await expect(page.locator(".agents-status")).toContainText(
        "Not Connected"
      );
    }
  });

  test("analytics page renders informational landing", async ({ page }) => {
    await page.goto("/developer/analytics");
    await page.waitForSelector(".analytics-page", { timeout: 15_000 });

    // Hero section
    await expect(page.locator(".analytics-hero-title")).toBeVisible();
    await expect(page.locator(".analytics-hero-desc")).toBeVisible();

    // Connection status indicator
    await expect(page.locator(".agents-status")).toBeVisible();

    // Metrics bar
    await expect(page.locator(".analytics-stats-bar")).toBeVisible();
  });

  test("analytics page shows Not Connected when URL is empty", async ({
    page,
  }) => {
    await page.goto("/developer/analytics");
    await page.waitForSelector(".analytics-page", { timeout: 15_000 });

    await expect(page.locator(".agents-status")).toContainText(
      "Not Connected"
    );
    await expect(page.locator(".agents-status-dot--off")).toBeVisible();
  });

  test("analytics page shows quick action cards", async ({ page }) => {
    await page.goto("/developer/analytics");
    await page.waitForSelector(".analytics-page", { timeout: 15_000 });

    const grid = page.locator(".agents-grid");
    const cards = grid.locator(".agents-card, .agents-card--disabled");
    await expect(cards).toHaveCount(2);
  });

  test("analytics page shows SSO hint when connected", async ({ page }) => {
    // Only meaningful when LANGFUSE_URL is configured.
    await page.goto("/developer/analytics");
    await page.waitForSelector(".analytics-page", { timeout: 15_000 });

    const connectedDot = page.locator(".agents-status-dot--on");
    if (await connectedDot.isVisible()) {
      await expect(page.locator(".analytics-sso-hint")).toBeVisible();
      await expect(page.locator(".analytics-launch-btn")).toBeVisible();
    }
  });
});