Test ContractsPage empty, loaded, and create-action behavior

[mikewheeleer]

Description

src/app/contracts/page.tsx currently renders only the EmptyState and logs on create. Add tests that assert the empty state renders with the correct copy and action label, that the create handler is invoked on click, and (after data wiring) that contracts render as cards. This guards the contracts entry point against regressions.

Requirements and context

• Scoped to TalentTrust Talenttrust-Frontend (Next.js App Router + TS + Tailwind). Align with milestone/contract/reputation flows and the backend API.
• Assert EmptyState title, description, and Create Contract action are present.
• Mock the data layer to cover loaded and error branches once wired.
• Must be accessible (WCAG 2.1 AA), responsive, tested, and documented. Concrete acceptance criteria: 95%+ coverage of page-level logic.

Suggested execution

• Fork the repo and create a branch:
  • git checkout -b test/contracts-page-behavior
• Implement changes:
  • src/app/contracts/page.tsx (real or new)
  • Tests: src/app/contracts/__tests__/page.test.tsx (Jest + React Testing Library)
  • Docs: docs/components/ContractsPage.md
  • Ensure keyboard nav, focus states, ARIA, color-contrast, and responsive breakpoints

Test and commit

• Run: npm test, npm run lint, npm run build
• Cover edge cases (loading, empty, error, no-wallet, slow network, small screens)
• Include screenshots/notes and a11y check results in the PR

Example commit message

test(ui): cover contracts page states and create action

Guidelines

• Accessible (WCAG 2.1 AA), responsive, keyboard-navigable
• Minimum 95% coverage on new/changed component logic
• Clear documentation
• Timeframe: 96 hours from assignment