testing

Testing Patterns

Testing Strategy

Component Testing:

• Test component rendering with various XM Cloud field configurations
• Mock XM Cloud services and API calls
• Test error scenarios (missing fields, API failures)
• Verify proper handling of editing vs. preview modes
• Test responsive behavior and accessibility

Integration Testing:

• Test complete page rendering with XM Cloud data
• Verify API route functionality
• Test middleware behavior for XM Cloud integration
• Validate environment variable handling
• Test deployment and build processes

Testing Tools

Recommended Stack:

• Jest or Vitest for unit testing
• React Testing Library for component testing
• MSW (Mock Service Worker) for API mocking
• Playwright or Cypress for E2E testing
• Storybook for component documentation and testing

XM Cloud Mocking:

• Create mock data that matches XM Cloud field structures
• Mock layout service responses
• Simulate both connected and disconnected modes
• Test with various content scenarios

// Mock XM Cloud field data
const mockHeroFields = {
  title: { value: 'Test Hero Title', editable: false },
  subtitle: { value: 'Test Hero Subtitle', editable: false },
  backgroundImage: {
    value: {
      src: '/test-image.jpg',
      alt: 'Test Image',
      width: 1200,
      height: 600,
    },
    editable: false,
  },
};

Component Testing Patterns

Field Validation Testing:

• Test components with missing fields
• Test components with empty field values
• Test components with various field types
• Verify proper fallback rendering

// Component test example
describe('Hero Component', () => {
  it('renders with all fields present', () => {
    render(<Hero fields={mockHeroFields} />);
    
    expect(screen.getByText('Test Hero Title')).toBeInTheDocument();
    expect(screen.getByText('Test Hero Subtitle')).toBeInTheDocument();
    expect(screen.getByRole('img')).toHaveAttribute('alt', 'Test Image');
  });
  
  it('handles missing fields gracefully', () => {
    render(<Hero fields={{}} />);
    
    expect(screen.getByText(/content not configured/i)).toBeInTheDocument();
  });
});