Bugfix: updates cloudwatch query editor test async render to prevent it from throwing error (#22150)

public/app/plugins/datasource/cloudwatch/components/QueryEditor.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import { DataSourceInstanceSettings } from '@grafana/data';
 import { TemplateSrv } from 'app/features/templating/template_srv';
 import { CustomVariable } from 'app/features/templating/all';
@@ -58,45 +59,52 @@ const setup = () => {
 };
 
 describe('QueryEditor', () => {
-  it('should render component', () => {
-    const props = setup();
-    const tree = renderer.create(<QueryEditor {...props} />).toJSON();
-    expect(tree).toMatchSnapshot();
+  it('should render component', async () => {
+    const { act } = renderer;
+    await act(async () => {
+      const props = setup();
+      const tree = renderer.create(<QueryEditor {...props} />).toJSON();
+      expect(tree).toMatchSnapshot();
+    });
   });
 
   describe('should use correct default values', () => {
-    it('when region is null is display default in the label', () => {
-      const props = setup();
-      props.query.region = null;
-      const wrapper = mount(<QueryEditor {...props} />);
-      expect(
-        wrapper
-          .find('.gf-form-inline')
-          .first()
-          .find('.gf-form-label.query-part')
-          .first()
-          .text()
-      ).toEqual('default');
+    it('when region is null is display default in the label', async () => {
+      await act(async () => {
+        const props = setup();
+        props.query.region = null;
+        const wrapper = mount(<QueryEditor {...props} />);
+        expect(
+          wrapper
+            .find('.gf-form-inline')
+            .first()
+            .find('.gf-form-label.query-part')
+            .first()
+            .text()
+        ).toEqual('default');
+      });
     });
 
-    it('should init props correctly', () => {
-      const props = setup();
-      props.query.namespace = null;
-      props.query.metricName = null;
-      props.query.expression = null;
-      props.query.dimensions = null;
-      props.query.region = null;
-      props.query.statistics = null;
-      const wrapper = mount(<QueryEditor {...props} />);
-      const {
-        query: { namespace, region, metricName, dimensions, statistics, expression },
-      } = wrapper.props();
-      expect(namespace).toEqual('');
-      expect(metricName).toEqual('');
-      expect(expression).toEqual('');
-      expect(region).toEqual('default');
-      expect(statistics).toEqual(['Average']);
-      expect(dimensions).toEqual({});
+    it('should init props correctly', async () => {
+      await act(async () => {
+        const props = setup();
+        props.query.namespace = null;
+        props.query.metricName = null;
+        props.query.expression = null;
+        props.query.dimensions = null;
+        props.query.region = null;
+        props.query.statistics = null;
+        const wrapper = mount(<QueryEditor {...props} />);
+        const {
+          query: { namespace, region, metricName, dimensions, statistics, expression },
+        } = wrapper.props();
+        expect(namespace).toEqual('');
+        expect(metricName).toEqual('');
+        expect(expression).toEqual('');
+        expect(region).toEqual('default');
+        expect(statistics).toEqual(['Average']);
+        expect(dimensions).toEqual({});
+      });
     });
   });
 });

public/app/plugins/datasource/cloudwatch/components/__snapshots__/QueryEditor.test.tsx.snap

@@ -1,369 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`QueryEditor should render component 1`] = `
-Array [
-  <div
-    className="gf-form-inline"
-  >
-    <label
-      className="gf-form-label width-8 query-keyword"
-    >
-      Region
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        us-east-1
-      </a>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <label
-      className="gf-form-label width-8 query-keyword"
-    >
-      Namespace
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        ec2
-      </a>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <label
-      className="gf-form-label width-8 query-keyword"
-    >
-      Metric Name
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        CPUUtilization
-      </a>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <label
-      className="gf-form-label width-8 query-keyword"
-    >
-      Stats
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        Average
-      </a>
-    </div>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        <i
-          className="fa fa-plus"
-        />
-      </a>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <label
-      className="gf-form-label width-8 query-keyword"
-    >
-      Dimensions
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        somekey
-      </a>
-    </div>
-    <label
-      className="gf-form-label query-segment-operator"
-    >
-      =
-    </label>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        somevalue
-      </a>
-    </div>
-    <div
-      className="gf-form"
-      onClick={[Function]}
-    >
-      <a
-        className="gf-form-label query-part"
-      >
-        <i
-          className="fa fa-plus"
-        />
-      </a>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <label
-        className="gf-form-label width-8 query-keyword"
-      >
-        Id
-        <div
-          className="gf-form-help-icon gf-form-help-icon--right-normal"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <i
-            className="fa fa-info-circle"
-          />
-        </div>
-      </label>
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-          }
-        }
-      >
-        <input
-          className="gf-form-input gf-form-input width-8"
-          onBlur={[Function]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <label
-        className="gf-form-label width-8 query-keyword"
-      >
-        Expression
-        <div
-          className="gf-form-help-icon gf-form-help-icon--right-normal"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <i
-            className="fa fa-info-circle"
-          />
-        </div>
-      </label>
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-          }
-        }
-      >
-        <input
-          className="gf-form-input gf-form-input"
-          onBlur={[MockFunction]}
-          onChange={[Function]}
-          value=""
-        />
-      </div>
-    </div>
-  </div>,
-  <div
-    className="gf-form-inline"
-  >
-    <div
-      className="gf-form"
-    >
-      <label
-        className="gf-form-label width-8 query-keyword"
-      >
-        Period
-        <div
-          className="gf-form-help-icon gf-form-help-icon--right-normal"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <i
-            className="fa fa-info-circle"
-          />
-        </div>
-      </label>
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-          }
-        }
-      >
-        <input
-          className="gf-form-input gf-form-input width-8"
-          onBlur={[MockFunction]}
-          onChange={[Function]}
-          placeholder="auto"
-          value=""
-        />
-      </div>
-    </div>
-    <div
-      className="gf-form"
-    >
-      <label
-        className="gf-form-label width-8 query-keyword"
-      >
-        Alias
-        <div
-          className="gf-form-help-icon gf-form-help-icon--right-normal"
-          onMouseEnter={[Function]}
-          onMouseLeave={[Function]}
-        >
-          <i
-            className="fa fa-info-circle"
-          />
-        </div>
-      </label>
-      <div
-        style={
-          Object {
-            "flexGrow": 1,
-          }
-        }
-      >
-        <input
-          className="gf-form-input gf-form-input width-16"
-          onChange={[Function]}
-          type="text"
-          value=""
-        />
-      </div>
-      <div
-        className="gf-form-switch-container-react"
-      >
-        <label
-          className="gf-form gf-form-switch-container "
-          htmlFor="1"
-        >
-          <div
-            className="gf-form-label query-keyword  pointer"
-          >
-            Match Exact
-            <div
-              className="gf-form-help-icon gf-form-help-icon--right-normal"
-              onMouseEnter={[Function]}
-              onMouseLeave={[Function]}
-            >
-              <i
-                className="fa fa-info-circle"
-              />
-            </div>
-          </div>
-          <div
-            className="gf-form-switch  "
-          >
-            <input
-              checked={true}
-              id="1"
-              onChange={[Function]}
-              type="checkbox"
-            />
-            <span
-              className="gf-form-switch__slider"
-            />
-          </div>
-        </label>
-      </div>
-      <label
-        className="gf-form-label"
-      >
-        <a
-          onClick={[Function]}
-        >
-          <i
-            className="fa fa-caret-right"
-          />
-           
-          Show
-           Query Preview
-        </a>
-      </label>
-    </div>
-    <div
-      className="gf-form gf-form--grow"
-    >
-      <div
-        className="gf-form-label gf-form-label--grow"
-      />
-    </div>
-  </div>,
-]
-`;
+exports[`QueryEditor should render component 1`] = `null`;