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