[PROD-11431] feat: add custom props on SimpleTwoActionsDialog

Author: Vincent Ardouin-Murat

src/dialogs/SimpleTwoActionsDialog/SimpleTwoActionsDialog.js

@@ -5,25 +5,53 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Typography, Button, Dialog, DialogTitle, DialogContent, DialogActions } from '@mui/material';
 
-export const SimpleTwoActionsDialog = ({ id, open, labels, handleClickOnButton1, handleClickOnButton2 }) => {
+export const SimpleTwoActionsDialog = ({
+  id,
+  open,
+  labels,
+  handleClickOnButton1,
+  handleClickOnButton2,
+  dialogProps,
+  button1Props,
+  button2Props,
+  closeOnBackdropClick,
+}) => {
   const onClose = (event, reason) => {
-    if (reason !== 'backdropClick') {
+    if (closeOnBackdropClick || reason !== 'backdropClick') {
       handleClickOnButton1();
     }
   };
 
   return (
-    <Dialog open={open} aria-labelledby={id + '-dialog-title'} maxWidth={'xs'} fullWidth={true} onClose={onClose}>
+    <Dialog
+      open={open}
+      aria-labelledby={id + '-dialog-title'}
+      maxWidth={'xs'}
+      fullWidth={true}
+      onClose={onClose}
+      {...dialogProps}
+    >
       <DialogTitle id={id + '-dialog-title'}>{labels.title}</DialogTitle>
       <DialogContent>
         <Typography variant="body1">{labels.body}</Typography>
       </DialogContent>
       <DialogActions>
-        {/* TODO Use button1Props and button2Props to enable variants and colors */}
-        <Button data-cy={id + '-button1'} id={id + 'id-button1'} onClick={handleClickOnButton1} color="primary">
+        <Button
+          data-cy={id + '-button1'}
+          id={id + 'id-button1'}
+          onClick={handleClickOnButton1}
+          color="primary"
+          {...button1Props}
+        >
           {labels.button1}
         </Button>
-        <Button data-cy={id + '-button2'} id={id + 'id-button2'} onClick={handleClickOnButton2} color="primary">
+        <Button
+          data-cy={id + '-button2'}
+          id={id + 'id-button2'}
+          onClick={handleClickOnButton2}
+          color="primary"
+          {...button2Props}
+        >
           {labels.button2}
         </Button>
       </DialogActions>
@@ -69,6 +97,26 @@ SimpleTwoActionsDialog.propTypes = {
    *  ## Function used when button2 is clicked
    */
   handleClickOnButton2: PropTypes.func.isRequired,
+
+  /**
+   * Properties to add or override to the dialog component
+   */
+  dialogProps: PropTypes.object,
+
+  /**
+   * Properties to add or override to the button1 component
+   */
+  button1Props: PropTypes.object,
+
+  /**
+   * Properties to add or override to the button2 component
+   */
+  button2Props: PropTypes.object,
+
+  /**
+   * Close dialog on backdrop click
+   */
+  closeOnBackdropClick: PropTypes.bool,
 };
 
 SimpleTwoActionsDialog.defaultProps = {
@@ -87,4 +135,8 @@ SimpleTwoActionsDialog.defaultProps = {
     button1: 'Cancel',
     button2: 'Validate',
   },
+  dialogProps: {},
+  button1Props: {},
+  button2Props: {},
+  closeOnBackdropClick: false,
 };

src/dialogs/SimpleTwoActionsDialog/SimpleTwoActionsDialog.spec.js

@@ -0,0 +1,114 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+import React from 'react';
+import { SimpleTwoActionsDialog } from './SimpleTwoActionsDialog';
+import { renderInMuiThemeProvider } from '../../../tests/utils';
+import { ButtonTesting, DialogTesting } from '../../../tests/MuiComponentsTesting';
+
+import userEvent from '@testing-library/user-event';
+
+const mockOnButton1Click = jest.fn();
+const mockOnButton2Click = jest.fn();
+
+const dialogId = 'dialog-test';
+
+const TwoActionsDialog = new DialogTesting({ labelledby: `${dialogId}-dialog-title` });
+const Button1 = new ButtonTesting({ dataCy: `${dialogId}-button1` });
+const Button2 = new ButtonTesting({ dataCy: `${dialogId}-button2` });
+
+const defaultProps = {
+  id: dialogId,
+  open: true,
+  handleClickOnButton1: mockOnButton1Click,
+  handleClickOnButton2: mockOnButton2Click,
+};
+
+const setUp = (props) => {
+  renderInMuiThemeProvider(<SimpleTwoActionsDialog {...props} />);
+};
+
+describe('SimpleTwoActionsDialog', () => {
+  beforeEach(() => {
+    mockOnButton1Click.mockClear();
+    mockOnButton2Click.mockClear();
+  });
+
+  describe('On Close', () => {
+    test('ESC key calls button1 Click', async () => {
+      setUp(defaultProps);
+      await userEvent.keyboard('{Escape}');
+      expect(mockOnButton1Click).toHaveBeenCalled();
+    });
+
+    test(`By default, click on backdrop doesn't call button1 click`, async () => {
+      setUp(defaultProps);
+      await userEvent.click(TwoActionsDialog.Backdrop);
+      expect(mockOnButton1Click).not.toHaveBeenCalled();
+    });
+
+    test('with closeOnBackdropClick, click on backdrop calls button1 click', async () => {
+      const props = {
+        ...defaultProps,
+        closeOnBackdropClick: true,
+      };
+
+      setUp(props);
+      await userEvent.click(TwoActionsDialog.Backdrop);
+      expect(mockOnButton1Click).toHaveBeenCalled();
+    });
+  });
+
+  describe('Custom props', () => {
+    describe('buttonsProps', () => {
+      test(`by default, buttons haven't error color`, () => {
+        setUp(defaultProps);
+        expect(Button1.Button).not.toHaveClass('MuiButton-textError');
+        expect(Button2.Button).not.toHaveClass('MuiButton-textError');
+      });
+
+      test('force error color on button1', () => {
+        const props = {
+          ...defaultProps,
+          button1Props: {
+            color: 'error',
+          },
+        };
+
+        setUp(props);
+        expect(Button1.Button).toHaveClass('MuiButton-textError');
+      });
+
+      test('force error color on button2', () => {
+        const props = {
+          ...defaultProps,
+          button2Props: {
+            color: 'error',
+          },
+        };
+
+        setUp(props);
+        expect(Button2.Button).toHaveClass('MuiButton-textError');
+      });
+    });
+
+    describe('dialogProps', () => {
+      test('by default dialog has xs size', () => {
+        setUp(defaultProps);
+        expect(TwoActionsDialog.Dialog).toHaveClass('MuiDialog-paperWidthXs');
+      });
+
+      test('force sm size on dialog', () => {
+        const props = {
+          ...defaultProps,
+          dialogProps: {
+            maxWidth: 'sm',
+          },
+        };
+
+        setUp(props);
+        expect(TwoActionsDialog.Dialog).toHaveClass('MuiDialog-paperWidthSm');
+      });
+    });
+  });
+});

tests/MuiComponentsTesting/DialogTesting.js

@@ -0,0 +1,20 @@
+// Copyright (c) Cosmo Tech.
+// Licensed under the MIT license.
+
+export class DialogTesting {
+  constructor({ labelledby }) {
+    this._labelledby = labelledby;
+  }
+
+  get Dialog() {
+    return document.querySelector(`[aria-labelledby="${this._labelledby}"]`);
+  }
+
+  get DialogRoot() {
+    return this.Dialog.parentNode.parentNode;
+  }
+
+  get Backdrop() {
+    return this.DialogRoot.querySelector('.MuiModal-backdrop');
+  }
+}

tests/MuiComponentsTesting/index.js

@@ -10,3 +10,4 @@ export { SelectTesting } from './SelectTesting';
 export { SliderTesting } from './SliderTesting';
 export { StackContainerTesting } from './StackContainerTesting';
 export { default as MockTheme } from './MockTheme';
+export { DialogTesting } from './DialogTesting';