veza/apps/web/src/components/charts/Chart.test.tsx

import { render, screen } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Chart } from './Chart';
import { LineChart } from './LineChart';
import { BarChart } from './BarChart';
import { PieChart } from './PieChart';

describe('Chart Components', () => {
  describe('Chart', () => {
    it('renders children', () => {
      render(
        <Chart>
          <div>Chart Content</div>
        </Chart>,
      );

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

    it('renders title when provided', () => {
      render(
        <Chart title="Chart Title">
          <div>Content</div>
        </Chart>,
      );

      expect(screen.getByText('Chart Title')).toBeInTheDocument();
    });

    it('applies custom height', () => {
      const { container } = render(
        <Chart height={400}>
          <div>Content</div>
        </Chart>,
      );

      // Le composant Chart a une structure: div > (title?) > div avec le style
      const chartContainer = container.querySelector('div[style]');
      expect(chartContainer).toBeInTheDocument();
      // Vérifier que le style est appliqué via l'attribut style
      const style = chartContainer?.getAttribute('style');
      expect(style).toContain('height: 400px');
    });

    it('applies custom className', () => {
      const { container } = render(
        <Chart className="custom-class">
          <div>Content</div>
        </Chart>,
      );

      const chartContainer = container.firstChild;
      expect(chartContainer).toHaveClass('custom-class');
    });
  });

  describe('LineChart', () => {
    const mockData = [
      { label: 'Jan', value: 10 },
      { label: 'Feb', value: 20 },
      { label: 'Mar', value: 15 },
    ];

    it('renders line chart with data', () => {
      render(<LineChart data={mockData} />);

      const svg = document.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('renders empty message when data is empty', () => {
      render(<LineChart data={[]} />);

      expect(screen.getByText('Aucune donnée disponible')).toBeInTheDocument();
    });

    it('applies custom color', () => {
      const { container } = render(
        <LineChart data={mockData} color="#ff0000" />,
      );

      const path = container.querySelector('path');
      expect(path).toHaveAttribute('stroke', '#ff0000');
    });

    it('shows dots when showDots is true', () => {
      const { container } = render(<LineChart data={mockData} showDots />);

      const circles = container.querySelectorAll('circle');
      expect(circles.length).toBeGreaterThan(0);
    });

    it('hides dots when showDots is false', () => {
      const { container } = render(
        <LineChart data={mockData} showDots={false} />,
      );

      const circles = container.querySelectorAll('circle');
      expect(circles.length).toBe(0);
    });

    it('shows grid when showGrid is true', () => {
      const { container } = render(<LineChart data={mockData} showGrid />);

      const gridLines = container.querySelectorAll('line');
      expect(gridLines.length).toBeGreaterThan(0);
    });

    it('renders axis labels', () => {
      render(
        <LineChart data={mockData} xAxisLabel="Month" yAxisLabel="Value" />,
      );

      expect(screen.getByText('Month')).toBeInTheDocument();
      expect(screen.getByText('Value')).toBeInTheDocument();
    });
  });

  describe('BarChart', () => {
    const mockData = [
      { label: 'A', value: 10 },
      { label: 'B', value: 20 },
      { label: 'C', value: 15 },
    ];

    it('renders bar chart with data', () => {
      render(<BarChart data={mockData} />);

      const svg = document.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('renders empty message when data is empty', () => {
      render(<BarChart data={[]} />);

      expect(screen.getByText('Aucune donnée disponible')).toBeInTheDocument();
    });

    it('applies custom color', () => {
      const { container } = render(
        <BarChart data={mockData} color="#00ff00" />,
      );

      const rects = container.querySelectorAll('rect');
      expect(rects.length).toBeGreaterThan(0);
      expect(rects[0]).toHaveAttribute('fill', '#00ff00');
    });

    it('shows values when showValues is true', () => {
      const { container } = render(<BarChart data={mockData} showValues />);

      const texts = container.querySelectorAll('text');
      expect(texts.length).toBeGreaterThan(0);
    });

    it('renders axis labels', () => {
      render(
        <BarChart data={mockData} xAxisLabel="Category" yAxisLabel="Count" />,
      );

      expect(screen.getByText('Category')).toBeInTheDocument();
      expect(screen.getByText('Count')).toBeInTheDocument();
    });
  });

  describe('PieChart', () => {
    const mockData = [
      { label: 'A', value: 30 },
      { label: 'B', value: 50 },
      { label: 'C', value: 20 },
    ];

    it('renders pie chart with data', () => {
      render(<PieChart data={mockData} />);

      const svg = document.querySelector('svg');
      expect(svg).toBeInTheDocument();
    });

    it('renders empty message when data is empty', () => {
      render(<PieChart data={[]} />);

      expect(screen.getByText('Aucune donnée disponible')).toBeInTheDocument();
    });

    it('shows legend when showLegend is true', () => {
      render(<PieChart data={mockData} showLegend />);

      expect(screen.getByText('A')).toBeInTheDocument();
      expect(screen.getByText('B')).toBeInTheDocument();
      expect(screen.getByText('C')).toBeInTheDocument();
    });

    it('hides legend when showLegend is false', () => {
      render(<PieChart data={mockData} showLegend={false} />);

      expect(screen.queryByText('A')).not.toBeInTheDocument();
    });

    it('shows labels when showLabels is true', () => {
      const { container } = render(<PieChart data={mockData} showLabels />);

      const texts = container.querySelectorAll('text');
      expect(texts.length).toBeGreaterThan(0);
    });

    it('uses custom colors from data', () => {
      const dataWithColors = [
        { label: 'A', value: 30, color: '#ff0000' },
        { label: 'B', value: 50, color: '#00ff00' },
      ];

      const { container } = render(<PieChart data={dataWithColors} />);

      const paths = container.querySelectorAll('path');
      expect(paths[0]).toHaveAttribute('fill', '#ff0000');
      expect(paths[1]).toHaveAttribute('fill', '#00ff00');
    });

    it('uses default colors when not specified', () => {
      const { container } = render(<PieChart data={mockData} />);

      const paths = container.querySelectorAll('path');
      expect(paths.length).toBeGreaterThan(0);
      expect(paths[0]).toHaveAttribute('fill');
    });
  });
});