Exercises twd.mockRequest() — a core feature — in a realistic paged-list scenario.

Scope

• New page examples/twd-test-app/src/pages/Pagination.tsx:
  • Fetches a paged list (e.g. /api/items?page=N).
  • Next / Prev buttons.
  • A current-page label.
  • Next disabled on last page, Prev disabled on page 1.
• Register the route in routes.tsx and add a link from the App menu.
• New test file examples/twd-test-app/src/twd-tests/pagination.twd.test.ts:
  • Page 1 loads (mocked request) → assert items render.
  • Click Next (mocked page 2) → assert updated items.
  • Prev is disabled on page 1; Next is disabled on the last page.
• All queries via screenDom.getByRole("button", { name: /next/i }), screenDom.getAllByRole("listitem"), etc.

Reference

• examples/twd-test-app/src/pages/LoadShows.tsx + load-shows.twd.test.ts (already uses request mocking).

Acceptance criteria

• 4 test cases run green in the TWD sidebar.
• New page reachable from the App menu.
• PR includes a sidebar screenshot.
• Optional: short note in docs/api-mocking.md pointing at this example.

How to contribute

Read CONTRIBUTING.md first. Quick steps for this issue:

1. Fork, clone, create a feature branch: git checkout -b feat/pagination-example.
2. From the repo root, build the library and sync it to the example apps:

   npm install
   npm run build
   npm run copy:mock-sw

3. Install and run the test app:

   cd examples/twd-test-app
   npm install
   npm run dev

4. Open the app in the browser — the TWD sidebar appears on the right. Run your new tests from the sidebar and confirm they pass.
5. Run the library's unit tests from the repo root: npm run test:ci.
6. Open the PR with screenshots of the sidebar showing green tests.

Always prefer screenDom (Testing Library) for element queries. Avoid twd.get() in new code.