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 b8175a171a9..e4ec734453e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/MultiFilter.test.tsx
+++ b/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();
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();
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();
- 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();
+ 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'],
});
});
});
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 28ea9d60c42..ea4995555c8 100644
--- a/public/app/plugins/datasource/cloudwatch/components/VariableQueryEditor/VariableQueryEditor.test.tsx
+++ b/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: {},
+ });
});
});
});