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 (