Adapt CourseUnitView when a test is active

Author: AlexVelezLl

kolibri/plugins/learn/frontend/views/CourseUnitView/UnitTreeAccordion/index.vue

@@ -11,6 +11,8 @@
         :style="{
           backgroundColor: $themePalette.grey.v_100,
         }"
+        :disabled="!activeTest || activeTest.testType !== TestType.PRE"
+        :selected="activeTest && activeTest.testType === TestType.PRE"
       >
         <template #leading-actions>
           <KIcon
@@ -154,9 +156,12 @@
 
       <TreeItem
         :title="postTestLabel$()"
+        :description="postTestItemDescription"
+        :disabled="!activeTest || activeTest.testType !== TestType.POST"
         :style="{
           backgroundColor: $themePalette.grey.v_100,
         }"
+        :selected="activeTest && activeTest.testType === TestType.POST"
       >
         <template #leading-actions>
           <KIcon
@@ -168,7 +173,8 @@
         <template #trailing-actions>
           <KIcon
             class="item-icon"
-            icon="notStarted"
+            :icon="isPostTestCompleted ? 'mastered' : 'notStarted'"
+            :color="isPostTestCompleted ? $themePalette.grey.v_400 : undefined"
           />
         </template>
       </TreeItem>
@@ -188,9 +194,11 @@
   import { coreStrings } from 'kolibri/uiText/commonCoreStrings';
   import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import TimeDuration from 'kolibri-common/components/TimeDuration.vue';
+  import get from 'lodash/get';
   import { injectCourseContentProgress } from '../useCourseContentProgressTracking';
   import useContentNodeProgress from '../../../composables/useContentNodeProgress';
   import useBookmarks from '../../../composables/useBookmarks';
+  import { TestType } from '../../../constants';
   import TreeItem from './TreeItem.vue';
 
   export default {
@@ -221,6 +229,25 @@
         coursesStrings;
       const { completedLabel$, ratioLabel$, saveToBookmarks$, removeFromBookmarks$ } = coreStrings;
 
+      const isPostTestCompleted = computed(() => {
+        if (props.isUnitComplete) {
+          return true;
+        }
+        return props.activeTest?.testType === TestType.POST;
+      });
+
+      const postTestItemDescription = computed(() => {
+        if (isPostTestCompleted.value) {
+          return completedLabel$();
+        }
+        const numQuestions = get(
+          props.unitTree,
+          'options.completion_criteria.threshold.pre_post_test.version_a_item_ids.length',
+          0,
+        );
+        return ratioLabel$({ number: 0, total: numQuestions });
+      });
+
       const getLessonRatioLabel = lesson => {
         const lessonResources = lesson.children?.results || [];
         const totalResources = lessonResources.length || 0;
@@ -257,10 +284,13 @@
       };
 
       return {
+        TestType,
         lessons,
         contentNodeProgressMap,
         bookmarksMap,
+        isPostTestCompleted,
         loadingBookmarksMap,
+        postTestItemDescription,
         currentResourceProgressSessionReady,
         getResources,
         getLessonRatioLabel,
@@ -290,6 +320,18 @@
         type: String,
         default: null,
       },
+      /**
+       * Whether the current unit is already completed. i.e. we are seeing a
+       * unit previous to the current unit in the unit tree.
+       */
+      isUnitComplete: {
+        type: Boolean,
+        default: false,
+      },
+      activeTest: {
+        type: Object,
+        default: null,
+      },
       /**
        * The maximum lft of the resource that can be seen in the unit tree
        */

kolibri/plugins/learn/frontend/views/CourseUnitView/__mocks__/useCourseContentProgressTracking.js

@@ -2,6 +2,8 @@
  * `useCourseContentProgressTracking` composable function mock.
  */
 
+import { computed } from 'vue';
+
 const MOCK_DEFAULTS = {
   contentNodeProgressMap: {},
   contentNodeProgressMetaDataMap: {},
@@ -18,15 +20,23 @@ export function useCourseContentProgressMock(overrides = {}) {
 }
 
 const INJECT_DEFAULTS = {
-  sessionReady: true,
-  progress: 0,
-  time_spent: 0,
-  extra_fields: {},
+  sessionReady: computed(() => true),
+  progress: computed(() => 0),
+  time_spent: computed(() => 0),
+  extra_fields: computed(() => ({})),
+  pastattempts: computed(() => []),
+  complete: computed(() => false),
+  context: computed(() => ({})),
+  totalattempts: computed(() => 0),
+  mastery_criterion: computed(() => null),
   startTrackingProgress: jest.fn(),
   stopTrackingProgress: jest.fn(),
+  restartContentSession: jest.fn(),
   handleUpdateProgress: jest.fn(),
   handleAddProgress: jest.fn(),
+  handleUpdateInteraction: jest.fn(),
   handleUpdateContentState: jest.fn(),
+  updateContentSession: jest.fn(),
   onError: jest.fn(),
 };
 

kolibri/plugins/learn/frontend/views/CourseUnitView/index.vue

@@ -63,8 +63,10 @@
         v-if="unitTree"
         :maxResourceLft="maxResourceLft"
         :unitTree="unitTree"
+        :activeTest="activeTest"
         :currentResourceId="currentResource && currentResource.id"
         :currentLessonId="currentLesson && currentLesson.id"
+        :isUnitComplete="isUnitComplete"
         @finished="onResourceFinished"
         @navigateToResource="handleNavigateToResource"
       />
@@ -203,8 +205,24 @@
         return courseUnits.value[currentUnitIndex.value + 1];
       });
 
