PaperClipAI/tests/e2e/applications-crud.spec.ts

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

// Current Apps lifecycle coverage. The legacy Tools -> Applications CRUD table
// was retired; old links now redirect to /apps. Keep this harness focused on
// the user-visible Connections list plus app detail setup/advanced flows.

type SeedResult = {
  companyId: string;
  prefix: string;
};

const SCREENSHOT_DIR = "test-results";
const APP_PREFIX = `QA 10820 ${Date.now().toString(36)}`;

async function discoverCompany(request: APIRequestContext): Promise<SeedResult> {
  const res = await request.post("/api/companies", {
    data: { name: `applications lifecycle ${Date.now()}` },
  });
  expect(res.ok(), `create company failed ${res.status()}: ${await res.text()}`).toBe(true);
  const company = await res.json();
  const flags = await request.patch("/api/instance/settings/experimental", { data: { enableApps: true } });
  expect(flags.ok(), `enable apps failed ${flags.status()}: ${await flags.text()}`).toBe(true);
  return {
    companyId: company.id,
    prefix: company.issuePrefix ?? company.prefix ?? company.urlKey ?? "E2E",
  };
}

async function createApplication(
  request: APIRequestContext,
  companyId: string,
  body: { name: string; description?: string; type?: string },
): Promise<{ id: string; name: string }> {
  const res = await request.post(`/api/companies/${companyId}/tools/applications`, {
    data: { type: "mcp_http", ...body },
  });
  if (!res.ok()) throw new Error(`create app failed ${res.status()}: ${await res.text()}`);
  return res.json();
}

async function createConnection(
  request: APIRequestContext,
  companyId: string,
  data: { applicationName?: string; applicationId?: string; name: string; transport?: string; config?: object },
): Promise<{ id: string; applicationId: string; name: string }> {
  const res = await request.post(`/api/companies/${companyId}/tools/connections`, {
    data: {
      transport: "mcp_remote",
      config: { url: "https://fixture.example/mcp" },
      enabled: true,
      status: "active",
      ...data,
    },
  });
  if (!res.ok()) throw new Error(`create connection failed ${res.status()}: ${await res.text()}`);
  return res.json();
}

async function gotoApps(page: Page, prefix: string) {
  await page.goto(`/${prefix}/apps/connections`);
  await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible({ timeout: 30_000 });
}

