[BD-26][EDUCATOR-5808] Add additional pages for onboarding / practice…

… exams and fix a bug with JS worker (#15)

* fix: improve not emitting onStartAttempt message to proctoring backend provider when starting proctored exam (#26)

* feat: add entrance pages for onboarding and practice exams + reafactoring

* fix: timer text

* feat: add rejected and submit exam onboarding instructions pages + more refactoring

* refactor: instructions page

* fix: updated broken tests

* fix: remove unnecessary attributes in tests

* fix: revert timer changes

* refactor: split startProctoredExam function into two to handle create attempt and start exam actions separately

* tests: add new test cases for entrance / rejected onboarding instructions

* refactor: rename startExam function to startTimedExam since it's only used for timed exams, add docstring

src/constants.js

@@ -23,6 +23,7 @@ export const ExamAction = Object.freeze({
   PING: 'ping',
   SUBMIT: 'submit',
   ERROR: 'error',
+  RESET: 'reset_attempt',
   CLICK_DOWNLOAD_SOFTWARE: 'click_download_software',
 });
 
@@ -33,3 +34,10 @@ export const VerificationStatus = Object.freeze({
   EXPIRED: 'expired',
   NONE: 'none',
 });
+
+export const ExamType = Object.freeze({
+  ONBOARDING: 'onboarding',
+  PRACTICE: 'practice',
+  PROCTORED: 'proctored',
+  TIMED: 'timed',
+});

src/data/api.js

@@ -50,6 +50,10 @@ export async function submitAttempt(attemptId) {
   return updateAttemptStatus(attemptId, ExamAction.SUBMIT);
 }
 
+export async function resetAttempt(attemptId) {
+  return updateAttemptStatus(attemptId, ExamAction.RESET);
+}
+
 export async function endExamWithFailure(attemptId, error) {
   return updateAttemptStatus(attemptId, ExamAction.ERROR, error);
 }

src/data/index.js

@@ -1,8 +1,8 @@
 export {
   getExamAttemptsData,
   getProctoringSettings,
-  startExam,
-  startProctoringExam,
+  startTimedExam,
+  startProctoredExam,
   skipProctoringExam,
   stopExam,
   continueExam,
@@ -12,6 +12,7 @@ export {
   getVerificationData,
   getExamReviewPolicy,
   pingAttempt,
+  resetExam,
 } from './thunks';
 
 export { default as store } from './store';

src/data/thunks.js

@@ -10,6 +10,7 @@ import {
   softwareDownloadAttempt,
   fetchVerificationStatus,
   fetchExamReviewPolicy,
+  resetAttempt,
 } from './api';
 import { isEmpty } from '../helpers';
 import {
@@ -88,9 +89,12 @@ export function getProctoringSettings() {
   };
 }
 
-export function startExam() {
+/**
+ * Start a timed exam
+ */
+export function startTimedExam() {
   return async (dispatch, getState) => {
-    const { exam, activeAttempt } = getState().examState;
+    const { exam } = getState().examState;
     if (!exam.id) {
       logError('Failed to start exam. No exam id.');
       handleAPIError(
@@ -99,36 +103,53 @@ export function startExam() {
       );
       return;
     }
-
-    const useWorker = window.Worker && activeAttempt && activeAttempt.desktop_application_js_url;
-
-    if (useWorker) {
-      workerPromiseForEventNames(actionToMessageTypesMap.ping, activeAttempt.desktop_application_js_url)()
-        .then(() => updateAttemptAfter(exam.course_id, exam.content_id, createExamAttempt(exam.id))(dispatch))
-        .catch(() => handleAPIError(
-          { message: 'Something has gone wrong starting your exam. Please double-check that the application is running.' },
-          dispatch,
-        ));
-    } else {
-      await updateAttemptAfter(
-        exam.course_id, exam.content_id, createExamAttempt(exam.id),
-      )(dispatch);
-    }
+    await updateAttemptAfter(
+      exam.course_id, exam.content_id, createExamAttempt(exam.id),
+    )(dispatch);
   };
 }
 
-export function startProctoringExam() {
+export function createProctoredExamAttempt() {
   return async (dispatch, getState) => {
     const { exam } = getState().examState;
     if (!exam.id) {
-      logError('Failed to start exam. No exam id.');
+      logError('Failed to create exam attempt. No exam id.');
       return;
     }
     await updateAttemptAfter(
       exam.course_id, exam.content_id, createExamAttempt(exam.id, false, true),
     )(dispatch);
-    const proctoringSettings = await fetchProctoringSettings(exam.id);
-    dispatch(setProctoringSettings({ proctoringSettings }));
+  };
+}
+
+/**
+ * Start a proctored exam (including onboarding and practice exams)
+ */
+export function startProctoredExam() {
+  return async (dispatch, getState) => {
+    const { exam } = getState().examState;
+    const { attempt } = exam || {};
+    if (!exam.id) {
+      logError('Failed to start proctored exam. No exam id.');
+      return;
+    }
+    const { desktop_application_js_url: workerUrl } = attempt || {};
+    const useWorker = window.Worker && workerUrl;
+
+    if (useWorker) {
+      workerPromiseForEventNames(actionToMessageTypesMap.start, exam.attempt.desktop_application_js_url)()
+        .then(() => updateAttemptAfter(
+          exam.course_id, exam.content_id, continueAttempt(attempt.attempt_id),
+        )(dispatch))
+        .catch(() => handleAPIError(
+          { message: 'Something has gone wrong starting your exam. Please double-check that the application is running.' },
+          dispatch,
+        ));
+    } else {
+      await updateAttemptAfter(
+        exam.course_id, exam.content_id, continueAttempt(attempt.attempt_id),
+      )(dispatch);
+    }
   };
 }
 
@@ -215,6 +236,24 @@ export function continueExam(noLoading = true) {
   };
 }
 
+export function resetExam() {
+  return async (dispatch, getState) => {
+    const { exam } = getState().examState;
+    const attemptId = exam.attempt.attempt_id;
+    if (!attemptId) {
+      logError('Failed to reset exam attempt. No attempt id.');
+      handleAPIError(
+        { message: 'Failed to reset exam attempt. No attempt id was found.' },
+        dispatch,
+      );
+      return;
+    }
+    await updateAttemptAfter(
+      exam.course_id, exam.content_id, resetAttempt(attemptId),
+    )(dispatch);
+  };
+}
+
 export function submitExam() {
   return async (dispatch, getState) => {
     const { exam, activeAttempt } = getState().examState;

src/exam/ExamWrapper.test.jsx

@@ -1,17 +1,17 @@
 import '@testing-library/jest-dom';
 import React from 'react';
 import SequenceExamWrapper from './ExamWrapper';
-import { store, getExamAttemptsData, startExam } from '../data';
+import { store, getExamAttemptsData, startTimedExam } from '../data';
 import { render } from '../setupTest';
 import { ExamStateProvider } from '../index';
 
 jest.mock('../data', () => ({
   store: {},
   getExamAttemptsData: jest.fn(),
-  startExam: jest.fn(),
+  startTimedExam: jest.fn(),
 }));
 getExamAttemptsData.mockReturnValue(jest.fn());
-startExam.mockReturnValue(jest.fn());
+startTimedExam.mockReturnValue(jest.fn());
 store.subscribe = jest.fn();
 store.dispatch = jest.fn();
 store.getState = () => ({
@@ -24,6 +24,7 @@ store.getState = () => ({
     },
     exam: {
       time_limit_mins: 30,
+      type: 'timed',
       attempt: {},
     },
   },

src/instructions/EntranceInstructions.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Container } from '@edx/paragon';
+import { ExamType } from '../constants';
+import { EntranceProctoredExamInstructions } from './proctored_exam';
+import { EntranceOnboardingExamInstructions } from './onboarding_exam';
+import EntrancePracticeExamInstructions from './practice_exam';
+import { StartTimedExamInstructions, TimedExamFooter } from './timed_exam';
+import Footer from './proctored_exam/Footer';
+
+const EntranceExamInstructions = ({ examType, skipProctoredExam }) => {
+  const renderInstructions = () => {
+    switch (examType) {
+      case ExamType.PROCTORED:
+        return <EntranceProctoredExamInstructions skipProctoredExam={skipProctoredExam} />;
+      case ExamType.ONBOARDING:
+        return <EntranceOnboardingExamInstructions />;
+      case ExamType.PRACTICE:
+        return <EntrancePracticeExamInstructions />;
+      case ExamType.TIMED:
+        return <StartTimedExamInstructions />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div>
+      <Container className="border py-5 mb-4">
+        {renderInstructions()}
+      </Container>
+      {examType === ExamType.TIMED
+        ? <TimedExamFooter />
+        : <Footer />}
+    </div>
+  );
+};
+
+EntranceExamInstructions.propTypes = {
+  examType: PropTypes.string.isRequired,
+  skipProctoredExam: PropTypes.func.isRequired,
+};
+
+export default EntranceExamInstructions;