TechDebt: User Role Selection Testing (#1082)

User Role Selection Testing

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(
+      <UserRoleSelector
+        index={0}
+        user={{
+          system_user_id: 1,
+          user_identifier: 'identifier',
+          user_guid: '',
+          identity_source: 'IDIR',
+          record_end_date: '',
+          role_ids: [],
+          role_names: [],
+          email: '[email protected]',
+          display_name: 'Test User',
+          agency: 'Business',
+          project_role_names: [PROJECT_ROLE.COORDINATOR]
+        }}
+        roles={roles}
+        error={undefined}
+        selectedRole={PROJECT_ROLE.COORDINATOR}
+        handleAdd={() => {}}
+        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(
+      <UserRoleSelector
+        index={0}
+        user={{
+          system_user_id: 1,
+          user_identifier: 'identifier',
+          user_guid: '',
+          identity_source: 'IDIR',
+          record_end_date: '',
+          role_ids: [],
+          role_names: [],
+          email: '[email protected]',
+          display_name: 'Test User',
+          agency: 'Business',
+          project_role_names: [PROJECT_ROLE.COORDINATOR]
+        }}
+        roles={roles}
+        error={undefined}
+        selectedRole={PROJECT_ROLE.COORDINATOR}
+        handleAdd={() => {}}
+        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(
+      <UserRoleSelector
+        index={0}
+        user={{
+          system_user_id: 1,
+          user_identifier: 'identifier',
+          user_guid: '',
+          identity_source: 'IDIR',
+          record_end_date: '',
+          role_ids: [],
+          role_names: [],
+          email: '[email protected]',
+          display_name: 'Test User',
+          agency: 'Business',
+          project_role_names: []
+        }}
+        roles={roles}
+        error={undefined}
+        selectedRole={''}
+        handleAdd={onAdd}
+        handleRemove={onDelete}
+        key={1}
+        label={'Select a Role'}
+      />
+    );
+
+    fireEvent.mouseDown(getAllByRole('button')[0]);
+    const listbox = within(getByRole('listbox'));
+    fireEvent.click(listbox.getByText('Coordinator', { exact: false }));
+
+    await waitFor(() => {
+      expect(onAdd).toBeCalled();
+    });
+  });
+});

app/src/components/user/UserRoleSelector.tsx

@@ -48,6 +48,7 @@ const UserRoleSelector: React.FC<IUserRoleSelectorProps> = (props) => {
           <Box flex="0 0 auto">
             <Select
               size="small"
+              data-testid={`select-user-role-button-${index}`}
               sx={{ width: '200px', backgroundColor: '#fff' }}
               displayEmpty
               value={selectedRole}
@@ -67,6 +68,7 @@ const UserRoleSelector: React.FC<IUserRoleSelectorProps> = (props) => {
               ))}
             </Select>
             <IconButton
+              data-testid={`remove-user-role-button-${index}`}
               sx={{
                 ml: 2
               }}

app/src/features/projects/components/ProjectUserForm.test.tsx

@@ -0,0 +1,174 @@
+import { PROJECT_ROLE } from 'constants/roles';
+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 ProjectUserForm, { ProjectUserRoleFormInitialValues, ProjectUserRoleYupSchema } from './ProjectUserForm';
+
+const roles: ICode[] = [
+  {
+    id: 1,
+    name: PROJECT_ROLE.COLLABORATOR
+  },
+  {
+    id: 2,
+    name: PROJECT_ROLE.COORDINATOR
+  },
+  {
+    id: 3,
+    name: PROJECT_ROLE.OBSERVER
+  }
+];
+
+jest.mock('../../../hooks/useBioHubApi');
+const mockBiohubApi = useBiohubApi as jest.Mock;
+
+const mockUseApi = {
+  user: {
+    searchSystemUser: jest.fn<Promise<ISystemUser[]>, []>()
+  }
+};
+
+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: '[email protected]',
+        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: '[email protected]',
+        display_name: 'Jim Testy',
+        agency: 'Business'
+      }
+    ]);
+  });
+
+  it('renders correctly with default values', async () => {
+    const authState = getMockAuthState({ base: SystemAdminAuthState });
+    const { getByTestId, getByText } = render(
+      <AuthStateContext.Provider value={authState}>
+        <Formik
+          initialValues={ProjectUserRoleFormInitialValues}
+          validationSchema={ProjectUserRoleYupSchema}
+          validateOnBlur={true}
+          validateOnChange={false}
+          onSubmit={async () => {}}>
+          <ProjectUserForm
+            users={[
+              {
+                system_user_id: 1,
+                user_identifier: 'identifier',
+                user_guid: '',
+                identity_source: 'IDIR',
+                record_end_date: '',
+                role_ids: [],
+                role_names: [],
+                email: '[email protected]',
+                display_name: 'Test User',
+                agency: 'Business',
+                project_role_names: [PROJECT_ROLE.COORDINATOR]
+              }
+            ]}
+            roles={roles}
+          />
+        </Formik>
+      </AuthStateContext.Provider>
+    );
+
+    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(
+      <AuthStateContext.Provider value={authState}>
+        <Formik
+          initialValues={ProjectUserRoleFormInitialValues}
+          validationSchema={ProjectUserRoleYupSchema}
+          validateOnBlur={true}
+          validateOnChange={false}
+          onSubmit={async () => {}}>
+          <ProjectUserForm users={[]} roles={roles} />
+        </Formik>
+      </AuthStateContext.Provider>
+    );
+
+    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(
+      <AuthStateContext.Provider value={authState}>
+        <Formik
+          initialValues={ProjectUserRoleFormInitialValues}
+          validationSchema={ProjectUserRoleYupSchema}
+          validateOnBlur={true}
+          validateOnChange={false}
+          onSubmit={async () => {}}>
+          <ProjectUserForm
+            users={[
+              {
+                system_user_id: 1,
+                user_identifier: 'identifier',
+                user_guid: '',
+                identity_source: 'IDIR',
+                record_end_date: '',
+                role_ids: [],
+                role_names: [],
+                email: '[email protected]',
+                display_name: 'Test User',
+                agency: 'Business',
+                project_role_names: [PROJECT_ROLE.COORDINATOR]
+              }
+            ]}
+            roles={roles}
+          />
+        </Formik>
+      </AuthStateContext.Provider>
+    );
+
+    await waitFor(async () => {
+      expect(getByTestId('autocomplete-user-role-search')).toBeVisible();
+      expect(getByTestId('remove-user-role-button-0')).toBeVisible();
+    });
+  });
+});