All files / src/components/features/admin/monitoring/SlowestRequestsTable SlowestRequestsTable.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
121
122
123
124
125
126
127
128
129
130
131
132
133
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { render, screen } from '@testing-library/react';
import { SlowestRequestsTable, type SlowRequest } from './index';

const mockRequests: SlowRequest[] = [
  {
    id: '1',
    type: 'api',
    name: '/api/slow-endpoint',
    duration: 2500,
    method: 'GET',
    statusCode: 200,
    createdAt: new Date('2024-01-15T10:30:00Z'),
  },
  {
    id: '2',
    type: 'database',
    name: 'findManyProducts',
    duration: 1500,
    createdAt: new Date('2024-01-15T10:25:00Z'),
  },
  {
    id: '3',
    type: 'render',
    name: '/products/[id]',
    duration: 800,
    createdAt: new Date('2024-01-15T10:20:00Z'),
  },
];

describe('SlowestRequestsTable', () => {
  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByTestId('slowest-requests-table')).toBeInTheDocument();
    });

    it('displays the table title', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('Slowest Requests')).toBeInTheDocument();
    });

    it('displays request names', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('/api/slow-endpoint')).toBeInTheDocument();
      expect(screen.getByText('findManyProducts')).toBeInTheDocument();
      expect(screen.getByText('/products/[id]')).toBeInTheDocument();
    });

    it('displays type badges', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('api')).toBeInTheDocument();
      expect(screen.getByText('database')).toBeInTheDocument();
      expect(screen.getByText('render')).toBeInTheDocument();
    });

    it('displays formatted durations', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('2.50s')).toBeInTheDocument();
      expect(screen.getByText('1.50s')).toBeInTheDocument();
      expect(screen.getByText('800ms')).toBeInTheDocument();
    });

    it('displays HTTP method when available', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('GET')).toBeInTheDocument();
    });

    it('displays status code when available', () => {
      render(<SlowestRequestsTable requests={mockRequests} />);
      expect(screen.getByText('200')).toBeInTheDocument();
    });

    it('displays threshold info', () => {
      render(<SlowestRequestsTable requests={mockRequests} criticalThreshold={2000} />);
      expect(screen.getByText(/Threshold:/)).toBeInTheDocument();
      expect(screen.getByText(/2\.00s/)).toBeInTheDocument();
    });
  });

  describe('Loading State', () => {
    it('displays loading skeleton when isLoading is true', () => {
      render(<SlowestRequestsTable requests={[]} isLoading />);
      const skeletons = document.querySelectorAll('.animate-pulse');
      expect(skeletons.length).toBeGreaterThan(0);
    });
  });

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

  describe('Max Rows', () => {
    it('limits displayed rows when maxRows is set', () => {
      render(<SlowestRequestsTable requests={mockRequests} maxRows={2} />);
      expect(screen.getByText('/api/slow-endpoint')).toBeInTheDocument();
      expect(screen.getByText('findManyProducts')).toBeInTheDocument();
      expect(screen.queryByText('/products/[id]')).not.toBeInTheDocument();
    });

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

  describe('Metadata', () => {
    const requestsWithMetadata: SlowRequest[] = [
      {
        id: '1',
        type: 'database',
        name: 'complexQuery',
        duration: 5000,
        createdAt: new Date(),
        metadata: { tables: ['orders', 'products'] },
      },
    ];

    it('hides metadata by default', () => {
      render(<SlowestRequestsTable requests={requestsWithMetadata} />);
      expect(screen.queryByText(/tables/)).not.toBeInTheDocument();
    });

    it('shows metadata when showMetadata is true', () => {
      render(<SlowestRequestsTable requests={requestsWithMetadata} showMetadata />);
      expect(screen.getByText(/tables/)).toBeInTheDocument();
    });
  });
});