All files / src/components/features/admin/monitoring/charts/ResponseTimeChart ResponseTimeChart.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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { render, screen } from '@testing-library/react';
import { ResponseTimeChart, type TimeSeriesDataPoint } from './index';

// Mock recharts to avoid rendering issues in tests
jest.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="responsive-container">{children}</div>
  ),
  LineChart: ({ children }: { children: React.ReactNode }) => (
    <div data-testid="line-chart">{children}</div>
  ),
  Line: () => <div data-testid="line" />,
  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: TimeSeriesDataPoint[] = [
  {
    timestamp: new Date('2024-01-15T10:00:00Z'),
    avgDuration: 50,
    p95Duration: 100,
    p99Duration: 150,
    maxDuration: 200,
  },
  {
    timestamp: new Date('2024-01-15T11:00:00Z'),
    avgDuration: 55,
    p95Duration: 110,
    p99Duration: 160,
    maxDuration: 220,
  },
  {
    timestamp: new Date('2024-01-15T12:00:00Z'),
    avgDuration: 45,
    p95Duration: 90,
    p99Duration: 140,
    maxDuration: 180,
  },
];

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

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

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

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

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

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

    it('does not render chart when loading', () => {
      render(<ResponseTimeChart data={[]} timeRange="24h" isLoading />);
      expect(screen.queryByTestId('line-chart')).not.toBeInTheDocument();
    });
  });

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

    it('does not render chart when empty', () => {
      render(<ResponseTimeChart data={[]} timeRange="24h" />);
      expect(screen.queryByTestId('line-chart')).not.toBeInTheDocument();
    });
  });

  describe('Time Range Variations', () => {
    const timeRanges = ['1h', '6h', '24h', '7d', '30d'] as const;

    timeRanges.forEach((range) => {
      it(`renders correctly with ${range} time range`, () => {
        render(<ResponseTimeChart data={mockData} timeRange={range} />);
        expect(screen.getByTestId('response-time-chart')).toBeInTheDocument();
        expect(screen.getByText(new RegExp(range))).toBeInTheDocument();
      });
    });
  });

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