add delete dialog template test

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

@@ -2,14 +2,14 @@ import { fireEvent, render } from '@testing-library/react';
 import CustomDialogTitle from '../../customDialog/CustomDialogTitle';
 
 describe('test custom dialog title component', () => {
-  it('render default state', () => {
+  it('renders default state', () => {
     const container = render(<CustomDialogTitle>title</CustomDialogTitle>);
 
     expect(container.getByText('title')).toBeInTheDocument();
     expect(container.queryByTestId('clear-icon')).toBeNull();
   });
 
-  it('check clear event', () => {
+  it('checks clear event', () => {
     const mockClearFn = jest.fn();
     const container = render(
       <CustomDialogTitle onClose={mockClearFn}>title</CustomDialogTitle>

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

@@ -0,0 +1,50 @@
+import { screen, render, fireEvent } from '@testing-library/react';
+import DeleteTemplate from '../../customDialog/DeleteDialogTemplate';
+import provideTheme from '../utils/provideTheme';
+import { I18nextProvider } from 'react-i18next';
+import i18n from '../../../i18n';
+
+describe('test delete dialog template component', () => {
+  const mockDeleteFn = jest.fn();
+  const mockCancelFn = jest.fn();
+
+  beforeEach(() => {
+    render(
+      provideTheme(
+        <I18nextProvider i18n={i18n}>
+          <DeleteTemplate
+            title="delete title"
+            text="delete text"
+            label="delete"
+            handleDelete={mockDeleteFn}
+            handleCancel={mockCancelFn}
+          />
+        </I18nextProvider>
+      )
+    );
+  });
+
+  it('renders default state', () => {
+    expect(screen.getByText('delete title')).toBeInTheDocument();
+    expect(screen.getByText('delete text')).toBeInTheDocument();
+  });
+
+  it('checks button disabled status and callback when input value change', () => {
+    // Material Textfield role should be textbox
+    const input = screen.getByRole('textbox');
+    const deleteBtn = screen.getByRole('button', { name: /delete/i });
+    fireEvent.change(input, { target: { value: 'test' } });
+    expect(deleteBtn).toBeDisabled();
+    fireEvent.change(input, { target: { value: 'delete' } });
+    expect(deleteBtn).not.toBeDisabled();
+    fireEvent.click(deleteBtn);
+    expect(mockDeleteFn).toBeCalledTimes(1);
+  });
+
+  it('checks cancel callback', () => {
+    const cancelBtn = screen.getByRole('button', { name: /cancel/i });
+
+    fireEvent.click(cancelBtn);
+    expect(mockCancelFn).toBeCalledTimes(1);
+  });
+});

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -97,7 +97,11 @@ const DeleteTemplate: FC<DeleteDialogContentType> = props => {
       </DialogContent>
 
       <DialogActions className={classes.btnWrapper}>
-        <CustomButton onClick={onCancelClick} className={classes.cancelBtn}>
+        <CustomButton
+          name="cancel"
+          onClick={onCancelClick}
+          className={classes.cancelBtn}
+        >
           {btnTrans('cancel')}
         </CustomButton>
         <CustomButton
@@ -105,6 +109,7 @@ const DeleteTemplate: FC<DeleteDialogContentType> = props => {
           onClick={onDeleteClick}
           color="secondary"
           disabled={!deleteReady}
+          name="delete"
         >
           {label}
         </CustomButton>