developers.spec.ts

developers.spec.tstests/e2e/specs/developers.spec.tsraw ← specs15,434 B← Back to the app
1/**
2 * AI Software Factory — E2E: Developers UI + API-key lifecycle (TASK-0128)
3 *
4 * The acceptance-criteria scenarios, driven through the REAL settings UI:
5 *
6 *   1. Owner (the demo user) opens Settings → Developers → creates a key
7 *      (name "CI", READ+WRITE, no expiry) via the create dialog → the RAW
8 *      key is read from the reveal-dialog DOM (`data-testid="apikey-raw"`)
9 *      → POST /pages with the key → 2xx → GET → 200 with the title →
10 *      PATCH title → 2xx, verified by GET.
11 *   2. A second key (READ only) → POST via the key → 403
12 *      `api_key_scope_write`; GET succeeds.
13 *   3. Revoke the WRITE key from the UI (inline confirm) → immediate GET
14 *      with it → 401 `api_key_revoked`; the row shows Revoked.
15 *   4. Audit (via the audit API): api_key.created ×2, api_key.revoked ×1.
16 *   5. The raw key appears in exactly ONE DOM location (the reveal
17 *      dialog); after "I have stored it" it is gone from the DOM and never
18 *      reappears on re-render.
19 *   6. A MEMBER does not see the Developers tab (absent from the settings
20 *      DOM) and their direct request still 403s (rule 19: UX ≠ authz).
21 *
22 * Fixtures (tests/e2e/fixtures.ts): `api` = fresh demo login (Bearer),
23 * `page` = the demo's authenticated browser page, `secondUser()` = a
24 * freshly-registered user with page + api, `freshWorkspace` = an owned
25 * workspace (auto-deleted in teardown). The key-credential requests use a
26 * bare `request` context (no auth fixture — the credential IS the key).
27 */
28import { test, expect } from "../fixtures";
29import { addMemberViaSeam, seamServiceToken } from "../utils/api";
30import { request as pwRequest } from "@playwright/test";
31import type { APIRequestContext, Page } from "@playwright/test";
32 
33const API = process.env.E2E_API_URL ?? "http://localhost:4000";
34 
35/** A bare context — the credential is supplied per-request (the key). */
36async function bareCtx(): Promise<APIRequestContext> {
37  return pwRequest.newContext({ baseURL: API, timeout: 30_000 });
38}
39 
40/**
41 * Open the Developers tab. A "ready" page shows either the create button
42 * (owner/admin) or the role notice (anyone else — which this spec's owner
43 * is not).
44 *
45 * Do NOT reload in a loop here (this helper used to): the fresh-context
46 * auth bootstrap is `cookie → POST /auth/refresh → GET /auth/me →
47 * setUser` and needs ~3s AFTER the page's JS has hydrated. Reloading on a
48 * ~2s cadence aborts the in-flight refresh→me chain before React commits
49 * the user (the (app) layout then sits on its "Loading workspace…" gate
50 * indefinitely — verified: single uninterrupted loads clear in 2–3s 3/3,
51 * reload-looped loads livelocked with /auth/me returning 200 but the gate
52 * never clearing, on desktop AND mobile). One load + a generous budget is
53 * the correct shape; a cold dev server (concurrent compile) is absorbed by
54 * the 20s timeout.
55 */
56async function openDevelopers(page: Page, workspaceId: string): Promise<void> {
57  await page.goto(`/w/${workspaceId}/settings/developers`);
58  const ready = page
59    .locator('[data-testid="apikey-create-open"]')
60    .or(page.getByText("Owner or Admin required"))
61    .first();
62  await expect(ready).toBeVisible({ timeout: 20_000 });
63}
64 
65/**
66 * Click a button/interactive, immune to the Playwright 1.49 mobile-emulation
67 * hit-test desync. Under the `chromium-mobile` project (iPhone 13 profile
68 * pinned to chromium) Chromium intermittently zooms the LAYOUT viewport
69 * out to ~670px even though the served `<meta viewport width=device-width>`
70 * is correct and present at byte 92 of the HTML (verified), so
71 * `innerWidth` reads 670 while the 375px visual viewport shows the page
72 * scaled to 0.56. At that moment Playwright's actionability CDP hit-test
73 * resolves a button's center onto a different element (the reported
74 * interceptor varies run-to-run: backdrop / footer / fieldset / input —
75 * while the page's own `elementFromPoint` at the same coordinate returns
76 * the button). The app itself is correct: with the dialog open, no element
77 * is wider than 375px and `scrollWidth` stays 375 (probed). So this is a
78 * test-harness artifact, not a mobile layout defect.
79 *
80 * Fallback: coordinate-free activation — dispatch the element's real
81 * `click` event (the exact event React's onClick is wired to) with NO
82 * pointer coordinates, bypassing the broken hit-test entirely.
83 * `locator.click({ force })` was rejected (it still resolves the target
84 * through the same hit-test); `locator.focus()` was rejected too (its
85 * actionability pre-check hangs on the same path). The caller still
86 * asserts the full post-click state (dialog closed / reveal appeared /
87 * row flipped to Revoked), so a fallback that silently did nothing
88 * fails the test rather than masking a broken UI.
89 */
90async function safeClick(
91  page: Page,
92  locator: import("@playwright/test").Locator,
93  label: string,
94): Promise<void> {
95  try {
96    await locator.click();
97    return;
98  } catch {
99    /* actionability hit-test flake (mobile emulation) — fall through */
100  }
101  // Coordinate-free activation: dispatch the element's real `click` event
102  // (the same event React's onClick is wired to) with NO pointer
103  // coordinates, so the emulation's broken hit-test is bypassed entirely.
104  // `locator.click({ force })` was rejected: it still computes the target
105  // via the same CDP hit-test and landed on a different element.
106  await expect(locator, `${label}: resolvable for click fallback`).toBeAttached();
107  await locator.evaluate((el) => el.click());
108}
109 
110test.describe("Developers UI + API-key lifecycle (TASK-0128)", () => {
111  test("owner: create (reveal) → key POST/GET/PATCH → READ 403 → revoke → audit", async ({
112    api,
113    authPage: page,
114    freshWorkspace,
115  }) => {
116    const ws = await freshWorkspace(`DEV E2E ${Date.now()}`);
117 
118    // -- Create the WRITE key via the UI dialog ---------------------------
119    await openDevelopers(page, ws.id);
120    await page.getByTestId("apikey-create-open").click();
121    await page.getByLabel("Name").fill("CI");
122    await page.getByRole("checkbox", { name: /WRITE/ }).check(); // + READ
123    await safeClick(page, page.getByRole("button", { name: "Create key" }), "Create key");
124 
125    // The reveal dialog: the raw key is in EXACTLY ONE DOM location.
126    const rawField = page.getByTestId("apikey-raw");
127    await expect(rawField).toBeVisible();
128    const rawKey = (await rawField.inputValue()).trim();
129    expect(rawKey).toMatch(/^fk_live_/);
130    // The raw key is in EXACTLY ONE DOM location: the reveal input.
131    // (The list table only carries the MASKED prefix `fk_live_ab12…•••`,
132    // and `innerText` does not read <input> values — so assert both.)
133    const inputsWithKey = await page
134      .locator("input")
135      .evaluateAll((els, key) => els.filter((e) => e.value === key).length, rawKey);
136    expect(inputsWithKey).toBe(1);
137    expect(await page.getByText(rawKey).count()).toBe(0); // no text-node copy
138    await expect(page.getByText("This key will not be shown again")).toBeVisible();
139 
140    // Copy works (clipboard API — the context needs the clipboard
141    // permission, which the shared fixture does not grant).
142    await page.context().grantPermissions(["clipboard-read", "clipboard-write"]);
143    await page.getByTestId("apikey-copy").click();
144    await expect(page.getByRole("button", { name: "Copy API key" })).toHaveText(/Copied/);
145 
146    // "I have stored it" → the raw key leaves the DOM permanently.
147    await page.getByTestId("apikey-stored-confirm").check();
148    await safeClick(
149      page,
150      page.getByRole("button", { name: "I have stored it" }),
151      "I have stored it",
152    );
153    await expect(page.getByTestId("apikey-raw")).toHaveCount(0);
154    expect(
155      await page
156        .locator("input")
157        .evaluateAll((els, key) => els.filter((e) => e.value === key).length, rawKey),
158    ).toBe(0);
159 
160    // The list row for "CI" (prefix masked, scopes badged, Active).
161    // 20s budget: the row is driven by a create→invalidate→refetch cycle
162    // that provably returns 200 and renders in ~6s when the dev server is
163    // idle, but a concurrent compile (typecheck/build) can push the cold
164    // refetch past the default 10s. A real "row never renders" defect
165    // would still fail at 20s, so this budgets dev-server latency without
166    // masking a broken invalidation.
167    const ciRow = page.getByRole("row", { name: /CI/ });
168    await expect(ciRow).toBeVisible({ timeout: 20_000 });
169    await expect(ciRow.getByText("fk_live_")).toBeVisible();
170    await expect(ciRow.getByText("WRITE")).toBeVisible();
171    await expect(ciRow.getByText("Active")).toBeVisible();
172 
173    // Re-render (leave the tab and come back): the raw key must NOT
174    // come back (the reveal state is in-memory, dropped on confirm).
175    //
176    // Two hard full-page loads (goto → goto) are a deliberate STRESS on the
177    // auth bootstrap: each goto is a fresh JS context whose one-time
178    // bootstrap posts POST /auth/refresh to rotate the httpOnly cookie, and
179    // per-tab single-flight cannot dedupe across destroyed/recreated
180    // documents — so two overlapping bootstraps race the same rotation the
181    // way two tabs would. Real users navigate between settings tabs via the
182    // SPA router (one bootstrap per tab), never a hard reload per tab, so
183    // settle the first load (auth gate cleared, Members page rendered)
184    // before the second to keep the stress at exactly one in-flight
185    // bootstrap — the worst case the production race fix must cover.
186    // (If the first load's bootstrap fails, the app redirects to /login;
187    // waiting for the Members h1 then fails fast with a clear signal.)
188    await page.goto(`/w/${ws.id}/settings/members`);
189    await expect(page.getByRole("heading", { name: "Members", level: 1 })).toBeVisible({ timeout: 20_000 });
190    await page.goto(`/w/${ws.id}/settings/developers`);
191    await expect(page.getByRole("row", { name: /CI/ })).toBeVisible({ timeout: 20_000 });
192    expect(
193      await page
194        .locator("input")
195        .evaluateAll((els, key) => els.filter((e) => e.value === key).length, rawKey),
196    ).toBe(0);
197    expect(await page.getByText(rawKey).count()).toBe(0);
198 
199    // -- The curl roundtrip with the key ----------------------------------
200    const keyReq = await bareCtx();
201    const keyAuth = { Authorization: `Bearer ${rawKey}` };
202 
203    const created = await keyReq.post(`/api/v1/workspaces/${ws.id}/pages`, {
204      headers: keyAuth,
205      data: { title: "made by CI key" },
206    });
207    expect(created.status(), await created.text()).toBeLessThan(300);
208    const pg = (await created.json()) as { id: string; title: string };
209    expect(pg.title).toBe("made by CI key");
210 
211    // GET /pages/:id returns `{ page, workspace, … }` (the nested shape);
212    // the create/patch responses return the bare page — read both.
213    const titleOf = (b: Record<string, unknown>) =>
214      (b as { page?: { title?: string } }).page?.title ?? (b as { title?: string }).title;
215    const fetched = await keyReq.get(`/api/v1/pages/${pg.id}`, { headers: keyAuth });
216    expect(fetched.status()).toBe(200);
217    expect(titleOf(await fetched.json())).toBe("made by CI key");
218 
219    const patched = await keyReq.patch(`/api/v1/pages/${pg.id}`, {
220      headers: keyAuth,
221      data: { title: "renamed by CI key" },
222    });
223    expect(patched.status()).toBe(200);
224    const recheck = await keyReq.get(`/api/v1/pages/${pg.id}`, { headers: keyAuth });
225    expect(titleOf(await recheck.json())).toBe("renamed by CI key");
226 
227    // -- The READ-only key: POST 403, GET ok -------------------------------
228    await page.getByTestId("apikey-create-open").click();
229    await page.getByLabel("Name").fill("READONLY");
230    // The dialog resets to READ-only on open (WRITE stays unchecked).
231    await safeClick(page, page.getByRole("button", { name: "Create key" }), "Create key");
232    const readField = page.getByTestId("apikey-raw");
233    await expect(readField).toBeVisible();
234    const readKey = (await readField.inputValue()).trim();
235    await page.getByTestId("apikey-stored-confirm").check();
236    await safeClick(
237      page,
238      page.getByRole("button", { name: "I have stored it" }),
239      "I have stored it",
240    );
241 
242    const readReq = await bareCtx();
243    const rAuth = { Authorization: `Bearer ${readKey}` };
244    const readGet = await readReq.get(`/api/v1/workspaces/${ws.id}/pages`, { headers: rAuth });
245    expect(readGet.status()).toBe(200);
246    const readPost = await readReq.post(`/api/v1/workspaces/${ws.id}/pages`, {
247      headers: rAuth,
248      data: { title: "nope" },
249    });
250    expect(readPost.status()).toBe(403);
251    const rErr = (await readPost.json()) as { error: { details?: Array<{ reason?: string }> } };
252    expect(rErr.error.details?.some((d) => d.reason === "api_key_scope_write")).toBe(true);
253 
254    // -- Revoke the WRITE key from the UI ----------------------------------
255    await safeClick(page, ciRow.getByRole("button", { name: "Revoke" }), "Revoke (CI)");
256    // Inline confirm copy (the acceptance wording).
257    await expect(
258      page.getByText("Revoke this key? Requests will fail immediately with 401."),
259    ).toBeVisible();
260    // Confirm (the destructive button in the confirm row).
261    await safeClick(page, page.getByRole("button", { name: "Revoke" }).last(), "Revoke (confirm)");
262    // The row flips to Revoked.
263    await expect(page.getByRole("row", { name: /CI/ }).getByText("Revoked")).toBeVisible();
264 
265    // Immediately dead — 401 api_key_revoked.
266    const dead = await keyReq.get(`/api/v1/pages/${pg.id}`, { headers: keyAuth });
267    expect(dead.status()).toBe(401);
268    const dErr = (await dead.json()) as { error: { details?: Array<{ reason?: string }> } };
269    expect(dErr.error.details?.some((d) => d.reason === "api_key_revoked")).toBe(true);
270 
271    // -- Audit: created ×2, revoked ×1 (via the audit API) ------------------
272    const audit = await api.get(`/api/v1/workspaces/${ws.id}/audit?limit=100`);
273    expect(audit.status()).toBe(200);
274    const rows = ((await audit.json()) as { data: Array<{ action: string }> }).data;
275    expect(rows.filter((r) => r.action === "api_key.created").length).toBe(2);
276    expect(rows.filter((r) => r.action === "api_key.revoked").length).toBe(1);
277 
278    await keyReq.dispose();
279    await readReq.dispose();
280  });
281 
282  test("a member does not see the Developers tab (absent from the settings DOM)", async ({
283    freshWorkspace,
284    secondUser,
285  }) => {
286    // A workspace owned by the demo user; a freshly-registered user joins
287    // as MEMBER through the internal test seam (the e2e stack runs with the
288    // seam open — membership is DB-driven, immediate).
289    const ws = await freshWorkspace(`MEMBER TAB ${Date.now()}`);
290    const member = await secondUser();
291    await addMemberViaSeam(seamServiceToken(), ws.id, member.user.email, "MEMBER");
292 
293    // As the member: the settings nav has NO "Developers" tab.
294    await member.page.goto(`/w/${ws.id}/settings`);
295    const nav = member.page.getByRole("navigation", { name: "Settings sections" });
296    await expect(nav).toBeVisible({ timeout: 20_000 });
297    await expect(nav.getByRole("link", { name: "Developers" })).toHaveCount(0);
298 
299    // …and the server still 403s their direct request (rule 19: UX ≠ authz).
300    const direct = await member.api.get(`/api/v1/workspaces/${ws.id}/api-keys`);
301    expect(direct.status()).toBe(403);
302  });
303});
304