veza/apps/web/src/components/layout/DashboardLayout.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { BrowserRouter } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { DashboardLayout } from './DashboardLayout';

// Mock useTranslation
vi.mock('@/hooks/useTranslation', () => ({
  useTranslation: () => ({
    t: (key: string) => key,
    i18n: { changeLanguage: vi.fn() },
    language: 'fr',
    changeLanguage: vi.fn(),
    isReady: true,
  }),
}));

// Mock useAuthStore
vi.mock('@/features/auth/store/authStore', () => ({
  useAuthStore: () => ({
    user: { id: '1', username: 'testuser', email: 'test@example.com' },
    isAuthenticated: true,
    logout: vi.fn(),
  }),
}));

// Mock useUIStore
vi.mock('@/stores/ui', () => ({
  useUIStore: () => ({
    sidebarOpen: true,
    setSidebarOpen: vi.fn(),
    theme: 'light',
    setTheme: vi.fn(),
  }),
}));

const createTestQueryClient = () =>
  new QueryClient({
    defaultOptions: {
      queries: { retry: false },
      mutations: { retry: false },
    },
  });

const TestWrapper = ({ children }: { children: React.ReactNode }) => {
  const queryClient = createTestQueryClient();
  return (
    <QueryClientProvider client={queryClient}>
      <BrowserRouter>{children}</BrowserRouter>
    </QueryClientProvider>
  );
};

describe('DashboardLayout Component', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders layout with sidebar and header', () => {
    render(
      <TestWrapper>
        <DashboardLayout>
          <div>Dashboard Content</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    // Vérifier que le layout est présent
    const layout = screen
      .getByText('Dashboard Content')
      .closest('.flex.h-screen');
    expect(layout).toBeInTheDocument();
  });

  it('renders children content in main section', () => {
    render(
      <TestWrapper>
        <DashboardLayout>
          <div>Dashboard Content</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    expect(screen.getByText('Dashboard Content')).toBeInTheDocument();
  });

  it('renders Sidebar component', () => {
    render(
      <TestWrapper>
        <DashboardLayout>
          <div>Dashboard Content</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    // Vérifier que la sidebar est présente (chercher un élément caractéristique)
    const sidebar = document.querySelector('aside');
    expect(sidebar).toBeInTheDocument();
  });

  it('renders Header component', () => {
    render(
      <TestWrapper>
        <DashboardLayout>
          <div>Dashboard Content</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    // Vérifier que le header est présent
    const header = document.querySelector('header');
    expect(header).toBeInTheDocument();
  });

  it('has correct layout structure with flex classes', () => {
    const { container } = render(
      <TestWrapper>
        <DashboardLayout>
          <div>Dashboard Content</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    const layout = container.querySelector('.flex.h-screen');
    expect(layout).toBeInTheDocument();

    const mainContent = container.querySelector('.flex-1.flex.flex-col');
    expect(mainContent).toBeInTheDocument();

    const main = container.querySelector('main.flex-1.overflow-auto');
    expect(main).toBeInTheDocument();
  });

  it('renders multiple children correctly', () => {
    render(
      <TestWrapper>
        <DashboardLayout>
          <div>Child 1</div>
          <div>Child 2</div>
        </DashboardLayout>
      </TestWrapper>,
    );

    expect(screen.getByText('Child 1')).toBeInTheDocument();
    expect(screen.getByText('Child 2')).toBeInTheDocument();
  });
});