JN-590 - fixing consent form view for past versions (#564)

ui-admin/src/study/participants/enrolleeView/EnrolleeView.test.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import EnrolleeView from './EnrolleeView'
 import { setupRouterTest } from 'test-utils/router-testing-utils'
-import { mockEnrollee, mockStudyEnvContext, taskForSurvey } from 'test-utils/mocking-utils'
+import { mockEnrollee, mockStudyEnvContext, taskForForm } from 'test-utils/mocking-utils'
 import { render, screen } from '@testing-library/react'
 
 
@@ -19,7 +19,6 @@ test('renders survey links for configured surveys', async () => {
   expect(surveyLink.querySelector('span')).toBeNull()
 })
 
-
 test('renders survey taken badges', async () => {
   const studyEnvContext = mockStudyEnvContext()
   const enrollee = mockEnrollee()
@@ -30,7 +29,8 @@ test('renders survey taken badges', async () => {
     complete: false,
     enrolleeId: enrollee.id
   })
-  enrollee.participantTasks.push(taskForSurvey(studyEnvContext.currentEnv.configuredSurveys[0].survey, enrollee.id))
+  enrollee.participantTasks
+    .push(taskForForm(studyEnvContext.currentEnv.configuredSurveys[0].survey, enrollee.id, false))
 
   const { RoutedComponent } = setupRouterTest(
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -42,3 +42,38 @@ test('renders survey taken badges', async () => {
 })
 
 
+test('renders consent links for configured consents', async () => {
+  const studyEnvContext = mockStudyEnvContext()
+  const enrollee = mockEnrollee()
+
+  const { RoutedComponent } = setupRouterTest(
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    <EnrolleeView enrollee={enrollee} studyEnvContext={studyEnvContext} onUpdate={() => {}}/>)
+  render(RoutedComponent)
+  const surveyLink = screen.getByText('Mock consent')
+  // should have no badge since the enrollee hasn't completed the consent
+  expect(surveyLink.querySelector('span')).toBeNull()
+})
+
+test('renders consent taken badges', async () => {
+  const studyEnvContext = mockStudyEnvContext()
+  const enrollee = mockEnrollee()
+  enrollee.consentResponses.push({
+    consentFormId: studyEnvContext.currentEnv.configuredConsents[0].consentFormId,
+    resumeData: '',
+    consented: true,
+    completed: true,
+    fullData: '',
+    enrolleeId: enrollee.id
+  })
+  enrollee.participantTasks
+    .push(taskForForm(studyEnvContext.currentEnv.configuredConsents[0].consentForm, enrollee.id, true))
+
+  const { RoutedComponent } = setupRouterTest(
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    <EnrolleeView enrollee={enrollee} studyEnvContext={studyEnvContext} onUpdate={() => {}}/>)
+  render(RoutedComponent)
+  const consentLink = screen.getByText('Mock consent')
+  // should show a completed checkmark
+  expect(consentLink.querySelector('title')?.textContent).toEqual('completed')
+})

ui-admin/src/study/participants/enrolleeView/EnrolleeView.tsx

@@ -53,15 +53,20 @@ export default function EnrolleeView({ enrollee, studyEnvContext, onUpdate }:
       .filter(task => task.targetStableId === configSurvey.survey.stableId)
       .map(task => task.surveyResponseId)
     const matchedResponses = enrollee.surveyResponses
-      .filter(response => matchedResponseIds.includes(response.id as string))
+      .filter(response => matchedResponseIds.includes(response.id))
     responseMap[configSurvey.survey.stableId] = { survey: configSurvey, responses: matchedResponses }
   })
 
   const consents = currentEnv.configuredConsents
   const consentMap: ConsentResponseMapT = {}
   consents.forEach(configConsent => {
+    // to match responses to consents, filter using the tasks, since those have the stableIds
+    // this is valid since it's currently enforced that all consents are done as part of a task,
+    const matchedResponseIds = enrollee.participantTasks
+      .filter(task => task.targetStableId === configConsent.consentForm.stableId)
+      .map(task => task.consentResponseId)
     const matchedResponses = enrollee.consentResponses
-      .filter(response => configConsent.consentForm.id === response.consentFormId)
+      .filter(response => matchedResponseIds.includes(response.id))
     consentMap[configConsent.consentForm.stableId] = { consent: configConsent, responses: matchedResponses }
   })
 
@@ -103,7 +108,8 @@ export default function EnrolleeView({ enrollee, studyEnvContext, onUpdate }:
                       <NavLink to={`consents/${stableId}`} className={getLinkCssClasses}>
                         { consent.consentForm.name }
                         { isConsented(consentMap[stableId].responses) &&
-                          <FontAwesomeIcon className="text-success ms-2 fa-lg" icon={faCheck}/>
+                          <FontAwesomeIcon className="text-success ms-2 fa-lg" icon={faCheck}
+                            title="completed"/>
                         }
                       </NavLink>
                     </li>

ui-admin/src/test-utils/mocking-utils.tsx

@@ -1,5 +1,15 @@
 import { StudyEnvContextT } from 'study/StudyEnvironmentRouter'
-import { DatasetDetails, Enrollee, KitRequest, KitType, NotificationConfig, ParticipantNote, Portal } from 'api/api'
+import {
+  ConsentForm,
+  DatasetDetails,
+  Enrollee,
+  KitRequest,
+  KitType,
+  NotificationConfig,
+  ParticipantNote,
+  Portal,
+  StudyEnvironmentConsent
+} from 'api/api'
 import { Survey } from '@juniper/ui-core/build/types/forms'
 import { ParticipantTask } from '@juniper/ui-core/build/types/task'
 
@@ -80,7 +90,7 @@ export const mockStudyEnvContext: () => StudyEnvContextT = () => ({
   currentEnv: {
     environmentName: 'sandbox',
     id: 'studyEnvId',
-    configuredConsents: [],
+    configuredConsents: [mockConfiguredConsent()],
     configuredSurveys: [mockConfiguredSurvey()],
     notificationConfigs: [],
     studyEnvironmentConfig: {
@@ -112,6 +122,33 @@ export const mockConfiguredSurvey: () => StudyEnvironmentSurvey = () => {
   }
 }
 
+/** Mock StudyEnvironmentConsent */
+export const mockConfiguredConsent = (): StudyEnvironmentConsent => {
+  return {
+    id: 'fakeGuid',
+    consentFormId: 'consentId1',
+    consentOrder: 1,
+    consentForm: mockConsentForm(),
+    allowAdminEdit: false,
+    allowParticipantReedit: false,
+    allowParticipantStart: true,
+    prepopulate: false
+  }
+}
+
+/** fake ConsentForm */
+export const mockConsentForm = (): ConsentForm => {
+  return {
+    id: 'fakeGuid2',
+    content: '{"pages": []}',
+    stableId: 'form1',
+    version: 1,
+    name: 'Mock consent',
+    createdAt: 0,
+    lastUpdatedAt: 0
+  }
+}
+
 export const mockDatasetDetails: (datasetName: string, status: string) => DatasetDetails =
   /** returns mock dataset for use/extension in tests */
   (datasetName: string, status: string) => ({
@@ -203,7 +240,8 @@ export const mockEnrollee: () => Enrollee = () => {
 }
 
 /** helper function to generate a ParticipantTask object for a survey and enrollee */
-export const taskForSurvey = (survey: Survey, enrolleeId: string): ParticipantTask => {
+export const taskForForm = (form: Survey | ConsentForm, enrolleeId: string,
+  isConsent: boolean): ParticipantTask => {
   return {
     id: randomString(10),
     blocksHub: false,
@@ -212,10 +250,10 @@ export const taskForSurvey = (survey: Survey, enrolleeId: string): ParticipantTa
     portalParticipantUserId: randomString(10),
     status: 'NEW',
     studyEnvironmentId: randomString(10),
-    taskType: 'SURVEY',
-    targetName: survey.name,
-    targetStableId: survey.stableId,
-    targetAssignedVersion: survey.version,
+    taskType: isConsent ? 'CONSENT' : 'SURVEY',
+    targetName: form.name,
+    targetStableId: form.stableId,
+    targetAssignedVersion: form.version,
     taskOrder: 1
   }
 }