WellNuo/web/__tests__/responsive-design.test.tsx

import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom';

// Mock next/navigation
jest.mock('next/navigation', () => ({
  useRouter: () => ({
    push: jest.fn(),
    replace: jest.fn(),
  }),
  usePathname: () => '/dashboard',
}));

// Mock auth store
jest.mock('@/stores/authStore', () => ({
  useAuthStore: () => ({
    isAuthenticated: true,
    user: { firstName: 'Test', lastName: 'User', email: 'test@example.com' },
    logout: jest.fn(),
  }),
}));

// Mock API
jest.mock('@/lib/api', () => ({
  __esModule: true,
  default: {
    getAllBeneficiaries: jest.fn().mockResolvedValue({ ok: true, data: [] }),
  },
}));

import { Layout } from '@/components/Layout/Layout';
import { Header } from '@/components/Layout/Header';
import { Sidebar } from '@/components/Layout/Sidebar';

describe('Responsive Design - Layout Components', () => {
  describe('Layout Component', () => {
    it('has responsive max-width classes for 4K screens', () => {
      const { container } = render(
        <Layout>
          <div data-testid="content">Test Content</div>
        </Layout>
      );

      // Find the main content container
      const mainContent = container.querySelector('main > div');
      expect(mainContent).toBeInTheDocument();

      // Check for responsive max-width classes
      const className = mainContent?.className || '';
      expect(className).toContain('max-w-7xl');
      expect(className).toContain('3xl:max-w-8xl');
      expect(className).toContain('4xl:max-w-9xl');
    });

    it('has responsive padding for large screens', () => {
      const { container } = render(
        <Layout>
          <div>Test Content</div>
        </Layout>
      );

      const mainContent = container.querySelector('main > div');
      const className = mainContent?.className || '';

      // Check for responsive padding classes
      expect(className).toContain('px-4');
      expect(className).toContain('lg:px-8');
      expect(className).toContain('xl:px-10');
      expect(className).toContain('3xl:px-12');
      expect(className).toContain('4xl:px-16');
    });

    it('has responsive sidebar offset', () => {
      const { container } = render(
        <Layout showSidebar={true}>
          <div>Test Content</div>
        </Layout>
      );

      // Find main content area (direct child of root container, contains pl- classes)
      // The structure is: div.flex.min-h-screen > aside.sidebar + div.flex.flex-1.flex-col
      const rootContainer = container.querySelector('.flex.min-h-screen');
      const contentArea = rootContainer?.querySelector(':scope > div.flex-1');
      const className = contentArea?.className || '';

      expect(className).toContain('lg:pl-64');
      expect(className).toContain('3xl:pl-72');
      expect(className).toContain('4xl:pl-80');
    });
  });

  describe('Header Component', () => {
    it('has responsive container width for large screens', () => {
      const { container } = render(<Header />);

      // Find header container
      const headerContainer = container.querySelector('header > div');
      const className = headerContainer?.className || '';

      expect(className).toContain('max-w-7xl');
      expect(className).toContain('3xl:max-w-8xl');
      expect(className).toContain('4xl:max-w-9xl');
    });

    it('has responsive padding', () => {
      const { container } = render(<Header />);

      const headerContainer = container.querySelector('header > div');
      const className = headerContainer?.className || '';

      expect(className).toContain('px-4');
      expect(className).toContain('lg:px-8');
      expect(className).toContain('xl:px-10');
      expect(className).toContain('3xl:px-12');
      expect(className).toContain('4xl:px-16');
    });

    it('hides mobile menu on md screens and above', () => {
      render(<Header />);

      // Mobile menu button should have md:hidden class
      const mobileMenuButton = screen.getByLabelText('Toggle menu');
      expect(mobileMenuButton).toHaveClass('md:hidden');
    });

    it('shows desktop navigation on md screens and above', () => {
      const { container } = render(<Header />);

      // Desktop nav should have hidden md:flex classes
      const desktopNav = container.querySelector('nav.hidden.md\\:flex');
      expect(desktopNav).toBeInTheDocument();
    });
  });

  describe('Sidebar Component', () => {
    it('has responsive width for large screens', () => {
      const { container } = render(<Sidebar />);

      const sidebar = container.querySelector('aside');
      const className = sidebar?.className || '';

      // Check responsive width classes
      expect(className).toContain('lg:w-64');
      expect(className).toContain('3xl:w-72');
      expect(className).toContain('4xl:w-80');
    });

    it('is hidden on mobile and tablet, shown on lg+', () => {
      const { container } = render(<Sidebar />);

      const sidebar = container.querySelector('aside');
      const className = sidebar?.className || '';

      expect(className).toContain('hidden');
      expect(className).toContain('lg:flex');
    });
  });
});

describe('Responsive Design - Breakpoint Coverage', () => {
  it('defines required breakpoints in Tailwind config', async () => {
    // This is a conceptual test - in practice, check the compiled CSS
    // or use visual regression testing

    const breakpoints = {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
      '2xl': '1536px',
      '3xl': '1920px', // Full HD
      '4xl': '2560px', // QHD / 4K
    };

    // Verify we're targeting all key breakpoints
    expect(Object.keys(breakpoints)).toContain('md');  // Tablet
    expect(Object.keys(breakpoints)).toContain('lg');  // Desktop
    expect(Object.keys(breakpoints)).toContain('3xl'); // Full HD
    expect(Object.keys(breakpoints)).toContain('4xl'); // 4K
  });

  it('covers tablet range (768px-1023px)', () => {
    // Tablet breakpoint is md (768px) to lg (1024px)
    // Components should have specific behavior in this range

    const mdBreakpoint = 768;
    const lgBreakpoint = 1024;

    expect(mdBreakpoint).toBeGreaterThanOrEqual(768);
    expect(lgBreakpoint - mdBreakpoint).toBeGreaterThan(0);
  });

  it('covers large screen range (1920px-4K)', () => {
    // Large screens from Full HD to 4K
    const fullHD = 1920;
    const fourK = 2560;

    expect(fullHD).toBeGreaterThanOrEqual(1920);
    expect(fourK).toBeGreaterThanOrEqual(2560);
  });
});