1import React from 'react'; 2import { fireEvent, render, screen } from '@testing-library/react'; 3import { configureStore } from 'app/store/configureStore'; 4import { Provider } from 'react-redux'; 5import { QueryRows } from './QueryRows'; 6import { ExploreId, ExploreState } from 'app/types'; 7import { makeExplorePaneState } from './state/utils'; 8import { setDataSourceSrv } from '@grafana/runtime'; 9import { UserState } from '../profile/state/reducers'; 10import { DataQuery } from '../../../../packages/grafana-data/src'; 11 12function setup(queries: DataQuery[]) { 13 const defaultDs = { 14 name: 'newDs', 15 uid: 'newDs-uid', 16 meta: { id: 'newDs' }, 17 }; 18 19 const datasources: Record<string, any> = { 20 'newDs-uid': defaultDs, 21 'someDs-uid': { 22 name: 'someDs', 23 uid: 'someDs-uid', 24 meta: { id: 'someDs' }, 25 components: { 26 QueryEditor: () => 'someDs query editor', 27 }, 28 }, 29 }; 30 31 setDataSourceSrv({ 32 getList() { 33 return Object.values(datasources).map((d) => ({ name: d.name })); 34 }, 35 getInstanceSettings(uid: string) { 36 return datasources[uid] || defaultDs; 37 }, 38 get(uid?: string) { 39 return Promise.resolve(uid ? datasources[uid] || defaultDs : defaultDs); 40 }, 41 } as any); 42 43 const leftState = makeExplorePaneState(); 44 const initialState: ExploreState = { 45 left: { 46 ...leftState, 47 datasourceInstance: datasources['someDs-uid'], 48 queries, 49 }, 50 syncedTimes: false, 51 right: undefined, 52 richHistory: [], 53 localStorageFull: false, 54 richHistoryLimitExceededWarningShown: false, 55 }; 56 const store = configureStore({ explore: initialState, user: { orgId: 1 } as UserState }); 57 58 return { 59 store, 60 datasources, 61 }; 62} 63 64describe('Explore QueryRows', () => { 65 it('Should duplicate a query and generate a valid refId', async () => { 66 const { store } = setup([{ refId: 'A' }]); 67 68 render( 69 <Provider store={store}> 70 <QueryRows exploreId={ExploreId.left} /> 71 </Provider> 72 ); 73 74 // waiting for the d&d component to fully render. 75 await screen.findAllByText('someDs query editor'); 76 77 let duplicateButton = screen.getByTitle('Duplicate query'); 78 79 fireEvent.click(duplicateButton); 80 81 // We should have another row with refId B 82 expect(await screen.findByLabelText('Query editor row title B')).toBeInTheDocument(); 83 }); 84}); 85