test(e2e): cover the donation flow with Yadio/LNURL mocks

The donation flow calls Yadio and LNURL directly from the route components
(no reconciliationClaim involved) and polls the LNURL verify endpoint from
the UI, all via real browser fetch() with no injectable dependency. Add
donation-mocks.ts's mockDonationApis(), which uses Playwright page.route()
to intercept the exchange-rate, pay-request, callback, and verify calls
(plus the donation-history endpoint) so the flow is deterministic end to
end, including reaching the "paid" screen via setSettled(true).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_015ZcjwWJ8dUzzhmeeTK7XcG

Author: pepakriz

e2e/donation-mocks.ts

@@ -0,0 +1,89 @@
+import type { Page } from "@playwright/test"
+
+const YADIO_EXRATES_URL = "https://api.yadio.io/exrates/**"
+const LNURL_METADATA_URL = "https://payky.me/.well-known/lnurlp/donate"
+const LNURL_CALLBACK_URL = "https://donate.e2e.test/callback"
+const LNURL_VERIFY_URL = "https://donate.e2e.test/verify/1"
+const DEFAULT_INVOICE =
+  "lnbc1e2edonationinvoice0000000000000000000000000000000000000000"
+
+export interface DonationMockOptions {
+  /** Fiat-per-BTC rate the mocked Yadio response reports. */
+  readonly exchangeRate?: number
+  readonly minSendableSats?: number
+  readonly maxSendableSats?: number
+  /** The `pr` (bolt11) string the mocked LNURL callback returns. */
+  readonly invoice?: string
+  /** Whether the mocked verify endpoint reports the invoice as settled from the start. */
+  readonly settled?: boolean
+}
+
+export interface DonationMocks {
+  /** Flips the mocked LNURL verify endpoint's `settled` flag for the next poll. */
+  setSettled: (settled: boolean) => void
+}
+
+/**
+ * Intercepts every HTTP call the donation flow makes — Yadio's exchange
+ * rate, the LNURL pay-request/callback/verify trio, and the donation
+ * history endpoint — so `e2e/donation.spec.ts` doesn't depend on any real
+ * external service. The LNURL callback/verify URLs point at a non-resolving
+ * `donate.e2e.test` domain; Playwright's route interception happens before
+ * DNS resolution, so that's fine as long as every URL it returns is also
+ * routed here.
+ */
+export async function mockDonationApis(
+  page: Page,
+  options: DonationMockOptions = {}
+): Promise<DonationMocks> {
+  const exchangeRate = options.exchangeRate ?? 1_500_000
+  const minSendableSats = options.minSendableSats ?? 1
+  const maxSendableSats = options.maxSendableSats ?? 1_000_000
+  const invoice = options.invoice ?? DEFAULT_INVOICE
+  let settled = options.settled ?? false
+
+  await page.route(YADIO_EXRATES_URL, async (route) => {
+    await route.fulfill({
+      json: { BTC: exchangeRate, timestamp: Date.now() },
+    })
+  })
+
+  await page.route(LNURL_METADATA_URL, async (route) => {
+    await route.fulfill({
+      json: {
+        tag: "payRequest",
+        callback: LNURL_CALLBACK_URL,
+        minSendable: minSendableSats * 1_000,
+        maxSendable: maxSendableSats * 1_000,
+        metadata: JSON.stringify([["text/plain", "Donate to Payky"]]),
+      },
+    })
+  })
+
+  await page.route(`${LNURL_CALLBACK_URL}**`, async (route) => {
+    await route.fulfill({
+      json: { pr: invoice, routes: [], verify: LNURL_VERIFY_URL },
+    })
+  })
+
+  await page.route(`${LNURL_VERIFY_URL}**`, async (route) => {
+    await route.fulfill({
+      json: {
+        status: "OK",
+        settled,
+        preimage: settled ? "e2e-mock-preimage" : null,
+        pr: invoice,
+      },
+    })
+  })
+
+  await page.route("**/api/donations**", async (route) => {
+    await route.fulfill({ json: { items: [], nextCursor: null } })
+  })
+
+  return {
+    setSettled: (value) => {
+      settled = value
+    },
+  }
+}

