diff --git a/public/app/core/components/NavBar/NavBarItem.test.tsx b/public/app/core/components/NavBar/NavBarItem.test.tsx
index 69d1b575de4..e0c27b55b76 100644
--- a/public/app/core/components/NavBar/NavBarItem.test.tsx
+++ b/public/app/core/components/NavBar/NavBarItem.test.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { act, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { BrowserRouter } from 'react-router-dom';
import { locationUtil } from '@grafana/data';
diff --git a/public/app/features/alerting/unified/RuleEditor.test.tsx b/public/app/features/alerting/unified/RuleEditor.test.tsx
index c0b3c238c87..f626e154d5f 100644
--- a/public/app/features/alerting/unified/RuleEditor.test.tsx
+++ b/public/app/features/alerting/unified/RuleEditor.test.tsx
@@ -366,7 +366,6 @@ describe('RuleEditor', () => {
// fix name and re-submit
await userEvent.clear(await ui.inputs.name.find());
await userEvent.type(await ui.inputs.name.find(), 'my:great:new:recording:rule');
- await userEvent.click(ui.buttons.save.get());
// save and check what was sent to backend
await userEvent.click(ui.buttons.save.get());
diff --git a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
index c85c9d25de5..2c312ec181c 100644
--- a/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
+++ b/public/app/features/dashboard/components/DashboardSettings/VersionsSettings.test.tsx
@@ -6,6 +6,7 @@ import userEvent from '@testing-library/user-event';
import { historySrv } from '../VersionHistory/HistorySrv';
import { VersionsSettings, VERSIONS_FETCH_LIMIT } from './VersionsSettings';
import { versions, diffs } from './__mocks__/versions';
+import { UserEvent } from '@testing-library/user-event/dist/types/setup';
jest.mock('../VersionHistory/HistorySrv');
@@ -28,8 +29,18 @@ describe('VersionSettings', () => {
getRelativeTime: jest.fn(() => 'time ago'),
};
+ let user: UserEvent;
+
beforeEach(() => {
+ // Need to use delay: null here to work with fakeTimers
+ // see https://github.com/testing-library/user-event/issues/833
+ user = userEvent.setup({ delay: null });
jest.resetAllMocks();
+ jest.useFakeTimers();
+ });
+
+ afterEach(() => {
+ jest.useRealTimers();
});
test('renders a header and a loading indicator followed by results in a table', async () => {
@@ -102,7 +113,9 @@ describe('VersionSettings', () => {
historySrv.getHistoryList
// @ts-ignore
.mockImplementationOnce(() => Promise.resolve(versions.slice(0, VERSIONS_FETCH_LIMIT)))
- .mockImplementationOnce(() => Promise.resolve(versions.slice(VERSIONS_FETCH_LIMIT, versions.length)));
+ .mockImplementationOnce(
+ () => new Promise((resolve) => setTimeout(() => resolve(versions.slice(VERSIONS_FETCH_LIMIT)), 1000))
+ );
render();
@@ -113,14 +126,16 @@ describe('VersionSettings', () => {
expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(VERSIONS_FETCH_LIMIT);
const showMoreButton = screen.getByRole('button', { name: /show more versions/i });
- await userEvent.click(showMoreButton);
+ await user.click(showMoreButton);
expect(historySrv.getHistoryList).toBeCalledTimes(2);
- expect(screen.queryByText(/Fetching more entries/i)).toBeInTheDocument();
+ expect(screen.getByText(/Fetching more entries/i)).toBeInTheDocument();
+ jest.advanceTimersByTime(1000);
- await waitFor(() =>
- expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(versions.length)
- );
+ await waitFor(() => {
+ expect(screen.queryByText(/Fetching more entries/i)).not.toBeInTheDocument();
+ expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(versions.length);
+ });
});
test('selecting two versions and clicking compare button should render compare view', async () => {
@@ -139,17 +154,17 @@ describe('VersionSettings', () => {
const compareButton = screen.getByRole('button', { name: /compare versions/i });
const tableBody = screen.getAllByRole('rowgroup')[1];
- await userEvent.click(within(tableBody).getAllByRole('checkbox')[0]);
- await userEvent.click(within(tableBody).getAllByRole('checkbox')[VERSIONS_FETCH_LIMIT - 1]);
+ await user.click(within(tableBody).getAllByRole('checkbox')[0]);
+ await user.click(within(tableBody).getAllByRole('checkbox')[VERSIONS_FETCH_LIMIT - 1]);
expect(compareButton).toBeEnabled();
- await userEvent.click(within(tableBody).getAllByRole('checkbox')[1]);
+ await user.click(within(tableBody).getAllByRole('checkbox')[1]);
expect(compareButton).toBeDisabled();
- await userEvent.click(within(tableBody).getAllByRole('checkbox')[1]);
- await userEvent.click(compareButton);
+ await user.click(within(tableBody).getAllByRole('checkbox')[1]);
+ await user.click(compareButton);
await waitFor(() => expect(screen.getByRole('heading', { name: /versions comparing 2 11/i })).toBeInTheDocument());
@@ -170,7 +185,7 @@ describe('VersionSettings', () => {
expect(queryByFullText('version changed')).toBeInTheDocument();
expect(screen.queryByText(/view json diff/i)).toBeInTheDocument();
- await userEvent.click(screen.getByText(/view json diff/i));
+ await user.click(screen.getByText(/view json diff/i));
await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
});
diff --git a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx
index cf9abd36752..bef4be765e6 100644
--- a/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx
+++ b/public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.test.tsx
@@ -75,6 +75,7 @@ async function getTestContext(
await waitFor(() => expect(getLibraryPanelsSpy).toHaveBeenCalled());
expect(getLibraryPanelsSpy).toHaveBeenCalledTimes(1);
+ jest.clearAllMocks();
return { rerender, getLibraryPanelsSpy, getSpy, getAllPanelPluginMetaSpy };
}
@@ -91,7 +92,6 @@ describe('LibraryPanelsSearch', () => {
describe('and user searches for library panel by name or description', () => {
it('should call api with correct params', async () => {
const { getLibraryPanelsSpy } = await getTestContext();
- getLibraryPanelsSpy.mockClear();
await userEvent.type(screen.getByPlaceholderText(/search by name/i), 'a');
await waitFor(() => expect(getLibraryPanelsSpy).toHaveBeenCalled());
@@ -119,7 +119,6 @@ describe('LibraryPanelsSearch', () => {
describe('and user changes sorting', () => {
it('should call api with correct params', async () => {
const { getLibraryPanelsSpy } = await getTestContext({ showSort: true });
- getLibraryPanelsSpy.mockClear();
await userEvent.type(screen.getByText(/sort \(default a–z\)/i), 'Desc{enter}');
await waitFor(() => expect(getLibraryPanelsSpy).toHaveBeenCalledTimes(1));
@@ -147,7 +146,6 @@ describe('LibraryPanelsSearch', () => {
describe('and user changes panel filter', () => {
it('should call api with correct params', async () => {
const { getLibraryPanelsSpy } = await getTestContext({ showPanelFilter: true });
- getLibraryPanelsSpy.mockClear();
await userEvent.type(screen.getByRole('combobox', { name: /panel type filter/i }), 'Graph{enter}');
await userEvent.type(screen.getByRole('combobox', { name: /panel type filter/i }), 'Time Series{enter}');
@@ -175,7 +173,6 @@ describe('LibraryPanelsSearch', () => {
describe('and user changes folder filter', () => {
it('should call api with correct params', async () => {
const { getLibraryPanelsSpy } = await getTestContext({ showFolderFilter: true });
- getLibraryPanelsSpy.mockClear();
await userEvent.click(screen.getByRole('combobox', { name: /folder filter/i }));
await userEvent.type(screen.getByRole('combobox', { name: /folder filter/i }), '{enter}', {
diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
index 596a716e536..848c2002110 100644
--- a/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
+++ b/public/app/features/variables/inspect/VariablesUnknownTable.test.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import * as runtime from '@grafana/runtime';
-import { render, screen, waitFor, waitForElementToBeRemoved } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { VariablesUnknownTable, VariablesUnknownTableProps } from './VariablesUnknownTable';
@@ -36,13 +36,6 @@ describe('VariablesUnknownTable', () => {
});
describe('when expanding the section', () => {
- it('then it should show loading spinner', async () => {
- await getTestContext();
-
- await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
- await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
- });
-
it('then it should call getUnknownsNetwork', async () => {
const { getUnknownsNetworkSpy } = await getTestContext();
@@ -54,7 +47,6 @@ describe('VariablesUnknownTable', () => {
const { reportInteractionSpy } = await getTestContext();
await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
- await waitFor(() => expect(screen.getByText('Loading...')).toBeInTheDocument());
expect(reportInteractionSpy).toHaveBeenCalledTimes(1);
expect(reportInteractionSpy).toHaveBeenCalledWith('Unknown variables section expanded');
@@ -83,7 +75,6 @@ describe('VariablesUnknownTable', () => {
await getTestContext();
await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
- await waitForElementToBeRemoved(() => screen.getByText('Loading...'));
expect(screen.getByText('No renamed or missing variables found.')).toBeInTheDocument();
});
@@ -96,7 +87,6 @@ describe('VariablesUnknownTable', () => {
const { reportInteractionSpy } = await getTestContext({}, usages);
await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
- await waitForElementToBeRemoved(() => screen.getByText('Loading...'));
expect(screen.queryByText('No renamed or missing variables found.')).not.toBeInTheDocument();
expect(screen.getByText('Renamed Variable')).toBeInTheDocument();
@@ -117,13 +107,19 @@ describe('VariablesUnknownTable', () => {
it('then it should report slow expansion', async () => {
const variable = customBuilder().withId('Renamed Variable').withName('Renamed Variable').build();
const usages = [{ variable, nodes: [], edges: [], showGraph: false }];
- const { reportInteractionSpy } = await getTestContext({}, usages);
+ const { reportInteractionSpy, rerender } = await getTestContext({}, usages);
const dateNowStart = 1000;
const dateNowStop = 2000;
Date.now = jest.fn().mockReturnValueOnce(dateNowStart).mockReturnValue(dateNowStop);
await userEvent.click(screen.getByRole('heading', { name: /renamed or missing variables/i }));
- await waitForElementToBeRemoved(() => screen.getByText('Loading...'));
+ const props: VariablesUnknownTableProps = {
+ variables: [],
+ dashboard: null,
+ };
+ await act(async () => {
+ rerender();
+ });
// make sure we report the interaction for slow expansion
expect(reportInteractionSpy).toHaveBeenCalledTimes(2);