From 58626c026ea2c667263dc8fe61031682ba5b2e93 Mon Sep 17 00:00:00 2001 From: Isabella Siu Date: Thu, 21 Apr 2022 14:50:37 -0400 Subject: [PATCH] add waitFors to tests --- .../VariableQueryEditor/MultiFilter.test.tsx | 64 +++++++++++-------- .../VariableQueryEditor.test.tsx | 38 ++++++----- 2 files changed, 57 insertions(+), 45 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 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: {}, + }); }); }); });