Refactor public API functions to no longer import and use store.

src/api.js

@@ -1,23 +1,28 @@
-import { examRequiresAccessToken, store } from './data';
+import { useDispatch, useSelector } from 'react-redux';
+import { examRequiresAccessToken } from './data';
+
+export const useIsExam = () => {
+  const { exam } = useSelector(state => state.specialExams);
 
-export function isExam() {
-  const { exam } = store.getState().specialExams;
   return !!exam?.id;
-}
+};
+
+export const useExamAccessToken = () => {
+  const { exam, examAccessToken } = useSelector(state => state.specialExams);
 
-export function getExamAccess() {
-  const { exam, examAccessToken } = store.getState().specialExams;
   if (!exam) {
     return '';
   }
+
   return examAccessToken.exam_access_token;
-}
+};
+
+export const useFetchExamAccessToken = () => {
+  const { exam } = useSelector(state => state.specialExams);
+  const dispatch = useDispatch();
 
-export async function fetchExamAccess() {
-  const { exam } = store.getState().specialExams;
-  const { dispatch } = store;
   if (!exam) {
     return Promise.resolve();
   }
-  return dispatch(examRequiresAccessToken());
-}
+  return () => dispatch(examRequiresAccessToken());
+};

src/api.test.jsx

@@ -1,60 +1,80 @@
 import { Factory } from 'rosie';
 
