feat: [BD-26] Exam error shown even if learners not in an exam (#32)

* feat: [BD-26] Exam error shown even if learners not in an exam

* Address the review comments

Co-authored-by: Zachary Hancock <[email protected]>

* fix: fix linter errors

Co-authored-by: Igor Degtiarov <[email protected]>
Co-authored-by: Zachary Hancock <[email protected]>

src/exam/ExamWrapper.jsx

@@ -1,4 +1,5 @@
 import React, { useContext, useEffect } from 'react';
+import { AppContext } from '@edx/frontend-platform/react';
 import PropTypes from 'prop-types';
 import Exam from './Exam';
 import ExamStateContext from '../context';
@@ -8,13 +9,20 @@ import ExamStateContext from '../context';
  */
 const ExamWrapper = ({ children, ...props }) => {
   const state = useContext(ExamStateContext);
+  const { authenticatedUser } = useContext(AppContext);
   const { sequence, courseId } = props;
   const { getExamAttemptsData, getAllowProctoringOptOut } = state;
   const loadInitialData = async () => {
     await getExamAttemptsData(courseId, sequence.id);
     await getAllowProctoringOptOut(sequence.allowProctoringOptOut);
   };
 
+  // if the user is browsing public content (not logged in) they cannot be in an exam
+  // any requests for exam state will 403 so just short circuit this component here
+  if (!authenticatedUser) {
+    return children;
+  }
+
   useEffect(() => {
     loadInitialData();
   }, []);

src/exam/ExamWrapper.test.jsx

@@ -106,4 +106,19 @@ describe('SequenceExamWrapper', () => {
     );
     expect(getByTestId('sequence-content')).toHaveTextContent('children');
   });
+
+  it('does not take any actions if the sequence item is not an exam and the user is anonymous', () => {
+    const appContext = {
+      authenticatedUser: null,
+    };
+    const { getByTestId } = render(
+      <ExamStateProvider>
+        <SequenceExamWrapper sequence={{ ...sequence, isTimeLimited: false }} courseId={courseId}>
+          <div data-testid="sequence-content">children</div>
+        </SequenceExamWrapper>
+      </ExamStateProvider>,
+      { store, appContext },
+    );
+    expect(getByTestId('sequence-content')).toHaveTextContent('children');
+  });
 });

src/setupTest.js

@@ -1,9 +1,10 @@
 import 'babel-polyfill';
 import '@testing-library/jest-dom';
 import './data/__factories__';
-import { getConfig, mergeConfig } from '@edx/frontend-platform';
+import { getConfig } from '@edx/frontend-platform';
 import { configure as configureLogging } from '@edx/frontend-platform/logging';
 import { configure as configureAuth, MockAuthService } from '@edx/frontend-platform/auth';
+import { AppContext } from '@edx/frontend-platform/react';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
@@ -24,15 +25,6 @@ class MockLoggingService {
 }
 
 export function initializeMockApp() {
-  mergeConfig({
-    authenticatedUser: {
-      userId: 'abc123',
-      username: 'Mock User',
-      roles: [],
-      administrator: false,
-    },
-  });
-
   const loggingService = configureLogging(MockLoggingService, {
     config: getConfig(),
   });
@@ -70,17 +62,28 @@ function render(
   ui,
   {
     store = null,
+    appContext = null,
     ...renderOptions
   } = {},
 ) {
   function Wrapper({ children }) {
+    const defaultAppContext = {
+      authenticatedUser: {
+        userId: 'abc123',
+        username: 'Mock User',
+        roles: [],
+        administrator: false,
+      },
+    };
     return (
       // eslint-disable-next-line react/jsx-filename-extension
-      <IntlProvider locale="en">
-        <Provider store={store || globalStore}>
-          {children}
-        </Provider>
-      </IntlProvider>
+      <AppContext.Provider value={appContext || defaultAppContext}>
+        <IntlProvider locale="en">
+          <Provider store={store || globalStore}>
+            {children}
+          </Provider>
+        </IntlProvider>
+      </AppContext.Provider>
     );
   }