All files / src/components/features/admin/monitoring/EndpointPerformanceTable EndpointPerformanceTable.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
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import { EndpointPerformanceTable, type EndpointStats } from './index';

const mockEndpoints: EndpointStats[] = [
  { name: '/api/products', method: 'GET', avgDuration: 45, count: 15420 },
  { name: '/api/orders', method: 'POST', avgDuration: 156, count: 3200 },
  { name: '/api/checkout', method: 'POST', avgDuration: 890, count: 1240 },
];

const mockEndpointsWithPercentiles: EndpointStats[] = [
  { name: '/api/products', method: 'GET', avgDuration: 45, count: 15420, p95Duration: 120, p99Duration: 250 },
  { name: '/api/orders', method: 'POST', avgDuration: 156, count: 3200, p95Duration: 450, p99Duration: 890 },
];

describe('EndpointPerformanceTable', () => {
  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByTestId('endpoint-performance-table')).toBeInTheDocument();
    });

    it('displays the table title', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByText('Endpoints by Response Time')).toBeInTheDocument();
    });

    it('displays endpoint names', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByText('/api/products')).toBeInTheDocument();
      expect(screen.getByText('/api/orders')).toBeInTheDocument();
      expect(screen.getByText('/api/checkout')).toBeInTheDocument();
    });

    it('displays HTTP methods', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByText('GET')).toBeInTheDocument();
      expect(screen.getAllByText('POST').length).toBe(2);
    });

    it('displays request counts', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByText('15,420')).toBeInTheDocument();
      expect(screen.getByText('3,200')).toBeInTheDocument();
    });

    it('displays formatted durations', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} />);
      expect(screen.getByText('45ms')).toBeInTheDocument();
      expect(screen.getByText('156ms')).toBeInTheDocument();
      expect(screen.getByText('890ms')).toBeInTheDocument();
    });
  });

  describe('Percentiles', () => {
    it('shows percentile columns when showPercentiles is true', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpointsWithPercentiles} showPercentiles />);
      expect(screen.getByText('P95')).toBeInTheDocument();
      expect(screen.getByText('P99')).toBeInTheDocument();
    });

    it('hides percentile columns when showPercentiles is false', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpointsWithPercentiles} />);
      expect(screen.queryByText('P95')).not.toBeInTheDocument();
      expect(screen.queryByText('P99')).not.toBeInTheDocument();
    });

    it('displays percentile values when available', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpointsWithPercentiles} showPercentiles />);
      expect(screen.getByText('120ms')).toBeInTheDocument();
      expect(screen.getByText('250ms')).toBeInTheDocument();
    });
  });

  describe('Loading State', () => {
    it('displays loading skeleton when isLoading is true', () => {
      render(<EndpointPerformanceTable endpoints={[]} isLoading />);
      expect(screen.getByTestId('endpoint-performance-table')).toBeInTheDocument();
      // Check for skeleton elements
      const skeletons = document.querySelectorAll('.animate-pulse');
      expect(skeletons.length).toBeGreaterThan(0);
    });
  });

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

  describe('Max Rows', () => {
    it('limits displayed rows when maxRows is set', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} maxRows={2} />);
      expect(screen.getByText('/api/products')).toBeInTheDocument();
      expect(screen.getByText('/api/orders')).toBeInTheDocument();
      expect(screen.queryByText('/api/checkout')).not.toBeInTheDocument();
    });

    it('shows count message when rows are limited', () => {
      render(<EndpointPerformanceTable endpoints={mockEndpoints} maxRows={2} />);
      expect(screen.getByText(/Showing 2 of 3 endpoints/)).toBeInTheDocument();
    });
  });

  describe('Click Handler', () => {
    it('calls onEndpointClick when row is clicked', () => {
      const mockClick = jest.fn();
      render(<EndpointPerformanceTable endpoints={mockEndpoints} onEndpointClick={mockClick} />);

      const row = screen.getByText('/api/products').closest('tr');
      if (row) fireEvent.click(row);

      expect(mockClick).toHaveBeenCalledWith('/api/products');
    });
  });
});