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

describe('TimeRangeSelector', () => {
  const mockOnChange = jest.fn();

  beforeEach(() => {
    mockOnChange.mockClear();
  });

  describe('Rendering', () => {
    it('renders without crashing', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);
      expect(screen.getByTestId('time-range-selector')).toBeInTheDocument();
    });

    it('renders all time range options', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);
      expect(screen.getByText('1 Hour')).toBeInTheDocument();
      expect(screen.getByText('6 Hours')).toBeInTheDocument();
      expect(screen.getByText('24 Hours')).toBeInTheDocument();
      expect(screen.getByText('7 Days')).toBeInTheDocument();
      expect(screen.getByText('30 Days')).toBeInTheDocument();
    });

    it('highlights the selected option', () => {
      render(<TimeRangeSelector value="7d" onChange={mockOnChange} />);
      const selectedButton = screen.getByText('7 Days');
      expect(selectedButton).toHaveAttribute('aria-pressed', 'true');
    });
  });

  describe('Interaction', () => {
    it('calls onChange when clicking a different option', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);
      fireEvent.click(screen.getByText('1 Hour'));
      expect(mockOnChange).toHaveBeenCalledWith('1h');
    });

    it('calls onChange with correct value for each option', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);

      const testCases: Array<{ label: string; expectedValue: TimeRange }> = [
        { label: '1 Hour', expectedValue: '1h' },
        { label: '6 Hours', expectedValue: '6h' },
        { label: '7 Days', expectedValue: '7d' },
        { label: '30 Days', expectedValue: '30d' },
      ];

      testCases.forEach(({ label, expectedValue }) => {
        mockOnChange.mockClear();
        fireEvent.click(screen.getByText(label));
        expect(mockOnChange).toHaveBeenCalledWith(expectedValue);
      });
    });

    it('does not call onChange when disabled', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} disabled />);
      fireEvent.click(screen.getByText('1 Hour'));
      expect(mockOnChange).not.toHaveBeenCalled();
    });
  });

  describe('Accessibility', () => {
    it('has proper role for button group', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);
      expect(screen.getByRole('group')).toHaveAttribute('aria-label', 'Select time range');
    });

    it('buttons have aria-pressed attribute', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} />);
      const buttons = screen.getAllByRole('button');
      buttons.forEach((button) => {
        expect(button).toHaveAttribute('aria-pressed');
      });
    });

    it('disabled buttons have disabled attribute', () => {
      render(<TimeRangeSelector value="24h" onChange={mockOnChange} disabled />);
      const buttons = screen.getAllByRole('button');
      buttons.forEach((button) => {
        expect(button).toBeDisabled();
      });
    });
  });

  describe('Custom className', () => {
    it('applies custom className', () => {
      render(
        <TimeRangeSelector value="24h" onChange={mockOnChange} className="custom-class" />
      );
      expect(screen.getByTestId('time-range-selector')).toHaveClass('custom-class');
    });
  });
});