add waitFors to tests

public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { fireEvent, render, screen, within } from '@testing-library/react';
+import { fireEvent, render, screen, waitFor, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { MultiFilter } from './MultiFilter';
 
@@ -30,8 +30,10 @@ describe('MultiFilters', () => {
       render(<MultiFilter filters={filters} onChange={onChange} />);
 
       userEvent.click(screen.getByLabelText('Add'));
-      expect(screen.getByTestId('cloudwatch-multifilter-item')).toBeInTheDocument();
-      expect(onChange).not.toHaveBeenCalled();
+      await waitFor(() => {
+        expect(screen.getByTestId('cloudwatch-multifilter-item')).toBeInTheDocument();
+        expect(onChange).not.toHaveBeenCalled();
+      });
     });
   });
 
@@ -42,15 +44,18 @@ describe('MultiFilters', () => {
       render(<MultiFilter filters={filters} onChange={onChange} />);
 
       userEvent.click(screen.getByLabelText('Add'));
-      const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
-      expect(filterItemElement).toBeInTheDocument();
+      await waitFor(() => {
+        const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
+        expect(filterItemElement).toBeInTheDocument();
+      });
 
       const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
       expect(keyElement).toBeInTheDocument();
       userEvent.type(keyElement!, 'my-key');
-      fireEvent.blur(keyElement!);
 
-      expect(within(filterItemElement).getByDisplayValue('my-key')).toBeInTheDocument();
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
+      });
       expect(onChange).not.toHaveBeenCalled();
     });
   });
@@ -63,46 +68,49 @@ describe('MultiFilters', () => {
 
       const label = await screen.findByLabelText('Add');
       userEvent.click(label);
-      const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
-      expect(filterItemElement).toBeInTheDocument();
+      await waitFor(() => {
+        const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
+        expect(filterItemElement).toBeInTheDocument();
+      });
 
       const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
       expect(keyElement).toBeInTheDocument();
       userEvent.type(keyElement!, 'my-key');
       fireEvent.blur(keyElement!);
-      expect(within(filterItemElement).getByDisplayValue('my-key')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
       expect(onChange).not.toHaveBeenCalled();
 
       const valueElement = screen.getByTestId('cloudwatch-multifilter-item-value');
       expect(valueElement).toBeInTheDocument();
       userEvent.type(valueElement!, 'my-value1,my-value2');
       fireEvent.blur(valueElement!);
-      expect(within(filterItemElement).getByDisplayValue('my-value1,my-value2')).toBeInTheDocument();
+      expect(screen.getByDisplayValue('my-value1,my-value2')).toBeInTheDocument();
       expect(onChange).toHaveBeenCalledWith({
         'my-key': ['my-value1', 'my-value2'],
       });
     });
+  });
+  describe('when editing an existing filter item key', () => {
+    it('it should change the key and call onChange', async () => {
+      const filters = { 'my-key': ['my-value'] };
+      const onChange = jest.fn();
+      render(<MultiFilter filters={filters} onChange={onChange} />);
 
-    describe('when editing an existing filter item key', () => {
-      it('it should change the key and call onChange', async () => {
-        const filters = { 'my-key': ['my-value'] };
-        const onChange = jest.fn();
-        render(<MultiFilter filters={filters} onChange={onChange} />);
+      const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
+      expect(filterItemElement).toBeInTheDocument();
+      expect(within(filterItemElement).getByDisplayValue('my-key')).toBeInTheDocument();
+      expect(within(filterItemElement).getByDisplayValue('my-value')).toBeInTheDocument();
 
-        const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
-        expect(filterItemElement).toBeInTheDocument();
-        expect(within(filterItemElement).getByDisplayValue('my-key')).toBeInTheDocument();
-        expect(within(filterItemElement).getByDisplayValue('my-value')).toBeInTheDocument();
-
-        const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
-        expect(keyElement).toBeInTheDocument();
-        userEvent.type(keyElement!, '2');
-        fireEvent.blur(keyElement!);
+      const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
+      expect(keyElement).toBeInTheDocument();
+      userEvent.type(keyElement!, '2');
+      fireEvent.blur(keyElement!);
 
+      await waitFor(() => {
         expect(within(filterItemElement).getByDisplayValue('my-key2')).toBeInTheDocument();
-        expect(onChange).toHaveBeenCalledWith({
-          'my-key2': ['my-value'],
-        });
+      });
+      expect(onChange).toHaveBeenCalledWith({
+        'my-key2': ['my-value'],
       });
     });
   });

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

@@ -192,12 +192,14 @@ describe('VariableEditor', () => {
       userEvent.type(valueElement!, ',baz');
       fireEvent.blur(valueElement!);
 
-      expect(onChange).toHaveBeenCalledWith({
-        ...defaultQuery,
-        queryType: VariableQueryType.EC2InstanceAttributes,
-        region: 'a1',
-        attributeName: 'Tags.blah',
-        ec2Filters: { s4: ['foo', 'bar', 'baz'] },
+      await waitFor(() => {
+        expect(onChange).toHaveBeenCalledWith({
+          ...defaultQuery,
+          queryType: VariableQueryType.EC2InstanceAttributes,
+          region: 'a1',
+          attributeName: 'Tags.blah',
+          ec2Filters: { s4: ['foo', 'bar', 'baz'] },
+        });
       });
     });
   });
@@ -225,17 +227,19 @@ describe('VariableEditor', () => {
 
       expect(ds.datasource.getMetrics).toHaveBeenCalledWith('z2', 'b1');
       expect(ds.datasource.getDimensionKeys).toHaveBeenCalledWith('z2', 'b1');
-      expect(props.onChange).toHaveBeenCalledWith({
-        ...defaultQuery,
-        refId: 'CloudWatchVariableQueryEditor-VariableQuery',
-        queryType: VariableQueryType.DimensionValues,
-        namespace: 'z2',
-        region: 'b1',
-        // metricName i3 exists in the new region and should not be removed
-        metricName: 'i3',
-        // dimensionKey s4 and valueDimension do not exist in the new region and should be removed
-        dimensionKey: '',
-        dimensionFilters: {},
+      await waitFor(() => {
+        expect(props.onChange).toHaveBeenCalledWith({
+          ...defaultQuery,
+          refId: 'CloudWatchVariableQueryEditor-VariableQuery',
+          queryType: VariableQueryType.DimensionValues,
+          namespace: 'z2',
+          region: 'b1',
+          // metricName i3 exists in the new region and should not be removed
+          metricName: 'i3',
+          // dimensionKey s4 and valueDimension do not exist in the new region and should be removed
+          dimensionKey: '',
+          dimensionFilters: {},
+        });
       });
     });
   });