rename custom button and custom input directory name

client/src/components/__test__/customButton/CustomButton.spec.tsx

@@ -0,0 +1,39 @@
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import CustomButton from '../../customButton/CustomButton';
+
+let container: any = null;
+
+jest.mock('@material-ui/core/Button', () => {
+  return props => {
+    const { variant, children } = props;
+    return (
+      <>
+        <div className="variant">{variant}</div>
+        <button className="button">{children}</button>;
+      </>
+    );
+  };
+});
+
+describe('Test CustomButton', () => {
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  test('test button props', () => {
+    act(() => {
+      render(<CustomButton variant="contained">test</CustomButton>, container);
+    });
+
+    expect(container.querySelector('.button').textContent).toBe('test');
+    expect(container.querySelector('.variant').textContent).toBe('contained');
+  });
+});

client/src/components/__test__/customInput/CustomInput.spec.tsx

@@ -0,0 +1,194 @@
+import { fireEvent } from '@testing-library/react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import CustomInput from '../../customInput/CustomInput';
+import {
+  IAdornmentConfig,
+  IIconConfig,
+  ITextfieldConfig,
+} from '../../customInput/Types';
+
+let container: any = null;
+
+jest.mock('@material-ui/core/styles/makeStyles', () => {
+  return () => () => ({});
+});
+
+jest.mock('@material-ui/core/FormControl', () => {
+  return props => {
+    const { children } = props;
+    return <div className="form-control">{children}</div>;
+  };
+});
+
+jest.mock('@material-ui/core/InputLabel', () => {
+  return props => {
+    return <div className="label">{props.children}</div>;
+  };
+});
+
+jest.mock('@material-ui/core/Input', () => {
+  return props => {
+    const { type, onBlur, endAdornment } = props;
+    return (
+      <>
+        <div className="type">{type}</div>
+        <input className="input" type={type} onBlur={onBlur} />
+        <div>{endAdornment}</div>
+      </>
+    );
+  };
+});
+
+jest.mock('@material-ui/core/TextField', () => {
+  return props => {
+    const { helperText, onBlur, onChange, label, className } = props;
+    return (
+      <div className="text-field">
+        <div className="text-class">{className}</div>
+        <div className="text-label">{label}</div>
+        <div className="text-error">{helperText}</div>
+        <input
+          className="text-input"
+          onBlur={onBlur}
+          onChange={onChange}
+          type="text"
+        />
+      </div>
+    );
+  };
+});
+
+jest.mock('@material-ui/core/Grid', () => {
+  return props => {
+    const { children } = props;
+    return <div className="grid">{children}</div>;
+  };
+});
+
+describe('Test CustomInput', () => {
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  test('test text type input', () => {
+    const handleBlur = jest.fn();
+
+    const mockTextConfig: ITextfieldConfig = {
+      variant: 'standard',
+      label: 'test text',
+      key: 'text',
+      className: 'classname',
+      onBlur: handleBlur,
+    };
+
+    act(() => {
+      render(
+        <CustomInput
+          type="text"
+          textConfig={mockTextConfig}
+          checkValid={() => true}
+        />,
+        container
+      );
+    });
+
+    expect(container.querySelectorAll('.text-field').length).toBe(1);
+    expect(container.querySelector('.text-class').textContent).toBe(
+      'classname'
+    );
+    expect(container.querySelector('.text-label').textContent).toBe(
+      'test text'
+    );
+
+    const input = container.querySelector('.text-input');
+    input.focus();
+    input.blur();
+    expect(handleBlur).toHaveBeenCalledTimes(1);
+  });
+
+  test('test icon type input', () => {
+    const handleChange = jest.fn();
+
+    const mockIconConfig: IIconConfig = {
+      icon: <div className="icon"></div>,
+      inputType: 'icon',
+      inputConfig: {
+        label: 'icon text',
+        key: 'icon',
+        onChange: handleChange,
+        variant: 'standard',
+      },
+    };
+
+    render(
+      <CustomInput
+        type="icon"
+        iconConfig={mockIconConfig}
+        checkValid={() => true}
+      />,
+      container
+    );
+
+    expect(container.querySelectorAll('.grid').length).toBe(3);
+    expect(container.querySelectorAll('.icon').length).toBe(1);
+    expect(container.querySelector('.text-label').textContent).toBe(
+      'icon text'
+    );
+
+    const input = container.querySelector('.text-input');
+    fireEvent.change(input, { target: { value: 'trigger change' } });
+    expect(handleChange).toHaveBeenCalledTimes(1);
+  });
+
+  test('test adornmentConfig type input', () => {
+    const mockBlurFunc = jest.fn();
+
+    const mockAdornmentConfig: IAdornmentConfig = {
+      label: 'adornment',
+      icon: <div className="adornment-icon"></div>,
+      isPasswordType: false,
+      key: 'adornment',
+      onInputBlur: mockBlurFunc,
+    };
+
+    render(
+      <CustomInput
+        type="adornment"
+        adornmentConfig={mockAdornmentConfig}
+        checkValid={() => true}
+      />,
+      container
+    );
+
+    expect(container.querySelector('.label').textContent).toBe('adornment');
+    expect(container.querySelector('.type').textContent).toBe('text');
+    expect(container.querySelectorAll('.adornment-icon').length).toBe(1);
+
+    const input = container.querySelector('.input');
+    input.focus();
+    input.blur();
+    expect(mockBlurFunc).toHaveBeenCalledTimes(1);
+  });
+
+  test('test default type input', () => {
+    const mockTextConfig: ITextfieldConfig = {
+      label: 'default',
+      key: 'default',
+      variant: 'standard',
+    };
+
+    act(() => {
+      render(<CustomInput textConfig={mockTextConfig} />, container);
+    });
+
+    expect(container.querySelector('.text-label').textContent).toBe('default');
+  });
+});

