Initial commit

components/dashboard/__tests__/StatsCard.test.tsx

@@ -0,0 +1,132 @@
+import React from 'react'
+import { render, screen } from '../../../test-utils'
+import StatsCard from '../StatsCard'
+
+describe('Composant StatsCard', () => {
+  const defaultProps = {
+    title: 'Projets actifs',
+    value: 42,
+    icon: 'pi pi-building',
+    color: 'primary' as const,
+  }
+
+  it('devrait afficher les informations de base', () => {
+    render(<StatsCard {...defaultProps} />)
+    
+    expect(screen.getByText('Projets actifs')).toBeInTheDocument()
+    expect(screen.getByText('42')).toBeInTheDocument()
+    expect(document.querySelector('.pi-building')).toBeInTheDocument()
+  })
+
+  it('devrait formater les nombres avec des séparateurs', () => {
+    render(<StatsCard {...defaultProps} value={1234567} />)
+    
+    // Le format peut varier selon la locale
+    expect(screen.getByText(/1[,\s]?234[,\s]?567/)).toBeInTheDocument()
+  })
+
+  it('devrait afficher les valeurs string directement', () => {
+    render(<StatsCard {...defaultProps} value="50 000 €" />)
+    
+    expect(screen.getByText('50 000 €')).toBeInTheDocument()
+  })
+
+  it('devrait afficher le sous-titre si fourni', () => {
+    render(<StatsCard {...defaultProps} subtitle="En cours ce mois" />)
+    
+    expect(screen.getByText('En cours ce mois')).toBeInTheDocument()
+  })
+
+  it('devrait afficher la tendance positive', () => {
+    render(
+      <StatsCard 
+        {...defaultProps} 
+        trend={{ value: 15, isPositive: true }}
+      />
+    )
+    
+    expect(screen.getByText('+15%')).toBeInTheDocument()
+    expect(screen.getByText('Augmentation ce mois')).toBeInTheDocument()
+  })
+
+  it('devrait afficher la tendance négative', () => {
+    render(
+      <StatsCard 
+        {...defaultProps} 
+        trend={{ value: 5, isPositive: false }}
+      />
+    )
+    
+    expect(screen.getByText('-5%')).toBeInTheDocument()
+    expect(screen.getByText('Diminution ce mois')).toBeInTheDocument()
+  })
+
+  it('devrait appliquer la bonne couleur', () => {
+    const colors = [
+      { color: 'primary' as const, textClass: 'text-blue-500', bgClass: 'bg-blue-100' },
+      { color: 'success' as const, textClass: 'text-green-500', bgClass: 'bg-green-100' },
+      { color: 'info' as const, textClass: 'text-cyan-500', bgClass: 'bg-cyan-100' },
+      { color: 'warning' as const, textClass: 'text-yellow-500', bgClass: 'bg-yellow-100' },
+      { color: 'danger' as const, textClass: 'text-red-500', bgClass: 'bg-red-100' },
+    ]
+
+    colors.forEach(({ color, textClass, bgClass }) => {
+      const { container } = render(<StatsCard {...defaultProps} color={color} />)
+      
+      const icon = container.querySelector(`.${defaultProps.icon.replace(' ', '.')}`)
+      const iconContainer = icon?.parentElement
+      
+      expect(icon).toHaveClass(textClass)
+      expect(iconContainer).toHaveClass(bgClass)
+    })
+  })
+
+  it('devrait afficher l\'état de chargement', () => {
+    render(<StatsCard {...defaultProps} loading={true} />)
+    
+    // Vérifier la présence des skeletons
+    expect(screen.queryByText('Projets actifs')).not.toBeInTheDocument()
+    expect(screen.queryByText('42')).not.toBeInTheDocument()
+    
+    // PrimeReact Skeleton crée des éléments avec data-pc-name="skeleton"
+    const skeletons = document.querySelectorAll('[data-pc-name="skeleton"]')
+    expect(skeletons.length).toBeGreaterThan(0)
+  })
+
+  it('devrait avoir une hauteur complète', () => {
+    const { container } = render(<StatsCard {...defaultProps} />)
+    
+    const card = container.querySelector('[data-pc-name="card"]')
+    expect(card).toHaveClass('h-full')
+  })
+
+  it('devrait gérer tous les types d\'icônes PrimeIcons', () => {
+    const icons = ['pi pi-users', 'pi pi-euro', 'pi pi-exclamation-triangle']
+    
+    icons.forEach(icon => {
+      const { container } = render(<StatsCard {...defaultProps} icon={icon} />)
+      const iconElement = container.querySelector(`.${icon.split(' ').join('.')}`)
+      expect(iconElement).toBeInTheDocument()
+    })
+  })
+
+  it('devrait afficher correctement avec toutes les props', () => {
+    render(
+      <StatsCard
+        title="Chiffre d'affaires"
+        value="125 450 €"
+        icon="pi pi-euro"
+        color="success"
+        subtitle="Total ce mois"
+        trend={{ value: 8, isPositive: true }}
+      />
+    )
+    
+    expect(screen.getByText("Chiffre d'affaires")).toBeInTheDocument()
+    expect(screen.getByText("125 450 €")).toBeInTheDocument()
+    expect(screen.getByText("Total ce mois")).toBeInTheDocument()
+    expect(screen.getByText("+8%")).toBeInTheDocument()
+    expect(screen.getByText("Augmentation ce mois")).toBeInTheDocument()
+    expect(document.querySelector('.pi-euro')).toBeInTheDocument()
+  })
+})