Frontend Audit Fix

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.

Converted and distributed by TomeVault — claim your Tome and manage your conversions.