CloudMonitoring: add tests around experimental UI (#52487)

* CloudMonitoring: add tests around experimental UI

I also reworked the annotation query editor UI a little bit to bring it
inline with how AzureMonitor's query editor looks.

Closes #44431

public/app/plugins/datasource/cloud-monitoring/__mocks__/cloudMonitoringDatasource.ts

@@ -13,6 +13,7 @@ export const createMockDatasource = (overrides?: Partial<Datasource>) => {
     getProjects: jest.fn().mockResolvedValue([]),
     getDefaultProject: jest.fn().mockReturnValue('cloud-monitoring-default-project'),
     templateSrv,
+    getSLOServices: jest.fn().mockResolvedValue([]),
     ...overrides,
   };
 

public/app/plugins/datasource/cloud-monitoring/components/AnnotationQueryEditor.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { QueryEditorProps, toOption } from '@grafana/data';
-import { EditorField, EditorRows, EditorRow } from '@grafana/experimental';
+import { EditorField, EditorRows } from '@grafana/experimental';
 import { config } from '@grafana/runtime';
 import { Input } from '@grafana/ui';
 
@@ -92,18 +92,12 @@ export const AnnotationQueryEditor = (props: Props) => {
             datasource={datasource}
             query={metricQuery}
           />
-
-          <EditorRow>
           <EditorField label="Title" htmlFor="annotation-query-title">
             <Input id="annotation-query-title" value={title} onChange={handleTitleChange} />
           </EditorField>
-          </EditorRow>
-
-          <EditorRow>
           <EditorField label="Text" htmlFor="annotation-query-text">
             <Input id="annotation-query-text" value={text} onChange={handleTextChange} />
           </EditorField>
-          </EditorRow>
         </>
       ) : (
         <>

public/app/plugins/datasource/cloud-monitoring/components/Experimental/MetricQueryEditor.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, act } from '@testing-library/react';
+import React from 'react';
+
+import { config } from '@grafana/runtime';
+import { TemplateSrvMock } from 'app/features/templating/template_srv.mock';
+
+import { createMockDatasource } from '../../__mocks__/cloudMonitoringDatasource';
+import { createMockMetricQuery } from '../../__mocks__/cloudMonitoringQuery';
+
+import { MetricQueryEditor, Props } from './MetricQueryEditor';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getTemplateSrv: () => new TemplateSrvMock({}),
+}));
+
+const props: Props = {
+  onChange: jest.fn(),
+  refId: 'refId',
+  customMetaData: {},
+  onRunQuery: jest.fn(),
+  datasource: createMockDatasource(),
+  variableOptionGroup: { options: [] },
+  query: createMockMetricQuery(),
+};
+
+describe('Cloud monitoring: Metric Query Editor', () => {
+  it('shoud render Project selector', async () => {
+    await act(async () => {
+      const originalValue = config.featureToggles.cloudMonitoringExperimentalUI;
+      config.featureToggles.cloudMonitoringExperimentalUI = true;
+
+      render(<MetricQueryEditor {...props} />);
+
+      expect(screen.getByLabelText('Project')).toBeInTheDocument();
+
+      config.featureToggles.cloudMonitoringExperimentalUI = originalValue;
+    });
+  });
+});

public/app/plugins/datasource/cloud-monitoring/components/Experimental/SLOQueryEditor.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen, act } from '@testing-library/react';
+import React from 'react';
+
+import { config } from '@grafana/runtime';
+import { TemplateSrvMock } from 'app/features/templating/template_srv.mock';
+
+import { createMockDatasource } from '../../__mocks__/cloudMonitoringDatasource';
+import { createMockSLOQuery } from '../../__mocks__/cloudMonitoringQuery';
+
+import { SLOQueryEditor, Props } from './SLOQueryEditor';
+
+jest.mock('@grafana/runtime', () => ({
+  ...jest.requireActual('@grafana/runtime'),
+  getTemplateSrv: () => new TemplateSrvMock({}),
+}));
+
+const props: Props = {
+  onChange: jest.fn(),
+  refId: 'refId',
+  customMetaData: {},
+  onRunQuery: jest.fn(),
+  datasource: createMockDatasource(),
+  variableOptionGroup: { options: [] },
+  query: createMockSLOQuery(),
+};
+
+describe('Cloud monitoring: SLO Query Editor', () => {
+  it('shoud render Service selector', async () => {
+    await act(async () => {
+      const originalValue = config.featureToggles.cloudMonitoringExperimentalUI;
+      config.featureToggles.cloudMonitoringExperimentalUI = true;
+
+      render(<SLOQueryEditor {...props} />);
+
+      expect(screen.getByLabelText('Service')).toBeInTheDocument();
+
+      config.featureToggles.cloudMonitoringExperimentalUI = originalValue;
+    });
+  });
+});