test(dashmint-lab): add Playwright e2e suite

example-apps/dashmint-lab/.gitignore

@@ -12,6 +12,10 @@ dist
 dist-ssr
 *.local
 
+# Artifacts
+playwright-report/
+test-results/
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

example-apps/dashmint-lab/CLAUDE.md

@@ -8,6 +8,8 @@ React + TypeScript + Vite app for minting, viewing, transferring, and trading NF
 - `npm run build` — typecheck (`tsc -b`) then bundle
 - `npm run lint` — ESLint
 - `npm run test` — Vitest suite in [test/](test/)
+- `npm run test:e2e` — Playwright suite in [test/e2e/](test/e2e/) (auto-boots Vite on :5180)
+- `npm run test:e2e:ui` — Playwright with the interactive UI runner
 - `npm run format` / `format:check` — Prettier
 - `npm run preview` — serve production build locally
 
@@ -23,6 +25,7 @@ React + TypeScript + Vite app for minting, viewing, transferring, and trading NF
 - **[src/styles/globals.css](src/styles/globals.css)** — Tailwind v4 import + rarity tokens.
 - **[public/dashmint-lite.html](public/dashmint-lite.html)** — single-file zero-build companion. Read-only Browse cards (with Marketplace-only toggle), loads `@dashevo/evo-sdk` from `esm.sh`, and ships alongside the React app at `<...>/dashmint-lab/dashmint-lite.html` (Vite copies `public/*` into `dist/`). Intentionally self-contained as a learning reference — don't import app code into it.
 - **[test/](test/)** — Vitest + Testing Library. All test files live here per the `include` pattern in [vite.config.ts](vite.config.ts) and are named after the subject under test (e.g. `CardTile.test.tsx`, `SessionContext.test.tsx`). Default env is `node`; tests that need DOM opt in with `// @vitest-environment jsdom`.
+- **[test/e2e/](test/e2e/)** — Playwright specs (`auth`, `browse`, `card`, `how-it-works`, `login-modal`) plus shared `fixtures.ts`. Driven by [playwright.config.ts](playwright.config.ts), which loads `PLATFORM_MNEMONIC` from `../../.env` (repo root, with optional `dashmint-lab/.env` override) and auto-starts `npx vite` on port 5180. The suite runs against real testnet — no SDK mocks. Auth-gated specs sit in `test.describe.configure({ mode: "serial" })` and `test.skip` cleanly when `PLATFORM_MNEMONIC` is unset (via the `HAS_MNEMONIC` flag from `fixtures.ts`). The only chain-mutating spec is the SetPrice round-trip (list → update → unlist) — reversible state, no funds move; transfer / purchase / burn writes are deliberately excluded.
 
 ## SDK Patterns
 

example-apps/dashmint-lab/README.md

@@ -81,6 +81,8 @@ Recommended order for understanding how the app works:
 
 [`test/`](test/) uses Vitest + Testing Library, co-located by subject. The default Vitest environment is Node; component tests opt into jsdom per-file with `// @vitest-environment jsdom`. Run with `npm run test`.
 
+[`test/e2e/`](test/e2e/) holds a Playwright suite that runs against real Dash Platform testnet — no mocks. Run with `npm run test:e2e` (or `npm run test:e2e:ui` for the interactive runner). Browse-only specs run without credentials; auth-gated specs activate when `PLATFORM_MNEMONIC` is set in the repo-root `.env` and `test.skip` cleanly otherwise. The only chain-mutating spec is the SetPrice round-trip (list → update → unlist), which is reversible and moves no funds.
+
 ## Deploying to GitHub Pages
 
 The project ships with a fork-friendly deploy workflow at the repo root. Pushing the deploy branch triggers a Vite build with `VITE_BASE_PATH` set to the repo name so links resolve under `/<repo>/`. For local previews of that build, run:

example-apps/dashmint-lab/package.json

@@ -12,6 +12,8 @@
     "format:check": "prettier --check .",
     "lint": "eslint .",
     "test": "vitest run",
+    "test:e2e": "playwright test",
+    "test:e2e:ui": "playwright test --ui",
     "preview": "vite preview"
   },
   "dependencies": {
@@ -24,6 +26,8 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.39.4",
+    "@playwright/test": "^1.59.1",
+    "dotenv": "^17.3.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^24.12.2",
     "@types/react": "^19.2.14",

example-apps/dashmint-lab/playwright.config.ts

@@ -0,0 +1,45 @@
+import { defineConfig, devices } from "@playwright/test";
+import { config as loadEnv } from "dotenv";
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const here = dirname(fileURLToPath(import.meta.url));
+
+// Load repo-root .env first (where PLATFORM_MNEMONIC lives for the tutorials),
+// then let a local dashmint-lab/.env override it if present.
+loadEnv({ path: resolve(here, "../../.env") });
+loadEnv({ path: resolve(here, ".env"), override: true });
+
+const PORT = 5180;
+
+export default defineConfig({
+  testDir: "./test/e2e",
+  testMatch: "**/*.spec.ts",
+  fullyParallel: false,
+  forbidOnly: !!process.env.CI,
+  retries: 1,
+  workers: 1,
+  timeout: 120_000,
+  expect: { timeout: 30_000 },
+  reporter: process.env.CI ? "list" : [["list"], ["html", { open: "never" }]],
+
+  use: {
+    baseURL: `http://localhost:${PORT}`,
+    trace: "retain-on-failure",
+    permissions: ["clipboard-read", "clipboard-write"],
+  },
+
+  projects: [
+    {
+      name: "chromium",
+      use: { ...devices["Desktop Chrome"] },
+    },
+  ],
+
+  webServer: {
+    command: `npx vite --port ${PORT} --strictPort`,
+    url: `http://localhost:${PORT}`,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});

example-apps/dashmint-lab/src/components/SetPriceModal.tsx

@@ -71,8 +71,7 @@ export function SetPriceModal({ card, onClose, onPriced }: SetPriceModalProps) {
     await submitPrice(n);
   }
 
-  const hasCurrentPrice =
-    !!card && card.$price !== undefined && card.$price !== null;
+  const hasCurrentPrice = !!card && !!card.$price;
 
   return (
     <Modal

example-apps/dashmint-lab/test/SetPriceModal.test.tsx

@@ -128,6 +128,24 @@ describe("SetPriceModal", () => {
     expect(onClose).toHaveBeenCalledTimes(1);
   });
 
+  it("treats $price === 0n as unlisted (zero is not a valid price)", () => {
+    mockUseSession.mockReturnValue(sessionValue);
+
+    render(
+      <SetPriceModal card={{ ...listedCard, $price: 0n }} onClose={vi.fn()} />,
+    );
+
+    // Modal renders the unlisted variant: "Set price" title, no "Currently
+    // listed at …" anchor, no "Remove from sale" button, and the submit
+    // button reads "List for sale" (not "Update price").
+    expect(screen.getByRole("heading", { name: "Set price" })).toBeTruthy();
+    expect(screen.queryByText(/currently listed at/i)).toBeNull();
+    expect(
+      screen.queryByRole("button", { name: "Remove from sale" }),
+    ).toBeNull();
+    expect(screen.getByRole("button", { name: "List for sale" })).toBeTruthy();
+  });
+
   it("removes a card from sale and closes after success", async () => {
     const onClose = vi.fn();
     const onPriced = vi.fn();