fix: error when navigating exam units (#1157)

* fix: incorrect usage of useEffect callback caused intermittent react errors
This commit is contained in:
Zachary Hancock
2023-08-08 17:34:05 -04:00
committed by GitHub
parent dcd6847254
commit b0c71e5291
2 changed files with 9 additions and 7 deletions

View File

@@ -16,7 +16,7 @@ const useExamAccess = ({
const [blockAccess, setBlockAccess] = useKeyedState(stateKeys.blockAccess, isExam());
React.useEffect(() => {
if (isExam()) {
return fetchExamAccess()
fetchExamAccess()
.finally(() => {
const examAccess = getExamAccess();
setAccessToken(examAccess);
@@ -26,7 +26,6 @@ const useExamAccess = ({
logError(error);
});
}
return undefined;
}, [id]);
return {

View File

@@ -4,6 +4,7 @@ import { mockUseKeyedState } from '@edx/react-unit-test-utils';
import { getExamAccess, fetchExamAccess, isExam } from '@edx/frontend-lib-special-exams';
import { isEqual } from 'lodash';
import { waitFor } from '../../../../../setupTest';
import useExamAccess, { stateKeys } from './useExamAccess';
const getEffect = (prereqs) => {
@@ -55,18 +56,19 @@ describe('useExamAccess hook', () => {
state.expectInitializedWith(stateKeys.blockAccess, true);
});
describe('effects - on id change', () => {
let cb;
let useEffectCb;
beforeEach(() => {
useExamAccess({ id });
cb = getEffect([id], React);
useEffectCb = getEffect([id], React);
});
it('does not call fetchExamAccess if not an exam', () => {
cb();
useEffectCb();
expect(fetchExamAccess).not.toHaveBeenCalled();
});
it('fetches and sets exam access if isExam', async () => {
isExam.mockReturnValueOnce(true);
await cb();
useEffectCb();
await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
state.expectSetStateCalledWith(stateKeys.accessToken, testAccessToken);
state.expectSetStateCalledWith(stateKeys.blockAccess, false);
});
@@ -74,7 +76,8 @@ describe('useExamAccess hook', () => {
it('logs error if fetchExamAccess fails', async () => {
isExam.mockReturnValueOnce(true);
fetchExamAccess.mockReturnValueOnce(Promise.reject(testError));
await cb();
useEffectCb();
await waitFor(() => expect(fetchExamAccess).toHaveBeenCalled());
expect(logError).toHaveBeenCalledWith(testError);
});
});