Upgrade @testing-library/user-event to v14 (#47898)

* Update dependency @testing-library/user-event to v14

* everything is async...

* everything is async pt.2

* Fix cascader tests

* hack the yarn.lock file to remove the old version of @testing-library/dom

* some more fixes!

* MOAR FIXES

* more fixes

* remove a bunch of places where we're wrapping in act()

* down to 7 failing tests...

* Fix arrow tests

* Fix rest of NavBarItem tests

* Fix last tests

* Use {Enter} instead of {enter}

* Revert "Use {Enter} instead of {enter}"

This reverts commit e72453bb52.

* remove some unused act imports

* Fix LibraryPanelsSearch tests

* more stable test

* More consistent test...

Co-authored-by: Renovate Bot <bot@renovateapp.com>

public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx

@@ -76,7 +76,7 @@ describe('AnnotationsSettings', () => {
     };
   });
 
-  test('it renders a header and cta if no annotations or only builtIn annotation', () => {
+  test('it renders a header and cta if no annotations or only builtIn annotation', async () => {
     render(<AnnotationsSettings dashboard={dashboard} />);
 
     expect(screen.getByRole('heading', { name: /annotations/i })).toBeInTheDocument();
@@ -87,7 +87,7 @@ describe('AnnotationsSettings', () => {
     ).toBeInTheDocument();
     expect(screen.queryByRole('link', { name: /annotations documentation/i })).toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('cell', { name: /annotations & alerts \(built\-in\)/i }));
+    await userEvent.click(screen.getByRole('cell', { name: /annotations & alerts \(built\-in\)/i }));
 
     const heading = screen.getByRole('heading', {
       name: /annotations edit/i,
@@ -96,13 +96,13 @@ describe('AnnotationsSettings', () => {
 
     expect(heading).toBeInTheDocument();
 
-    userEvent.clear(nameInput);
-    userEvent.type(nameInput, 'My Annotation');
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'My Annotation');
 
     expect(screen.queryByText(/grafana/i)).toBeInTheDocument();
     expect(screen.getByRole('checkbox', { name: /hidden/i })).toBeChecked();
 
-    userEvent.click(within(heading).getByText(/annotations/i));
+    await userEvent.click(within(heading).getByText(/annotations/i));
 
     expect(screen.getByRole('table')).toBeInTheDocument();
     expect(screen.getByRole('row', { name: /my annotation \(built\-in\) grafana/i })).toBeInTheDocument();
@@ -111,8 +111,8 @@ describe('AnnotationsSettings', () => {
     ).toBeInTheDocument();
     expect(screen.queryByRole('button', { name: /new query/i })).not.toBeInTheDocument();
 
-    userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
-    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(screen.queryAllByRole('row').length).toBe(0);
     expect(
@@ -120,7 +120,7 @@ describe('AnnotationsSettings', () => {
     ).toBeInTheDocument();
   });
 
-  test('it renders a sortable table of annotations', () => {
+  test('it renders a sortable table of annotations', async () => {
     const annotationsList = [
       ...dashboard.annotations.list,
       {
@@ -164,9 +164,9 @@ describe('AnnotationsSettings', () => {
     expect(within(getTableBodyRows()[1]).queryByText(/annotation 2/i)).toBeInTheDocument();
     expect(within(getTableBodyRows()[2]).queryByText(/annotation 3/i)).toBeInTheDocument();
 
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]);
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]);
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]);
 
     // Checking if it has changed the sorting accordingly
     expect(within(getTableBodyRows()[0]).queryByText(/annotation 3/i)).toBeInTheDocument();
@@ -177,7 +177,7 @@ describe('AnnotationsSettings', () => {
   test('it renders a form for adding/editing annotations', async () => {
     render(<AnnotationsSettings dashboard={dashboard} />);
 
-    userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')));
+    await userEvent.click(screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query')));
 
     const heading = screen.getByRole('heading', {
       name: /annotations edit/i,
@@ -186,19 +186,19 @@ describe('AnnotationsSettings', () => {
 
     expect(heading).toBeInTheDocument();
 
-    userEvent.clear(nameInput);
-    userEvent.type(nameInput, 'My Prometheus Annotation');
+    await userEvent.clear(nameInput);
+    await userEvent.type(nameInput, 'My Prometheus Annotation');
 
-    userEvent.click(screen.getByText(/testdata/i));
+    await userEvent.click(screen.getByText(/testdata/i));
 
     expect(await screen.findByText(/Prometheus/i)).toBeVisible();
     expect(screen.queryAllByText(/testdata/i)).toHaveLength(2);
 
-    userEvent.click(screen.getByText(/prometheus/i));
+    await userEvent.click(screen.getByText(/prometheus/i));
 
     expect(screen.getByRole('checkbox', { name: /hidden/i })).not.toBeChecked();
 
-    userEvent.click(within(heading).getByText(/annotations/i));
+    await userEvent.click(within(heading).getByText(/annotations/i));
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2);
     expect(screen.queryByRole('row', { name: /my prometheus annotation prometheus/i })).toBeInTheDocument();
@@ -207,14 +207,14 @@ describe('AnnotationsSettings', () => {
       screen.queryByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))
     ).not.toBeInTheDocument();
 
-    userEvent.click(screen.getByRole('button', { name: /new query/i }));
+    await userEvent.click(screen.getByRole('button', { name: /new query/i }));
 
-    userEvent.click(within(screen.getByRole('heading', { name: /annotations edit/i })).getByText(/annotations/i));
+    await userEvent.click(within(screen.getByRole('heading', { name: /annotations edit/i })).getByText(/annotations/i));
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(3);
 
-    userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
-    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+    await userEvent.click(screen.getAllByLabelText(/Delete query with title/)[0]);
+    await userEvent.click(screen.getByRole('button', { name: 'Delete' }));
 
     expect(within(screen.getAllByRole('rowgroup')[1]).getAllByRole('row').length).toBe(2);
   });

public/app/features/dashboard/components/DashboardSettings/AutoRefreshIntervals.test.tsx

@@ -49,11 +49,11 @@ describe('AutoRefreshIntervals', () => {
   });
 
   describe('when input loses focus and intervals are valid', () => {
-    it('then onRefreshIntervalChange should be called', () => {
+    it('then onRefreshIntervalChange should be called', async () => {
       const { props } = setupTestContext({ validateIntervalsFunc: () => null });
 
-      userEvent.type(screen.getByRole('textbox'), ',30s');
-      userEvent.tab();
+      await userEvent.type(screen.getByRole('textbox'), ',30s');
+      await userEvent.tab();
 
       expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s');
       expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1);
@@ -62,11 +62,11 @@ describe('AutoRefreshIntervals', () => {
   });
 
   describe('when input loses focus and intervals are invalid', () => {
-    it('then onRefreshIntervalChange should not be called', () => {
+    it('then onRefreshIntervalChange should not be called', async () => {
       const { props } = setupTestContext({ validateIntervalsFunc: () => 'Not valid' });
 
-      userEvent.type(screen.getByRole('textbox'), ',30q');
-      userEvent.tab();
+      await userEvent.type(screen.getByRole('textbox'), ',30q');
+      await userEvent.tab();
 
       expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30q');
       expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(0);
@@ -74,14 +74,14 @@ describe('AutoRefreshIntervals', () => {
   });
 
   describe('when input loses focus and previous intervals were invalid', () => {
-    it('then onRefreshIntervalChange should be called', () => {
+    it('then onRefreshIntervalChange should be called', async () => {
       const validateIntervalsFunc = jest.fn().mockReturnValueOnce('Not valid').mockReturnValue(null);
       const { props } = setupTestContext({ validateIntervalsFunc });
 
-      userEvent.type(screen.getByRole('textbox'), ',30q');
-      userEvent.tab();
-      userEvent.type(screen.getByRole('textbox'), '{backspace}s');
-      userEvent.tab();
+      await userEvent.type(screen.getByRole('textbox'), ',30q');
+      await userEvent.tab();
+      await userEvent.type(screen.getByRole('textbox'), '{backspace}s');
+      await userEvent.tab();
 
       expect(screen.getByRole('textbox')).toHaveValue('1s,5s,10s,30s');
       expect(props.onRefreshIntervalChange).toHaveBeenCalledTimes(1);

public/app/features/dashboard/components/DashboardSettings/GeneralSettings.test.tsx

@@ -48,9 +48,9 @@ describe('General Settings', () => {
   describe('when timezone is changed', () => {
     it('should call update function', async () => {
       const { props } = setupTestContext({});
-      userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
+      await userEvent.click(screen.getByTestId(selectors.components.TimeZonePicker.containerV2));
       const timeZonePicker = screen.getByTestId(selectors.components.TimeZonePicker.containerV2);
-      userEvent.click(byRole('combobox').get(timeZonePicker));
+      await userEvent.click(byRole('combobox').get(timeZonePicker));
       await selectOptionInTest(timeZonePicker, 'Browser Time');
       expect(props.updateTimeZone).toHaveBeenCalledWith('browser');
       expect(props.dashboard.timezone).toBe('browser');

public/app/features/dashboard/components/DashboardSettings/LinksSettings.test.tsx

@@ -84,7 +84,7 @@ describe('LinksSettings', () => {
     ).not.toBeInTheDocument();
   });
 
-  test('it rearranges the order of dashboard links', () => {
+  test('it rearranges the order of dashboard links', async () => {
     // @ts-ignore
     render(<LinksSettings dashboard={dashboard} />);
 
@@ -103,9 +103,9 @@ describe('LinksSettings', () => {
     assertRowHasText(1, links[1].title);
     assertRowHasText(2, links[2].url);
 
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]);
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]);
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[0]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-down' })[1]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: 'arrow-up' })[0]);
 
     // Checking if it has changed the sorting accordingly
     assertRowHasText(0, links[2].url);
@@ -113,35 +113,35 @@ describe('LinksSettings', () => {
     assertRowHasText(2, links[0].title);
   });
 
-  test('it duplicates dashboard links', () => {
+  test('it duplicates dashboard links', async () => {
     // @ts-ignore
     render(<LinksSettings dashboard={dashboard} />);
 
     expect(getTableBodyRows().length).toBe(links.length);
 
-    userEvent.click(within(getTableBody()).getAllByRole('button', { name: /copy/i })[0]);
+    await userEvent.click(within(getTableBody()).getAllByRole('button', { name: /copy/i })[0]);
 
     expect(getTableBodyRows().length).toBe(links.length + 1);
     expect(within(getTableBody()).getAllByText(links[0].title).length).toBe(2);
   });
 
-  test('it deletes dashboard links', () => {
+  test('it deletes dashboard links', async () => {
     // @ts-ignore
     render(<LinksSettings dashboard={dashboard} />);
 
     expect(getTableBodyRows().length).toBe(links.length);
 
-    userEvent.click(within(getTableBody()).getAllByLabelText(/Delete link with title/)[0]);
-    userEvent.click(within(getTableBody()).getByRole('button', { name: 'Delete' }));
+    await userEvent.click(within(getTableBody()).getAllByLabelText(/Delete link with title/)[0]);
+    await userEvent.click(within(getTableBody()).getByRole('button', { name: 'Delete' }));
 
     expect(getTableBodyRows().length).toBe(links.length - 1);
     expect(within(getTableBody()).queryByText(links[0].title)).not.toBeInTheDocument();
   });
 
-  test('it renders a form which modifies dashboard links', () => {
+  test('it renders a form which modifies dashboard links', async () => {
     // @ts-ignore
     render(<LinksSettings dashboard={dashboard} />);
-    userEvent.click(screen.getByRole('button', { name: /new/i }));
+    await userEvent.click(screen.getByRole('button', { name: /new/i }));
 
     expect(screen.queryByText('Type')).toBeInTheDocument();
     expect(screen.queryByText('Title')).toBeInTheDocument();
@@ -151,29 +151,29 @@ describe('LinksSettings', () => {
     expect(screen.queryByText('Tooltip')).not.toBeInTheDocument();
     expect(screen.queryByText('Icon')).not.toBeInTheDocument();
 
-    userEvent.click(screen.getByText('Dashboards'));
+    await userEvent.click(screen.getByText('Dashboards'));
     expect(screen.queryAllByText('Dashboards')).toHaveLength(2);
     expect(screen.queryByText('Link')).toBeVisible();
 
-    userEvent.click(screen.getByText('Link'));
+    await userEvent.click(screen.getByText('Link'));
 
     expect(screen.queryByText('URL')).toBeInTheDocument();
     expect(screen.queryByText('Tooltip')).toBeInTheDocument();
     expect(screen.queryByText('Icon')).toBeInTheDocument();
 
-    userEvent.clear(screen.getByRole('textbox', { name: /title/i }));
-    userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'New Dashboard Link');
-    userEvent.click(
+    await userEvent.clear(screen.getByRole('textbox', { name: /title/i }));
+    await userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'New Dashboard Link');
+    await userEvent.click(
       within(screen.getByRole('heading', { name: /dashboard links edit/i })).getByText(/dashboard links/i)
     );
 
     expect(getTableBodyRows().length).toBe(links.length + 1);
     expect(within(getTableBody()).queryByText('New Dashboard Link')).toBeInTheDocument();
 
-    userEvent.click(screen.getAllByText(links[0].type)[0]);
-    userEvent.clear(screen.getByRole('textbox', { name: /title/i }));
-    userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'The first dashboard link');
-    userEvent.click(
+    await userEvent.click(screen.getAllByText(links[0].type)[0]);
+    await userEvent.clear(screen.getByRole('textbox', { name: /title/i }));
+    await userEvent.type(screen.getByRole('textbox', { name: /title/i }), 'The first dashboard link');
+    await userEvent.click(
       within(screen.getByRole('heading', { name: /dashboard links edit/i })).getByText(/dashboard links/i)
     );
 

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(<VersionsSettings dashboard={dashboard} />);
 
@@ -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 });
-    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];
-    userEvent.click(within(tableBody).getAllByRole('checkbox')[0]);
-    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();
 
-    userEvent.click(within(tableBody).getAllByRole('checkbox')[1]);
+    await user.click(within(tableBody).getAllByRole('checkbox')[1]);
 
     expect(compareButton).toBeDisabled();
 
-    userEvent.click(within(tableBody).getAllByRole('checkbox')[1]);
-    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();
 
-    userEvent.click(screen.getByText(/view json diff/i));
+    await user.click(screen.getByText(/view json diff/i));
 
     await waitFor(() => expect(screen.getByRole('table')).toBeInTheDocument());
   });

public/app/features/dashboard/components/PanelEditor/PanelNotSupported.test.tsx

@@ -28,9 +28,9 @@ describe('PanelNotSupported', () => {
   });
 
   describe('when the back to queries button is clicked', () => {
-    it('then correct action should be dispatched', () => {
+    it('then correct action should be dispatched', async () => {
       setupTestContext({});
-      userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
+      await userEvent.click(screen.getByRole('button', { name: /go back to queries/i }));
       expect(locationService.getSearchObject().tab).toBe(PanelEditorTabId.Query);
     });
   });

public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx

@@ -33,13 +33,13 @@ describe('TransformationsEditor', () => {
           options: {},
         },
       ]);
-      const editors = screen.getAllByLabelText(/^Transformation editor/g);
+      const editors = screen.getAllByLabelText(/^Transformation editor/);
       expect(editors).toHaveLength(1);
     });
   });
 
   describe('when Add transformation clicked', () => {
-    it('renders transformations picker', () => {
+    it('renders transformations picker', async () => {
       const buttonLabel = 'Add transformation';
       setup([
         {
@@ -49,7 +49,7 @@ describe('TransformationsEditor', () => {
       ]);
 
       const addTransformationButton = screen.getByText(buttonLabel);
-      userEvent.click(addTransformationButton);
+      await userEvent.click(addTransformationButton);
 
       const search = screen.getByLabelText(selectors.components.Transforms.searchInput);
       expect(search).toBeDefined();
@@ -58,7 +58,7 @@ describe('TransformationsEditor', () => {
 
   describe('actions', () => {
     describe('debug', () => {
-      it('should show/hide debugger', () => {
+      it('should show/hide debugger', async () => {
         setup([
           {
             id: 'reduce',
@@ -70,7 +70,7 @@ describe('TransformationsEditor', () => {
         expect(screen.queryByLabelText(debuggerSelector)).toBeNull();
 
         const debugButton = screen.getByLabelText(selectors.components.QueryEditorRow.actionButton('Debug'));
-        userEvent.click(debugButton);
+        await userEvent.click(debugButton);
 
         expect(screen.getByLabelText(debuggerSelector)).toBeInTheDocument();
       });