Testing Strategy

// the thick middle: a feature rendered with its real parts, the network mocked from the contract, interacted with like a user
import { render, screen } from '@testing-library/react'
import userEvent from '@testing-library/user-event'
import { http, HttpResponse } from 'msw'
import { server } from '@/test/msw'                       // handlers generated from the OpenAPI contract; this test overrides one
import { TransferMoney } from '@features/transfer-money'   // through the public API (part 0); real form, real store, real validation

test('a transfer over the limit shows the reason and never submits', async () => {
  const posted: unknown[] = []
  server.use(http.post('/api/transfers', async ({ request }) => { posted.push(await request.json()); return HttpResponse.json({ id: 't_1' }) }))
  render(<TransferMoney account={{ id: 'a_1', balance: 500_00 }} />, { wrapper: AppProviders })   // real providers: query cache, router, i18n

  const user = userEvent.setup()
  await user.type(screen.getByRole('textbox', { name: /amount/i }), '600')
  await user.click(screen.getByRole('button', { name: /send/i }))

  expect(await screen.findByText(/exceeds your balance by 100\.00/i)).toBeVisible()   // what a user sees; retries until it appears
  expect(posted).toHaveLength(0)                                                    // and what the server never received
})
// what this covers: the form wiring, the money formatting, the validation rule, the store update, the button's disabled state, the error's accessible text
// what it does not: the real API (the contract test does), the real browser rendering (a smoke E2E does), visual regressions (a screenshot test can)