From 42d9bdbb08928768140e5ddad734f2120339dfd9 Mon Sep 17 00:00:00 2001 From: Al Rosenthal Date: Thu, 21 Sep 2023 11:12:33 -0700 Subject: [PATCH] TechDebt: User Role Selection Testing (#1082) User Role Selection Testing --- .../components/user/UserRoleSelector.test.tsx | 128 +++++++++++++ app/src/components/user/UserRoleSelector.tsx | 2 + .../components/ProjectUserForm.test.tsx | 174 ++++++++++++++++++ .../components/SurveyUserForm.test.tsx | 171 +++++++++++++++++ 4 files changed, 475 insertions(+) create mode 100644 app/src/components/user/UserRoleSelector.test.tsx create mode 100644 app/src/features/projects/components/ProjectUserForm.test.tsx create mode 100644 app/src/features/surveys/components/SurveyUserForm.test.tsx diff --git a/app/src/components/user/UserRoleSelector.test.tsx b/app/src/components/user/UserRoleSelector.test.tsx new file mode 100644 index 0000000000..e6fd6b6e9d --- /dev/null +++ b/app/src/components/user/UserRoleSelector.test.tsx @@ -0,0 +1,128 @@ +import { PROJECT_ROLE } from 'constants/roles'; +import { ICode } from 'interfaces/useCodesApi.interface'; +import { act, fireEvent, render, waitFor, within } from 'test-helpers/test-utils'; +import UserRoleSelector from './UserRoleSelector'; + +const roles: ICode[] = [ + { + id: 1, + name: PROJECT_ROLE.COLLABORATOR + }, + { + id: 2, + name: PROJECT_ROLE.COORDINATOR + }, + { + id: 3, + name: PROJECT_ROLE.OBSERVER + } +]; + +describe('UserRoleSelector', () => { + it('renders correctly with default values', async () => { + const { getByText } = render( + {}} + handleRemove={() => {}} + key={1} + label={'Select a Role'} + /> + ); + + await waitFor(async () => { + expect(getByText('Test User', { exact: false })).toBeVisible(); + }); + }); + + it('remove user function runs', async () => { + const onDelete = jest.fn(); + const { getByTestId } = render( + {}} + handleRemove={onDelete} + key={1} + label={'Select a Role'} + /> + ); + + await act(async () => { + const button = getByTestId('remove-user-role-button-0'); + fireEvent.click(button); + + expect(onDelete).toBeCalled(); + }); + }); + + it('Add role to user', async () => { + const onDelete = jest.fn(); + const onAdd = jest.fn(); + + const { getAllByRole, getByRole } = render( + + ); + + fireEvent.mouseDown(getAllByRole('button')[0]); + const listbox = within(getByRole('listbox')); + fireEvent.click(listbox.getByText('Coordinator', { exact: false })); + + await waitFor(() => { + expect(onAdd).toBeCalled(); + }); + }); +}); diff --git a/app/src/components/user/UserRoleSelector.tsx b/app/src/components/user/UserRoleSelector.tsx index 8d78030485..76fa14289b 100644 --- a/app/src/components/user/UserRoleSelector.tsx +++ b/app/src/components/user/UserRoleSelector.tsx @@ -48,6 +48,7 @@ const UserRoleSelector: React.FC = (props) => { , []>() + } +}; + +describe('ProjectUserForm', () => { + beforeEach(() => { + mockBiohubApi.mockImplementation(() => mockUseApi); + mockUseApi.user.searchSystemUser.mockClear(); + + mockUseApi.user.searchSystemUser.mockResolvedValue([ + { + system_user_id: 1, + user_identifier: 'identifier', + user_guid: '', + identity_source: 'IDIR', + record_end_date: '', + role_ids: [], + role_names: [], + email: 'user@email.com', + display_name: 'Test User', + agency: 'Business' + }, + { + system_user_id: 2, + user_identifier: 'identifier', + user_guid: '', + identity_source: 'IDIR', + record_end_date: '', + role_ids: [], + role_names: [], + email: 'user@email.com', + display_name: 'Jim Testy', + agency: 'Business' + } + ]); + }); + + it('renders correctly with default values', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId, getByText } = render( + + {}}> + + + + ); + + await waitFor(async () => { + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByText('Test User', { exact: false })).toBeVisible(); + }); + }); + + it('renders newly added users properly', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId, getByText } = render( + + {}}> + + + + ); + + await waitFor(async () => { + const autocomplete = getByTestId('autocomplete-user-role-search'); + const input = within(autocomplete).getByPlaceholderText('Find team members'); + + // Search for a user + fireEvent.change(input, { target: { value: 'Test User' } }); + // Arrow down to user in field + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }); + // select the first item + fireEvent.keyDown(autocomplete, { key: 'Enter' }); + + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByText('Test User')).toBeVisible(); + }); + }); + + it('renders removing a user', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId } = render( + + {}}> + + + + ); + + await waitFor(async () => { + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByTestId('remove-user-role-button-0')).toBeVisible(); + }); + }); +}); diff --git a/app/src/features/surveys/components/SurveyUserForm.test.tsx b/app/src/features/surveys/components/SurveyUserForm.test.tsx new file mode 100644 index 0000000000..1879bc9f99 --- /dev/null +++ b/app/src/features/surveys/components/SurveyUserForm.test.tsx @@ -0,0 +1,171 @@ +import { AuthStateContext } from 'contexts/authStateContext'; +import { Formik } from 'formik'; +import { useBiohubApi } from 'hooks/useBioHubApi'; +import { ICode } from 'interfaces/useCodesApi.interface'; +import { ISystemUser } from 'interfaces/useUserApi.interface'; +import { getMockAuthState, SystemAdminAuthState } from 'test-helpers/auth-helpers'; +import { fireEvent, render, waitFor, within } from 'test-helpers/test-utils'; +import SurveyUserForm, { SurveyUserJobFormInitialValues, SurveyUserJobYupSchema } from './SurveyUserForm'; + +const roles: ICode[] = [ + { + id: 1, + name: 'Pilot' + }, + { + id: 2, + name: 'Biologist' + } +]; + +jest.mock('../../../hooks/useBioHubApi'); +const mockBiohubApi = useBiohubApi as jest.Mock; + +const mockUseApi = { + user: { + searchSystemUser: jest.fn, []>() + } +}; + +describe('SurveyUserForm', () => { + beforeEach(() => { + mockBiohubApi.mockImplementation(() => mockUseApi); + mockUseApi.user.searchSystemUser.mockClear(); + + mockUseApi.user.searchSystemUser.mockResolvedValue([ + { + system_user_id: 1, + user_identifier: 'identifier', + user_guid: '', + identity_source: 'IDIR', + record_end_date: '', + role_ids: [], + role_names: [], + email: 'user@email.com', + display_name: 'Test User', + agency: 'Business' + }, + { + system_user_id: 2, + user_identifier: 'identifier', + user_guid: '', + identity_source: 'IDIR', + record_end_date: '', + role_ids: [], + role_names: [], + email: 'user@email.com', + display_name: 'Jim Testy', + agency: 'Business' + } + ]); + }); + + it('renders correctly with default values', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId, getByText } = render( + + {}}> + + + + ); + + await waitFor(async () => { + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByText('Test User', { exact: false })).toBeVisible(); + }); + }); + + it('renders newly added users properly', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId, getByText } = render( + + {}}> + + + + ); + + await waitFor(async () => { + const autocomplete = getByTestId('autocomplete-user-role-search'); + const input = within(autocomplete).getByPlaceholderText('Find people'); + + // Search for a user + fireEvent.change(input, { target: { value: 'Test User' } }); + // Arrow down to user in field + fireEvent.keyDown(autocomplete, { key: 'ArrowDown' }); + // select the first item + fireEvent.keyDown(autocomplete, { key: 'Enter' }); + + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByText('Test User')).toBeVisible(); + }); + }); + + it('renders removing a user', async () => { + const authState = getMockAuthState({ base: SystemAdminAuthState }); + const { getByTestId } = render( + + {}}> + + + + ); + + await waitFor(async () => { + expect(getByTestId('autocomplete-user-role-search')).toBeVisible(); + expect(getByTestId('remove-user-role-button-0')).toBeVisible(); + }); + }); +});