Chore: Replace enzyme with RTL in ConfirmModal.test.tsx (#45651)

.betterer.results

@@ -11,9 +11,6 @@ exports[`no enzyme tests`] = {
     "packages/grafana-ui/src/components/ColorPicker/NamedColorsPalette.test.tsx:1355456933": [
       [1, 31, 13, "RegExp match", "2409514259"]
     ],
-    "packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx:3838344574": [
-      [1, 17, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/FileUpload/FileUpload.test.tsx:3475964456": [
       [1, 19, 13, "RegExp match", "2409514259"]
     ],

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx

@@ -1,23 +1,34 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render, screen, within } from '@testing-library/react';
+
 import { ConfirmModal } from './ConfirmModal';
 
 describe('ConfirmModal', () => {
-  it('renders without error', () => {
+  it('should render correct title, body, dismiss-, alternative- and confirm-text', () => {
-    mount(
+    render(
       <ConfirmModal
         title="Some Title"
         body="Some Body"
-        confirmText="Confirm"
+        confirmText="Please Confirm"
+        alternativeText="Alternative Text"
+        dismissText="Dismiss Text"
         isOpen={true}
         onConfirm={() => {}}
         onDismiss={() => {}}
+        onAlternative={() => {}}
       />
     );
+
+    expect(screen.getByRole('heading', { name: 'Some Title' })).toBeInTheDocument();
+    expect(screen.getByText('Some Body')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Dismiss Text' })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Alternative Text' })).toBeInTheDocument();
+    const button = screen.getByRole('button', { name: 'Confirm Modal Danger Button' });
+    expect(within(button).getByText('Please Confirm')).toBeInTheDocument();
   });
 
-  it('renders nothing by default or when isOpen is false', () => {
+  it('should render nothing when isOpen is false', () => {
-    const wrapper = mount(
+    render(
       <ConfirmModal
         title="Some Title"
         body="Some Body"
@@ -27,26 +38,11 @@ describe('ConfirmModal', () => {
         onDismiss={() => {}}
       />
     );
-    expect(wrapper.html()).toBe('');
 
-    wrapper.setProps({ ...wrapper.props(), isOpen: false });
+    expect(screen.queryByRole('heading', { name: 'Some Title' })).not.toBeInTheDocument();
-    expect(wrapper.html()).toBe('');
+    expect(screen.queryByText('Some Body')).not.toBeInTheDocument();
-  });
+    expect(screen.queryByRole('button', { name: 'Dismiss Text' })).not.toBeInTheDocument();
-
+    expect(screen.queryByRole('button', { name: 'Alternative Text' })).not.toBeInTheDocument();
-  it('renders correct contents', () => {
+    expect(screen.queryByRole('button', { name: 'Confirm Modal Danger Button' })).not.toBeInTheDocument();
-    const wrapper = mount(
-      <ConfirmModal
-        title="Some Title"
-        body="Content"
-        confirmText="Confirm"
-        isOpen={true}
-        onConfirm={() => {}}
-        onDismiss={() => {}}
-      />
-    );
-
-    expect(wrapper.contains('Some Title')).toBeTruthy();
-    expect(wrapper.contains('Content')).toBeTruthy();
-    expect(wrapper.contains('Confirm')).toBeTruthy();
   });
 });

packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { css } from '@emotion/css';
+import { GrafanaTheme2 } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+
 import { Modal } from '../Modal/Modal';
 import { IconName } from '../../types/icon';
 import { Button } from '../Button';
 import { useStyles2 } from '../../themes';
-import { GrafanaTheme2 } from '@grafana/data';
 import { HorizontalGroup, Input } from '..';
-import { selectors } from '@grafana/e2e-selectors';
 
 export interface ConfirmModalProps {
   /** Toggle modal's open/closed state */