From 7c2ff71d0bf28ce416ff04c824f9ddc4a1c980f2 Mon Sep 17 00:00:00 2001
From: Isabella Siu <isabella.siu@grafana.com>
Date: Thu, 21 Apr 2022 15:57:49 -0400
Subject: [PATCH] more await tweaks

---
 .../VariableQueryEditor/MultiFilter.test.tsx  | 30 +++++++++++--------
 .../VariableQueryEditor/MultiFilterItem.tsx   |  1 +
 .../VariableQueryEditor.test.tsx              |  1 +
 3 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
index e4ec734453e..72cf5ade437 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
@@ -44,6 +44,7 @@ describe('MultiFilters', () => {
       render(<MultiFilter filters={filters} onChange={onChange} />);
 
       userEvent.click(screen.getByLabelText('Add'));
+
       await waitFor(() => {
         const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
         expect(filterItemElement).toBeInTheDocument();
@@ -52,11 +53,12 @@ describe('MultiFilters', () => {
       const keyElement = screen.getByTestId('cloudwatch-multifilter-item-key');
       expect(keyElement).toBeInTheDocument();
       userEvent.type(keyElement!, 'my-key');
+      fireEvent.blur(keyElement!);
 
       await waitFor(() => {
         expect(screen.getByDisplayValue('my-key')).toBeInTheDocument();
+        expect(onChange).not.toHaveBeenCalled();
       });
-      expect(onChange).not.toHaveBeenCalled();
     });
   });
 
@@ -68,25 +70,27 @@ describe('MultiFilters', () => {
 
       const label = await screen.findByLabelText('Add');
       userEvent.click(label);
-      await waitFor(() => {
-        const filterItemElement = screen.getByTestId('cloudwatch-multifilter-item');
-        expect(filterItemElement).toBeInTheDocument();
-      });
+      const filterItemElement = await screen.findByTestId('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(screen.getByDisplayValue('my-key')).toBeInTheDocument();
-      expect(onChange).not.toHaveBeenCalled();
+      await waitFor(() => {
+        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(screen.getByDisplayValue('my-value1,my-value2')).toBeInTheDocument();
-      expect(onChange).toHaveBeenCalledWith({
-        'my-key': ['my-value1', 'my-value2'],
+      await waitFor(() => {
+        expect(screen.getByDisplayValue('my-value1, my-value2')).toBeInTheDocument();
+        expect(onChange).toHaveBeenCalledWith({
+          'my-key': ['my-value1', 'my-value2'],
+        });
       });
     });
   });
@@ -108,9 +112,9 @@ describe('MultiFilters', () => {
 
       await waitFor(() => {
         expect(within(filterItemElement).getByDisplayValue('my-key2')).toBeInTheDocument();
-      });
-      expect(onChange).toHaveBeenCalledWith({
-        'my-key2': ['my-value'],
+        expect(onChange).toHaveBeenCalledWith({
+          'my-key2': ['my-value'],
+        });
       });
     });
   });
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
index 8eb34996eeb..f305e383602 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilterItem.tsx
@@ -47,6 +47,7 @@ export const MultiFilterItem: FunctionComponent<Props> = ({ filter, onChange, on
             if (localValue && newValues !== filter.value) {
               onChange({ ...filter, value: newValues });
             }
+            setLocalValue(newValues.join(', '));
           }}
         />
 
diff --git a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
index ea4995555c8..2c38a561807 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
@@ -192,6 +192,7 @@ describe('VariableEditor', () => {
       userEvent.type(valueElement!, ',baz');
       fireEvent.blur(valueElement!);
 
+      expect(screen.getByDisplayValue('foo, bar, baz')).toBeInTheDocument();
       await waitFor(() => {
         expect(onChange).toHaveBeenCalledWith({
           ...defaultQuery,