File size: 2,386 Bytes
fcef8f3
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
import { describe, it, expect, vi, beforeEach } from 'vitest';
import { render, screen, waitFor } from '@testing-library/react';
import Analytics from './Analytics';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { apiClient } from '../lib/apiClient';

// Mock recharts to avoid rendering complex SVG elements in JSDOM
vi.mock('recharts', () => ({
  ResponsiveContainer: ({ children }: any) => <div>{children}</div>,
  LineChart: () => <div>LineChart</div>,
  BarChart: () => <div>BarChart</div>,
  Line: () => <div />,
  Bar: () => <div />,
  XAxis: () => <div />,
  YAxis: () => <div />,
  CartesianGrid: () => <div />,
  Tooltip: () => <div />,
  Legend: () => <div />
}));

vi.mock('../lib/apiClient', () => ({
  apiClient: {
    get: vi.fn()
  }
}));

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: false,
    },
  },
});

describe('Analytics Page', () => {
  beforeEach(() => {
    vi.clearAllMocks();
  });

  it('renders loading states initially', () => {
    (apiClient.get as any).mockImplementation(() => new Promise(() => {}));
    
    render(
      <QueryClientProvider client={queryClient}>

        <Analytics />

      </QueryClientProvider>
    );
    
    expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
  });

  it('renders correctly with empty data', async () => {
    (apiClient.get as any).mockResolvedValue({ data: [] });

    render(
      <QueryClientProvider client={queryClient}>

        <Analytics />

      </QueryClientProvider>
    );

    await waitFor(() => {
      // Ensure the chart wrappers rendered
      expect(screen.getByText(/LineChart/i)).toBeTruthy();
      expect(screen.getByText(/BarChart/i)).toBeTruthy();
    });
  });

  it('handles network error state gracefully', async () => {
    (apiClient.get as any).mockRejectedValue(new Error('Network error'));

    render(
      <QueryClientProvider client={queryClient}>

        <Analytics />

      </QueryClientProvider>
    );

    // Should still render headers and fallback data
    await waitFor(() => {
      expect(screen.getByText(/Outbound Analytics & Intelligence/i)).toBeTruthy();
      expect(screen.getByText(/LineChart/i)).toBeTruthy(); // Falls back to static data currently
    });
  });
});