diff --git a/packages/grafana-ui/src/components/Graph/Graph.test.tsx b/packages/grafana-ui/src/components/Graph/Graph.test.tsx index d9e8445d91c..637a79800ed 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.test.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react'; +import { act, render, screen } from '@testing-library/react'; import $ from 'jquery'; import React from 'react'; @@ -136,7 +136,9 @@ describe('Graph', () => { series: { seriesIndex: 0 }, }, }; - $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]); + act(() => { + $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]); + }); const timestamp = screen.getByLabelText('Timestamp'); const tooltip = screen.getByTestId('SeriesTableRow').parentElement; @@ -165,7 +167,9 @@ describe('Graph', () => { activeItem: null, }; // Then - $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]); + act(() => { + $('div.graph-panel__chart').trigger('plothover', [eventArgs.pos, eventArgs.activeItem]); + }); const timestamp = screen.getByLabelText('Timestamp'); const tableRows = screen.getAllByTestId('SeriesTableRow'); diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx index 7557fa5d7b3..bf11342d2ff 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.test.tsx @@ -1,4 +1,4 @@ -import { render } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; import React from 'react'; import { createTheme } from '@grafana/data'; @@ -29,7 +29,7 @@ describe('', () => { }); describe('syntaxLoaded', () => { - it('should re-render the editor after syntax has fully loaded', () => { + it('should re-render the editor after syntax has fully loaded', async () => { const mockOnRichValueChange = jest.fn(); const { rerender } = render( ', () => { /> ); expect(mockOnRichValueChange).toHaveBeenCalled(); + + // wait for the query to appear to prevent act warnings + await screen.findByText('my query'); }); - it('should not re-render the editor if syntax is already loaded', () => { + it('should not re-render the editor if syntax is already loaded', async () => { const mockOnRichValueChange = jest.fn(); const { rerender } = render( ', () => { /> ); expect(mockOnRichValueChange).not.toBeCalled(); + + // wait for the query to appear to prevent act warnings + await screen.findByText('my query'); }); - it('should not re-render the editor twice once syntax is fully loaded', () => { + it('should not re-render the editor twice once syntax is fully loaded', async () => { const mockOnRichValueChange = jest.fn(); const { rerender } = render( ', () => { /> ); expect(mockOnRichValueChange).toBeCalledTimes(1); + + // wait for the query to appear to prevent act warnings + await screen.findByText('my query'); }); }); }); diff --git a/packages/grafana-ui/src/components/QueryField/QueryField.tsx b/packages/grafana-ui/src/components/QueryField/QueryField.tsx index 6692bb86966..ff2f238629f 100644 --- a/packages/grafana-ui/src/components/QueryField/QueryField.tsx +++ b/packages/grafana-ui/src/components/QueryField/QueryField.tsx @@ -113,7 +113,6 @@ export class UnThemedQueryField extends PureComponent { ); }; -describe('Render', () => { +describe('NavBar', () => { it('should render component', async () => { setup(); const sidemenu = await screen.findByTestId('sidemenu'); @@ -36,7 +36,7 @@ describe('Render', () => { it('should not render when in kiosk mode is tv', async () => { setup(); - locationService.partial({ kiosk: 'tv' }); + act(() => locationService.partial({ kiosk: 'tv' })); const sidemenu = screen.queryByTestId('sidemenu'); expect(sidemenu).not.toBeInTheDocument(); }); @@ -44,7 +44,7 @@ describe('Render', () => { it('should not render when in kiosk mode is full', async () => { setup(); - locationService.partial({ kiosk: '1' }); + act(() => locationService.partial({ kiosk: '1' })); const sidemenu = screen.queryByTestId('sidemenu'); expect(sidemenu).not.toBeInTheDocument(); }); diff --git a/public/app/features/correlations/CorrelationsPage.test.tsx b/public/app/features/correlations/CorrelationsPage.test.tsx index eab9c5ae7e2..4d8f484441d 100644 --- a/public/app/features/correlations/CorrelationsPage.test.tsx +++ b/public/app/features/correlations/CorrelationsPage.test.tsx @@ -508,9 +508,7 @@ describe('CorrelationsPage', () => { await userEvent.click(screen.getByRole('button', { name: /save$/i })); - await waitFor(() => { - expect(screen.queryByRole('cell', { name: /edited label$/i })).toBeInTheDocument(); - }); + expect(await screen.findByRole('cell', { name: /edited label$/i })).toBeInTheDocument(); expect(mocks.reportInteraction).toHaveBeenLastCalledWith('grafana_correlations_edited'); }); diff --git a/public/app/features/datasources/pages/EditDataSourcePage.test.tsx b/public/app/features/datasources/pages/EditDataSourcePage.test.tsx index 30cbc03d60e..54c2cd9ec9c 100644 --- a/public/app/features/datasources/pages/EditDataSourcePage.test.tsx +++ b/public/app/features/datasources/pages/EditDataSourcePage.test.tsx @@ -94,7 +94,7 @@ describe('', () => { }); }); - it('should render the edit page without an issue', () => { + it('should render the edit page without an issue', async () => { setup(uid, store); expect(screen.queryByText('Loading ...')).not.toBeInTheDocument(); @@ -107,5 +107,8 @@ describe('', () => { expect(screen.queryByRole('button', { name: /Delete/i })).toBeVisible(); expect(screen.queryByRole('button', { name: /Save (.*) test/i })).toBeVisible(); expect(screen.queryByText('Explore')).toBeVisible(); + + // wait for the rest of the async processes to finish + expect(await screen.findByText(name)).toBeVisible(); }); }); diff --git a/public/app/features/explore/Explore.test.tsx b/public/app/features/explore/Explore.test.tsx index 528fbff1d53..38a4f2d4c3a 100644 --- a/public/app/features/explore/Explore.test.tsx +++ b/public/app/features/explore/Explore.test.tsx @@ -125,14 +125,22 @@ const setup = (overrideProps?: Partial) => { }; describe('Explore', () => { - it('should not render no data with not started loading state', () => { + it('should not render no data with not started loading state', async () => { setup(); + + // Wait for the Explore component to render + await screen.findByText('Explore'); + expect(screen.queryByTestId('explore-no-data')).not.toBeInTheDocument(); }); it('should render no data with done loading state', async () => { const queryResp = makeEmptyQueryResponse(LoadingState.Done); setup({ queryResponse: queryResp }); + + // Wait for the Explore component to render + await screen.findByText('Explore'); + expect(screen.getByTestId('explore-no-data')).toBeInTheDocument(); }); }); diff --git a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx index daf6a84e16e..736ae6d0d4d 100644 --- a/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/MetricsQueryEditor/MetricsQueryEditor.test.tsx @@ -106,14 +106,13 @@ describe('MetricsQueryEditor', () => { const resourcePickerButton = await screen.findByRole('button', { name: 'web-server' }); expect(resourcePickerButton).toBeInTheDocument(); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); - await waitFor(() => { + await waitFor(async () => { expect(screen.queryByText('Loading...')).not.toBeInTheDocument(); + const selection = await screen.findAllByLabelText('web-server'); + expect(selection).toHaveLength(2); }); - - const selection = await screen.findAllByLabelText('web-server'); - expect(selection).toHaveLength(2); }); it('should change resource when a resource is selected in the ResourcePicker', async () => { @@ -138,17 +137,17 @@ describe('MetricsQueryEditor', () => { const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); expect(resourcePickerButton).toBeInTheDocument(); expect(screen.queryByRole('button', { name: 'Expand Primary Subscription' })).not.toBeInTheDocument(); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' }); expect(subscriptionButton).toBeInTheDocument(); expect(screen.queryByRole('button', { name: 'Expand A Great Resource Group' })).not.toBeInTheDocument(); - subscriptionButton.click(); + await userEvent.click(subscriptionButton); const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' }); expect(resourceGroupButton).toBeInTheDocument(); expect(screen.queryByLabelText('web-server')).not.toBeInTheDocument(); - resourceGroupButton.click(); + await userEvent.click(resourceGroupButton); const checkbox = await screen.findByLabelText('web-server'); expect(checkbox).toBeInTheDocument(); @@ -194,13 +193,13 @@ describe('MetricsQueryEditor', () => { ); const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' }); - subscriptionButton.click(); + await userEvent.click(subscriptionButton); const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' }); - resourceGroupButton.click(); + await userEvent.click(resourceGroupButton); const checkbox = await screen.findByLabelText('web-server'); await userEvent.click(checkbox); @@ -253,13 +252,13 @@ describe('MetricsQueryEditor', () => { ); const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' }); - subscriptionButton.click(); + await userEvent.click(subscriptionButton); const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' }); - resourceGroupButton.click(); + await userEvent.click(resourceGroupButton); const checkbox = await screen.findByLabelText('web-server'); await userEvent.click(checkbox); @@ -288,13 +287,13 @@ describe('MetricsQueryEditor', () => { ); const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' }); - subscriptionButton.click(); + await userEvent.click(subscriptionButton); const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' }); - resourceGroupButton.click(); + await userEvent.click(resourceGroupButton); const checkbox = await screen.findByLabelText('web-server'); await userEvent.click(checkbox); @@ -397,20 +396,20 @@ describe('MetricsQueryEditor', () => { ); const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const subscriptionButton = await screen.findByRole('button', { name: 'Expand Primary Subscription' }); - subscriptionButton.click(); + await userEvent.click(subscriptionButton); const resourceGroupButton = await screen.findByRole('button', { name: 'Expand A Great Resource Group' }); - resourceGroupButton.click(); + await userEvent.click(resourceGroupButton); const checkbox = await screen.findByLabelText('web-server'); await userEvent.click(checkbox); expect(checkbox).toBeChecked(); const advancedSection = screen.getByText('Advanced'); - advancedSection.click(); + await userEvent.click(advancedSection); const advancedInput = await screen.findByLabelText('Subscription'); await userEvent.type(advancedInput, 'def-123'); @@ -443,10 +442,10 @@ describe('MetricsQueryEditor', () => { ); const resourcePickerButton = await screen.findByRole('button', { name: 'Select a resource' }); - resourcePickerButton.click(); + await userEvent.click(resourcePickerButton); const advancedSection = screen.getByText('Advanced'); - advancedSection.click(); + await userEvent.click(advancedSection); const advancedInput = await screen.findByLabelText('Subscription'); await userEvent.type(advancedInput, 'def-123'); @@ -458,7 +457,7 @@ describe('MetricsQueryEditor', () => { await userEvent.type(rnInput, 'rn'); const applyButton = screen.getByRole('button', { name: 'Apply' }); - applyButton.click(); + await userEvent.click(applyButton); expect(onChange).toBeCalledTimes(1); expect(onChange).toBeCalledWith( diff --git a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx index 11e859853e7..d174380662b 100644 --- a/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx +++ b/public/app/plugins/datasource/tempo/QueryEditor/NativeSearch.test.tsx @@ -24,6 +24,14 @@ const getOptionsV1 = jest.fn().mockImplementation(() => { }); }); +// Have to mock CodeEditor else it causes act warnings +jest.mock('@grafana/ui', () => ({ + ...jest.requireActual('@grafana/ui'), + CodeEditor: function CodeEditor({ value, onSave }: { value: string; onSave: (newQuery: string) => void }) { + return onSave(event.target.value)} />; + }, +})); + jest.mock('../language_provider', () => { return jest.fn().mockImplementation(() => { return { getOptionsV1 };