Frontend Testing Strategy (Unit, Integration, E2E, MSW, a11y)

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { http, HttpResponse } from 'msw';
import { setupServer } from 'msw/node';
import { LoginForm } from './LoginForm';

// 1. Mock network request using MSW (network level, not mocking fetch directly)
const server = setupServer(
  http.post('/api/login', async ({ request }) => {
    const { email } = await request.json() as any;
    if (email === 'admin@test.com') {
      return HttpResponse.json({ user: { name: 'Admin User' } });
    }
    return new HttpResponse(null, { status: 401 });
  })
);

beforeAll(() => server.listen());
afterEach(() => server.resetHandlers());
afterAll(() => server.close());

test('submits login form and displays welcome message on success', async () => {
  const user = userEvent.setup();
  render(<LoginForm />);

  // 2. Query by accessible role (matches how screen readers and users see UI)
  const emailInput = screen.getByRole('textbox', { name: /email/i });
  const passwordInput = screen.getByLabelText(/password/i);
  const submitButton = screen.getByRole('button', { name: /sign in/i });

  // 3. Simulate user interactions
  await user.type(emailInput, 'admin@test.com');
  await user.type(passwordInput, 'Secret123!');
  await user.click(submitButton);

  // 4. Assert user-visible outcome
  expect(await screen.findByText(/welcome back, admin user/i)).toBeInTheDocument();
});