test(ui): Convert confirm components to RTL (#36197)

static/app/components/confirm.tsx

@@ -108,7 +108,7 @@ export type OpenConfirmOptions = {
   renderMessage?: (renderProps: ConfirmMessageRenderProps) => React.ReactNode;
 };
 
-type Props = OpenConfirmOptions & {
+interface Props extends OpenConfirmOptions {
   /**
    * Render props to control rendering of the modal in its entirety
    */
@@ -123,7 +123,7 @@ type Props = OpenConfirmOptions & {
    * Stop event propagation when opening the confirm modal
    */
   stopPropagation?: boolean;
-};
+}
 
 /**
  * Opens a confirmation modal when called. The procedural version of the

static/app/components/confirmDelete.tsx

@@ -6,12 +6,13 @@ import Input from 'sentry/components/forms/controls/input';
 import Field from 'sentry/components/forms/field';
 import {t} from 'sentry/locale';
 
-type Props = Omit<React.ComponentProps<typeof Confirm>, 'renderConfirmMessage'> & {
+interface Props
+  extends Omit<React.ComponentProps<typeof Confirm>, 'renderConfirmMessage'> {
   /**
    * The string that the user must enter to confirm the deletion
    */
   confirmInput: string;
-};
+}
 
 const ConfirmDelete = ({message, confirmInput, ...props}: Props) => (
   <Confirm

tests/js/spec/components/confirm.spec.jsx

@@ -1,23 +1,34 @@
-import {mountWithTheme, shallow} from 'sentry-test/enzyme';
-import {mountGlobalModal} from 'sentry-test/modal';
+import {
+  createEvent,
+  fireEvent,
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
 import Confirm from 'sentry/components/confirm';
+import ModalStore from 'sentry/stores/modalStore';
 
 describe('Confirm', function () {
+  afterEach(() => {
+    ModalStore.reset();
+  });
+
   it('renders', function () {
     const mock = jest.fn();
-    const wrapper = shallow(
+    const wrapper = render(
       <Confirm message="Are you sure?" onConfirm={mock}>
         <button>Confirm?</button>
       </Confirm>
     );
 
-    expect(wrapper).toSnapshot();
+    expect(wrapper.container).toSnapshot();
   });
 
-  it('renders custom confirm button & callbacks work', async function () {
+  it('renders custom confirm button & callbacks work', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <Confirm
         message="Are you sure?"
         onConfirm={mock}
@@ -30,19 +41,19 @@ describe('Confirm', function () {
         <button data-test-id="trigger-btn">Confirm?</button>
       </Confirm>
     );
-    wrapper.find('button[data-test-id="trigger-btn"]').simulate('click');
-    const modal = await mountGlobalModal();
+    renderGlobalModal();
+    userEvent.click(screen.getByTestId('trigger-btn'));
 
-    const confirmBtn = modal.find('button[data-test-id="confirm-btn"]');
-    expect(confirmBtn.exists()).toBe(true);
+    const confirmBtn = screen.getByTestId('confirm-btn');
+    expect(confirmBtn).toBeInTheDocument();
 
     expect(mock).not.toHaveBeenCalled();
-    confirmBtn.simulate('click');
+    userEvent.click(confirmBtn);
     expect(mock).toHaveBeenCalled();
   });
-  it('renders custom cancel button & callbacks work', async function () {
+  it('renders custom cancel button & callbacks work', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <Confirm
         message="Are you sure?"
         onCancel={mock}
@@ -55,59 +66,54 @@ describe('Confirm', function () {
         <button data-test-id="trigger-btn">Confirm?</button>
       </Confirm>
     );
-    wrapper.find('button[data-test-id="trigger-btn"]').simulate('click');
-    const modal = await mountGlobalModal();
+    renderGlobalModal();
+    userEvent.click(screen.getByTestId('trigger-btn'));
 
-    const cancelBtn = modal.find('button[data-test-id="cancel-btn"]');
-    expect(cancelBtn.exists()).toBe(true);
+    const cancelBtn = screen.getByTestId('cancel-btn');
+    expect(cancelBtn).toBeInTheDocument();
 
     expect(mock).not.toHaveBeenCalled();
-    cancelBtn.simulate('click');
+    userEvent.click(cancelBtn);
     expect(mock).toHaveBeenCalled();
   });
-  it('clicking action button opens Modal', async function () {
+  it('clicking action button opens Modal', function () {
     const mock = jest.fn();
-    const wrapper = shallow(
+    render(
       <Confirm message="Are you sure?" onConfirm={mock}>
         <button>Confirm?</button>
       </Confirm>
     );
+    renderGlobalModal();
 
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
-    expect(modal.find('GlobalModal[visible=true]').exists()).toBe(true);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
   });
 
-  it('clicks Confirm in modal and calls `onConfirm` callback', async function () {
+  it('clicks Confirm in modal and calls `onConfirm` callback', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <Confirm message="Are you sure?" onConfirm={mock}>
         <button>Confirm?</button>
       </Confirm>
     );
+    renderGlobalModal();
 
     expect(mock).not.toHaveBeenCalled();
 
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
     // Click "Confirm" button, should be last button
-    modal.find('Button').last().simulate('click');
-
-    await tick();
-    modal.update();
+    userEvent.click(screen.getByText('Confirm'));
 
-    expect(modal.find('GlobalModal[visible=true]').exists()).toBe(false);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
     expect(mock).toHaveBeenCalled();
     expect(mock.mock.calls).toHaveLength(1);
   });
 
   it('can stop propagation on the event', function () {
     const mock = jest.fn();
-    const wrapper = shallow(
+    render(
       <Confirm message="Are you sure?" onConfirm={mock} stopPropagation>
         <button>Confirm?</button>
       </Confirm>
@@ -115,13 +121,11 @@ describe('Confirm', function () {
 
     expect(mock).not.toHaveBeenCalled();
 
-    const event = {
-      stopPropagation: jest.fn(),
-    };
-
-    wrapper.find('button').simulate('click', event);
-    wrapper.update();
+    const button = screen.getByRole('button');
+    const clickEvent = createEvent.click(button);
+    clickEvent.stopPropagation = jest.fn();
 
-    expect(event.stopPropagation).toHaveBeenCalledTimes(1);
+    fireEvent(button, clickEvent);
+    expect(clickEvent.stopPropagation).toHaveBeenCalled();
   });
 });

tests/js/spec/components/confirmDelete.spec.jsx

@@ -1,70 +1,73 @@
-import {mountWithTheme} from 'sentry-test/enzyme';
-import {mountGlobalModal} from 'sentry-test/modal';
+import {
+  render,
+  renderGlobalModal,
+  screen,
+  userEvent,
+} from 'sentry-test/reactTestingLibrary';
 
 import ConfirmDelete from 'sentry/components/confirmDelete';
+import ModalStore from 'sentry/stores/modalStore';
 
 describe('ConfirmDelete', function () {
-  it('renders', async function () {
+  afterEach(() => {
+    ModalStore.reset();
+  });
+
+  it('renders', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <ConfirmDelete message="Are you sure?" onConfirm={mock} confirmInput="CoolOrg">
         <button>Confirm?</button>
       </ConfirmDelete>
     );
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
+    const globalModal = renderGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
     // jest had an issue rendering root component snapshot so using ModalDialog instead
-    expect(modal.find('Modal')).toSnapshot();
+    expect(globalModal.container).toSnapshot();
   });
 
-  it('confirm button is disabled and bypass prop is false when modal opens', async function () {
+  it('confirm button is disabled and bypass prop is false when modal opens', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <ConfirmDelete message="Are you sure?" onConfirm={mock} confirmInput="CoolOrg">
         <button>Confirm?</button>
       </ConfirmDelete>
     );
+    renderGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
-
-    expect(wrapper.find('Confirm').prop('bypass')).toBe(false);
-    expect(modal.find('Button[priority="primary"][disabled=true]').exists()).toBe(true);
+    expect(screen.getByRole('button', {name: 'Confirm'})).toBeDisabled();
   });
 
-  it('confirm button stays disabled with non-matching input', async function () {
+  it('confirm button stays disabled with non-matching input', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <ConfirmDelete message="Are you sure?" onConfirm={mock} confirmInput="CoolOrg">
         <button>Confirm?</button>
       </ConfirmDelete>
     );
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
+    renderGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
-    modal.find('input').simulate('change', {target: {value: 'Cool'}});
-    expect(modal.find('Button[priority="primary"][disabled=true]').exists()).toBe(true);
+    userEvent.type(screen.getByPlaceholderText('CoolOrg'), 'Cool');
+    expect(screen.getByRole('button', {name: 'Confirm'})).toBeDisabled();
   });
 
-  it('confirm button is enabled when confirm input matches', async function () {
+  it('confirm button is enabled when confirm input matches', function () {
     const mock = jest.fn();
-    const wrapper = mountWithTheme(
+    render(
       <ConfirmDelete message="Are you sure?" onConfirm={mock} confirmInput="CoolOrg">
         <button>Confirm?</button>
       </ConfirmDelete>
     );
-    wrapper.find('button').simulate('click');
-
-    const modal = await mountGlobalModal();
+    renderGlobalModal();
+    userEvent.click(screen.getByRole('button'));
 
-    modal.find('input').simulate('change', {target: {value: 'CoolOrg'}});
-    expect(modal.find('Button[priority="primary"][disabled=false]').exists()).toBe(true);
+    userEvent.type(screen.getByPlaceholderText('CoolOrg'), 'CoolOrg');
+    expect(screen.getByRole('button', {name: 'Confirm'})).toBeEnabled();
 
-    modal.find('Button[priority="primary"]').simulate('click');
+    userEvent.click(screen.getByRole('button', {name: 'Confirm'}));
 
     expect(mock).toHaveBeenCalled();
     expect(mock.mock.calls).toHaveLength(1);