add dialog template test

client/package.json

@@ -31,12 +31,16 @@
     "typescript": "^4.1.2",
     "web-vitals": "^1.0.1"
   },
+  "jest": {
+    "coverageDirectory": "<rootDir>/coverage/"
+  },
   "scripts": {
     "start": "react-app-rewired start -FAST_REFRESH=true",
     "build": "react-app-rewired build",
     "test": "react-app-rewired test",
     "test:watch": "react-app-rewired test --watch",
     "test:cov": "react-app-rewired test --watchAll=false --coverage",
+    "test:report": "react-app-rewired test --watchAll=false --coverage --coverageReporters='text-summary'",
     "eject": "react-app-rewired eject"
   },
   "eslintConfig": {

client/src/components/__test__/customDialog/DialogTemplate.spec.tsx

@@ -0,0 +1,53 @@
+import { screen, render, fireEvent } from '@testing-library/react';
+import DialogTemplate from '../../customDialog/DialogTemplate';
+import provideTheme from '../utils/provideTheme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../../i18n';
+
+describe('test dialog template component', () => {
+  const mockCancelFn = jest.fn();
+  const mockConfirmFn = jest.fn();
+
+  it('renders default state and callbacks', () => {
+    render(
+      provideTheme(
+        <I18nextProvider i18n={i18n}>
+          <DialogTemplate
+            title="dialog template"
+            handleCancel={mockCancelFn}
+            handleConfirm={mockConfirmFn}
+          >
+            dialog content
+          </DialogTemplate>
+        </I18nextProvider>
+      )
+    );
+
+    expect(screen.getByText('dialog template')).toBeInTheDocument();
+    expect(screen.getByText('dialog content')).toBeInTheDocument();
+
+    fireEvent.click(screen.getByRole('button', { name: /cancel/i }));
+    expect(mockCancelFn).toBeCalledTimes(1);
+    fireEvent.click(screen.getByRole('button', { name: /confirm/i }));
+    expect(mockConfirmFn).toBeCalledTimes(1);
+  });
+
+  it('checks confirm button disable', () => {
+    render(
+      provideTheme(
+        <I18nextProvider i18n={i18n}>
+          <DialogTemplate
+            title="dialog template"
+            handleCancel={mockCancelFn}
+            handleConfirm={mockConfirmFn}
+            confirmDisabled={true}
+          >
+            dialog content
+          </DialogTemplate>
+        </I18nextProvider>
+      )
+    );
+
+    expect(screen.getByRole('button', { name: /confirm/i })).toBeDisabled();
+  });
+});

client/src/components/customDialog/DialogTemplate.tsx

@@ -35,7 +35,7 @@ const DialogTemplate: FC<DialogContainerProps> = ({
       <CustomDialogTitle onClose={handleCancel}>{title}</CustomDialogTitle>
       <DialogContent>{children}</DialogContent>
       <DialogActions className={classes.actions}>
-        <CustomButton onClick={handleCancel} color="default">
+        <CustomButton onClick={handleCancel} color="default" name="cancel">
           {cancel}
         </CustomButton>
         <CustomButton
@@ -43,6 +43,7 @@ const DialogTemplate: FC<DialogContainerProps> = ({
           onClick={handleConfirm}
           color="primary"
           disabled={confirmDisabled}
+          name="confirm"
         >
           {confirm}
         </CustomButton>