Chore: Replaces enzyme with RTL in ConfirmButton.test.tsx (#45435)

.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"]
     ],

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 { expect } from '../../../../../public/test/lib/common';
-import { Button } from '../Button';
 
 describe('ConfirmButton', () => {
-  let wrapper: any;
+  it('should show confirm delete when clicked', () => {
-  let deleted: any;
+    const onConfirm = jest.fn();
-
+    render(
-  beforeAll(() => {
+      <ConfirmButton confirmText="Confirm delete" onConfirm={onConfirm}>
-    deleted = false;
-
-    function deleteItem() {
-      deleted = true;
-    }
-
-    wrapper = mount(
-      <ConfirmButton confirmText="Confirm delete" onConfirm={() => deleteItem()}>
         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', () => {
+  it('should hide confirm delete when closeOnConfirm is true', () => {
-    expect(deleted).toBe(false);
+    render(
-    wrapper
+      <ConfirmButton confirmText="Confirm delete" onConfirm={() => {}} closeOnConfirm={true}>
-      .find(Button)
+        Delete
-      .findWhere((n: ShallowWrapper) => {
+      </ConfirmButton>
-        return n.text() === 'Confirm delete' && n.type() === Button;
+    );
-      })
+
-      .simulate('click');
+    // Confirm button should not be visible before clicking the Delete button
-    expect(deleted).toBe(true);
+    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();
   });
 });