diff --git a/package.json b/package.json index 066aa3b906d..198745acd77 100644 --- a/package.json +++ b/package.json @@ -78,6 +78,7 @@ "@testing-library/jest-dom": "^5.11.3", "@testing-library/react": "^10.4.8", "@testing-library/react-hooks": "^3.2.1", + "@testing-library/user-event": "^12.1.3", "@types/angular": "1.6.56", "@types/angular-route": "1.7.0", "@types/classnames": "2.2.9", diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx index 4615f104f74..4d1920eed50 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; 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 { PanelModel } from '../../state'; import { getStandardTransformers } from 'app/core/utils/standardTransformers'; @@ -48,13 +49,7 @@ describe('TransformationsEditor', () => { ]); 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)); expect(picker).toBeDefined(); @@ -75,13 +70,8 @@ describe('TransformationsEditor', () => { expect(screen.queryByLabelText(debuggerSelector)).toBeNull(); 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(); }); }); diff --git a/public/app/features/search/components/DashboardSearch.test.tsx b/public/app/features/search/components/DashboardSearch.test.tsx index 210f4a3dc3e..ea8ab5ac6f8 100644 --- a/public/app/features/search/components/DashboardSearch.test.tsx +++ b/public/app/features/search/components/DashboardSearch.test.tsx @@ -1,5 +1,6 @@ import React from 'react'; import { render, fireEvent, screen, waitFor, act } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { mockSearch } from './mocks'; import { DashboardSearch, Props } from './DashboardSearch'; import { searchResults } from '../testData'; @@ -91,8 +92,8 @@ describe('DashboardSearch', () => { const tagComponent = screen.getByLabelText('Tag filter').querySelector('div') as Node; 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(); diff --git a/yarn.lock b/yarn.lock index d4c4013f540..479385396be 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5535,6 +5535,13 @@ "@babel/runtime" "^7.10.3" "@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": version "3.0.8" resolved "https://registry.yarnpkg.com/@torkelo/react-select/-/react-select-3.0.8.tgz#04bfc877118af425f97eac2b471b66705484ee4a"