From c6470be34ce41dade11f74317ce4dea1af78bc64 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Mon, 21 Feb 2022 08:25:52 +0100
Subject: [PATCH] Chore: Replace enzyme with RTL in ConfirmModal.test.tsx
 (#45651)

---
 .betterer.results                             |  3 --
 .../ConfirmModal/ConfirmModal.test.tsx        | 48 +++++++++----------
 .../components/ConfirmModal/ConfirmModal.tsx  |  5 +-
 3 files changed, 25 insertions(+), 31 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index 43a2c9bd9af..367368dd38d 100644
--- a/.betterer.results
+++ b/.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"]
     ],
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx
index e5c720b7b0d..50a9482c9af 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx
+++ b/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', () => {
-    mount(
+  it('should render correct title, body, dismiss-, alternative- and confirm-text', () => {
+    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', () => {
-    const wrapper = mount(
+  it('should render nothing when isOpen is false', () => {
+    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(wrapper.html()).toBe('');
-  });
-
-  it('renders correct contents', () => {
-    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();
+    expect(screen.queryByRole('heading', { name: 'Some Title' })).not.toBeInTheDocument();
+    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();
+    expect(screen.queryByRole('button', { name: 'Confirm Modal Danger Button' })).not.toBeInTheDocument();
   });
 });
diff --git a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx b/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
index d2c64cd404e..99d5bf676c6 100644
--- a/packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.tsx
+++ b/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 */