1import React, { ComponentProps } from 'react';
2import { Observable } from 'rxjs';
3import { render, screen, fireEvent } from '@testing-library/react';
4import { TimeRange, LoadingState, InternalTimeZones } from '@grafana/data';
5import { ExploreId } from 'app/types';
6import { ExploreQueryInspector } from './ExploreQueryInspector';
7
8type ExploreQueryInspectorProps = ComponentProps<typeof ExploreQueryInspector>;
9
10jest.mock('../inspector/styles', () => ({
11  getPanelInspectorStyles: () => ({}),
12}));
13
14jest.mock('app/core/services/backend_srv', () => ({
15  backendSrv: {
16    getInspectorStream: () =>
17      new Observable((subscriber) => {
18        subscriber.next(response());
19        subscriber.next(response(true));
20      }) as any,
21  },
22}));
23
24jest.mock('app/core/services/context_srv', () => ({
25  contextSrv: {
26    user: { orgId: 1 },
27  },
28}));
29
30const setup = (propOverrides = {}) => {
31  const props: ExploreQueryInspectorProps = {
32    loading: false,
33    width: 100,
34    exploreId: ExploreId.left,
35    onClose: jest.fn(),
36    timeZone: InternalTimeZones.utc,
37    queryResponse: {
38      state: LoadingState.Done,
39      series: [],
40      timeRange: {} as TimeRange,
41    },
42    runQueries: jest.fn(),
43    ...propOverrides,
44  };
45
46  return render(<ExploreQueryInspector {...props} />);
47};
48
49describe('ExploreQueryInspector', () => {
50  it('should render closable drawer component', () => {
51    setup();
52    expect(screen.getByTitle(/close query inspector/i)).toBeInTheDocument();
53  });
54  it('should render 4 Tabs if queryResponse has no error', () => {
55    setup();
56    expect(screen.getAllByLabelText(/tab/i)).toHaveLength(4);
57  });
58  it('should render 5 Tabs if queryResponse has error', () => {
59    setup({ queryResponse: { error: 'Bad gateway' } });
60    expect(screen.getAllByLabelText(/tab/i)).toHaveLength(5);
61  });
62  it('should display query data when click on expanding', () => {
63    setup();
64    fireEvent.click(screen.getByLabelText(/tab query/i));
65    fireEvent.click(screen.getByText(/expand all/i));
66    expect(screen.getByText(/very unique test value/i)).toBeInTheDocument();
67  });
68});
69
70const response = (hideFromInspector = false) => ({
71  status: 1,
72  statusText: '',
73  ok: true,
74  headers: {} as any,
75  redirected: false,
76  type: 'basic',
77  url: '',
78  request: {} as any,
79  data: {
80    test: {
81      testKey: 'Very unique test value',
82    },
83  },
84  config: {
85    url: '',
86    hideFromInspector,
87  },
88});
89