Chore: clean up console warning from SQL Group By tests (#46733)

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
+import selectEvent from 'react-select-event';
 import { CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType, SQLExpression } from '../../types';
 import { setupMockedDataSource } from '../../__mocks__/CloudWatchDataSource';
 import { createArray, createGroupBy } from '../../__mocks__/sqlUtils';
@@ -32,30 +33,57 @@ describe('Cloudwatch SQLGroupBy', () => {
     });
 
     render(<SQLGroupBy {...baseProps} query={query} />);
-    act(async () => {
+    await waitFor(() => {
-      await waitFor(() =>
+      expect(screen.queryByText('InstanceId')).not.toBeInTheDocument();
-        expect(datasource.getDimensionKeys).toHaveBeenCalledWith(query.namespace, query.region, {}, undefined)
+      expect(screen.queryByText('InstanceType')).not.toBeInTheDocument();
-      );
     });
   });
+
   it('should load dimension keys with a dimension filter in case a group bys exist', async () => {
     const query = makeSQLQuery({
       groupBy: createArray([createGroupBy('InstanceId'), createGroupBy('InstanceType')]),
     });
 
     render(<SQLGroupBy {...baseProps} query={query} />);
-    act(async () => {
+    await waitFor(() => {
       expect(screen.getByText('InstanceId')).toBeInTheDocument();
       expect(screen.getByText('InstanceType')).toBeInTheDocument();
+    });
+  });
 
-      await waitFor(() =>
+  it('should allow adding a new dimension filter', async () => {
-        expect(datasource.getDimensionKeys).toHaveBeenCalledWith(
+    const query = makeSQLQuery({
-          query.namespace,
+      groupBy: undefined,
-          query.region,
+    });
-          { InstanceId: null, InstanceType: null },
+    render(<SQLGroupBy {...baseProps} query={query} />);
-          undefined
+
-        )
+    expect(screen.queryByText('Choose')).not.toBeInTheDocument();
-      );
+    expect(screen.queryByText('Template Variables')).not.toBeInTheDocument();
+
+    const addButton = screen.getByRole('button', { name: 'Add' });
+    expect(addButton).toBeInTheDocument();
+    addButton.click();
+
+    expect(await screen.findByText('Choose')).toBeInTheDocument();
+
+    selectEvent.openMenu(screen.getByLabelText(/Group by/));
+    expect(await screen.findByText('Template Variables')).toBeInTheDocument();
+  });
+
+  it('should allow removing a dimension filter', async () => {
+    const query = makeSQLQuery({
+      groupBy: createArray([createGroupBy('InstanceId')]),
+    });
+    render(<SQLGroupBy {...baseProps} query={query} />);
+
+    expect(screen.getByText('InstanceId')).toBeInTheDocument();
+
+    const removeButton = screen.getByRole('button', { name: 'remove' });
+    expect(removeButton).toBeInTheDocument();
+    removeButton.click();
+
+    await waitFor(() => {
+      expect(screen.queryByText('InstanceId')).not.toBeInTheDocument();
     });
   });
 });

public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx

@@ -91,6 +91,7 @@ const GroupByItem: React.FC<GroupByItemProps> = (props) => {
   return (
     <InputGroup>
       <Select
+        aria-label={`Group by ${fieldName ?? 'filter key'}`}
         width="auto"
         value={fieldName ? toOption(fieldName) : null}
         options={options}