cleaned up code

src/components/UI/Form/Checkbox/Checkbox.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
 
 import { Checkbox } from './Checkbox';
 

src/components/UI/Form/Dropdown/Dropdown.test.tsx

@@ -1,4 +1,4 @@
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 import { Dropdown } from './Dropdown';
 
@@ -22,33 +22,53 @@ jest.mock('@mui/material/Select', () => (props: any) => {
 
 const changeValue = jest.fn();
 describe('<Dropdown />', () => {
-  const defaultProps = {
+  const getProps: any = () => ({
     options: [{ id: '1', label: 'Default' }],
     label: 'Title',
     form: { errors: { dropdown: 'Required' } },
     placeholder: 'Input your title',
     field: { value: '1', onChange: changeValue },
     fieldChange: jest.fn(),
-  };
+  });
 
   it('renders <Dropdown /> component', () => {
-    const wrapper = render(<Dropdown {...defaultProps} />);
+    const wrapper = render(<Dropdown {...getProps()} />);
     expect(wrapper.getByTestId('dropdown')).toBeInTheDocument();
   });
 
   it('should have correct placeholder', () => {
-    const wrapper = render(<Dropdown {...defaultProps} />);
+    const wrapper = render(<Dropdown {...getProps()} />);
     expect(wrapper.getByTestId('inputLabel')).toHaveTextContent('Input your title');
   });
 
   it('should have an initial value', () => {
-    const wrapper = render(<Dropdown {...defaultProps} />);
+    const wrapper = render(<Dropdown {...getProps()} />);
     expect(wrapper.getByTestId('mock-select')).toHaveTextContent('Default');
   });
 
   it('should call onChange function if the dropdown value is changed', () => {
-    const wrapper = render(<Dropdown {...defaultProps} />);
+    const wrapper = render(<Dropdown {...getProps()} />);
+    fireEvent.change(wrapper.getByTestId('mock-select'), { target: { value: '1' } });
+    expect(changeValue).toHaveBeenCalled();
+  });
+
+  it('should call onChange function if the dropdown value is changed', () => {
+    const wrapper = render(<Dropdown {...getProps()} />);
     fireEvent.change(wrapper.getByTestId('mock-select'), { target: { value: '1' } });
     expect(changeValue).toHaveBeenCalled();
   });
+
+  it('helper text should be present if the prop is passed', () => {
+    const props = getProps();
+    props.helperText = 'Please click here';
+    render(<Dropdown {...props} />);
+    expect(screen.getByText('Please click here')).toBeInTheDocument();
+  });
+
+  it('have options with name field rather than label', () => {
+    const props = getProps();
+    props.options = [{ id: '1', name: 'Default name' }];
+    render(<Dropdown {...props} />);
+    expect(screen.getByText('Default name')).toBeInTheDocument();
+  });
 });

src/components/UI/Form/Dropdown/Dropdown.tsx

@@ -30,14 +30,11 @@ export const Dropdown = ({
 }: DropdownProps) => {
   const { onChange, value, ...rest } = field;
 
-  let optionsList = null;
-  if (options) {
-    optionsList = options.map((option: any) => (
-      <MenuItem value={option.id} key={option.id}>
-        {option.label ? option.label : option.name}
-      </MenuItem>
-    ));
-  }
+  const optionsList = options.map((option: any) => (
+    <MenuItem value={option.id} key={option.id}>
+      {option.label ? option.label : option.name}
+    </MenuItem>
+  ));
 
   return (
     <div className={styles.Dropdown} data-testid="dropdown">