Added test cases for calendar component

src/components/UI/ColorPicker/ColorPicker.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import '@testing-library/jest-dom/extend-expect';
-import { shallow } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
+
 import { ColorPicker } from './ColorPicker';
 
 describe('<ColorPicker />', () => {
@@ -10,9 +10,30 @@ describe('<ColorPicker />', () => {
     helperText: 'Tag color',
   };
 
-  const wrapper = shallow(<ColorPicker {...props} />);
+  const wrapper = <ColorPicker {...props} />;
+
+  it('renders <Calendar /> component', async () => {
+    const { findByTestId } = render(wrapper);
+    const container = await findByTestId('ColorPicker');
+    expect(container).toHaveTextContent('Tag color');
+  });
+
+  it('test default color code', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    expect(input).toHaveValue('#0C976D');
+  });
+
+  it('test display picker panel', async () => {
+    const { findByTestId } = render(wrapper);
+    const container = await findByTestId('ChooseColor');
+    fireEvent.click(container);
+    expect(screen.findByRole('PickerPanel'));
+  });
 
-  it('renders <ColorPicker /> component', () => {
-    expect(wrapper).toBeTruthy();
+  it('test display TwitterPicker', async () => {
+    const { findByTestId } = render(wrapper);
+    const container = await findByTestId('ChooseColor');
+    fireEvent.click(container);
   });
 });

src/components/UI/ColorPicker/ColorPicker.tsx

@@ -38,6 +38,7 @@ export const ColorPicker: React.SFC<Props> = ({ ...props }) => {
         <ClickAwayListener onClickAway={onClickAway}>
           <div className={styles.ContainListener}>
             <div
+              data-testid="ChooseColor"
               className={styles.ChooseColor}
               style={{
                 backgroundColor: colorCode,

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

@@ -1,6 +1,8 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render, screen, fireEvent } from '@testing-library/react';
+import UserEvent from '@testing-library/user-event';
 import { Calendar } from './Calendar';
+import moment from 'moment';
 
 describe('<Calendar />', () => {
   const props = {
@@ -12,9 +14,32 @@ describe('<Calendar />', () => {
     form: { dirty: false, touched: false, errors: false, setFieldValue: function () {} },
   };
 
-  const wrapper = shallow(<Calendar {...props} />);
+  const wrapper = <Calendar {...props} />;
 
-  it('renders <Calendar /> component', () => {
-    expect(wrapper).toBeTruthy();
+  it('renders <Calendar /> component', async () => {
+    const { findByTestId } = render(wrapper);
+    const authContainer = await findByTestId('date-picker-inline');
+    expect(authContainer).toHaveTextContent('Date from');
+  });
+
+  it('test empty date event', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    UserEvent.type(input, '');
+    expect(input).toHaveValue('');
+  });
+
+  it('test date change event', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    UserEvent.type(input, '09/03/2020');
+    expect(input).toHaveValue('09/03/2020');
+  });
+
+  it('test display date picker on calendar icon click', async () => {
+    render(wrapper);
+    const input = screen.getByRole('button');
+    fireEvent.click(input);
+    expect(screen.findAllByText(moment().format('YYYY')));
   });
 });

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

@@ -1,18 +1,33 @@
 import React from 'react';
-import { shallow } from 'enzyme';
-import { Checkbox as CheckboxElement } from '@material-ui/core';
 import { Checkbox } from './Checkbox';
+import { render, screen, fireEvent } from '@testing-library/react';
 
-describe('<Checkbox />', () => {
+describe('<Calendar />', () => {
   const props = {
-    fieldLabel: 'Example',
-    field: { name: 'example', value: null },
+    title: 'Example',
+    field: { name: 'example', value: false },
     form: { dirty: false, touched: false, errors: false, setFieldValue: function () {} },
+    handleChange: function () {},
   };
 
-  const wrapper = shallow(<Checkbox {...props} />);
+  const wrapper = <Checkbox {...props} />;
 
-  it('renders <Checkbox /> component', () => {
-    expect(wrapper).toBeTruthy();
+  it('test for dafault value', async () => {
+    render(wrapper);
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('test for check and uncheck', async () => {
+    render(wrapper);
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.change(checkbox, { target: { value: 'true' } });
+    expect(checkbox.value).toBe('true');
+
+    fireEvent.change(checkbox, { target: { value: 'false' } });
+    expect(checkbox.value).toBe('false');
+
+    fireEvent.click(checkbox);
+    expect(wrapper.props.field.value).toBe(false);
   });
 });

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

@@ -10,7 +10,7 @@ export interface CheckboxProps {
 }
 
 export const Checkbox: React.SFC<CheckboxProps> = (props) => {
-  const handleDateChange = () => {
+  const handleChange = () => {
     props.form.setFieldValue(props.field.name, !props.field.value);
     if (props.handleChange) props.handleChange(!props.field.value);
   };
@@ -25,7 +25,7 @@ export const Checkbox: React.SFC<CheckboxProps> = (props) => {
             {...props.field}
             color="primary"
             checked={props.field.value}
-            onChange={handleDateChange}
+            onChange={handleChange}
           />
         }
         labelPlacement="end"

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

@@ -1,29 +1,68 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import UserEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom/extend-expect';
 import { TimePicker } from './TimePicker';
-import { shallow } from 'enzyme';
 
 describe('<TimePicker />', () => {
   const props = {
     placeholder: 'TimePicker',
-    disabled: true,
+    disabled: false,
     field: { name: 'example', value: null },
-    form: { dirty: false, touched: false, errors: false, setFieldValue: null },
+    form: { dirty: false, touched: false, errors: false, setFieldValue: function () {} },
   };
-  const TimePicker = () => <TimePicker {...props} />;
-  let component;
 
-  beforeEach(() => {
-    component = shallow(TimePicker());
+  const wrapper = <TimePicker {...props} />;
+
+  it('renders <TimePicker /> component', async () => {
+    const { findByTestId } = render(wrapper);
+    const authContainer = await findByTestId('time-picker');
+    expect(authContainer).toHaveTextContent('TimePicker');
+  });
+
+  it('test empty time event', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    UserEvent.type(input, '');
+    expect(input).toHaveValue('');
+  });
+
+  it('test time change event', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    UserEvent.type(input, '09:00 AM');
+    expect(input).toHaveValue('09:00 AM');
+  });
+
+  it('test display time picker on icon click', async () => {
+    render(wrapper);
+    const input = screen.getByRole('button');
+    fireEvent.click(input);
+    expect(screen.getByRole('presentation'));
   });
+});
+
+describe('Disable <TimePicker />', () => {
+  const props = {
+    placeholder: 'TimePicker',
+    disabled: true,
+    field: { name: 'example', value: null },
+    form: { dirty: false, touched: false, errors: false, setFieldValue: function () {} },
+  };
+
+  const wrapper = <TimePicker {...props} />;
 
-  test('It should mount', () => {
-    expect(component.length).toBe(1);
+  it('test time change event not allow', async () => {
+    render(wrapper);
+    const input = screen.getByRole('textbox');
+    UserEvent.type(input, '09:00 AM');
+    expect(input).toHaveValue('');
   });
 
-  it('renders component properly', () => {
-    const wrapper = shallow(TimePicker());
-    expect(wrapper).toBeTruthy();
+  it('test do not display time picker on icon click', async () => {
+    render(wrapper);
+    const input = screen.getByRole('button');
+    fireEvent.click(input);
+    expect(screen.queryAllByTestId('presentation')).toEqual([]);
   });
 });

src/containers/OrganisationSettings/OrganisationSettings.test.tsx

@@ -1,35 +1,69 @@
 import React from 'react';
-import { render, wait } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import { shallow } from 'enzyme';
+import { render, screen, fireEvent, wait, findByText } from '@testing-library/react';
 import { OrganisationSettings } from './OrganisationSettings';
 import { MockedProvider } from '@apollo/client/testing';
 import { LIST_ITEM_MOCKS } from './OrganisationSettings.test.helper';
 
 const mocks = LIST_ITEM_MOCKS;
 
-const wrapper = shallow(
+const wrapper = (
   <MockedProvider mocks={mocks} addTypename={false}>
     <OrganisationSettings match={{ params: { id: 1 } }} />
   </MockedProvider>
 );
 
 describe('<OrganisationSettings />', () => {
-  it('should render OrganisationSettings', () => {
-    expect(wrapper.exists()).toBe(true);
+  it('renders component properly', async () => {
+    const { findByTestId } = render(wrapper);
+    const container = await findByTestId('formLayout');
+    expect(container).toHaveTextContent('Organisation name');
   });
 });
 
-test('should load the OrganisationSettings edit', async () => {
-  const { getByText } = render(
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <OrganisationSettings match={{ params: { id: 1 } }} />
-    </MockedProvider>
-  );
+describe('should load the <OrganisationSettings />', () => {
+  test('should load the OrganisationSettings edit', async () => {
+    const { getByText } = render(wrapper);
 
-  // loading is show initially
-  expect(getByText('Loading...')).toBeInTheDocument();
+    // loading is show initially
+    expect(getByText('Loading...')).toBeInTheDocument();
 
-  await wait();
-  expect(getByText('Settings')).toBeInTheDocument();
+    await wait();
+    expect(getByText('Settings')).toBeInTheDocument();
+  });
+});
+
+describe('Check form fields <OrganisationSettings />', () => {
+  test('Check label of fields', async () => {
+    const { getByText, findByTestId } = render(wrapper);
+    // loading is show initially
+    expect(getByText('Loading...')).toBeInTheDocument();
+
+    await wait();
+    const container = await findByTestId('formLayout');
+    expect(container).toHaveTextContent('Organisation name');
+    expect(container).toHaveTextContent('Gupshup API key');
+    expect(container).toHaveTextContent('Gupshup WhatsApp number');
+    expect(container).toHaveTextContent('Active language(s)');
+    expect(container).toHaveTextContent('Default language');
+    expect(container).toHaveTextContent('Hours of operations');
+    expect(container).toHaveTextContent('Opens');
+    expect(container).toHaveTextContent('Closes');
+    expect(container).toHaveTextContent('Select days');
+    expect(container).toHaveTextContent('Select default flow');
+  });
+});
+
+describe('Checked Hours of operations', () => {
+  test('Checked Hours of operations', async () => {
+    const { getByText, findByTestId } = render(wrapper);
+    // loading is show initially
+    expect(getByText('Loading...')).toBeInTheDocument();
+
+    await wait();
+    const container = await findByTestId('formLayout');
+    await wait();
+    const checkbox = screen.getByRole('checkbox');
+    fireEvent.change(checkbox, { target: { value: 'true' } });
+    expect(checkbox.value).toBe('true');
+  });
 });