test coverage improved for screen components

PalisadoesFoundation · Jun 6, 2024 · 5379748 · 5379748
1 parent a83467a
commit 5379748
Show file tree

Hide file tree

Showing 6 changed files with 246 additions and 56 deletions.
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx
@@ -0,0 +1,125 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/react-testing';
+import { I18nextProvider } from 'react-i18next';
+import { Provider } from 'react-redux';
+import { BrowserRouter } from 'react-router-dom';
+import { store } from 'state/store';
+import i18nForTest from 'utils/i18nForTest';
+
+import { LocalizationProvider } from '@mui/x-date-pickers';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+import AgendaCategoryCreateModal from './AgendaCategoryCreateModal';
+
+const mockFormState = {
+  name: 'Test Name',
+  description: 'Test Description',
+  createdBy: 'Test User',
+};
+const mockHideCreateModal = jest.fn();
+const mockSetFormState = jest.fn();
+const mockCreateAgendaCategoryHandler = jest.fn();
+const mockT = (key: string): string => key;
+
+describe('AgendaCategoryCreateModal', () => {
+  test('renders modal correctly', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    expect(screen.getByText('agendaCategoryDetails')).toBeInTheDocument();
+    expect(
+      screen.getByTestId('createAgendaCategoryFormSubmitBtn'),
+    ).toBeInTheDocument();
+    expect(
+      screen.getByTestId('createAgendaCategoryModalCloseBtn'),
+    ).toBeInTheDocument();
+  });
+  test('tests the condition for formState.name and formState.description', () => {
+    const mockFormState = {
+      name: 'Test Name',
+      description: 'Test Description',
+      createdBy: 'Test User',
+    };
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+    const nameInput = screen.getByLabelText('name');
+    fireEvent.change(nameInput, {
+      target: { value: 'New name' },
+    });
+    const descriptionInput = screen.getByLabelText('description');
+    fireEvent.change(descriptionInput, {
+      target: { value: 'New description' },
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      name: 'New name',
+    });
+    expect(mockSetFormState).toHaveBeenCalledWith({
+      ...mockFormState,
+      description: 'New description',
+    });
+  });
+  test('calls createAgendaCategoryHandler when form is submitted', () => {
+    render(
+      <MockedProvider addTypename={false}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <I18nextProvider i18n={i18nForTest}>
+              <LocalizationProvider dateAdapter={AdapterDayjs}>
+                <AgendaCategoryCreateModal
+                  agendaCategoryCreateModalIsOpen
+                  hideCreateModal={mockHideCreateModal}
+                  formState={mockFormState}
+                  setFormState={mockSetFormState}
+                  createAgendaCategoryHandler={mockCreateAgendaCategoryHandler}
+                  t={mockT}
+                />
+              </LocalizationProvider>
+            </I18nextProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    fireEvent.submit(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+    expect(mockCreateAgendaCategoryHandler).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx
@@ -3,8 +3,6 @@ import { Modal, Form, Button } from 'react-bootstrap';
 import type { ChangeEvent } from 'react';
 import styles from './OrganizationAgendaCategory.module.css';
 
-// import type { InterfaceAgendaItemCategoryInfo } from 'utils/interfaces';
-
 interface InterfaceFormStateType {
   name: string;
   description: string;
@@ -54,7 +52,7 @@ const AgendaCategoryCreateModal: React.FC<
             <Form.Label>{t('name')}</Form.Label>
             <Form.Control
               type="text"
-              placeholder="Category"
+              placeholder={t('name')}
               value={formState.name}
               required
               onChange={(e) =>
@@ -66,7 +64,7 @@ const AgendaCategoryCreateModal: React.FC<
             <Form.Label>{t('description')}</Form.Label>
             <Form.Control
               type="text"
-              placeholder="Description"
+              placeholder={t('description')}
               required
               value={formState.description}
               onChange={(e) =>

diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx
@@ -11,7 +11,7 @@ import i18nForTest from 'utils/i18nForTest';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 
-import AgendaCategoryUpdateModal from './/AgendaCategoryUpdateModal';
+import AgendaCategoryUpdateModal from './AgendaCategoryUpdateModal';
 
 const mockFormState = {
   name: 'Test Name',
@@ -79,7 +79,7 @@ describe('AgendaCategoryUpdateModal', () => {
     expect(mockHideUpdateModal).toHaveBeenCalledTimes(1);
   });
 
-  test('tests the condition for formState.preCompletionNotes', () => {
+  test('tests the condition for formState.name and formState.description', () => {
     const mockFormState = {
       name: 'Test Name',
       description: 'Test Description',

diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategory.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import {
   render,
   screen,
-  fireEvent,
   waitFor,
   act,
   waitForElementToBeRemoved,
@@ -27,7 +26,7 @@ import {
   MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY,
   MOCKS_ERROR_MUTATION,
 } from './OrganizationAgendaCategoryErrorMocks';
-import { MOCKS } from './/OrganizationAgendaCategoryMocks';
+import { MOCKS } from './OrganizationAgendaCategoryMocks';
 
 jest.mock('react-toastify', () => ({
   toast: {
@@ -63,16 +62,14 @@ const translations = {
         {},
     ),
   ),
-  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.common ?? {})),
-  ...JSON.parse(JSON.stringify(i18n.getDataByLanguage('en')?.errors ?? {})),
 };
 
 describe('Testing Agenda Categories Component', () => {
   const formData = {
-    name: 'Test Name',
+    name: 'Category',
     description: 'Test Description',
+    createdBy: 'Test User',
   };
-
   test('Component loads correctly', async () => {
     const { getByText } = render(
       <MockedProvider addTypename={false} link={link}>
@@ -148,45 +145,91 @@ describe('Testing Agenda Categories Component', () => {
       screen.queryByTestId('createAgendaCategoryModalCloseBtn'),
     );
   });
+  test('creates new agenda cagtegory', async () => {
+    render(
+      <MockedProvider addTypename={false} link={link}>
+        <Provider store={store}>
+          <BrowserRouter>
+            <LocalizationProvider dateAdapter={AdapterDayjs}>
+              <I18nextProvider i18n={i18n}>
+                {<OrganizationAgendaCategory />}
+              </I18nextProvider>
+            </LocalizationProvider>
+          </BrowserRouter>
+        </Provider>
+      </MockedProvider>,
+    );
+
+    await wait();
+
+    await waitFor(() => {
+      expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+    });
+    userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+    await waitFor(() => {
+      return expect(
+        screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+      ).resolves.toBeInTheDocument();
+    });
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.name),
+      formData.name,
+    );
+
+    userEvent.type(
+      screen.getByPlaceholderText(translations.description),
+      formData.description,
+    );
+    userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
+
+    await waitFor(() => {
+      expect(toast.success).toBeCalledWith(translations.agendaCategoryCreated);
+    });
+  });
+
+  // test('toasts error on unsuccessful creation', async () => {
+  //   render(
+  //     <MockedProvider addTypename={false} link={link3}>
+  //       <Provider store={store}>
+  //         <BrowserRouter>
+  //           <LocalizationProvider dateAdapter={AdapterDayjs}>
+  //             <I18nextProvider i18n={i18n}>
+  //               {<OrganizationAgendaCategory />}
+  //             </I18nextProvider>
+  //           </LocalizationProvider>
+  //         </BrowserRouter>
+  //       </Provider>
+  //     </MockedProvider>,
+  //   );
+
+  //   await wait();
+
+  //   await waitFor(() => {
+  //     expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
+  //   });
+  //   userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
+
+  //   await waitFor(() => {
+  //     return expect(
+  //       screen.findByTestId('createAgendaCategoryModalCloseBtn'),
+  //     ).resolves.toBeInTheDocument();
+  //   });
+
+  //   userEvent.type(
+  //     screen.getByPlaceholderText(translations.name),
+  //     formData.name,
+  //   );
+
+  //   userEvent.type(
+  //     screen.getByPlaceholderText(translations.description),
+  //     formData.description,
+  //   );
+  //   userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
 
-  //   test('creates new agenda category with correct orgId', async () => {
-  //     render(
-  //       <MockedProvider mocks={MOCKS} addTypename={false}>
-  //         <Provider store={store}>
-  //           <BrowserRouter>
-  //             <LocalizationProvider dateAdapter={AdapterDayjs}>
-  //               <I18nextProvider i18n={i18n}>
-  //                 <OrganizationAgendaCategory />
-  //               </I18nextProvider>
-  //             </LocalizationProvider>
-  //           </BrowserRouter>
-  //         </Provider>
-  //       </MockedProvider>,
-  //     );
-
-  //     await wait();
-
-  //     await waitFor(() => {
-  //       expect(screen.getByTestId('createAgendaCategoryBtn')).toBeInTheDocument();
-  //     });
-  //     userEvent.click(screen.getByTestId('createAgendaCategoryBtn'));
-
-  //     await waitFor(() => {
-  //       expect(
-  //         screen.getByTestId('createAgendaCategoryModalCloseBtn'),
-  //       ).toBeInTheDocument();
-  //     });
-
-  //     userEvent.type(screen.getByPlaceholderText('Category'), formData.name);
-  //     userEvent.type(
-  //       screen.getByPlaceholderText('Description'),
-  //       formData.description,
-  //     );
-
-  //     userEvent.click(screen.getByTestId('createAgendaCategoryFormSubmitBtn'));
-
-  //     await waitFor(() => {
-  //       expect(toast.success).toBeCalledWith(translations.agendaCategoryCreated);
-  //     });
+  //   await waitFor(() => {
+  //     expect(toast.error).toBeCalledWith();
   //   });
+  // });
 });
diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryErrorMocks.ts
@@ -13,13 +13,37 @@ export const MOCKS_ERROR_AGENDA_ITEM_CATEGORY_LIST_QUERY = [
 ];
 
 export const MOCKS_ERROR_MUTATION = [
+  {
+    request: {
+      query: AGENDA_ITEM_CATEGORY_LIST,
+      variables: { organizationId: '123' },
+    },
+    result: {
+      data: {
+        agendaItemCategoriesByOrganization: [
+          {
+            _id: 'agendaItemCategory1',
+            name: 'Category',
+            description: 'Test Description',
+            createdBy: {
+              _id: 'user1',
+              firstName: 'Harve',
+              lastName: 'Lance',
+            },
+          },
+        ],
+      },
+    },
+  },
   {
     request: {
       query: CREATE_AGENDA_ITEM_CATEGORY_MUTATION,
       variables: {
-        name: 'Test Name',
-        description: 'Test Description',
-        organizationId: '123',
+        input: {
+          organizationId: '123',
+          name: 'Category',
+          description: 'Test Description',
+        },
       },
     },
     error: new Error('Mock Graphql Error'),

diff --git a/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts b/src/screens/OrganizationAgendaCategory/OrganizationAgendaCategoryMocks.ts
@@ -13,7 +13,7 @@ export const MOCKS = [
         agendaItemCategoriesByOrganization: [
           {
             _id: 'agendaItemCategory1',
-            name: 'Test Name',
+            name: 'Category',
             description: 'Test Description',
             createdBy: {
               _id: 'user1',
@@ -31,7 +31,7 @@ export const MOCKS = [
       variables: {
         input: {
           organizationId: '123',
-          name: 'Test Name',
+          name: 'Category',
           description: 'Test Description',
         },
       },