feat: remove use of attempt total time (#100)

src/data/api.js

@@ -1,6 +1,7 @@
 import { getConfig } from '@edx/frontend-platform';
 import { getAuthenticatedHttpClient } from '@edx/frontend-platform/auth';
 import { ExamAction } from '../constants';
+import { generateHumanizedTime } from '../helpers';
 
 const BASE_API_URL = '/api/edx_proctoring/v1/proctored_exam/attempt';
 
@@ -25,6 +26,11 @@ export async function fetchExamAttemptsData(courseId, sequenceId) {
     const examResponse = await getAuthenticatedHttpClient().get(examUrl.href);
     data = examResponse.data;
 
+    // humanize total time if response is from edx-exams
+    data.exam.total_time = Number.isInteger(data.exam.total_time)
+      ? generateHumanizedTime(data.exam.total_time * 60)
+      : data.exam.total_time;
+
     const attemptData = await fetchActiveAttempt();
     data.active_attempt = attemptData;
   }

src/data/redux.test.jsx

@@ -83,6 +83,19 @@ describe('Data layer integration tests', () => {
       expect(state).toMatchSnapshot();
     });
 
+    it('Should translate total time correctly', async () => {
+      // configure exam whose total_time field is an int. This matches what is returned by edx-exams
+      exam.total_time = 30;
+
+      axiosMock.onGet(fetchExamAttemptsDataUrl).replyOnce(200, { exam });
+      axiosMock.onGet(latestAttemptURL).replyOnce(200, attempt);
+
+      await executeThunk(thunks.getExamAttemptsData(courseId, contentId), store.dispatch);
+
+      const state = store.getState();
+      expect(state.examState.exam.total_time).toBe('30 minutes');
+    });
+
     it('Should fail to fetch if error occurs', async () => {
       axiosMock.onGet(fetchExamAttemptsDataUrl).networkError();
 
@@ -1026,7 +1039,4 @@ describe('Data layer integration tests', () => {
       expect(state.examState.examAccessToken.exam_access_token).toBe('');
     });
   });
-
-  describe('Test legacy service exams', () => {
-  });
 });

src/helpers.js

@@ -14,3 +14,25 @@ export const shouldRenderExpiredPage = (exam) => {
   }
   return (isEmpty(attempt) || !attempt.attempt_id || IS_INCOMPLETE_STATUS(attempt.attempt_status));
 };
+
+export const generateHumanizedTime = (timeRemainingSeconds) => {
+  let hours = 0;
+  let minutes = 0;
+  let remainingTime = '';
+
+  hours = Math.floor(timeRemainingSeconds / 60 / 60);
+  minutes = Math.floor(timeRemainingSeconds / 60) % 60;
+
+  if (hours !== 0) {
+    remainingTime += `${hours} hour`;
+    if (hours >= 2) {
+      remainingTime += 's';
+    }
+    remainingTime += ' and ';
+  }
+  remainingTime += `${minutes} minute`;
+  if (minutes !== 1) {
+    remainingTime += 's';
+  }
+  return remainingTime;
+};

src/instructions/proctored_exam/ProctoredExamInstructions.test.jsx

@@ -108,6 +108,35 @@ describe('SequenceExamWrapper', () => {
     expect(screen.getByText('review policy')).toBeInTheDocument();
   });
 
