[Feature] Build a comprehensive React component test suite with React Testing Library for all critical UI flows

[Sendi0011]

Getting Started

1. Fork the repository: https://github.com/JointSave-org/Joint_Save
2. Clone your fork:

   git clone https://github.com/<your-username>/Joint_Save.git
   cd Joint_Save

3. Create a new branch:

   git checkout -b test/component-test-suite

---

Overview

The frontend currently has unit tests for lib/ utilities (6 files) and hooks/use-keyboard-shortcuts.test.ts, plus 5 Playwright E2E specs, but zero React component tests. ARCHITECTURE.md explicitly marks "Component Tests" as future work. The useJointSaveContracts hook (1435 lines), PoolDataProvider, TransactionRecoveryProvider, and OptimisticTransactions are all untested at the component level. This means regressions in rendering logic, state management, and user interaction handling are only caught by E2E tests (which are slow and flaky by nature) or manual testing.

This issue establishes the React Testing Library infrastructure and writes component tests for the most critical, regression-prone UI flows.

Requirements

Test Infrastructure Setup

• Install @testing-library/react, @testing-library/user-event, @testing-library/jest-dom, msw (Mock Service Worker) for API mocking, and vitest (or configure Jest with the existing setup if Jest is preferred — check package.json for the current test runner)
• Create frontend/test-utils.tsx with a custom render function that wraps components in the necessary providers (Theme, Web3, Toast, QueryClient)
• Create frontend/__mocks__/ directory with mocks for:
  • @/hooks/useJointSaveContracts — mock all sub-hooks to return deterministic state
  • @/lib/supabase — mock Supabase client queries
  • @stellar/stellar-sdk — mock rpc and Server classes
  • @creit.tech/stellar-wallets-kit — mock wallet connection

Test Coverage Priorities (write tests for these components)

Critical Path Components:

1. components/group/group-details.tsx — renders pool data correctly, shows loading state, handles empty state, displays correct pool type badge, copy-to-clipboard works
2. components/group/group-actions.tsx — admin-only actions are visible/hidden correctly, pause/unpause toggle reflects contract state, deposit/withdraw buttons are disabled when appropriate
3. components/create-group/flexible-form.tsx (and rotational/target variants) — form validation works, submit handler is called with correct args, error states display
4. app/dashboard/group/[id]/page.tsx — pool not found state, loading skeleton, correct tab rendering

State Management Components:
5. components/web3-provider.tsx — wallet connection/disconnection flow, network detection
6. lib/data-layer/PoolDataProvider.tsx — background polling starts/stops, stale-while-revalidate works, error state propagation
7. hooks/useOptimisticTransactions.ts — optimistic state applied on submit, rolled back on error, cleared on success

Utility-Heavy Components:
8. components/dashboard/transactions.tsx — CSV export generates correct data, filter/sort works, empty state renders
9. components/dashboard/yield-dashboard.tsx — yield data displays correctly, harvest button enabled/disabled based on deployed amount

Test Quality Standards

• Each test file should have a descriptive name matching the component
• Use describe blocks to group related tests by feature/behavior
• Prefer getByRole, getByText, getByLabelText over getByTestId (test accessibility)
• Mock only external dependencies (wallet, RPC, Supabase), not internal state logic
• Include at least one integration-style test per critical path (e.g., "user clicks deposit → loading state → success toast")

CI Integration

• Add a new GitHub Actions workflow step (or extend the existing one) to run component tests on every PR
• Component tests should complete in under 60 seconds total (they run in jsdom, not a browser)

Acceptance Criteria

• npm run test:components (or equivalent script) runs all component tests and passes
• At least 20 component tests covering the 9 component areas listed above
• test-utils.tsx provides a reusable render wrapper with all required providers
• All mocks are in __mocks__/ and shared across test files
• CI workflow runs component tests on every PR
• No test uses @ts-ignore or @ts-expect-error to suppress type errors
• Test suite completes in under 60 seconds

[mxrtins04]

Hi maintainer, can i be assigned this issue pleasee?

[Hafgans-oss]

Hi, I'd like to work on this issue. I've gone through the description and acceptance criteria and I'm confident I can deliver it. I'll make sure every acceptance criterion is met and submit a clean, tested PR. Please assign it to me.

[Silver36-ship-it]

I would love to work on this professionally, please assign it to me

[onyekachi66]

I am confident that I can implement this issue

[mekeke111]

Hi maintainer I am a full stack developer I can handle this

[Clement-coder]

Hi,

I’m a full-stack software and blockchain engineer with experience building scalable web apps, backend systems, and blockchain integrations.

I’d love to work on this issue. I’ve reviewed the requirements and have a clear implementation plan to deliver a clean, well-tested solution that meets all acceptance criteria and aligns with the project’s standards.

I can start immediately and provide timely updates throughout the implementation.

[Yasir-TechGuy]

Please assign this issue to me

[rindicomfort]

Hello,

I’m a smart contract and full-stack developer interested in contributing to this issue.

I have experience contributing through OnlyDust and have participated in Drips Wave 1, Wave 2, Wave 5, as well as the GrantFox beta campaign.

My technical background includes Rust, Soroban, Cairo, Solidity, and TypeScript, with a focus on building secure, scalable, and maintainable blockchain applications.

Based on the scope of this issue, I’m confident I can deliver a complete and well-tested solution within 24 hours of assignment. I prioritize clean code, clear documentation, and efficient implementation.

I’d appreciate the opportunity to contribute and help move this issue forward.

Thank you.