Skip to main content

Testing Quick Reference

Frontend Testing - tRPC Placeholders​

✅ DO: Use Simple Placeholders​

// Simple, fast, maintainable
vi.mock("@/lib/trpc", () => ({
  useTRPC: () => ({
    system: {
      organizations: {
        list: {
          queryOptions: () => ({
            queryKey: ["system.organizations.list"],
            queryFn: () =>
              Promise.resolve({
                organizations: [],
                pagination: { page: 1, limit: 1000, total: 0, totalPages: 0 },
              }),
          }),
        },
      },
    },
  }),
}));

❌ DON'T: Mock Complex tRPC Calls​

// Complex, brittle, hard to maintain
const mockTrpc = {
  system: {
    organizations: {
      list: {
        queryOptions: vi.fn(() => ({
          queryKey: ["system.organizations.list"],
          queryFn: () =>
            Promise.resolve({
              organizations: [
                {
                  id: "org-1",
                  name: "Test Organization",
                  // ... 20+ lines of mock data
                },
              ],
              pagination: { page: 1, limit: 1000, total: 1, totalPages: 1 },
            }),
        })),
      },
    },
  },
};

Test Focus Areas​

Frontend Tests​

  • ✅ Component rendering
  • ✅ User interactions
  • ✅ State management
  • ✅ Context behavior
  • ✅ UI logic

Backend Tests​

  • ✅ tRPC procedure logic
  • ✅ Data validation
  • ✅ Business rules
  • ✅ Database operations

Quick Commands​

# Run frontend tests
pnpm test:frontend

# Run backend tests
pnpm test:backend

# Run all tests
pnpm test

# Type checking
pnpm typecheck

# Linting
pnpm lint

Test Files​

  • src/__tests__/test-utils.tsx - Centralized test utilities
  • src/__tests__/AuthContext.test.tsx - Auth context tests
  • src/__tests__/OrganizationContext.placeholder.test.tsx - Organization context tests
  • src/__tests__/RoleGuard.test.tsx - Role-based access control tests

Full Documentation​

See docs/docs/guidelines/frontend-testing.md for comprehensive testing guidelines.