test.describe.serial("applications lifecycle", () => {
  let seed: SeedResult;

  test.beforeAll(async ({ request }) => {
    seed = await discoverCompany(request);
  });

  test.afterAll(async ({ request }) => {
    if (!seed?.companyId) return;
    await request.delete(`/api/companies/${seed.companyId}`).catch(() => undefined);
  });

  test("Connections list surfaces connected and not-connected apps", async ({ page, request }) => {
    const connectedName = `${APP_PREFIX}-connected`;
    const notConnectedName = `${APP_PREFIX}-not-connected`;
    const connected = await createConnection(request, seed.companyId, {
      applicationName: connectedName,
      name: connectedName,
    });
    const notConnected = await createApplication(request, seed.companyId, { name: notConnectedName });

    await gotoApps(page, seed.prefix);

    // The connected app starts with a "Healthy" pill and an "Open" action. A
    // background health sweep then probes the connection endpoint. The test
    // endpoint is an unreachable fixture URL, so the probe fails and the pill
    // becomes "Needs attention" and the action becomes "Reconnect". Both are
    // connected states that navigate to the same provider setup page. This test
    // proves the connected-vs-not-connected split, not the transient health
    // label, so accept either connected state instead of the racy exact label.
    // The pill is derived from two react-query fetches (applications +
    // connections), so keep the same generous window the rest of this spec uses.
    const connectedRow = page.locator("tbody tr", { hasText: connectedName });
    await expect(connectedRow).toBeVisible();
    await expect(connectedRow.getByText(/^(Healthy|Needs attention)$/)).toBeVisible({ timeout: 30_000 });
    await expect(connectedRow.getByRole("button", { name: /^(Open|Reconnect)$/ })).toBeVisible();

    // The not-connected app has no connection, so the health sweep never touches
    // it and its "Not connected" pill and "Connect" action stay deterministic.
    const notConnectedRow = page.locator("tbody tr", { hasText: notConnectedName });
    await expect(notConnectedRow).toBeVisible();
    await expect(notConnectedRow.getByText("Not connected")).toBeVisible({ timeout: 30_000 });
    await expect(notConnectedRow.getByRole("button", { name: "Connect" })).toBeVisible();
    await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-list.png`, fullPage: true });

    await connectedRow.getByRole("button", { name: /^(Open|Reconnect)$/ }).click();
    await expect(page).toHaveURL(
      new RegExp(`/${seed.prefix}/apps/app/${connected.applicationId}/setup$`),
      { timeout: 20_000 },
    );

    await gotoApps(page, seed.prefix);
    await notConnectedRow.getByRole("button", { name: "Connect" }).click();
    await expect(page).toHaveURL(
      new RegExp(`/${seed.prefix}/apps/app/${notConnected.id}/setup$`),
      { timeout: 20_000 },
    );
  });

  test("connected app detail supports pause, rename, and removal", async ({ page, request }) => {
    const appName = `${APP_PREFIX}-detail-app`;
    const renamed = `${APP_PREFIX}-renamed-app`;
    const connection = await createConnection(request, seed.companyId, {
      applicationName: appName,
      name: appName,
    });

    await page.goto(`/${seed.prefix}/apps/${connection.id}/setup`);
    await expect(page.getByRole("heading", { name: appName })).toBeVisible({ timeout: 30_000 });
    await expect(page.getByRole("heading", { name: "Agents can use this app" })).toBeVisible();

    await page.getByRole("switch", { name: "Pause this app" }).click();
    await expect(page.getByRole("heading", { name: "This app is paused" })).toBeVisible({ timeout: 15_000 });
    await page.getByRole("switch", { name: "Resume this app" }).click();
    await expect(page.getByRole("heading", { name: "Agents can use this app" })).toBeVisible({ timeout: 15_000 });

    await page.getByRole("button", { name: "Rename app" }).click();
    await page.getByLabel("App name").fill(renamed);
    await page.getByRole("button", { name: "Save", exact: true }).click();
    await expect(page.getByRole("heading", { name: renamed })).toBeVisible({ timeout: 15_000 });
    await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-detail.png`, fullPage: true });

    await page.goto(`/${seed.prefix}/apps/${connection.id}/advanced`);
    await expect(page.getByText("Danger zone")).toBeVisible({ timeout: 15_000 });
    await page.getByRole("button", { name: "Remove app", exact: true }).click();
    await expect(page.getByRole("button", { name: "Yes, remove it" })).toBeVisible();
    await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-remove-connected.png`, fullPage: true });
    await page.getByRole("button", { name: "Yes, remove it" }).click();
    await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
    await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
    await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
    await expect(page.locator("tbody tr", { hasText: renamed })).toHaveCount(0);
  });

  test("not-connected app advanced page removes the application", async ({ page, request }) => {
    const cleanAppName = `${APP_PREFIX}-clean-remove-app`;
    const cleanApp = await createApplication(request, seed.companyId, { name: cleanAppName });

    await page.goto(`/${seed.prefix}/apps/app/${cleanApp.id}/advanced`);
    await expect(page.getByRole("heading", { name: cleanAppName })).toBeVisible({ timeout: 30_000 });
    await expect(page.getByText("Danger zone")).toBeVisible();
    await page.getByRole("button", { name: "Remove app", exact: true }).click();
    await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-remove-not-connected.png`, fullPage: true });
    await page.getByRole("button", { name: "Yes, remove it" }).click();
    await expect(page).toHaveURL(new RegExp(`/${seed.prefix}/apps/connections$`), { timeout: 20_000 });
    await expect(page.getByText("App removed").first()).toBeVisible({ timeout: 20_000 });
    await expect(page.getByRole("heading", { name: "Connections" })).toBeVisible();
    await expect(page.locator("tbody tr", { hasText: cleanAppName })).toHaveCount(0);
  });
});