Dependencies: Adds @testing-library/user-event for best practices (#27397)

Adds @testing-library/user-event so that best practices can be followed
when writing tests

package.json

@@ -78,6 +78,7 @@
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
     "@testing-library/react": "^10.4.8",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/user-event": "^12.1.3",
     "@types/angular": "1.6.56",
     "@types/angular": "1.6.56",
     "@types/angular-route": "1.7.0",
     "@types/angular-route": "1.7.0",
     "@types/classnames": "2.2.9",
     "@types/classnames": "2.2.9",

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

 import React from 'react';
 import React from 'react';
 import { DataTransformerConfig, standardTransformersRegistry } from '@grafana/data';
 import { DataTransformerConfig, standardTransformersRegistry } from '@grafana/data';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { TransformationsEditor } from './TransformationsEditor';
 import { TransformationsEditor } from './TransformationsEditor';
 import { PanelModel } from '../../state';
 import { PanelModel } from '../../state';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
 import { getStandardTransformers } from 'app/core/utils/standardTransformers';
@@ -48,13 +49,7 @@ describe('TransformationsEditor', () => {
       ]);
       ]);
 
 
       const addTransformationButton = screen.getByText(buttonLabel);
       const addTransformationButton = screen.getByText(buttonLabel);
-      fireEvent(
-        addTransformationButton,
-        new MouseEvent('click', {
-          bubbles: true,
-          cancelable: true,
-        })
-      );
+      userEvent.click(addTransformationButton);
 
 
       const picker = screen.getByLabelText(selectors.components.ValuePicker.select(buttonLabel));
       const picker = screen.getByLabelText(selectors.components.ValuePicker.select(buttonLabel));
       expect(picker).toBeDefined();
       expect(picker).toBeDefined();
@@ -75,13 +70,8 @@ describe('TransformationsEditor', () => {
         expect(screen.queryByLabelText(debuggerSelector)).toBeNull();
         expect(screen.queryByLabelText(debuggerSelector)).toBeNull();
 
 
         const debugButton = screen.getByLabelText(selectors.components.QueryEditorRow.actionButton('Debug'));
         const debugButton = screen.getByLabelText(selectors.components.QueryEditorRow.actionButton('Debug'));
-        fireEvent(
-          debugButton,
-          new MouseEvent('click', {
-            bubbles: true,
-            cancelable: true,
-          })
-        );
+        userEvent.click(debugButton);
+
         expect(screen.getByLabelText(debuggerSelector)).toBeInTheDocument();
         expect(screen.getByLabelText(debuggerSelector)).toBeInTheDocument();
       });
       });
     });
     });

public/app/features/search/components/DashboardSearch.test.tsx

 import React from 'react';
 import React from 'react';
 import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
 import { render, fireEvent, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { mockSearch } from './mocks';
 import { mockSearch } from './mocks';
 import { DashboardSearch, Props } from './DashboardSearch';
 import { DashboardSearch, Props } from './DashboardSearch';
 import { searchResults } from '../testData';
 import { searchResults } from '../testData';
@@ -91,8 +92,8 @@ describe('DashboardSearch', () => {
     const tagComponent = screen.getByLabelText('Tag filter').querySelector('div') as Node;
     const tagComponent = screen.getByLabelText('Tag filter').querySelector('div') as Node;
     fireEvent.keyDown(tagComponent, { keyCode: 40 });
     fireEvent.keyDown(tagComponent, { keyCode: 40 });
 
 
-    await waitFor(() => screen.getByText('tag1'));
-    fireEvent.click(screen.getByText('tag1'));
+    const firstTag = await screen.findByText('tag1');
+    userEvent.click(firstTag);
 
 
     expect(tagComponent).toBeInTheDocument();
     expect(tagComponent).toBeInTheDocument();
 
 

yarn.lock

@@ -5535,6 +5535,13 @@
     "@babel/runtime" "^7.10.3"
     "@babel/runtime" "^7.10.3"
     "@testing-library/dom" "^7.17.1"
     "@testing-library/dom" "^7.17.1"
 
 
+"@testing-library/user-event@^12.1.3":
+  version "12.1.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.1.3.tgz#0b19022f4e59596563f3f53293d67b3ab2c394f3"
+  integrity sha512-U6tpKWbBMvqt8tIF77crr9VyP1W+yxK+c48xH5rvYwmT4MER5jvWAFqNzkn542Bt3qeDCn0aqwb0Pv+3mDbLtw==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+
 "@torkelo/react-select@3.0.8":
 "@torkelo/react-select@3.0.8":
   version "3.0.8"
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-3.0.8.tgz#04bfc877118af425f97eac2b471b66705484ee4a"
   resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-3.0.8.tgz#04bfc877118af425f97eac2b471b66705484ee4a"