add custom dialog title test

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

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

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -43,7 +43,11 @@ const CustomDialogTitle = (props: IProps) => {
     >
       <Typography variant="h5">{children}</Typography>
       {onClose ? (
-        <ClearIcon classes={{ root: innerClass.icon }} onClick={onClose} />
+        <ClearIcon
+          data-testid="clear-icon"
+          classes={{ root: innerClass.icon }}
+          onClick={onClose}
+        />
       ) : null}
     </MuiDialogTitle>
   );