e2e/donation.spec.ts

@@ -0,0 +1,117 @@
+import type { Page } from "@playwright/test"
+import { mockDonationApis } from "./donation-mocks.ts"
+import { expect, test, translate } from "./fixtures.ts"
+
+// Not gotoPage(): the donations page's heading ("Donations") is a substring
+// match of the donation-history empty state's heading ("No donations yet"),
+// which makes gotoPage's non-exact getByRole ambiguous.
+async function openDonationsPage(page: Page): Promise<void> {
+  await page.goto("/settings/donations", { waitUntil: "domcontentloaded" })
+  await page
+    .getByRole("heading", {
+      name: translate("en", "settings.donations.title"),
+      exact: true,
+    })
+    .waitFor()
+}
+
+test("create a donation invoice then simulate the incoming payment", async ({
+  seededPage: page,
+}) => {
+  const donationMocks =
+    await test.step("mock Yadio, LNURL, and donation history APIs", () =>
+      mockDonationApis(page))
+
+  await test.step("open the donations page", () => openDonationsPage(page))
+
+  await test.step("enter a sats amount and create the invoice", async () => {
+    await page
+      .getByRole("textbox", {
+        name: translate("en", "settings.donations.sats.label"),
+      })
+      .fill("1000")
+    await page
+      .getByRole("button", {
+        name: translate("en", "settings.donations.create"),
+      })
+      .click()
+    await page
+      .getByRole("heading", {
+        name: translate("en", "settings.donations.invoice.title"),
+      })
+      .waitFor()
+  })
+
+  await test.step("verify the invoice QR renders and payment is awaited", async () => {
+    await expect(
+      page
+        .getByRole("button", {
+          name: translate("en", "settings.donations.invoice.copy"),
+        })
+        .locator("svg")
+    ).toBeVisible()
+    await expect(
+      page.getByText(
+        translate("en", "settings.donations.invoice.verify.waiting")
+      )
+    ).toBeVisible()
+  })
+
+  await test.step("simulate the incoming Lightning payment", async () => {
+    donationMocks.setSettled(true)
+    await expect(
+      page.getByText(translate("en", "settings.donations.invoice.verify.paid"))
+    ).toBeVisible()
+  })
+
+  await test.step("return to settings", async () => {
+    // `nativeButton={false}` on this Button makes Base UI force role="button"
+    // onto the rendered <Link>, so it's not `getByRole("link", ...)`.
+    await page
+      .getByRole("button", {
+        name: translate("en", "settings.donations.invoice.backToSettings"),
+      })
+      .click()
+    await page
+      .getByRole("heading", { name: translate("en", "settings.title") })
+      .waitFor()
+  })
+})
+
+test("donation amount is validated against the LNURL sendable range", async ({
+  seededPage: page,
+}) => {
+  await test.step("mock Yadio, LNURL, and donation history APIs", () =>
+    mockDonationApis(page, { minSendableSats: 100, maxSendableSats: 500 }))
+
+  await test.step("open the donations page", () => openDonationsPage(page))
+
+  await test.step("enter an amount above the allowed range", async () => {
+    await page
+      .getByRole("textbox", {
+        name: translate("en", "settings.donations.sats.label"),
+      })
+      .fill("999")
+    await expect(
+      page.getByText(translate("en", "settings.donations.amount.range"))
+    ).toBeVisible()
+    await expect(
+      page.getByRole("button", {
+        name: translate("en", "settings.donations.create"),
+      })
+    ).toBeDisabled()
+  })
+
+  await test.step("enter an amount inside the allowed range", async () => {
+    await page
+      .getByRole("textbox", {
+        name: translate("en", "settings.donations.sats.label"),
+      })
+      .fill("200")
+    await expect(
+      page.getByRole("button", {
+        name: translate("en", "settings.donations.create"),
+      })
+    ).toBeEnabled()
+  })
+})