All files / src/components/features/admin/monitoring/charts/EndpointDistributionChart EndpointDistributionChart.test.tsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { render, screen } from '@testing-library/react';
import { EndpointDistributionChart, type EndpointDistribution } from './index';

// Mock recharts
jest.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  PieChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="pie-chart">{children}</div>
  ),
  Pie: ({ children }: { children: React.ReactNode }) => <div data-testid="pie">{children}</div>,
  Cell: () => <div data-testid="cell" />,
  Tooltip: () => <div data-testid="tooltip" />,
  Legend: () => <div data-testid="legend" />,
}));

const mockData: EndpointDistribution[] = [
  { path: '/api/products', count: 4500, percentage: 50 },
  { path: '/api/users', count: 2800, percentage: 31 },
  { path: '/api/orders', count: 1700, percentage: 19 },
];

describe('EndpointDistributionChart', () => {
  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<EndpointDistributionChart data={mockData} />);
      expect(screen.getByTestId('endpoint-distribution-chart')).toBeInTheDocument();
    });

    it('displays the chart title', () => {
      render(<EndpointDistributionChart data={mockData} />);
      expect(screen.getByText('Endpoint Distribution')).toBeInTheDocument();
    });

    it('renders the pie chart', () => {
      render(<EndpointDistributionChart data={mockData} />);
      expect(screen.getByTestId('pie-chart')).toBeInTheDocument();
    });
  });

  describe('Loading State', () => {
    it('displays loading message when isLoading is true', () => {
      render(<EndpointDistributionChart data={[]} isLoading />);
      expect(screen.getByText('Loading chart...')).toBeInTheDocument();
    });
  });

  describe('Empty State', () => {
    it('displays empty message when no data', () => {
      render(<EndpointDistributionChart data={[]} />);
      expect(screen.getByText('No data available')).toBeInTheDocument();
    });
  });

  describe('Max Slices', () => {
    it('groups endpoints when exceeding maxSlices', () => {
      const manyEndpoints = Array.from({ length: 15 }, (_, i) => ({
        path: `/api/endpoint${i}`,
        count: 100 - i * 5,
        percentage: (100 - i * 5) / 10,
      }));
      render(<EndpointDistributionChart data={manyEndpoints} maxSlices={5} />);
      expect(screen.getByTestId('pie-chart')).toBeInTheDocument();
    });
  });
});