All files / src/components/features/admin/monitoring/charts/RequestVolumeChart RequestVolumeChart.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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { render, screen } from '@testing-library/react';
import { RequestVolumeChart, type VolumeDataPoint } from './index';

// Mock recharts
jest.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  AreaChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="area-chart">{children}</div>
  ),
  Area: () => <div data-testid="area" />,
  XAxis: () => <div data-testid="x-axis" />,
  YAxis: () => <div data-testid="y-axis" />,
  CartesianGrid: () => <div data-testid="cartesian-grid" />,
  Tooltip: () => <div data-testid="tooltip" />,
  Legend: () => <div data-testid="legend" />,
}));

const mockData: VolumeDataPoint[] = [
  {
    timestamp: new Date('2024-01-15T10:00:00Z'),
    total: 100,
    successful: 95,
    clientErrors: 3,
    serverErrors: 2,
  },
  {
    timestamp: new Date('2024-01-15T11:00:00Z'),
    total: 120,
    successful: 115,
    clientErrors: 3,
    serverErrors: 2,
  },
];

describe('RequestVolumeChart', () => {
  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<RequestVolumeChart data={mockData} timeRange="24h" />);
      expect(screen.getByTestId('request-volume-chart')).toBeInTheDocument();
    });

    it('displays the chart title', () => {
      render(<RequestVolumeChart data={mockData} timeRange="24h" />);
      expect(screen.getByText(/Request Volume/)).toBeInTheDocument();
    });

    it('displays time range in title', () => {
      render(<RequestVolumeChart data={mockData} timeRange="7d" />);
      expect(screen.getByText(/7d/)).toBeInTheDocument();
    });

    it('renders the area chart', () => {
      render(<RequestVolumeChart data={mockData} timeRange="24h" />);
      expect(screen.getByTestId('area-chart')).toBeInTheDocument();
    });
  });

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

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

  describe('String timestamps', () => {
    it('handles string timestamps correctly', () => {
      const dataWithStrings = mockData.map((d) => ({
        ...d,
        timestamp: (d.timestamp as Date).toISOString(),
      }));
      render(<RequestVolumeChart data={dataWithStrings} timeRange="24h" />);
      expect(screen.getByTestId('request-volume-chart')).toBeInTheDocument();
    });
  });
});