feat: [BD-26][EDUCATOR-5811] Add missed proctored exam instruction pa…

…ges (#18) * feat: [BD-26] Add missed proctored exam instruction pages * test: add test for ready to resume and error instructions * fix: use values from backend instead of hardcoding Co-authored-by: Viktor Rusakov <[email protected]>
openedx · Jun 8, 2021 · 2b9effb · 2b9effb
1 parent 3106b5a
commit 2b9effb
Show file tree

Hide file tree

Showing 6 changed files with 167 additions and 8 deletions.
diff --git a/src/constants.js b/src/constants.js
@@ -9,6 +9,8 @@ export const ExamStatus = Object.freeze({
   TIMED_OUT: 'timed_out',
   VERIFIED: 'verified',
   REJECTED: 'rejected',
+  ERROR: 'error',
+  READY_TO_RESUME: 'ready_to_resume',
 });
 
 export const IS_STARTED_STATUS = (status) => [ExamStatus.STARTED, ExamStatus.READY_TO_SUBMIT].includes(status);

diff --git a/src/instructions/Instructions.test.jsx b/src/instructions/Instructions.test.jsx
@@ -2,7 +2,7 @@ import '@testing-library/jest-dom';
 import React from 'react';
 import Instructions from './index';
 import { store, getExamAttemptsData, startExam } from '../data';
-import { render } from '../setupTest';
+import { render, screen } from '../setupTest';
 import { ExamStateProvider } from '../index';
 
 jest.mock('../data', () => ({
@@ -147,4 +147,74 @@ describe('SequenceExamWrapper', () => {
 
     expect(getByTestId('pending-prerequisites')).toBeInTheDocument();
   });
+
+  it('Instructions for error status', () => {
+    store.getState = () => ({
+      examState: {
+        isLoading: false,
+        proctoringSettings: {
+          link_urls: '',
+        },
+        verification: {
+          status: 'none',
+          can_verify: true,
+        },
+        activeAttempt: {
+          attempt_status: 'error',
+        },
+        exam: {
+          time_limit_mins: 30,
+          attempt: {
+            attempt_status: 'error',
+          },
+        },
+      },
+    });
+
+    render(
+      <ExamStateProvider>
+        <Instructions>
+          <div data-testid="sequence-content">Sequence</div>
+        </Instructions>
+      </ExamStateProvider>,
+      { store },
+    );
+    expect(screen.getByText('Error with proctored exam')).toBeInTheDocument();
+  });
+
+  it('Instructions for ready to resume status', () => {
+    store.getState = () => ({
+      examState: {
+        isLoading: false,
+        proctoringSettings: {
+          link_urls: '',
+          platform_name: 'Platform Name',
+        },
+        verification: {
+          status: 'none',
+          can_verify: true,
+        },
+        activeAttempt: {
+          attempt_status: 'ready_to_resume',
+        },
+        exam: {
+          time_limit_mins: 30,
+          attempt: {
+            attempt_status: 'ready_to_resume',
+          },
+        },
+      },
+    });
+
+    render(
+      <ExamStateProvider>
+        <Instructions>
+          <div data-testid="sequence-content">Sequence</div>
+        </Instructions>
+      </ExamStateProvider>,
+      { store },
+    );
+    expect(screen.getByText('Your exam is ready to be resumed.')).toBeInTheDocument();
+    expect(screen.getByTestId('start-exam-button')).toHaveTextContent('Continue to my proctored exam.');
+  });
 });
diff --git a/src/instructions/index.jsx b/src/instructions/index.jsx
@@ -4,6 +4,7 @@ import StartExamInstructions from './StartExamInstructions';
 import SubmitExamInstructions from './SubmitExamInstructions';
 import SubmittedExamInstructions from './SubmittedExamInstructions';
 import {
+  ErrorProctoredExamInstructions,
   EntranceProctoredExamInstructions,
   VerificationProctoredExamInstructions,
   SubmitProctoredExamInstructions,
@@ -61,6 +62,10 @@ const Instructions = ({ children }) => {
       return <VerifiedProctoredExamInstructions />;
     case attempt.attempt_status === ExamStatus.REJECTED:
       return <RejectedProctoredExamInstructions />;
+    case attempt.attempt_status === ExamStatus.ERROR:
+      return <ErrorProctoredExamInstructions />;
+    case attempt.attempt_status === ExamStatus.READY_TO_RESUME:
+      return <EntranceProctoredExamInstructions />;
     default:
       return children;
   }

diff --git a/src/instructions/proctored_exam/EntranceProctoredExamInstructions.jsx b/src/instructions/proctored_exam/EntranceProctoredExamInstructions.jsx
@@ -1,22 +1,45 @@
 import React, { useContext } from 'react';
 import { FormattedMessage } from '@edx/frontend-platform/i18n';
 import { Button, Container } from '@edx/paragon';
+import { ExamStatus } from '../../constants';
 import ExamStateContext from '../../context';
 import Footer from './Footer';
 
 const EntranceProctoredExamInstructions = () => {
   const state = useContext(ExamStateContext);
-  const { startProctoringExam } = state;
+  const { exam, startProctoringExam } = state;
+  const { attempt } = exam || {};
+  const { total_time: totalTime = 0 } = attempt;
 
   return (
     <div>
       <Container className="border py-5 mb-4">
-        <div className="h3" data-testid="exam-instructions-title">
-          <FormattedMessage
-            id="exam.EntranceProctoredExamInstructions.title"
-            defaultMessage="This exam is proctored"
-          />
-        </div>
+        { exam.attempt.attempt_status === ExamStatus.READY_TO_RESUME ? (
+          <div>
+            <div className="h3" data-testid="exam-instructions-title">
+              <FormattedMessage
+                id="exam.ReadyToResumeProctoredExamInstructions.title"
+                defaultMessage="Your exam is ready to be resumed."
+              />
+            </div>
+            <p>
+              <FormattedMessage
+                id="exam.ReadyToResumeProctoredExamInstructions.text"
+                defaultMessage="You will have {totalTime} to complete your exam."
+                values={{ totalTime }}
+              />
+            </p>
+          </div>
+        ) : (
+          <p>
+            <div className="h3" data-testid="exam-instructions-title">
+              <FormattedMessage
+                id="exam.EntranceProctoredExamInstructions.title"
+                defaultMessage="This exam is proctored"
+              />
+            </div>
+          </p>
+        )}
         <p>
           <FormattedMessage
             id="exam.EntranceProctoredExamInstructions.text1"

diff --git a/src/instructions/proctored_exam/ErrorProctoredExamInstructions.jsx b/src/instructions/proctored_exam/ErrorProctoredExamInstructions.jsx
@@ -0,0 +1,58 @@
+import React, { useContext } from 'react';
+import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { Container, Hyperlink, MailtoLink } from '@edx/paragon';
+import ExamStateContext from '../../context';
+import Footer from './Footer';
+
+const ErrorProctoredExamInstructions = () => {
+  const state = useContext(ExamStateContext);
+  const {
+    link_urls: linkUrls,
+    platform_name: platformName,
+    proctoring_escalation_email: proctoringEscalationEmail,
+  } = state.proctoringSettings || {};
+  const contactUsUrl = linkUrls && linkUrls.contact_us;
+
+  const renderBody = () => {
+    if (proctoringEscalationEmail) {
+      return (
+        <FormattedMessage
+          id="exam.ErrorProctoredExamInstructions.text1"
+          defaultMessage={'A system error has occurred with your proctored exam. '
+          + 'Please reach out to your course team at {supportLink} for assistance, '
+          + 'and return to the exam once you receive further instructions.'}
+          values={{ supportLink: <MailtoLink to={proctoringEscalationEmail}>{proctoringEscalationEmail}</MailtoLink> }}
+        />
+      );
+    }
+
+    return (
+      <FormattedMessage
+        id="exam.ErrorProctoredExamInstructions.text2"
+        defaultMessage={'A system error has occurred with your proctored exam. '
+        + 'Please reach out to {supportLink} for assistance, and return to '
+        + 'the exam once you receive further instructions.'}
+        values={{ supportLink: <Hyperlink href={contactUsUrl} target="_blank">{platformName} Support</Hyperlink> }}
+      />
+    );
+  };
+
+  return (
+    <div>
+      <Container className="border py-5 mb-4">
+        <div className="h3">
+          <FormattedMessage
+            id="exam.ErrorProctoredExamInstructions.title"
+            defaultMessage="Error with proctored exam"
+          />
+        </div>
+        <p className="mb-0">
+          {renderBody()}
+        </p>
+      </Container>
+      <Footer />
+    </div>
+  );
+};
+
+export default ErrorProctoredExamInstructions;
diff --git a/src/instructions/proctored_exam/index.js b/src/instructions/proctored_exam/index.js
@@ -1,3 +1,4 @@
+export { default as ErrorProctoredExamInstructions } from './ErrorProctoredExamInstructions';
 export { default as EntranceProctoredExamInstructions } from './EntranceProctoredExamInstructions';
 export { default as RejectedProctoredExamInstructions } from './RejectedProctoredExamInstructions';
 export { default as SubmitProctoredExamInstructions } from './SubmitProctoredExamInstructions';