test(pay-card): add mobile renewal test controls (LIVE-34741)

Rebased onto the refreshed Baanx session renewal branch and merged
develop navigation changes with the Card session DevTool controls.

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: liviuciulinaru

.changeset/olive-donkeys-listen.md

@@ -0,0 +1,38 @@
+---
+"live-mobile": patch
+"@devtools/pay-card": minor
+"@devtools/bindings": minor
+"@features/flow-pay-card-auth": minor
+---
+
+Add Card session controls to the Card / Pay DevTool
+
+The panel gains an "Auth session", a "Device secure storage", a "Send API requests" and an "MSW Auth
+Renewal Mock" section: the stored tokens, and buttons that call the real session accessors to break a
+token, renew or fetch. An MSW handler decides what the Baanx renewal grant answers, and
+publishes its counters to the panel.
+
+The mock offers one button per documented response of `POST /v1/auth/oauth2/token`, named by status
+code — 200, 400, 422, 498, 499, 500 — plus a slow 200, a 200 the wire schema rejects, and a transport
+failure. Each carries the body the Baanx reference documents for it, so a tester matches the panel
+against the API docs rather than against a nickname.
+
+The panel follows the renewal contract: it sends the epoch of the session it read, and names a
+`session-replaced` answer when a login or a logout got in first.
+
+"Auth session" tells a store it could not read apart from an empty one. The native store rejects a
+read the OS refused, so a locked keychain shows "Unreadable" with the reason rather than reporting
+the tester as signed out.
+
+A "Secure browser" section closes the panel on mobile. It takes a URL and opens it in the secure
+browser the hosted login uses, so a tester reaches an authorize page, or a redirect, without the
+login flow that builds the URL. The mobile host passes the Pay tab deep link, which is what ends
+such a session, and the panel prints the redirect the session answered.
+
+The panel works without MSW, so it runs on a device. The handler stays behind `MSW_ENABLED`.
+
+The mock reports one counter, `renewals`, and counts only the renewals it answered. On React Native
+MSW installs two interceptors, one on `fetch` and one on the `XMLHttpRequest` that React Native's
+`fetch` is built on, so a handler runs twice for every request it passes through. A "user requests"
+counter therefore reported two for one, and it is removed: the `[card api]` trace in
+`@shared/api-services` runs in the client and prints one line per request.

apps/ledger-live-mobile/src/mocks/README.md

@@ -34,3 +34,37 @@ Verify
 Disable
 
 - Or start normally: `pnpm start  -- --reset-cache`.
+
+## Pay Card session renewal (LIVE-34741)
+
+`src/mocks/card/handler.ts` mocks the OAuth2 renewal grant, so every branch of the Pay Card session
+renewal can be driven by hand. It only intercepts `grant_type=refresh_token`; the login grant reaches
+the real provider, so you can still sign in. It also answers the Card reads once its own mock tokens
+are in play, because the provider rejects tokens it never issued.
+
+Drive it from **Settings > Debug > DevTools > Card / Pay**, under "MSW Auth Renewal Mock". One button
+per documented answer of `POST /v1/auth/oauth2/token`, named by status code so each matches the Baanx
+API reference: 200, 400, 422, 498, 499 and 500, plus a slow 200, a 200 the schema rejects, and a
+transport failure.
+
+Only **200** and **200 slow** keep the session. Every other button ends it, which is the one renewal
+rule — see "Renewal" in `@features/platform-card`. The buttons still differ, because a tester must
+see that each documented status reaches that end, and by which route.
+
+The panel works without MSW too: the buttons still call the real session accessors, and every request
+reaches the real provider. Only the answer buttons and the renewal counter need `MSW_ENABLED=true`.
+
+> [!IMPORTANT]
+>
+> **A handler runs twice for every request it passes through.** `msw/native` installs two
+> interceptors, one on `fetch` and one on `XMLHttpRequest`, and React Native's `fetch` is
+> `whatwg-fetch`, which is built on `XMLHttpRequest`. So a pass-through is performed with the real
+> `fetch`, that `fetch` opens an `XMLHttpRequest`, and the second interceptor hands the same request
+> back to the handler. A request the handler answers arrives once.
+>
+> So a Pay Card handler counts only what it answers. Do not count a pass-through here: count it in
+> the client. The `[card api]` trace in `@shared/api-services` prints one line per request.
+
+`src/mocks/card/state.ts` holds the switchboard the panel and the handler share. It lives on
+`globalThis`, because the panel's props are built in `@devtools/bindings`, which cannot import from
+an app.

apps/ledger-live-mobile/src/mocks/card/handler.test.ts

