1import React from 'react';
2import { render, screen, waitFor } from '@testing-library/react';
3import { selectOptionInTest } from '@grafana/ui';
4
5import MetricsQueryEditor from './MetricsQueryEditor';
6
7import createMockQuery from '../../__mocks__/query';
8import createMockDatasource from '../../__mocks__/datasource';
9
10const variableOptionGroup = {
11  label: 'Template variables',
12  options: [],
13};
14
15describe('Azure Monitor QueryEditor', () => {
16  it('should render', async () => {
17    const mockDatasource = createMockDatasource();
18    render(
19      <MetricsQueryEditor
20        subscriptionId="123"
21        query={createMockQuery()}
22        datasource={mockDatasource}
23        variableOptionGroup={variableOptionGroup}
24        onChange={() => {}}
25        setError={() => {}}
26      />
27    );
28    await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument());
29  });
30
31  it('should change the subscription ID when selected', async () => {
32    const mockDatasource = createMockDatasource();
33    const onChange = jest.fn();
34    const mockQuery = createMockQuery();
35    (mockQuery.azureMonitor ?? {}).metricName = undefined;
36    mockDatasource.azureMonitorDatasource.getSubscriptions = jest.fn().mockResolvedValueOnce([
37      {
38        value: 'abc-123',
39        text: 'Primary Subscription',
40      },
41      {
42        value: 'abc-456',
43        text: 'Another Subscription',
44      },
45    ]);
46
47    render(
48      <MetricsQueryEditor
49        subscriptionId="123"
50        query={mockQuery}
51        datasource={mockDatasource}
52        variableOptionGroup={variableOptionGroup}
53        onChange={onChange}
54        setError={() => {}}
55      />
56    );
57
58    const subscriptions = await screen.findByLabelText('Subscription');
59    await selectOptionInTest(subscriptions, 'Another Subscription');
60
61    expect(onChange).toHaveBeenCalledWith({
62      ...mockQuery,
63      subscription: 'abc-456',
64      azureMonitor: {
65        ...mockQuery.azureMonitor,
66        resourceGroup: undefined,
67        metricDefinition: undefined,
68        metricNamespace: undefined,
69        resourceName: undefined,
70        metricName: undefined,
71        aggregation: undefined,
72        timeGrain: '',
73        dimensionFilters: [],
74      },
75    });
76  });
77
78  it('should change the metric name when selected', async () => {
79    const mockDatasource = createMockDatasource();
80    const onChange = jest.fn();
81    const mockQuery = createMockQuery();
82    mockDatasource.getMetricNames = jest.fn().mockResolvedValue([
83      {
84        value: 'metric-a',
85        text: 'Metric A',
86      },
87      {
88        value: 'metric-b',
89        text: 'Metric B',
90      },
91    ]);
92    render(
93      <MetricsQueryEditor
94        subscriptionId="123"
95        query={createMockQuery()}
96        datasource={mockDatasource}
97        variableOptionGroup={variableOptionGroup}
98        onChange={onChange}
99        setError={() => {}}
100      />
101    );
102    await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument());
103
104    const metrics = await screen.findByLabelText('Metric');
105    await selectOptionInTest(metrics, 'Metric B');
106
107    expect(onChange).toHaveBeenLastCalledWith({
108      ...mockQuery,
109      azureMonitor: {
110        ...mockQuery.azureMonitor,
111        metricName: 'metric-b',
112        aggregation: undefined,
113        timeGrain: '',
114      },
115    });
116  });
117
118  it('should change the aggregation type when selected', async () => {
119    const mockDatasource = createMockDatasource();
120    const onChange = jest.fn();
121    const mockQuery = createMockQuery();
122    render(
123      <MetricsQueryEditor
124        subscriptionId="123"
125        query={createMockQuery()}
126        datasource={mockDatasource}
127        variableOptionGroup={variableOptionGroup}
128        onChange={onChange}
129        setError={() => {}}
130      />
131    );
132    await waitFor(() => expect(screen.getByTestId('azure-monitor-metrics-query-editor')).toBeInTheDocument());
133
134    const aggregation = await screen.findByLabelText('Aggregation');
135    await selectOptionInTest(aggregation, 'Maximum');
136
137    expect(onChange).toHaveBeenLastCalledWith({
138      ...mockQuery,
139      azureMonitor: {
140        ...mockQuery.azureMonitor,
141        aggregation: 'Maximum',
142      },
143    });
144  });
145});
146