diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
index 10d71dad29a..f05ee8835ec 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
@@ -1,13 +1,13 @@
import React from 'react';
import renderer from 'react-test-renderer';
-import { render, screen, waitFor } from '@testing-library/react';
-import { act } from 'react-dom/test-utils';
+import { render, screen, act } from '@testing-library/react';
+import selectEvent from 'react-select-event';
import { DataSourceInstanceSettings } from '@grafana/data';
import { TemplateSrv } from 'app/features/templating/template_srv';
import { MetricsQueryEditor, normalizeQuery, Props } from './MetricsQueryEditor';
import { CloudWatchDatasource } from '../datasource';
import { CustomVariableModel, initialVariableModelState } from '../../../../features/variables/types';
-import { CloudWatchJsonData, CloudWatchMetricsQuery, MetricEditorMode, MetricQueryType } from '../types';
+import { CloudWatchJsonData, MetricEditorMode, MetricQueryType } from '../types';
const setup = () => {
const instanceSettings = {
@@ -149,7 +149,10 @@ describe('QueryEditor', () => {
it('when metric query type is metric search and editor mode is raw', async () => {
await act(async () => {
const props = setup();
- (props.query as CloudWatchMetricsQuery).metricEditorMode = MetricEditorMode.Code;
+ if (props.query.queryMode !== 'Metrics') {
+ fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`);
+ }
+ props.query.metricEditorMode = MetricEditorMode.Code;
render();
expect(screen.getByText('Metric Search')).toBeInTheDocument();
@@ -161,8 +164,11 @@ describe('QueryEditor', () => {
it('when metric query type is metric query and editor mode is builder', async () => {
await act(async () => {
const props = setup();
- (props.query as CloudWatchMetricsQuery).metricQueryType = MetricQueryType.Query;
- (props.query as CloudWatchMetricsQuery).metricEditorMode = MetricEditorMode.Builder;
+ if (props.query.queryMode !== 'Metrics') {
+ fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`);
+ }
+ props.query.metricQueryType = MetricQueryType.Query;
+ props.query.metricEditorMode = MetricEditorMode.Builder;
render();
expect(screen.getByText('Metric Query')).toBeInTheDocument();
@@ -174,8 +180,11 @@ describe('QueryEditor', () => {
it('when metric query type is metric query and editor mode is raw', async () => {
await act(async () => {
const props = setup();
- (props.query as CloudWatchMetricsQuery).metricQueryType = MetricQueryType.Query;
- (props.query as CloudWatchMetricsQuery).metricEditorMode = MetricEditorMode.Code;
+ if (props.query.queryMode !== 'Metrics') {
+ fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`);
+ }
+ props.query.metricQueryType = MetricQueryType.Query;
+ props.query.metricEditorMode = MetricEditorMode.Code;
render();
expect(screen.getByText('Metric Query')).toBeInTheDocument();
@@ -186,30 +195,29 @@ describe('QueryEditor', () => {
});
describe('should handle expression options correctly', () => {
- it('should display match exact switch', () => {
+ it('should display match exact switch', async () => {
const props = setup();
render();
- expect(screen.getByText('Match exact')).toBeInTheDocument();
+ expect(await screen.findByText('Match exact')).toBeInTheDocument();
});
it('shoud display wildcard option in dimension value dropdown', async () => {
const props = setup();
+ if (props.query.queryMode !== 'Metrics') {
+ fail(`expected props.query.queryMode to be 'Metrics', got '${props.query.queryMode}' instead`);
+ }
props.datasource.getDimensionValues = jest.fn().mockResolvedValue([[{ label: 'dimVal1', value: 'dimVal1' }]]);
- (props.query as CloudWatchMetricsQuery).metricQueryType = MetricQueryType.Search;
- (props.query as CloudWatchMetricsQuery).metricEditorMode = MetricEditorMode.Builder;
- (props.query as CloudWatchMetricsQuery).dimensions = { instanceId: 'instance-123' };
- render();
- expect(screen.getByText('Match exact')).toBeInTheDocument();
+ props.query.metricQueryType = MetricQueryType.Search;
+ props.query.metricEditorMode = MetricEditorMode.Builder;
+ props.query.dimensions = { instanceId: 'instance-123' };
- const valueElement = screen.getByText('instance-123');
- expect(valueElement).toBeInTheDocument();
+ render();
+
+ expect(screen.getByText('Match exact')).toBeInTheDocument();
+ expect(screen.getByText('instance-123')).toBeInTheDocument();
expect(screen.queryByText('*')).toBeNull();
- act(async () => {
- await valueElement.click();
- await waitFor(() => {
- expect(screen.getByText('*')).toBeInTheDocument();
- });
- });
+ selectEvent.openMenu(screen.getByLabelText('Dimensions filter value'));
+ expect(await screen.findByText('*')).toBeInTheDocument();
});
});
});