@@ -0,0 +1,99 @@
+import { server } from "@tests/server";
+import handlers from "./handler";
+import { readCardMockState, type CardTokenResponseId } from "./state";
+
+const TOKEN_URL = "https://card.test/v1/auth/oauth2/token";
+
+function renew(response: CardTokenResponseId) {
+  const state = readCardMockState();
+  if (!state) throw new Error("Card mock state was not initialized");
+  state.tokenResponse = response;
+  return fetch(TOKEN_URL, {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify({ grant_type: "refresh_token" }),
+  });
+}
+
+describe("Card renewal mock handlers", () => {
+  beforeEach(() => {
+    const state = readCardMockState();
+    if (!state) throw new Error("Card mock state was not initialized");
+    state.tokenResponse = "pass";
+    state.userUnauthorizedOnce = false;
+    state.refreshCount = 0;
+    server.use(...handlers);
+  });
+
+  it.each([
+    ["200", 200],
+    ["200-bad-body", 200],
+    ["400", 400],
+    ["422", 422],
+    ["498", 498],
+    ["499", 499],
+    ["500", 500],
+  ] as const)("answers the %s renewal mode", async (mode, status) => {
+    const response = await renew(mode);
+
+    expect(response.status).toBe(status);
+    expect(readCardMockState()?.refreshCount).toBe(1);
+  });
+
+  it("returns rotated tokens for a successful renewal", async () => {
+    const response = await renew("200");
+
+    await expect(response.json()).resolves.toEqual({
+      access_token: "at_mock_1",
+      refresh_token: "rt_mock_1",
+      expires_in: 3600,
+    });
+  });
+
+  it("simulates a renewal network failure", async () => {
+    await expect(renew("network-error")).rejects.toBeDefined();
+    expect(readCardMockState()?.refreshCount).toBe(1);
+  });
+
+  it("passes through requests the mock does not own", async () => {
+    await expect(renew("pass")).rejects.toBeDefined();
+    await expect(
+      fetch(TOKEN_URL, {
+        method: "POST",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify({ grant_type: "authorization_code" }),
+      }),
+    ).rejects.toBeDefined();
+    await expect(fetch("https://card.test/v1/user")).rejects.toBeDefined();
+    await expect(fetch("https://card.test/v1/card/status")).rejects.toBeDefined();
+  });
+
+  it("arms one unauthorized user response", async () => {
+    const state = readCardMockState();
+    if (!state) throw new Error("Card mock state was not initialized");
+    state.userUnauthorizedOnce = true;
+
+    const response = await fetch("https://card.test/v1/user");
+
+    expect(response.status).toBe(401);
+    expect(state.userUnauthorizedOnce).toBe(false);
+  });
+
+  it("answers user and card reads for mock access tokens", async () => {
+    const headers = { authorization: "Bearer at_mock_1" };
+
+    const [user, card] = await Promise.all([
+      fetch("https://card.test/v1/user", { headers }),
+      fetch("https://card.test/v1/card/status", { headers }),
+    ]);
+
+    await expect(user.json()).resolves.toMatchObject({
+      id: expect.any(String),
+      verificationState: "VERIFIED",
+    });
+    await expect(card.json()).resolves.toMatchObject({
+      holderName: "JOHN DOE",
+      status: "ACTIVE",
+    });
+  });
+});

apps/ledger-live-mobile/src/mocks/card/handler.ts