+  it('Shows correct instructions when attempt status is ready_to_start and attempt has no total time', () => {
+    store.getState = () => ({
+      examState: Factory.build('examState', {
+        exam: Factory.build('exam', {
+          type: ExamType.PROCTORED,
+          is_proctored: true,
+          reviewPolicy: 'review policy',
+          total_time: '30 minutes',
+          attempt: Factory.build('attempt', {
+            attempt_status: ExamStatus.READY_TO_START,
+            total_time: undefined,
+          }),
+        }),
+      }),
+    });
+
+    render(
+      <ExamStateProvider>
+        <Instructions>
+          <div>Sequence</div>
+        </Instructions>
+      </ExamStateProvider>,
+      { store },
+    );
+    expect(screen.getByTestId('proctored-exam-instructions-rulesLink')).toHaveTextContent('Rules for Online Proctored Exams');
+    expect(screen.getByTestId('duration-text')).toHaveTextContent('You have 30 minutes to complete this exam.');
+    expect(screen.getByText('review policy')).toBeInTheDocument();
+  });
+
   it('Instructions are shown when attempt status is submitted', () => {
     store.getState = () => ({
       examState: Factory.build('examState', {

src/instructions/proctored_exam/ReadyToStartProctoredExamInstructions.jsx

@@ -13,7 +13,7 @@ const ReadyToStartProctoredExamInstructions = () => {
     startProctoredExam,
   } = state;
   const { attempt, reviewPolicy } = exam;
-  const { total_time: examDuration } = attempt;
+  const examDuration = attempt.total_time ? attempt.total_time : exam.total_time;
   const platformName = getConfig().SITE_NAME;
   const rulesUrl = getConfig().PROCTORED_EXAM_RULES_URL;
   const [beginExamClicked, setBeginExamClicked] = useState(false);

src/timer/CountDownTimer.jsx

@@ -3,6 +3,7 @@ import { Icon, useToggle } from '@edx/paragon';
 import { Visibility, VisibilityOff } from '@edx/paragon/icons';
 import { injectIntl } from '@edx/frontend-platform/i18n';
 import { TimerContext } from './TimerProvider';
+import { generateHumanizedTime } from '../helpers';
 
 /**
  * Display timer textual value. Display hide/show button.
@@ -12,39 +13,25 @@ const CountDownTimer = injectIntl((props) => {
   const timeString = timer.getTimeString();
   const [isShowTimer, showTimer, hideTimer] = useToggle(true);
   const { intl } = props;
+  const { time_remaining_seconds: timeRemainingSeconds } = props.attempt;
 
-  const generateAccessbilityString = (timeState) => {
-    const { hours, minutes } = timeState;
-
-    let remainingTime = '';
-
-    if (hours !== 0) {
-      remainingTime += `${hours} hour`;
-      if (hours >= 2) {
-        remainingTime += 's';
-      }
-      remainingTime += ' and ';
-    }
-    remainingTime += `${minutes} minute`;
-    if (minutes !== 1) {
-      remainingTime += 's';
-    }
-
+  const generateAccessbilityString = () => {
+    const humanizedTime = generateHumanizedTime(timeRemainingSeconds);
     /**
     * INTL NOTE: At the moment, these strings are NOT internationalized/translated.
     * The back-end also does not support this either.
     *
     * It is TBD if this needs to be implemented
     */
-    return `you have ${remainingTime} remaining`;
+    return `you have ${humanizedTime} remaining`;
   };
 
   return (
     <div
       className="exam-timer-clock d-flex justify-content-between"
       style={{ minWidth: isShowTimer ? '110px' : '32px' }}
     >
-      <span className="sr-only timer-announce" aria-live="assertive">{generateAccessbilityString(timer.timeState)}</span>
+      <span className="sr-only timer-announce" aria-live="assertive">{generateAccessbilityString()}</span>
       {isShowTimer && timeString}
       <span
         className="pl-2 d-flex flex-column justify-content-center"

src/timer/CountDownTimer.test.jsx

@@ -296,13 +296,14 @@ describe('ExamTimerBlock', () => {
 
   const timesToTest = {
     // Because times are rounded down, these values are 60 seconds off
-    '2 hours and 29 minutes': 9000,
-    '1 hour and 29 minutes': 5400,
-    '2 hours and 1 minute': 7320,
-    '1 hour and 1 minute': 3720,
-    '2 hours and 0 minutes': 7260,
-    '1 hour and 0 minutes': 3660,
-    '29 minutes': 1800,
+    '2 hours and 30 minutes': 9000,
+    '1 hour and 30 minutes': 5400,
+    '2 hours and 2 minutes': 7320,
+    '1 hour and 2 minutes': 3720,
+    '2 hours and 1 minute': 7260,
+    '1 hour and 1 minute': 3660,
+    '1 hour and 0 minutes': 3600,
+    '30 minutes': 1800,
   };
   Object.keys(timesToTest).forEach((timeString) => {
     it(`Accessibility time string ${timeString} appears as expected based seconds remaining: ${timesToTest[timeString]}`, async () => {

src/timer/ExamTimerBlock.jsx

@@ -122,7 +122,7 @@ const ExamTimerBlock = injectIntl(({
               </Button>
             )}
 
-            <CountDownTimer />
+            <CountDownTimer attempt={attempt} />
 
           </div>
         </div>