client/src/components/__test__/grid/Index.spec.tsx

@@ -0,0 +1,137 @@
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import MilvusGrid from '../../grid/index';
+import { ToolBarConfig } from '../../grid/Types';
+
+let container: any = null;
+
+jest.mock('react-i18next', () => {
+  return {
+    useTranslation: () => ({
+      t: () => ({
+        grid: {},
+      }),
+    }),
+  };
+});
+
+jest.mock('../../grid/Table', () => {
+  return () => {
+    return <div id="table">{}</div>;
+  };
+});
+
+jest.mock('../../grid/ToolBar', () => {
+  return () => {
+    return <div id="tool-bar"></div>;
+  };
+});
+
+jest.mock('react-router-dom', () => {
+  return {
+    useHistory: () => {
+      return {
+        listen: () => () => {},
+        location: {
+          name: '',
+        },
+      };
+    },
+  };
+});
+
+describe('Test Grid index', () => {
+  beforeEach(() => {
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    unmountComponentAtNode(container);
+    container.remove();
+    container = null;
+  });
+
+  it('Has Table Data', () => {
+    act(() => {
+      render(
+        <MilvusGrid
+          primaryKey="id"
+          rows={[{}]}
+          colDefinitions={[]}
+          rowCount={10}
+          toolbarConfigs={[]}
+        />,
+        container
+      );
+    });
+
+    expect(container.querySelectorAll('#table').length).toEqual(1);
+  });
+
+  it('Test title', () => {
+    const title = ['collections', 'vectors'];
+    act(() => {
+      render(
+        <MilvusGrid
+          primaryKey="id"
+          rows={[]}
+          colDefinitions={[]}
+          rowCount={0}
+          toolbarConfigs={[]}
+          title={title}
+        />,
+        container
+      );
+    });
+
+    const titleNodes = container.querySelectorAll('h6');
+    expect(titleNodes.length).toEqual(title.length);
+    expect(titleNodes[0].textContent).toEqual(title[0]);
+    expect(titleNodes[1].textContent).toEqual(title[1]);
+  });
+
+  it('Test SearchForm', () => {
+    const SearchForm = () => <div id="search-form"></div>;
+    act(() => {
+      render(
+        <MilvusGrid
+          primaryKey="id"
+          rows={[]}
+          colDefinitions={[]}
+          rowCount={0}
+          toolbarConfigs={[]}
+          searchForm={<SearchForm />}
+        />,
+        container
+      );
+    });
+
+    expect(container.querySelectorAll('#search-form').length).toEqual(1);
+  });
+
+  it('Test Toolbar ', () => {
+    const ToolbarConfig: ToolBarConfig[] = [
+      {
+        label: 'collection',
+        icon: 'search',
+        onClick: () => {},
+        onSearch: () => {},
+      },
+    ];
+    act(() => {
+      render(
+        <MilvusGrid
+          primaryKey="id"
+          rows={[]}
+          colDefinitions={[]}
+          rowCount={0}
+          toolbarConfigs={ToolbarConfig}
+        />,
+        container
+      );
+    });
+
+    expect(container.querySelectorAll('#tool-bar').length).toEqual(1);
+  });
+});

client/src/components/customDialog/DeleteDialogTemplate.tsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme: Theme) => ({
 }));
 
 const DeleteTemplate: FC<DeleteDialogContentType> = props => {
-  const { title, text, label, handleDelete, handleCancel = () => {} } = props;
+  const { title, text, label, handleDelete, handleCancel } = props;
   const { handleCloseDialog } = useContext(rootContext);
   const classes = useStyles();
   const { t: dialogTrans } = useTranslation('dialog');
@@ -49,7 +49,7 @@ const DeleteTemplate: FC<DeleteDialogContentType> = props => {
 
   const onCancelClick = () => {
     handleCloseDialog();
-    handleCancel();
+    handleCancel && handleCancel();
   };
 
   const onDeleteClick = () => {