feat: update tests to use new userEvent returned from render utility

grafana · Oct 11, 2023 · 117b967 · 117b967
1 parent afa7f6a
commit 117b967
Show file tree

Hide file tree

Showing 20 changed files with 392 additions and 550 deletions.
diff --git a/package.json b/package.json
@@ -38,11 +38,10 @@
     "@swc/core": "^1.3.62",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
-    "@testing-library/dom": "^7.31.2",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.4",
-    "@testing-library/react-hooks": "^7.0.0",
-    "@testing-library/user-event": "13.5.0",
+    "@testing-library/react": "14.0.0",
+    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/user-event": "14.5.1",
     "@types/eslint": "^7.2.4",
     "@types/glob": "^8.0.0",
     "@types/ip-address": "^7.0.0",
@@ -77,8 +76,6 @@
     "jest-environment-jsdom-fifteen": "^1.0.2",
     "pa11y": "^6.1.1",
     "prettier": "^2.8.7",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
     "release-it": "^14.8.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
     "sass": "1.63.2",
@@ -106,15 +103,18 @@
     "ip-address": "^7.1.0",
     "is-base64": "^1.1.0",
     "punycode": "^2.1.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
     "react-async-hook": "^3.6.1",
-    "react-dom": "17.0.2",
+    "react-dom": "18.2.0",
     "react-hook-form": "7.2.3",
     "react-popper": "^2.2.5",
     "react-router-dom": "^5.2.0",
     "react-simple-maps": "^2.3.0",
     "valid-url": "^1.0.9",
     "yaml": "^2.2.2"
   },
-  "packageManager": "yarn@1.22.19"
+  "packageManager": "yarn@1.22.19",
+  "resolutions": {
+    "@testing-library/dom": "9.0.0"
+  }
 }
diff --git a/src/components/Alerting.test.tsx b/src/components/Alerting.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import userEvent from '@testing-library/user-event';
 import { DataSourceSettings } from '@grafana/data';
 import { screen, waitFor, within } from '@testing-library/react';
+import { type UserEvent } from '@testing-library/user-event';
 
 import { render } from 'test/render';
 import { Alerting } from 'components/Alerting';
@@ -37,7 +37,7 @@ jest.setTimeout(30000);
 const setDefaultRules = jest.fn();
 const setRules = jest.fn().mockImplementation(() => Promise.resolve({ ok: true }));
 
