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