Frontend Audit & Fix Workflow

Use this workflow to validate and fix frontend projects, specifically Next.js + Ant Design.

1. Enforce "No Mock Data" Rule

• •Check: Verify http-client.ts uses real API endpoints.
• •Action: Remove any mockData objects in components. Ensure 404s are handled by implementing backend routes, not falling back to mocks.

2. API Consistency Check

• •Check: Ensure frontend interfaces (camelCase) match backend API responses (often snake_case) via the HTTP client interceptors.
• •Action:
  • •If http-client converts snake_case -> camelCase, ensure TypeScript interfaces use camelCase.
  • •If data loading fails, check if the component expects camelCase but receives snakeCase (or vice versa) and if the conversion logic is active.

3. Test Health (Jest + Antd)

• •Common Issues:
  • •TypeError: window.matchMedia is not a function: Mock in jest.setup.js.
  • •TypeError: Form.useForm is not a function: Mock antd in test files or globally.
  • •Element type is invalid: Check if antd mock returns all used components (Row, Col, Card, etc.).
• •Fixing Strategies:
  • •Use screen.getAllByTestId if multiple elements exist (e.g., desktop/mobile layouts).
  • •Wrap state updates in waitFor(() => expect(...)).
  • •Mock icons (lucide-react or @ant-design/icons) if they cause rendering issues.

4. Verification

• •Run npm run test:ci (or npm test) to verify logic.
• •Run npm run build to verify types and production build.