paperclip/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 Permissions 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();
  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: "http://127.0.0.1:65535/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: "Connectors" })).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}-offline`;
    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 "Connected" status. A
    // background health sweep then probes the connection endpoint. The test
    // endpoint is an unreachable loopback URL, so the probe fails and the pill
    // becomes "Needs attention" and adds a "Reconnect" action. Both are
    // connected states that navigate to the same Permissions 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 connectorList = page.getByRole("list", { name: "Connector list" });
    const connectedRow = connectorList
      .getByRole("listitem")
      .filter({ has: page.getByRole("heading", { name: connectedName, exact: true }) });
    await expect(connectedRow).toBeVisible();
    await expect(connectedRow.getByText(/^(Connected|Needs attention)$/)).toBeVisible({ timeout: 30_000 });
    const openConnection = connectedRow.getByRole("button", { name: /^Open .* permissions$/ });
    await expect(openConnection).toBeVisible();

    // The not-connected app has no connection, so the health sweep never touches
    // it and its Connect action stay deterministic.
    const notConnectedRow = connectorList
      .getByRole("listitem")
      .filter({ has: page.getByRole("heading", { name: notConnectedName, exact: true }) });
    await expect(notConnectedRow).toBeVisible();
    await expect(notConnectedRow).toHaveAttribute("data-connected", "false");
    await expect(notConnectedRow.getByRole("button", { name: `Connect ${notConnectedName}` })).toBeVisible();
    await page.screenshot({ path: `${SCREENSHOT_DIR}/applications-crud-current-list.png`, fullPage: true });

    await openConnection.click();
    await expect(page).toHaveURL(
      new RegExp(`/${seed.prefix}/apps/${connected.id}/permissions$`),
      { timeout: 20_000 },
    );

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

  test("connected app detail supports rename on Permissions", 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}/permissions`);
    await expect(page.getByRole("heading", { name: appName })).toBeVisible({ timeout: 30_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 });
  });
});