diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.test.tsx new file mode 100644 index 0000000000..da92dfd201 --- /dev/null +++ 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( + + + + + + + + + + + , + ); + + 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( + + + + + + + + + + + , + ); + 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( + + + + + + + + + + + , + ); + + fireEvent.submit(screen.getByTestId('createAgendaCategoryFormSubmitBtn')); + expect(mockCreateAgendaCategoryHandler).toHaveBeenCalledTimes(1); + }); +}); diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryCreateModal.tsx index 88132d72a1..9b260d877f 100644 --- 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< {t('name')} @@ -66,7 +64,7 @@ const AgendaCategoryCreateModal: React.FC< {t('description')} diff --git a/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx b/src/screens/OrganizationAgendaCategory/AgendaCategoryUpdateModal.test.tsx index b22794fa3d..168b97abd3 100644 --- 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 index 11120f2cc0..732db13a74 100644 --- 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( @@ -148,45 +145,91 @@ describe('Testing Agenda Categories Component', () => { screen.queryByTestId('createAgendaCategoryModalCloseBtn'), ); }); + test('creates new agenda cagtegory', async () => { + render( + + + + + + {} + + + + + , + ); + + 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( + // + // + // + // + // + // {} + // + // + // + // + // , + // ); + + // 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( - // - // - // - // - // - // - // - // - // - // - // , - // ); - - // 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 index 5bacfad16d..10809c3da8 100644 --- 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 index 97160798cf..434b0dcad2 100644 --- 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', }, },