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