Merge branch 'modal-test' into 'next'

Add tests for Modal

See merge request soapbox-pub/soapbox-fe!1192

app/soapbox/components/ui/icon-button/icon-button.tsx

@@ -22,6 +22,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
         'bg-white dark:bg-transparent': !transparent,
       }, className)}
       {...filteredProps}
+      data-testid='icon-button'
     >
       <InlineSVG src={src} className={iconClassName} />
 

app/soapbox/components/ui/modal/__tests__/modal.test.tsx

@@ -0,0 +1,138 @@
+import userEvent from '@testing-library/user-event';
+import React from 'react';
+
+import { render, screen } from '../../../../jest/test-helpers';
+import Modal from '../modal';
+
+describe('<Modal />', () => {
+  it('renders', () => {
+    render(<Modal title='Modal title' />);
+    expect(screen.getByTestId('modal')).toBeInTheDocument();
+  });
+
+  it('renders children', () => {
+    render(<Modal title='Modal title'><div data-testid='child' /></Modal>);
+    expect(screen.getByTestId('child')).toBeInTheDocument();
+  });
+
+  it('focuses the primary action', () => {
+    render(
+      <Modal
+        title='Modal title'
+        confirmationAction={() => null}
+        confirmationText='Click me'
+      />,
+    );
+
+    expect(screen.getByRole('button')).toHaveFocus();
+  });
+
+  describe('onClose prop', () => {
+    it('renders the Icon to close the modal', async() => {
+      const mockFn = jest.fn();
+      const user = userEvent.setup();
+
+      render(<Modal title='Modal title' onClose={mockFn} />);
+      expect(screen.getByTestId('icon-button')).toBeInTheDocument();
+
+      expect(mockFn).not.toBeCalled();
+      await user.click(screen.getByTestId('icon-button'));
+      expect(mockFn).toBeCalled();
+    });
+
+    it('does not render the Icon to close the modal', () => {
+      render(<Modal title='Modal title' />);
+      expect(screen.queryAllByTestId('icon-button')).toHaveLength(0);
+    });
+  });
+
+  describe('confirmationAction prop', () => {
+    it('renders the confirmation button', async() => {
+      const mockFn = jest.fn();
+      const user = userEvent.setup();
+
+      render(
+        <Modal
+          title='Modal title'
+          confirmationAction={mockFn}
+          confirmationText='Click me'
+        />,
+      );
+
+      expect(mockFn).not.toBeCalled();
+      await user.click(screen.getByRole('button'));
+      expect(mockFn).toBeCalled();
+    });
+
+    it('does not render the actions to', () => {
+      render(<Modal title='Modal title' />);
+      expect(screen.queryAllByTestId('modal-actions')).toHaveLength(0);
+    });
+
+    describe('with secondaryAction', () => {
+      it('renders the secondary button', async() => {
+        const confirmationAction = jest.fn();
+        const secondaryAction = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={confirmationAction}
+            confirmationText='Primary'
+            secondaryAction={secondaryAction}
+            secondaryText='Secondary'
+          />,
+        );
+
+        await user.click(screen.getByText(/secondary/i));
+        expect(secondaryAction).toBeCalled();
+        expect(confirmationAction).not.toBeCalled();
+      });
+
+      it('does not render the secondary action', () => {
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={() => null}
+            confirmationText='Click me'
+          />,
+        );
+        expect(screen.queryAllByRole('button')).toHaveLength(1);
+      });
+    });
+
+    describe('with cancelAction', () => {
+      it('renders the cancel button', async() => {
+        const confirmationAction = jest.fn();
+        const cancelAction = jest.fn();
+        const user = userEvent.setup();
+
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={confirmationAction}
+            confirmationText='Primary'
+            secondaryAction={cancelAction}
+            secondaryText='Cancel'
+          />,
+        );
+
+        await user.click(screen.getByText(/cancel/i));
+        expect(cancelAction).toBeCalled();
+        expect(confirmationAction).not.toBeCalled();
+      });
+
+      it('does not render the cancel action', () => {
+        render(
+          <Modal
+            title='Modal title'
+            confirmationAction={() => null}
+            confirmationText='Click me'
+          />,
+        );
+        expect(screen.queryAllByRole('button')).toHaveLength(1);
+      });
+    });
+  });
+});

app/soapbox/components/ui/modal/modal.tsx

@@ -17,7 +17,7 @@ interface IModal {
   confirmationDisabled?: boolean,
   confirmationText?: string,
   confirmationTheme?: 'danger',
-  onClose: () => void,
+  onClose?: () => void,
   secondaryAction?: () => void,
   secondaryText?: string,
   title: string | React.ReactNode,
@@ -46,7 +46,7 @@ const Modal: React.FC<IModal> = ({
   }, [buttonRef]);
 
   return (
-    <div className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
+    <div data-testid='modal' className='block w-full max-w-xl p-6 mx-auto overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-slate-800 shadow-xl rounded-2xl pointer-events-auto'>
       <div className='sm:flex sm:items-start w-full justify-between'>
         <div className='w-full'>
           <div className='w-full flex flex-row justify-between items-center'>
@@ -71,7 +71,7 @@ const Modal: React.FC<IModal> = ({
       </div>
 
       {confirmationAction && (
-        <div className='mt-5 flex flex-row justify-between'>
+        <div className='mt-5 flex flex-row justify-between' data-testid='modal-actions'>
           <div className='flex-grow'>
             {cancelAction && (
               <Button