diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx
index 2a450c846c5..b68113c586f 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.test.tsx
+++ b/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();
- act(async () => {
- await waitFor(() =>
- expect(datasource.getDimensionKeys).toHaveBeenCalledWith(query.namespace, query.region, {}, undefined)
- );
+ await waitFor(() => {
+ expect(screen.queryByText('InstanceId')).not.toBeInTheDocument();
+ 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();
- act(async () => {
+ await waitFor(() => {
expect(screen.getByText('InstanceId')).toBeInTheDocument();
expect(screen.getByText('InstanceType')).toBeInTheDocument();
+ });
+ });
- await waitFor(() =>
- expect(datasource.getDimensionKeys).toHaveBeenCalledWith(
- query.namespace,
- query.region,
- { InstanceId: null, InstanceType: null },
- undefined
- )
- );
+ it('should allow adding a new dimension filter', async () => {
+ const query = makeSQLQuery({
+ groupBy: undefined,
+ });
+ render();
+
+ 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();
+
+ 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();
});
});
});
diff --git a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
index c8730313292..f7634236e8d 100644
--- a/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/SQLBuilderEditor/SQLGroupBy.tsx
@@ -91,6 +91,7 @@ const GroupByItem: React.FC = (props) => {
return (