From f956b7b0b83be03eabf61b6de3498b7aa286a0e7 Mon Sep 17 00:00:00 2001 From: meetul Date: Wed, 31 Jan 2024 14:08:09 +0530 Subject: [PATCH] add tests --- .../OrgActionItemCategories.test.tsx | 340 ++++++++++++++++++ .../OrgActionItemCategories.tsx | 12 +- .../OrgActionItemCategoryMocks.ts | 174 +++++++++ src/screens/OrgSettings/OrgSettings.test.tsx | 35 +- src/screens/OrgSettings/OrgSettings.tsx | 14 +- 5 files changed, 562 insertions(+), 13 deletions(-) create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx create mode 100644 src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx b/src/components/OrgActionItemCategories/OrgActionItemCategories.test.tsx new file mode 100644 index 0000000000..99348ad29f --- /dev/null +++ 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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( + + + + + {} + + + + + ); + + 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 index e6f72e5924..72ca3d546f 100644 --- a/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx +++ b/src/components/OrgActionItemCategories/OrgActionItemCategories.tsx @@ -83,7 +83,7 @@ const OrgActionItemCategories = (): any => { const handleEdit = async (e: ChangeEvent): Promise => { 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" > {t('createButton')} @@ -199,6 +199,7 @@ const OrgActionItemCategories = (): any => { size="sm" variant="secondary" className="me-2" + data-testid="actionItemCategoryUpdateModalOpenBtn" > {t('editButton')} @@ -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 => { @@ -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')} diff --git a/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts new file mode 100644 index 0000000000..b03e53c5f5 --- /dev/null +++ b/src/components/OrgActionItemCategories/OrgActionItemCategoryMocks.ts @@ -0,0 +1,174 @@ +import { + CREATE_ACTION_ITEM_CATEGORY_MUTATION, + UPDATE_ACTION_ITEM_CATEGORY_MUTATION, +} from 'GraphQl/Mutations/mutations'; + +import { ACTION_ITEM_CATEGORY_LIST } from 'GraphQl/Queries/Queries'; + +export const MOCKS = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + result: { + data: { + actionItemCategoriesByOrganization: [ + { + _id: '1', + name: 'ActionItemCategory 1', + isDisabled: false, + }, + { + _id: '2', + name: 'ActionItemCategory 2', + isDisabled: true, + }, + { + _id: '3', + name: 'ActionItemCategory 3', + isDisabled: false, + }, + ], + }, + }, + }, + { + request: { + query: CREATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { name: 'ActionItemCategory 4', organizationId: '123' }, + }, + result: { + data: { + createActionItemCategory: { + _id: '4', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + name: 'ActionItemCategory 1 updated', + actionItemCategoryId: '1', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '1', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: true, + actionItemCategoryId: '1', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '1', + }, + }, + }, + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: false, + actionItemCategoryId: '2', + }, + }, + result: { + data: { + updateActionItemCategory: { + _id: '2', + }, + }, + }, + }, +]; + +export const MOCKS_ERROR_QUERY = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + error: new Error('Mock Graphql Error'), + }, +]; + +export const MOCKS_ERROR_MUTATIONS = [ + { + request: { + query: ACTION_ITEM_CATEGORY_LIST, + variables: { organizationId: '123' }, + }, + result: { + data: { + actionItemCategoriesByOrganization: [ + { + _id: '1', + name: 'ActionItemCategory 1', + isDisabled: false, + }, + { + _id: '2', + name: 'ActionItemCategory 2', + isDisabled: true, + }, + { + _id: '3', + name: 'ActionItemCategory 3', + isDisabled: false, + }, + ], + }, + }, + }, + { + request: { + query: CREATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { name: 'ActionItemCategory 4', organizationId: '123' }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + name: 'ActionItemCategory 1 updated', + actionItemCategoryId: '1', + }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: true, + actionItemCategoryId: '1', + }, + }, + error: new Error('Mock Graphql Error'), + }, + { + request: { + query: UPDATE_ACTION_ITEM_CATEGORY_MUTATION, + variables: { + isDisabled: false, + actionItemCategoryId: '2', + }, + }, + error: new Error('Mock Graphql Error'), + }, +]; diff --git a/src/screens/OrgSettings/OrgSettings.test.tsx b/src/screens/OrgSettings/OrgSettings.test.tsx index a5323f39c5..a561a15162 100644 --- a/src/screens/OrgSettings/OrgSettings.test.tsx +++ b/src/screens/OrgSettings/OrgSettings.test.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { MockedProvider } from '@apollo/react-testing'; -import { render, screen } from '@testing-library/react'; +import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import 'jest-location-mock'; import { I18nextProvider } from 'react-i18next'; import { Provider } from 'react-redux'; @@ -80,6 +80,10 @@ const MOCKS = [ const link = new StaticMockLink(MOCKS, true); +const translations = JSON.parse( + JSON.stringify(i18nForTest.getDataByLanguage('en')?.translation.orgSettings) +); + afterEach(() => { localStorage.clear(); }); @@ -118,4 +122,33 @@ describe('Organisation Settings Page', () => { expect(screen.getByText(/Change Language/i)).toBeInTheDocument(); expect(window.location).toBeAt('/orgsetting/id=123'); }); + + test('should render appropriate settings based on the orgSetting state', async () => { + window.location.assign('/orgsetting/id=123'); + localStorage.setItem('UserType', 'SUPERADMIN'); + + const { getByText, queryByText } = render( + + + + + + + + + + ); + + await waitFor(() => { + fireEvent.click(getByText(translations.actionItemCategorySettings)); + expect( + queryByText(translations.actionItemCategories) + ).toBeInTheDocument(); + }); + + await waitFor(() => { + fireEvent.click(getByText(translations.generalSettings)); + expect(queryByText(translations.updateOrganization)).toBeInTheDocument(); + }); + }); }); diff --git a/src/screens/OrgSettings/OrgSettings.tsx b/src/screens/OrgSettings/OrgSettings.tsx index b82fbf425f..bd8a08c67b 100644 --- a/src/screens/OrgSettings/OrgSettings.tsx +++ b/src/screens/OrgSettings/OrgSettings.tsx @@ -18,7 +18,7 @@ function orgSettings(): JSX.Element { keyPrefix: 'orgSettings', }); - const [setting, setSetting] = useState('General'); + const [orgSetting, setOrgSetting] = useState('General'); document.title = t('title'); const orgId = window.location.href.split('=')[1]; @@ -34,20 +34,20 @@ function orgSettings(): JSX.Element { @@ -58,7 +58,7 @@ function orgSettings(): JSX.Element { - {setting === 'General' && ( + {orgSetting === 'General' && ( @@ -103,7 +103,7 @@ function orgSettings(): JSX.Element { )} - {setting === 'ActionItemCategories' && ( + {orgSetting === 'ActionItemCategories' && (