132 lines
4.6 KiB
TypeScript
Executable File
132 lines
4.6 KiB
TypeScript
Executable File
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()
|
|
})
|
|
}) |