@@ -0,0 +1,124 @@
+import { http, HttpResponse, passthrough, delay } from "msw";
+import { createCardMockState } from "./state";
+
+const state = createCardMockState();
+
+const SLOW_MS = 5_000;
+
+const MOCK_TOKEN_PREFIX = "at_mock_";
+
+function usesMockToken(request: Request): boolean {
+  return request.headers.get("authorization")?.includes(MOCK_TOKEN_PREFIX) ?? false;
+}
+
+const MOCK_USER = {
+  id: "6f1c9a52-3d4e-4b7a-9c81-2f0d5e7a1b34",
+  verificationState: "VERIFIED",
+};
+
+const MOCK_CARD_STATUS = {
+  id: "000000000050277836",
+  holderName: "JOHN DOE",
+  expiryDate: "2028/01",
+  panLast4: "1234",
+  status: "ACTIVE",
+  type: "VIRTUAL",
+  orderedAt: "2023-03-27T17:07:12.662Z",
+};
+
+function rotatedSession(serial: number) {
+  return HttpResponse.json({
+    access_token: `${MOCK_TOKEN_PREFIX}${serial}`,
+    refresh_token: `rt_mock_${serial}`,
+    expires_in: 3600,
+  });
+}
+
+const OAUTH_ERROR_BODY = {
+  error: "invalid_grant",
+  error_description: "The refresh token is invalid, expired or revoked",
+};
+
+async function answerTokenRequest(id: string, serial: number) {
+  switch (id) {
+    case "200":
+      return rotatedSession(serial);
+
+    case "200-slow":
+      await delay(SLOW_MS);
+      return rotatedSession(serial);
+
+    case "200-bad-body":
+      return HttpResponse.json({ access_token: `${MOCK_TOKEN_PREFIX}${serial}`, expires_in: 3600 });
+
+    case "400":
+      return HttpResponse.json(OAUTH_ERROR_BODY, { status: 400 });
+
+    case "422":
+      return HttpResponse.json({ message: "x field is not allowed" }, { status: 422 });
+
+    case "498":
+      return HttpResponse.json({ message: "Invalid client key" }, { status: 498 });
+
+    case "499":
+      return HttpResponse.json({ message: "Missing client key" }, { status: 499 });
+
+    case "500":
+      return HttpResponse.json({ message: "Internal server error" }, { status: 500 });
+
+    case "network-error":
+      return HttpResponse.error();
+
+    default:
+      return passthrough();
+  }
+}
+
+const handlers = [
+  http.post("*/v1/auth/oauth2/token", async ({ request }) => {
+    const body = (await request
+      .clone()
+      .json()
+      .catch(() => ({}))) as { grant_type?: string };
+
+    if (body.grant_type !== "refresh_token") {
+      return passthrough();
+    }
+
+    if (state.tokenResponse === "pass") {
+      return passthrough();
+    }
+
+    state.refreshCount += 1;
+    // eslint-disable-next-line no-console
+    console.log(`[card-msw] renewal #${state.refreshCount} answers ${state.tokenResponse}`);
+
+    return answerTokenRequest(state.tokenResponse, state.refreshCount);
+  }),
+
+  http.get("*/v1/user", ({ request }) => {
+    if (state.userUnauthorizedOnce) {
+      state.userUnauthorizedOnce = false;
+      // eslint-disable-next-line no-console
+      console.log("[card-msw] answering one /v1/user with 401");
+      return HttpResponse.json({ message: "unauthorized" }, { status: 401 });
+    }
+
+    if (!usesMockToken(request)) {
+      return passthrough();
+    }
+
+    // eslint-disable-next-line no-console
+    console.log("[card-msw] answering /v1/user from the mock");
+    return HttpResponse.json(MOCK_USER);
+  }),
+
+  http.get("*/v1/card/status", ({ request }) => {
+    if (!usesMockToken(request)) {
+      return passthrough();
+    }
+    return HttpResponse.json(MOCK_CARD_STATUS);
+  }),
+];
+
+export default handlers;

apps/ledger-live-mobile/src/mocks/card/state.ts

@@ -0,0 +1,94 @@
+export type CardTokenResponseId =
+  | "pass"
+  | "200"
+  | "200-slow"
+  | "200-bad-body"
+  | "400"
+  | "422"
+  | "498"
+  | "499"
+  | "500"
+  | "network-error";
+
+export type CardTokenResponse = {
+  readonly id: CardTokenResponseId;
+  readonly label: string;
+  readonly hint: string;
+};
+
+function response(id: CardTokenResponseId, label: string, hint: string): CardTokenResponse {
+  return { id, label, hint };
+}
+
+export const CARD_TOKEN_RESPONSES: readonly CardTokenResponse[] = [
+  response("pass", "Off", "The mock stands aside. The real provider answers the renewal."),
+  response(
+    "200",
+    "200",
+    "Token exchange successful. A new access token and a new refresh token. The one answer that keeps the session.",
+  ),
+  response(
+    "200-slow",
+    "200 slow",
+    "The same body, 5 s later. Holds one renewal open so every waiting caller must share it.",
+  ),
+  response(
+    "200-bad-body",
+    "200 bad body",
+    "200 with no refresh_token. The wire schema rejects it, so no session is stored, so the session ends.",
+  ),
+  response(
+    "400",
+    "400",
+    "OAuth 2.0 error (RFC 6749): invalid_grant. A refresh token the provider will not accept again.",
+  ),
+  response(
+    "422",
+    "422",
+    "Data validation error. Our request was wrong, and the session ends all the same.",
+  ),
+  response(
+    "498",
+    "498",
+    "Invalid x-client-key header. A build fault, and the session ends all the same.",
+  ),
+  response(
+    "499",
+    "499",
+    "Missing x-client-key header. A build fault, and the session ends all the same.",
+  ),
+  response(
+    "500",
+    "500",
+    "Internal server error. A Baanx outage signs the user out. That is the accepted trade.",
+  ),
+  response(
+    "network-error",
+    "Network fail",
+    "No answer at all. The client cannot know whether Baanx consumed the token, and ends the session.",
+  ),
+];
+
+export type CardMockState = {
+  tokenResponse: CardTokenResponseId;
+  readonly responses: readonly CardTokenResponse[];
+  userUnauthorizedOnce: boolean;
+  refreshCount: number;
+};
+
+type MockHost = { payCardMockState?: CardMockState };
+
+export function readCardMockState(): CardMockState | undefined {
+  return (globalThis as MockHost).payCardMockState;
+}
+
+export function createCardMockState(): CardMockState {
+  const state: CardMockState = {
+    tokenResponse: "pass",
+    responses: CARD_TOKEN_RESPONSES,
+    userUnauthorizedOnce: false,
+    refreshCount: 0,
+  };
+  (globalThis as MockHost).payCardMockState = state;
+  return state;
+}