From 6584735beffb380560ae2b52f8149dbfb23fcdf6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hugo=20H=C3=A4ggmark?= <hugo.haggmark@gmail.com>
Date: Wed, 16 Feb 2022 09:46:46 +0100
Subject: [PATCH] Chore: Replaces enzyme with RTL in ConfirmButton.test.tsx
 (#45435)

---
 .betterer.results                             |  3 -
 .../ConfirmButton/ConfirmButton.test.tsx      | 84 ++++++++++++++-----
 2 files changed, 61 insertions(+), 26 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index f540cfeba20..a740699f920 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -17,9 +17,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/ConfirmButton/ConfirmButton.test.tsx:3194817479": [
-      [2, 33, 13, "RegExp match", "2409514259"]
-    ],
     "packages/grafana-ui/src/components/ConfirmModal/ConfirmModal.test.tsx:3838344574": [
       [1, 17, 13, "RegExp match", "2409514259"]
     ],
diff --git a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx
index e3117ec9336..c9e4d9cd4f3 100644
--- a/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx
+++ b/packages/grafana-ui/src/components/ConfirmButton/ConfirmButton.test.tsx
@@ -1,34 +1,72 @@
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
 import { ConfirmButton } from './ConfirmButton';
-import { mount, ShallowWrapper } from 'enzyme';
-import { Button } from '../Button';
+import { expect } from '../../../../../public/test/lib/common';
 
 describe('ConfirmButton', () => {
-  let wrapper: any;
-  let deleted: any;
-
-  beforeAll(() => {
-    deleted = false;
-
-    function deleteItem() {
-      deleted = true;
-    }
-
-    wrapper = mount(
-      <ConfirmButton confirmText="Confirm delete" onConfirm={() => deleteItem()}>
+  it('should show confirm delete when clicked', () => {
+    const onConfirm = jest.fn();
+    render(
+      <ConfirmButton confirmText="Confirm delete" onConfirm={onConfirm}>
         Delete
       </ConfirmButton>
     );
+
+    // Confirm button should not be visible before clicking the Delete button
+    expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+
+    // Confirm button should now be visible
+    expect(screen.getByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: 'Confirm delete' }));
+    expect(onConfirm).toHaveBeenCalled();
+
+    // Confirm button should be visible if closeOnConfirm is false
+    expect(screen.queryByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
   });
 
-  it('should show confirm delete when clicked', () => {
-    expect(deleted).toBe(false);
-    wrapper
-      .find(Button)
-      .findWhere((n: ShallowWrapper) => {
-        return n.text() === 'Confirm delete' && n.type() === Button;
-      })
-      .simulate('click');
-    expect(deleted).toBe(true);
+  it('should hide confirm delete when closeOnConfirm is true', () => {
+    render(
+      <ConfirmButton confirmText="Confirm delete" onConfirm={() => {}} closeOnConfirm={true}>
+        Delete
+      </ConfirmButton>
+    );
+
+    // Confirm button should not be visible before clicking the Delete button
+    expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+
+    // Confirm button should now be visible
+    expect(screen.getByRole('button', { name: 'Confirm delete' })).toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: 'Confirm delete' }));
+
+    // Confirm button should not be visible if closeOnConfirm is true
+    expect(screen.queryByRole('button', { name: 'Confirm delete' })).not.toBeInTheDocument();
+  });
+
+  it('should show cancel when clicked', () => {
+    const onCancel = jest.fn();
+    render(
+      <ConfirmButton confirmText="Confirm delete" onCancel={onCancel} onConfirm={() => {}}>
+        Delete
+      </ConfirmButton>
+    );
+
+    // Cancel button should not be visible before clicking the Delete button
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
+
+    userEvent.click(screen.getByRole('button', { name: 'Delete' }));
+
+    // Cancel button should now be visible
+    expect(screen.getByRole('button', { name: 'Cancel' })).toBeInTheDocument();
+    userEvent.click(screen.getByRole('button', { name: 'Cancel' }));
+    expect(onCancel).toHaveBeenCalled();
+
+    // Cancel button should not be visible after click
+    expect(screen.queryByRole('button', { name: 'Cancel' })).not.toBeInTheDocument();
   });
 });