From 54d4a69e91ac6fa5cee50aaf34404309bcae5451 Mon Sep 17 00:00:00 2001
From: Kevin Yu <kevinwcyu@users.noreply.github.com>
Date: Mon, 21 Mar 2022 12:21:04 -0700
Subject: [PATCH] Chore: clean up console warning from Metrics Query Editor
 tests (#46747)

* Chore: clean up console warning from Metrics Query Editor tests

* Chore: remove type assertions
---
 .../components/MetricsQueryEditor.test.tsx    | 54 +++++++++++--------
 1 file changed, 31 insertions(+), 23 deletions(-)

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(<MetricsQueryEditor {...props} />);
 
         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(<MetricsQueryEditor {...props} />);
 
         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(<MetricsQueryEditor {...props} />);
 
         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(<MetricsQueryEditor {...props} />);
-      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(<MetricsQueryEditor {...props} />);
-      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(<MetricsQueryEditor {...props} />);
+
+      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();
     });
   });
 });