-const renderAlerting = async ({ withAlerting = true } = {}) => {
+const renderAlerting = ({ withAlerting = true } = {}) => {
   return render(<Alerting />, {
     instance: {
       alertRuler: withAlerting ? ({ url: 'alertUrl' } as unknown as DataSourceSettings) : undefined,
@@ -47,63 +47,64 @@ const renderAlerting = async ({ withAlerting = true } = {}) => {
 
 // const mockAlertsHook = () => {};
 
-const toggleSection = async (sectionName: string): Promise<HTMLElement> => {
+const toggleSection = async (sectionName: string, user: UserEvent): Promise<HTMLElement> => {
   const sectionHeader = await screen.findByText(sectionName);
-  userEvent.click(sectionHeader);
+  await user.click(sectionHeader);
   return sectionHeader.parentElement?.parentElement ?? new HTMLElement();
 };
 
 it('adds default alerts and edits alerts', async () => {
   // mockAlertsHook();
-  await renderAlerting();
+  const { user } = renderAlerting();
   const defaultAlertButton = await screen.findByRole('button', { name: 'Populate default alerts' });
-  userEvent.click(defaultAlertButton);
+  await user.click(defaultAlertButton);
   await waitFor(() => expect(defaultAlertButton).not.toBeDisabled());
   expect(setDefaultRules).toHaveBeenCalledTimes(1);
 
   const button = await screen.findByRole('button', {
     name: DEFAULT_ALERT_NAMES_BY_FAMILY_AND_SENSITIVITY[AlertFamily.ProbeSuccess][AlertSensitivity.High],
   });
-  userEvent.click(button);
+  await user.click(button);
 
   const alertNameInput = await screen.findByLabelText('Alert name');
   expect(alertNameInput).toHaveValue(
     DEFAULT_ALERT_NAMES_BY_FAMILY_AND_SENSITIVITY[AlertFamily.ProbeSuccess][AlertSensitivity.High]
   );
-  await userEvent.clear(alertNameInput);
-  await userEvent.type(alertNameInput, 'A different name');
+  await user.clear(alertNameInput);
+  await user.type(alertNameInput, 'A different name');
 
   const probePercentage = await screen.findByTestId('probePercentage');
   expect(probePercentage).toHaveValue(95);
-  await userEvent.clear(probePercentage);
-  await userEvent.type(probePercentage, '25');
+  await user.clear(probePercentage);
+  await user.type(probePercentage, '25');
 
   const timeCount = await screen.findByTestId('timeCount');
   expect(timeCount).toHaveValue(5);
-  await userEvent.clear(timeCount);
-  await userEvent.type(timeCount, '2');
+  await user.clear(timeCount);
+  await user.type(timeCount, '2');
 
   const timeUnit = await screen.findAllByTestId('select');
-  userEvent.selectOptions(timeUnit[1], 's');
+  await user.selectOptions(timeUnit[1], 's');
 
-  const labels = await toggleSection('Labels');
+  const labels = await toggleSection('Labels', user);
   const addLabelButton = await within(labels).findByRole('button', { name: 'Add label' });
-  userEvent.click(addLabelButton);
+  await user.click(addLabelButton);
   const labelNameInputs = await within(labels).findAllByPlaceholderText('Name');
-  await userEvent.type(labelNameInputs[labelNameInputs.length - 1], 'a_label_name');
+  await user.type(labelNameInputs[labelNameInputs.length - 1], 'a_label_name');
   const labelValueInputs = await within(labels).findAllByPlaceholderText('Value');
-  await userEvent.type(labelValueInputs[labelValueInputs.length - 1], 'a_label_value');
+  await user.type(labelValueInputs[labelValueInputs.length - 1], 'a_label_value');
 
-  const annotations = await toggleSection('Annotations');
+  const annotations = await toggleSection('Annotations', user);
   const addAnnotationsButton = await within(annotations).findByRole('button', { name: 'Add annotation' });
-  userEvent.click(addAnnotationsButton);
+  await user.click(addAnnotationsButton);
   const annotationNameInputs = await within(annotations).findAllByPlaceholderText('Name');
-  await userEvent.type(annotationNameInputs[annotationNameInputs.length - 1], 'an_annotation_name');
+  await user.type(annotationNameInputs[annotationNameInputs.length - 1], 'an_annotation_name');
   const annotationValueInputs = await within(annotations).findAllByPlaceholderText('Value');
-  userEvent.paste(annotationValueInputs[annotationValueInputs.length - 1], 'an annotation value');
+  annotationValueInputs[annotationValueInputs.length - 1].focus();
+  await user.paste('an annotation value');
 
   const submitButton = await screen.findByRole('button', { name: 'Save alert' });
-  userEvent.click(submitButton);
+  await user.click(submitButton);
   await waitFor(() => {
     expect(setRules).toHaveBeenCalledTimes(1);
   });

diff --git a/src/components/BulkEditModal/BulkEditModal.test.tsx b/src/components/BulkEditModal/BulkEditModal.test.tsx
@@ -1,7 +1,5 @@
 import React from 'react';
 import { screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { act } from '@testing-library/react-hooks';
 
 import { render, createInstance } from 'test/render';
 import { IpVersion, FilteredCheck } from 'types';
@@ -90,7 +88,7 @@ const selectedChecksMultiProbe = jest.fn().mockReturnValue([
 const renderBulkEditModal = (action: 'add' | 'remove' | null, selectedChecks: () => FilteredCheck[]) => {
   const instance = createInstance();
 
-  render(
+  return render(
     <SuccessRateContextProvider checks={[]}>
       <BulkEditModal
         onDismiss={onDismiss}
@@ -106,8 +104,6 @@ const renderBulkEditModal = (action: 'add' | 'remove' | null, selectedChecks: ()
       instance,
     }
   );
-
-  return instance;
 };
 
 test('shows the modal', async () => {
@@ -119,15 +115,14 @@ test('shows the modal', async () => {
 });
 
 test('successfully adds probes', async () => {
-  const instance = renderBulkEditModal('add', selectedChecksSingleProbe);
-  await act(async () => {
-    const burritoProbe = await screen.findByText('burritos');
-    const tacoProbe = await screen.findByText('tacos');
-    userEvent.click(burritoProbe);
-    userEvent.click(tacoProbe);
-    const submitButton = await screen.findByText('Submit');
-    userEvent.click(submitButton);
-  });
+  const { instance, user } = renderBulkEditModal('add', selectedChecksSingleProbe);
+  const burritoProbe = await screen.findByText('burritos');
+  const tacoProbe = await screen.findByText('tacos');
+  await user.click(burritoProbe);
+  await user.click(tacoProbe);
+  const submitButton = await screen.findByText('Submit');
+  await user.click(submitButton);
+
   expect(instance.api?.bulkUpdateChecks).toHaveBeenCalledWith([
     {
       job: '',
@@ -167,14 +162,13 @@ test('successfully adds probes', async () => {
 });
 
 test('successfully removes probes', async () => {
-  const instance = renderBulkEditModal('remove', selectedChecksMultiProbe);
+  const { instance, user } = renderBulkEditModal('remove', selectedChecksMultiProbe);
   expect(instance.api?.listProbes).toHaveBeenCalled();
-  await act(async () => {
-    const burritoProbe = await screen.findByText('burritos');
-    userEvent.click(burritoProbe);
-    const submitButton = await screen.findByText('Submit');
-    userEvent.click(submitButton);
-  });
+  const burritoProbe = await screen.findByText('burritos');
+  await user.click(burritoProbe);
+  const submitButton = await screen.findByText('Submit');
+  await user.click(submitButton);
+
   expect(instance.api?.bulkUpdateChecks).toHaveBeenCalledWith([
     {
       job: '',