+      const isUnitComplete = computed(() => {
+        if (!resumeData.value || !resumeData.value.started) {
+          // no data to make a decision
+          return false;
+        }
+        // If current unit is different, it means that it is a previoius unit,
+        if (resumeData.value.active_test) {
+          return resumeData.value.active_test.unit_id !== props.unitId;
+        }
+        if (resumeData.value.resume_position) {
+          return resumeData.value.resume_position.unit_id !== props.unitId;
+        }
+        // If no resume_position, it means the course is complete,
+        return true;
+      });
+
       const canGoToNextUnit = computed(() => {
-        if (!nextUnit.value) {
+        if (!nextUnit.value || activeTest.value) {
           return false;
         }
         return props.unitId !== resumeData.value?.resume_position?.unit_id;
@@ -269,10 +287,19 @@
         return Number.MAX_SAFE_INTEGER;
       });
 
-      const prevEnabled = computed(() => currentResourceIndexInUnit.value > 0);
+      const prevEnabled = computed(() => {
+        if (activeTest.value) {
+          return false;
+        }
+        return currentResourceIndexInUnit.value > 0;
+      });
 
       const nextEnabled = computed(() => {
-        if (currentResourceIndexInUnit.value === null || maxResourceLft.value === null) {
+        if (
+          activeTest.value ||
+          currentResourceIndexInUnit.value === null ||
+          maxResourceLft.value === null
+        ) {
           return false;
         }
         if (currentResourceIndexInUnit.value >= unitResources.value.length - 1) {
@@ -307,7 +334,6 @@
         if (index >= 0) {
           return index;
         }
-        // Shouldn't get here
         return null;
       });
 
@@ -333,6 +359,10 @@
       };
 
       const onResourceFinished = () => {
+        if (activeTest.value) {
+          // when active test, we do nothing when the learner finishes its pre/post test.
+          return;
+        }
         if (
           !resumeData.value?.resume_position ||
           // If finished resource is not the current resource in resume position
@@ -792,6 +822,8 @@
         previousAvailableResource,
         maxResourceLft,
         resourceLayoutRef,
+        isUnitComplete,
+        activeTest,
         handlePrev,
         handleNext,
         onResourceFinished,