Initial commit

components/dashboard/__tests__/ChantiersList.test.tsx

@@ -0,0 +1,212 @@
+import React from 'react'
+import { render, screen } from '../../../test-utils'
+import userEvent from '@testing-library/user-event'
+import ChantiersList from '../ChantiersList'
+import { ChantierRecent, StatutChantier } from '../../../types/btp'
+
+const mockChantiers: ChantierRecent[] = [
+  {
+    id: '1',
+    nom: 'Rénovation Bureau',
+    client: 'Entreprise ABC',
+    statut: StatutChantier.EN_COURS,
+    dateDebut: '2024-01-15',
+    montantPrevu: 45000,
+  },
+  {
+    id: '2',
+    nom: 'Construction Garage',
+    client: 'Client XYZ',
+    statut: StatutChantier.PLANIFIE,
+    dateDebut: '2024-02-01',
+    montantPrevu: 25000,
+  },
+  {
+    id: '3',
+    nom: 'Réparation Toiture',
+    client: 'Mairie',
+    statut: StatutChantier.TERMINE,
+    dateDebut: '2024-01-01',
+    montantPrevu: 15000,
+  },
+]
+
+describe('Composant ChantiersList', () => {
+  const mockOnViewAll = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it('devrait afficher la liste des chantiers', () => {
+    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
+    
+    expect(screen.getByText('Chantiers récents')).toBeInTheDocument()
+    expect(screen.getByText('Rénovation Bureau')).toBeInTheDocument()
+    expect(screen.getByText('Construction Garage')).toBeInTheDocument()
+    expect(screen.getByText('Réparation Toiture')).toBeInTheDocument()
+  })
+
+  it('devrait afficher les informations détaillées de chaque chantier', () => {
+    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
+    
+    // Vérifier les noms des clients
+    expect(screen.getByText('Entreprise ABC')).toBeInTheDocument()
+    expect(screen.getByText('Client XYZ')).toBeInTheDocument()
+    expect(screen.getByText('Mairie')).toBeInTheDocument()
+    
+    // Vérifier les montants formatés
+    expect(screen.getByText('45 000 €')).toBeInTheDocument()
+    expect(screen.getByText('25 000 €')).toBeInTheDocument()
+    expect(screen.getByText('15 000 €')).toBeInTheDocument()
+  })
+
+  it('devrait afficher les statuts corrects avec les bonnes couleurs', () => {
+    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
+    
+    expect(screen.getByText('En cours')).toBeInTheDocument()
+    expect(screen.getByText('Planifié')).toBeInTheDocument()
+    expect(screen.getByText('Terminé')).toBeInTheDocument()
+  })
+
+  it('devrait formater les dates correctement', () => {
+    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
+    
+    // Vérifier que les dates sont au format français
+    expect(screen.getByText('15/01/2024')).toBeInTheDocument()
+    expect(screen.getByText('01/02/2024')).toBeInTheDocument()
+    expect(screen.getByText('01/01/2024')).toBeInTheDocument()
+  })
+
+  it('devrait afficher le bouton "Voir tout" et le rendre cliquable', async () => {
+    const user = userEvent.setup()
+    render(<ChantiersList chantiers={mockChantiers} onViewAll={mockOnViewAll} />)
+    
+    const viewAllButton = screen.getByText('Voir tout')
+    expect(viewAllButton).toBeInTheDocument()
+    
+    await user.click(viewAllButton)
+    expect(mockOnViewAll).toHaveBeenCalledTimes(1)
+  })
+
+  it('ne devrait pas afficher le bouton "Voir tout" si onViewAll n\'est pas fourni', () => {
+    render(<ChantiersList chantiers={mockChantiers} />)
+    
+    expect(screen.queryByText('Voir tout')).not.toBeInTheDocument()
+  })
+
+  it('devrait afficher un message quand il n\'y a pas de chantiers', () => {
+    render(<ChantiersList chantiers={[]} onViewAll={mockOnViewAll} />)
+    
+    expect(screen.getByText('Aucun chantier récent')).toBeInTheDocument()
+  })
+
+  it('devrait afficher l\'état de chargement', () => {
+    render(<ChantiersList chantiers={[]} loading={true} />)
+    
+    // Vérifier que le titre n'est pas affiché en mode chargement
+    expect(screen.queryByText('Chantiers récents')).not.toBeInTheDocument()
+    
+    // Vérifier la présence des skeletons
+    const skeletons = document.querySelectorAll('[data-pc-name="skeleton"]')
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it('devrait gérer tous les statuts de chantier', () => {
+    const chantiersAvecTousStatuts: ChantierRecent[] = [
+      {
+        id: '1',
+        nom: 'Chantier 1',
+        client: 'Client 1',
+        statut: StatutChantier.EN_COURS,
+        dateDebut: '2024-01-01',
+        montantPrevu: 1000,
+      },
+      {
+        id: '2',
+        nom: 'Chantier 2',
+        client: 'Client 2',
+        statut: StatutChantier.PLANIFIE,
+        dateDebut: '2024-01-01',
+        montantPrevu: 2000,
+      },
+      {
+        id: '3',
+        nom: 'Chantier 3',
+        client: 'Client 3',
+        statut: StatutChantier.TERMINE,
+        dateDebut: '2024-01-01',
+        montantPrevu: 3000,
+      },
+      {
+        id: '4',
+        nom: 'Chantier 4',
+        client: 'Client 4',
+        statut: StatutChantier.ANNULE,
+        dateDebut: '2024-01-01',
+        montantPrevu: 4000,
+      },
+      {
+        id: '5',
+        nom: 'Chantier 5',
+        client: 'Client 5',
+        statut: StatutChantier.SUSPENDU,
+        dateDebut: '2024-01-01',
+        montantPrevu: 5000,
+      },
+    ]
+
+    render(<ChantiersList chantiers={chantiersAvecTousStatuts} />)
+    
+    expect(screen.getByText('En cours')).toBeInTheDocument()
+    expect(screen.getByText('Planifié')).toBeInTheDocument()
+    expect(screen.getByText('Terminé')).toBeInTheDocument()
+    expect(screen.getByText('Annulé')).toBeInTheDocument()
+    expect(screen.getByText('Suspendu')).toBeInTheDocument()
+  })
+
+  it('devrait gérer les montants manquants', () => {
+    const chantiersAvecMontantManquant: ChantierRecent[] = [
+      {
+        id: '1',
+        nom: 'Chantier sans montant',
+        client: 'Client Test',
+        statut: StatutChantier.EN_COURS,
+        dateDebut: '2024-01-01',
+        montantPrevu: undefined,
+      },
+    ]
+
+    render(<ChantiersList chantiers={chantiersAvecMontantManquant} />)
+    
+    expect(screen.getByText('-')).toBeInTheDocument()
+  })
+
+  it('devrait avoir une structure de table responsive', () => {
+    const { container } = render(<ChantiersList chantiers={mockChantiers} />)
+    
+    const dataTable = container.querySelector('[data-pc-name="datatable"]')
+    expect(dataTable).toBeInTheDocument()
+    
+    // Vérifier que les en-têtes sont cachés
+    expect(dataTable).toHaveAttribute('data-pc-section', 'wrapper')
+  })
+
+  it('devrait formater correctement les gros montants', () => {
+    const chantiersAvecGrosMontants: ChantierRecent[] = [
+      {
+        id: '1',
+        nom: 'Gros Chantier',
+        client: 'Client VIP',
+        statut: StatutChantier.EN_COURS,
+        dateDebut: '2024-01-01',
+        montantPrevu: 1234567,
+      },
+    ]
+
+    render(<ChantiersList chantiers={chantiersAvecGrosMontants} />)
+    
+    // Vérifier que le montant est formaté avec des séparateurs
+    expect(screen.getByText(/1[,\s]?234[,\s]?567 €/)).toBeInTheDocument()
+  })
+})