-import { isExam, getExamAccess, fetchExamAccess } from './api';
-import { store } from './data';
+import { useExamAccessToken, useFetchExamAccessToken, useIsExam } from './api';
+import { initializeTestStore, render } from './setupTest';
+
+/**
+ * Hooks must be run in the scope of a component. To run the hook, wrap it in a test component whose sole
+ * responsibility it is to run the hook and assign it to a return value that is returned by the function.
+ * @param {*} hook: the hook function to run
+ * @param {*} store: an initial store, passed to the call to render
+ * @returns: the return value of the hook
+ */
+const getHookReturnValue = (hook, store) => {
+  let returnVal;
+  const TestComponent = () => {
+    returnVal = hook();
+    return null;
+  };
+  render(<TestComponent />, { store });
+  return returnVal;
+};
 
 describe('External API integration tests', () => {
-  describe('Test isExam with exam', () => {
+  describe('Test useIsExam with exam', () => {
+    let store;
+
     beforeAll(() => {
-      jest.mock('./data');
       const mockExam = Factory.build('exam', { attempt: Factory.build('attempt') });
       const mockToken = Factory.build('examAccessToken');
       const mockState = { specialExams: { exam: mockExam, examAccessToken: mockToken } };
-      store.getState = jest.fn().mockReturnValue(mockState);
+      store = initializeTestStore(mockState);
     });
 
     afterAll(() => {
       jest.clearAllMocks();
       jest.resetAllMocks();
     });
 
-    it('isExam should return true if exam is set', () => {
-      expect(isExam()).toBe(true);
+    it('useIsExam should return true if exam is set', () => {
+      expect(getHookReturnValue(useIsExam, store)).toBe(true);
     });
 
-    it('getExamAccess should return exam access token if access token', () => {
-      expect(getExamAccess()).toBeTruthy();
+    it('useExamAccessToken should return exam access token if access token', () => {
+      expect(getHookReturnValue(useExamAccessToken, store)).toBeTruthy();
     });
 
-    it('fetchExamAccess should dispatch get exam access token', () => {
-      const dispatchReturn = fetchExamAccess();
-      expect(dispatchReturn).toBeInstanceOf(Promise);
+    it('useFetchExamAccessToken should dispatch get exam access token', () => {
+      // The useFetchExamAccessToken hook returns a function that calls dispatch, so we must call the returned
+      // value to invoke dispatch.
+      expect(getHookReturnValue(useFetchExamAccessToken, store)()).toBeInstanceOf(Promise);
     });
   });
 
-  describe('Test isExam without exam', () => {
+  describe('Test useIsExam without exam', () => {
+    let store;
+
     beforeAll(() => {
       jest.mock('./data');
       const mockState = { specialExams: { exam: null, examAccessToken: null } };
-      store.getState = jest.fn().mockReturnValue(mockState);
+      store = initializeTestStore(mockState);
     });
 
     afterAll(() => {
       jest.clearAllMocks();
       jest.resetAllMocks();
     });
 
-    it('isExam should return false if exam is not set', () => {
-      expect(isExam()).toBe(false);
+    it('useIsExam should return false if exam is not set', () => {
+      expect(getHookReturnValue(useIsExam, store)).toBe(false);
     });
 
-    it('getExamAccess should return empty string if exam access token not set', () => {
-      expect(getExamAccess()).toBeFalsy();
+    it('useExamAccessToken should return empty string if exam access token not set', () => {
+      expect(getHookReturnValue(useExamAccessToken, store)).toBeFalsy();
     });
 
-    it('fetchExamAccess should not dispatch get exam access token', () => {
-      const dispatchReturn = fetchExamAccess();
-      expect(dispatchReturn).toBeInstanceOf(Promise);
+    it('useFetchExamAccessToken should not dispatch get exam access token', () => {
+      expect(getHookReturnValue(useFetchExamAccessToken, store)).toBeInstanceOf(Promise);
     });
   });
 });

src/core/OuterExamTimer.test.jsx

@@ -22,8 +22,8 @@ describe('OuterExamTimer', () => {
 
   let store;
 
-  beforeEach(async () => {
-    store = await initializeTestStore();
+  beforeEach(() => {
+    store = initializeTestStore();
   });
 
   it('is successfully rendered and shows timer if there is an exam in progress', () => {

src/data/index.js

@@ -19,6 +19,8 @@ export {
   checkExamEntry,
 } from './thunks';
 
+export { default as reducer } from './slice';
+
 export {
   expireExamAttempt,
 } from './slice';

src/data/redux.test.jsx

@@ -53,13 +53,13 @@ describe('Data layer integration tests', () => {
     await executeThunk(thunks.getExamAttemptsData(courseId, contentId), store.dispatch);
   };
 
-  beforeEach(async () => {
+  beforeEach(() => {
     initializeTestConfig();
     windowSpy = jest.spyOn(window, 'window', 'get');
     axiosMock.reset();
     loggingService.logError.mockReset();
     loggingService.logInfo.mockReset();
-    store = await initializeTestStore();
+    store = initializeTestStore();
   });
 
   afterEach(() => {

src/exam/ExamAPIError.test.jsx

@@ -16,8 +16,8 @@ describe('ExamAPIError', () => {
 
   let store;
 
-  beforeEach(async () => {
-    store = await initializeTestStore();
+  beforeEach(() => {
+    store = initializeTestStore();
   });
 
   it('renders with the default information', () => {

src/exam/ExamWrapper.test.jsx

@@ -2,24 +2,16 @@ import '@testing-library/jest-dom';
 import { Factory } from 'rosie';
 import React from 'react';
 import SequenceExamWrapper from './ExamWrapper';
-import { startTimedExam } from '../data';
-import { getExamAttemptsData } from '../data/thunks';
+import { getExamAttemptsData, startTimedExam } from '../data';
 import { render, waitFor, initializeTestStore } from '../setupTest';
 import { ExamStatus, ExamType } from '../constants';
 
-jest.mock('../data', () => ({
-  store: {},
-  startTimedExam: jest.fn(),
-}));
-
-// because of the way ExamStateProvider and other locations inconsistantly import from
-// thunks directly instead of using the data module we need to mock the underlying
-// thunk file. It would be nice to clean this up in the future.
-jest.mock('../data/thunks', () => {
+jest.mock('../data', () => {
   const originalModule = jest.requireActual('../data/thunks');
   return {
     ...originalModule,
     getExamAttemptsData: jest.fn(),
+    startTimedExam: jest.fn(),
   };
 });
 
@@ -34,9 +26,9 @@ describe('SequenceExamWrapper', () => {
   const courseId = 'course-v1:test+test+test';
   let store;
 
-  beforeEach(async () => {
+  beforeEach(() => {
     jest.clearAllMocks();
-    store = await initializeTestStore({
+    store = initializeTestStore({
       specialExams: Factory.build('specialExams'),
       isLoading: false,
     });

src/index.jsx

@@ -2,7 +2,8 @@
 export { default } from './core/SequenceExamWrapper';
 export { default as OuterExamTimer } from './core/OuterExamTimer';
 export {
-  getExamAccess,
-  isExam,
-  fetchExamAccess,
+  useExamAccessToken,
+  useFetchExamAccessToken,
+  useIsExam,
 } from './api';
+export { reducer } from './data';

src/instructions/Instructions.test.jsx

@@ -38,9 +38,9 @@ pollExamAttempt.mockReturnValue(Promise.resolve({}));
 describe('SequenceExamWrapper', () => {
   let store;
 
-  beforeEach(async () => {
+  beforeEach(() => {
     initializeMockApp();
-    store = await initializeTestStore();
+    store = initializeTestStore();
     store.subscribe = jest.fn();
     store.dispatch = jest.fn();
   });

src/instructions/proctored_exam/ProctoredExamInstructions.test.jsx

@@ -28,10 +28,10 @@ getExamAttemptsData.mockReturnValue(jest.fn());
 describe('SequenceExamWrapper', () => {
   let store;
 
-  beforeEach(async () => {
+  beforeEach(() => {
     initializeMockApp();
     jest.clearAllMocks();
-    store = await initializeTestStore();
+    store = initializeTestStore();
     store.subscribe = jest.fn();
     store.dispatch = jest.fn();
   });

src/setupTest.js

@@ -45,7 +45,7 @@ export function initializeMockApp() {
 
 let globalStore;
 
-export async function initializeTestStore(preloadedState = null, overrideStore = true) {
+export function initializeTestStore(preloadedState = null, overrideStore = true) {
   let store = configureStore({
     reducer: {
       specialExams: examReducer,

src/timer/CountDownTimer.test.jsx

@@ -24,7 +24,7 @@ describe('ExamTimerBlock', () => {
   submitExam.mockReturnValue(jest.fn());
   stopExam.mockReturnValue(jest.fn());
 
-  beforeEach(async () => {
+  beforeEach(() => {
     const preloadedState = {
       specialExams: {
         isLoading: true,
@@ -44,7 +44,7 @@ describe('ExamTimerBlock', () => {
         },
       },
     };
-    store = await initializeTestStore(preloadedState);
+    store = initializeTestStore(preloadedState);
     attempt = store.getState().specialExams.activeAttempt;
   });
 
@@ -60,7 +60,7 @@ describe('ExamTimerBlock', () => {
     expect(screen.getByRole('button', { name: 'End My Exam' })).toBeInTheDocument();
   });
 
-  it('renders without activeAttempt return null', async () => {
+  it('renders without activeAttempt return null', () => {
     const preloadedState = {
       specialExams: {
         isLoading: true,
@@ -70,7 +70,7 @@ describe('ExamTimerBlock', () => {
         exam: {},
       },
     };
-    const testStore = await initializeTestStore(preloadedState);
+    const testStore = initializeTestStore(preloadedState);
     attempt = testStore.getState().specialExams.activeAttempt;
     const { container } = render(
       <ExamTimerBlock />,
@@ -106,7 +106,7 @@ describe('ExamTimerBlock', () => {
         },
       },
     };
-    const testStore = await initializeTestStore(preloadedState);
+    const testStore = initializeTestStore(preloadedState);
     attempt = testStore.getState().specialExams.activeAttempt;
     render(
       <ExamTimerBlock />,
@@ -168,7 +168,7 @@ describe('ExamTimerBlock', () => {
         },
       },
     };
-    const testStore = await initializeTestStore(preloadedState);
+    const testStore = initializeTestStore(preloadedState);
     attempt = testStore.getState().specialExams.activeAttempt;
 
     render(
@@ -210,7 +210,7 @@ describe('ExamTimerBlock', () => {
         },
       },
     };
-    let testStore = await initializeTestStore(preloadedState);
+    let testStore = initializeTestStore(preloadedState);
     attempt = testStore.getState().specialExams.activeAttempt;
     const { rerender } = render(
       <ExamTimerBlock />,
@@ -221,7 +221,7 @@ describe('ExamTimerBlock', () => {
       ...attempt,
       time_remaining_seconds: 20,
     };
-    testStore = await initializeTestStore(preloadedState);
+    testStore = initializeTestStore(preloadedState);
     const updatedAttempt = testStore.getState().specialExams.activeAttempt;
 
     expect(updatedAttempt.time_remaining_seconds).toBe(20);
@@ -245,7 +245,7 @@ describe('ExamTimerBlock', () => {
     '30 minutes': 1800,
   };
   Object.keys(timesToTest).forEach((timeString) => {
-    it(`Accessibility time string ${timeString} appears as expected based seconds remaining: ${timesToTest[timeString]}`, async () => {
+    it(`Accessibility time string ${timeString} appears as expected based seconds remaining: ${timesToTest[timeString]}`, () => {
       // create a state with the respective number of seconds
       const preloadedState = {
         specialExams: {
@@ -268,7 +268,7 @@ describe('ExamTimerBlock', () => {
       };
 
       // Store it in the state
-      const testStore = await initializeTestStore(preloadedState);
+      const testStore = initializeTestStore(preloadedState);
       attempt = testStore.getState().specialExams.activeAttempt;
 
       // render an exam timer block with that data
@@ -277,7 +277,7 @@ describe('ExamTimerBlock', () => {
       );
 
       // expect the a11y string to be a certain output
-      await waitFor(() => expect(screen.getByText(`you have ${timeString} remaining`)).toBeInTheDocument());
+      expect(screen.getByText(`you have ${timeString} remaining`)).toBeInTheDocument();
     });
   });
 });