add tests

meetulr · Jan 31, 2024 · f956b7b · f956b7b
1 parent 82491b0
commit f956b7b
Show file tree

Hide file tree

Showing 5 changed files with 562 additions and 13 deletions.
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx
@@ -0,0 +1,340 @@
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import 'jest-localstorage-mock';
+import { MockedProvider } from '@apollo/client/testing';
+import 'jest-location-mock';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import i18nForTest from 'utils/i18nForTest';
+import { toast } from 'react-toastify';
+
+import { store } from 'state/store';
+import { StaticMockLink } from 'utils/StaticMockLink';
+
+import OrgActionItemCategories from './OrgActionItemCategories';
+import {
+  MOCKS,
+  MOCKS_ERROR_QUERY,
+  MOCKS_ERROR_MUTATIONS,
+} from './OrgActionItemCategoryMocks';
+
+jest.mock('react-toastify', () => ({
+  toast: {
+    success: jest.fn(),
+    error: jest.fn(),
+  },
+}));
+
+const link = new StaticMockLink(MOCKS, true);
+const link2 = new StaticMockLink(MOCKS_ERROR_QUERY, true);
+const link3 = new StaticMockLink(MOCKS_ERROR_MUTATIONS, true);
+
+const translations = JSON.parse(
+  JSON.stringify(
+    i18nForTest.getDataByLanguage('en')?.translation.orgActionItemCategories
+  )
+);
+
+describe('Testing Action Item Categories Component', () => {
+  test('Component loads correctly', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    const { getByText } = render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(getByText(translations.createButton)).toBeInTheDocument();
+    });
+  });
+
+  test('render error component on unsuccessful query', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    const { queryByText } = render(
+      <MockedProvider addTypename={false} link={link2}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      expect(queryByText(translations.createButton)).not.toBeInTheDocument();
+    });
+  });
+
+  test('opens and closes create and update modals on button clicks', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
+      userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+    });
+
+    await waitFor(() => {
+      userEvent.click(
+        screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0]
+      );
+      userEvent.click(screen.getByTestId('actionItemCategoryModalCloseBtn'));
+    });
+  });
+
+  test('create a new action item category', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
+      userEvent.type(
+        screen.getByPlaceholderText(translations.enterName),
+        'ActionItemCategory 4'
+      );
+
+      userEvent.click(screen.getByTestId('formSubmitButton'));
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toBeCalledWith(translations.successfulCreation);
+    });
+  });
+
+  test('toast error on unsuccessful creation', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(screen.getByTestId('actionItemCategoryModalOpenBtn'));
+      userEvent.type(
+        screen.getByPlaceholderText(translations.enterName),
+        'ActionItemCategory 4'
+      );
+
+      userEvent.click(screen.getByTestId('formSubmitButton'));
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  test('update an action item category', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(
+        screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0]
+      );
+
+      const name = screen.getByPlaceholderText(translations.enterName);
+      fireEvent.change(name, { target: { value: '' } });
+
+      userEvent.type(
+        screen.getByPlaceholderText(translations.enterName),
+        'ActionItemCategory 1 updated'
+      );
+
+      userEvent.click(screen.getByTestId('formSubmitButton'));
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toBeCalledWith(translations.successfulUpdation);
+    });
+  });
+
+  test('toast error on unsuccessful updation', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(
+        screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0]
+      );
+
+      const name = screen.getByPlaceholderText(translations.enterName);
+      fireEvent.change(name, { target: { value: '' } });
+
+      userEvent.type(
+        screen.getByPlaceholderText(translations.enterName),
+        'ActionItemCategory 1 updated'
+      );
+
+      userEvent.click(screen.getByTestId('formSubmitButton'));
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+
+  test('toast error on providing the same name on updation', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(
+        screen.getAllByTestId('actionItemCategoryUpdateModalOpenBtn')[0]
+      );
+
+      const name = screen.getByPlaceholderText(translations.enterName);
+      fireEvent.change(name, { target: { value: '' } });
+
+      userEvent.type(
+        screen.getByPlaceholderText(translations.enterName),
+        'ActionItemCategory 1'
+      );
+
+      userEvent.click(screen.getByTestId('formSubmitButton'));
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toBeCalledWith(translations.sameNameConflict);
+    });
+  });
+
+  test('toggle the disablity status of an action item category', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]);
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toBeCalledWith(translations.categoryDisabled);
+    });
+
+    await waitFor(() => {
+      userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]);
+    });
+
+    await waitFor(() => {
+      expect(toast.success).toBeCalledWith(translations.categoryEnabled);
+    });
+  });
+
+  test('toast error on unsuccessful toggling of the disablity status', async () => {
+    window.location.assign('/orgsetting/id=123');
+    localStorage.setItem('UserType', 'SUPERADMIN');
+    render(
+      <MockedProvider addTypename={false} link={link3}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              {<OrgActionItemCategories />}
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>
+    );
+
+    await waitFor(() => {
+      userEvent.click(screen.getAllByTestId('disabilityStatusButton')[0]);
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+
+    await waitFor(() => {
+      userEvent.click(screen.getAllByTestId('disabilityStatusButton')[1]);
+    });
+
+    await waitFor(() => {
+      expect(toast.error).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx
@@ -83,7 +83,7 @@ const OrgActionItemCategories = (): any => {
   const handleEdit = async (e: ChangeEvent<HTMLFormElement>): Promise<void> => {
     e.preventDefault();
     if (name === currName) {
-      toast.info(t('sameNameConflict'));
+      toast.error(t('sameNameConflict'));
     } else {
       try {
         await updateActionItemCategory({
@@ -173,7 +173,7 @@ const OrgActionItemCategories = (): any => {
         value="savechanges"
         onClick={showCreateModal}
         className={styles.addButton}
-        data-testid="saveChangesBtn"
+        data-testid="actionItemCategoryModalOpenBtn"
       >
         <i className={'fa fa-plus me-2'} />
         {t('createButton')}
@@ -199,6 +199,7 @@ const OrgActionItemCategories = (): any => {
                     size="sm"
                     variant="secondary"
                     className="me-2"
+                    data-testid="actionItemCategoryUpdateModalOpenBtn"
                   >
                     {t('editButton')}
                   </Button>
@@ -208,6 +209,7 @@ const OrgActionItemCategories = (): any => {
                     }
                     size="sm"
                     variant={category.isDisabled ? 'outline-success' : 'danger'}
+                    data-testid="disabilityStatusButton"
                   >
                     {category.isDisabled
                       ? t('enableButton')
@@ -236,7 +238,7 @@ const OrgActionItemCategories = (): any => {
           <Button
             variant="danger"
             onClick={hideModal}
-            data-testid="createEventModalCloseBtn"
+            data-testid="actionItemCategoryModalCloseBtn"
           >
             <i className="fa fa-times"></i>
           </Button>
@@ -266,10 +268,10 @@ const OrgActionItemCategories = (): any => {
               type="submit"
               className={styles.greenregbtn}
               value="creatActionItemCategory"
-              data-testid="creatActionItemCategoryBtn"
+              data-testid="formSubmitButton"
             >
               {modalType === 'Create'
-                ? t('addActionItemCategory')
+                ? t('createButton')
                 : t('updateActionItemCategory')}
             </Button>
           </Form>