+ {/**
+ SequenceNavigationSlot renders nothing by default.
+ However, we still pass nextHandler, previousHandler, and onNavigate,
+ because, as per the slot's contract, if this slot is replaced
+ with the default SequenceNavigation component, these props are required.
+ These handlers are excluded from test coverage via istanbul ignore,
+ since they are not used unless the slot is overridden.
+ */}
+
{unitHasLoaded && renderUnitNavigation(false)}
diff --git a/src/courseware/course/sequence/Sequence.test.jsx b/src/courseware/course/sequence/Sequence.test.jsx
index 5473e24c30..ae58bb18fc 100644
--- a/src/courseware/course/sequence/Sequence.test.jsx
+++ b/src/courseware/course/sequence/Sequence.test.jsx
@@ -24,7 +24,6 @@ describe('Sequence', () => {
{ type: 'vertical' },
{ courseId: courseMetadata.id },
));
- const enableNavigationSidebar = { enable_navigation_sidebar: false };
beforeAll(async () => {
const store = await initializeTestStore({ courseMetadata, unitBlocks });
@@ -96,7 +95,6 @@ describe('Sequence', () => {
unitBlocks,
sequenceBlocks,
sequenceMetadata,
- enableNavigationSidebar: { enable_navigation_sidebar: true },
}, false);
const { container } = render(
,
@@ -131,7 +129,7 @@ describe('Sequence', () => {
{ courseId: courseMetadata.id, unitBlocks, sequenceBlock: sequenceBlocks[0] },
)];
const testStore = await initializeTestStore({
- courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata, enableNavigationSidebar,
+ courseMetadata, unitBlocks, sequenceBlocks, sequenceMetadata,
}, false);
render(
,
@@ -190,7 +188,7 @@ describe('Sequence', () => {
beforeAll(async () => {
testStore = await initializeTestStore({
- courseMetadata, unitBlocks, sequenceBlocks, enableNavigationSidebar,
+ courseMetadata, unitBlocks, sequenceBlocks,
}, false);
});
@@ -366,7 +364,6 @@ describe('Sequence', () => {
unitBlocks,
sequenceBlocks: testSequenceBlocks,
sequenceMetadata: testSequenceMetadata,
- enableNavigationSidebar,
}, false);
const testData = {
...mockData,
diff --git a/src/courseware/course/sequence/SequenceContent.jsx b/src/courseware/course/sequence/SequenceContent.jsx
index 905ffbf255..6caa0fce27 100644
--- a/src/courseware/course/sequence/SequenceContent.jsx
+++ b/src/courseware/course/sequence/SequenceContent.jsx
@@ -16,7 +16,6 @@ const SequenceContent = ({
unitId,
unitLoadedHandler,
isOriginalUserStaff,
- isEnabledOutlineSidebar,
renderUnitNavigation,
}) => {
const intl = useIntl();
@@ -63,7 +62,6 @@ const SequenceContent = ({
id={unitId}
onLoaded={unitLoadedHandler}
isOriginalUserStaff={isOriginalUserStaff}
- isEnabledOutlineSidebar={isEnabledOutlineSidebar}
renderUnitNavigation={renderUnitNavigation}
/>
);
@@ -76,7 +74,6 @@ SequenceContent.propTypes = {
unitId: PropTypes.string,
unitLoadedHandler: PropTypes.func.isRequired,
isOriginalUserStaff: PropTypes.bool.isRequired,
- isEnabledOutlineSidebar: PropTypes.bool.isRequired,
renderUnitNavigation: PropTypes.func.isRequired,
};
diff --git a/src/courseware/course/sequence/SequenceContent.test.jsx b/src/courseware/course/sequence/SequenceContent.test.jsx
index a2f14490d3..e9c3a2d785 100644
--- a/src/courseware/course/sequence/SequenceContent.test.jsx
+++ b/src/courseware/course/sequence/SequenceContent.test.jsx
@@ -15,6 +15,7 @@ describe('Sequence Content', () => {
sequenceId: courseware.sequenceId,
unitId: models.sequences[courseware.sequenceId].unitIds[0],
unitLoadedHandler: () => { },
+ renderUnitNavigation: () => { },
};
});
@@ -38,7 +39,7 @@ describe('Sequence Content', () => {
});
it('displays message for no content', () => {
- render(
, { wrapWithRouter: true });
+ render(
, { wrapWithRouter: true });
expect(screen.getByText('There is no content here.')).toBeInTheDocument();
});
});
diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
index eb70e17e53..34e56c22e4 100644
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.test.js
@@ -1,7 +1,6 @@
-import React from 'react';
import { useDispatch } from 'react-redux';
+import { renderHook } from '@testing-library/react';
-import { getEffects, mockUseKeyedState } from '@edx/react-unit-test-utils';
import { logError } from '@edx/frontend-platform/logging';
import { getConfig } from '@edx/frontend-platform';
@@ -9,10 +8,13 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
import { fetchCourse } from '@src/courseware/data';
import { processEvent } from '@src/course-home/data/thunks';
import { useEventListener } from '@src/generic/hooks';
+import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';
import { messageTypes } from '../constants';
-import useIFrameBehavior, { stateKeys } from './useIFrameBehavior';
+import useIFrameBehavior, { iframeBehaviorState } from './useIFrameBehavior';
+
+const mockNavigate = jest.fn();
jest.mock('@edx/frontend-platform', () => ({
getConfig: jest.fn(),
@@ -22,21 +24,14 @@ jest.mock('@edx/frontend-platform/analytics');
jest.mock('react', () => ({
...jest.requireActual('react'),
- useEffect: jest.fn(),
useCallback: jest.fn((cb, prereqs) => ({ cb, prereqs })),
}));
jest.mock('react-redux', () => ({
useDispatch: jest.fn(),
+ useSelector: jest.fn(),
}));
-jest.mock('lodash', () => ({
- ...jest.requireActual('lodash'),
- throttle: jest.fn((fn) => fn),
-}));
-
-jest.mock('./useLoadBearingHook', () => jest.fn());
-
jest.mock('@edx/frontend-platform/logging', () => ({
logError: jest.fn(),
}));
@@ -50,8 +45,16 @@ jest.mock('@src/course-home/data/thunks', () => ({
jest.mock('@src/generic/hooks', () => ({
useEventListener: jest.fn(),
}));
+jest.mock('@src/generic/model-store', () => ({
+ useModel: () => ({ unitIds: ['unit1', 'unit2'], entranceExamData: { entranceExamPassed: null } }),
+}));
+jest.mock('react-router-dom', () => ({
+ ...jest.requireActual('react-router-dom'),
+ useNavigate: () => mockNavigate,
+}));
-const state = mockUseKeyedState(stateKeys);
+jest.mock('@src/courseware/course/sequence/sequence-navigation/hooks');
+useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: false, nextLink: '/next-unit-link' });
const props = {
elementId: 'test-element-id',
@@ -90,148 +93,147 @@ const stateVals = {
windowTopOffset: 32,
};
+const setIframeHeight = jest.fn();
+const setHasLoaded = jest.fn();
+const setShowError = jest.fn();
+const setWindowTopOffset = jest.fn();
+
+const mockState = (state) => {
+ const {
+ iframeHeight, hasLoaded, showError, windowTopOffset,
+ } = state;
+ if ('iframeHeight' in state) { jest.spyOn(iframeBehaviorState, 'iframeHeight').mockImplementation(() => [iframeHeight, setIframeHeight]); }
+ if ('hasLoaded' in state) { jest.spyOn(iframeBehaviorState, 'hasLoaded').mockImplementation(() => [hasLoaded, setHasLoaded]); }
+ if ('showError' in state) { jest.spyOn(iframeBehaviorState, 'showError').mockImplementation(() => [showError, setShowError]); }
+ if ('windowTopOffset' in state) { jest.spyOn(iframeBehaviorState, 'windowTopOffset').mockImplementation(() => [windowTopOffset, setWindowTopOffset]); }
+};
+
describe('useIFrameBehavior hook', () => {
- let hook;
beforeEach(() => {
jest.clearAllMocks();
- state.mock();
global.document.getElementById = mockGetElementById;
global.window.addEventListener = jest.fn();
global.window.removeEventListener = jest.fn();
global.window.innerHeight = 800;
});
- afterEach(() => {
- state.resetVals();
- });
describe('behavior', () => {
it('initializes iframe height to 0 and error/loaded values to false', () => {
- hook = useIFrameBehavior(props);
- state.expectInitializedWith(stateKeys.iframeHeight, 0);
- state.expectInitializedWith(stateKeys.hasLoaded, false);
- state.expectInitializedWith(stateKeys.showError, false);
- state.expectInitializedWith(stateKeys.windowTopOffset, null);
+ mockState(defaultStateVals);
+ const { result } = renderHook(() => useIFrameBehavior(props));
+
+ expect(result.current.iframeHeight).toBe(0);
+ expect(result.current.showError).toBe(false);
+ expect(result.current.hasLoaded).toBe(false);
});
describe('effects - on frame change', () => {
let oldGetElement;
beforeEach(() => {
global.window ??= Object.create(window);
Object.defineProperty(window, 'location', { value: {}, writable: true });
- state.mockVals(stateVals);
oldGetElement = document.getElementById;
document.getElementById = mockGetElementById;
+ mockState(defaultStateVals);
});
afterEach(() => {
- state.resetVals();
+ jest.clearAllMocks();
document.getElementById = oldGetElement;
});
it('does not post url hash if the window does not have one', () => {
- hook = useIFrameBehavior(props);
- const cb = getEffects([
- props.id,
- props.onLoaded,
- testIFrameHeight,
- true,
- ], React)[0];
- cb();
+ window.location.hash = '';
+ renderHook(() => useIFrameBehavior(props));
expect(postMessage).not.toHaveBeenCalled();
});
it('posts url hash if the window has one', () => {
window.location.hash = testHash;
- hook = useIFrameBehavior(props);
- const cb = getEffects([
- props.id,
- props.onLoaded,
- testIFrameHeight,
- true,
- ], React)[0];
- cb();
+ renderHook(() => useIFrameBehavior(props));
expect(postMessage).toHaveBeenCalledWith({ hashName: testHash }, config.LMS_BASE_URL);
});
});
describe('event listener', () => {
it('calls eventListener with prepared callback', () => {
- state.mockVals(stateVals);
- hook = useIFrameBehavior(props);
+ mockState(stateVals);
+ renderHook(() => useIFrameBehavior(props));
const [call] = useEventListener.mock.calls;
expect(call[0]).toEqual('message');
expect(call[1].prereqs).toEqual([
props.id,
props.onLoaded,
- state.values.hasLoaded,
- state.setState.hasLoaded,
- state.values.iframeHeight,
- state.setState.iframeHeight,
- state.values.windowTopOffset,
- state.setState.windowTopOffset,
+ stateVals.hasLoaded,
+ setHasLoaded,
+ stateVals.iframeHeight,
+ setIframeHeight,
+ stateVals.windowTopOffset,
+ setWindowTopOffset,
]);
});
describe('resize message', () => {
- const resizeMessage = (height = 23) => ({
+ const customHeight = 25;
+ const defaultHeight = 23;
+ const resizeMessage = (height = defaultHeight) => ({
data: { type: messageTypes.resize, payload: { height } },
});
const videoFullScreenMessage = (open = false) => ({
data: { type: messageTypes.videoFullScreen, payload: { open } },
});
- const testSetIFrameHeight = (height = 23) => {
+ const testSetIFrameHeight = (height = defaultHeight) => {
const { cb } = useEventListener.mock.calls[0][1];
cb(resizeMessage(height));
- expect(state.setState.iframeHeight).toHaveBeenCalledWith(height);
- };
- const testOnlySetsHeight = () => {
- it('sets iframe height with payload height', () => {
- testSetIFrameHeight();
- });
- it('does not set hasLoaded', () => {
- expect(state.setState.hasLoaded).not.toHaveBeenCalled();
- });
+ expect(setIframeHeight).toHaveBeenCalledWith(height);
};
describe('hasLoaded', () => {
- beforeEach(() => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- hook = useIFrameBehavior(props);
- });
- testOnlySetsHeight();
- });
- describe('iframeHeight is not 0', () => {
- beforeEach(() => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- hook = useIFrameBehavior(props);
+ it('sets iframe height with payload height', () => {
+ mockState({ ...defaultStateVals, hasLoaded: true });
+ renderHook(() => useIFrameBehavior(props));
+ const { cb } = useEventListener.mock.calls[0][1];
+ cb(resizeMessage(customHeight));
+ expect(setIframeHeight).toHaveBeenCalledWith(0);
+ expect(setIframeHeight).toHaveBeenCalledWith(customHeight);
+ expect(setIframeHeight).not.toHaveBeenCalledWith(defaultHeight);
});
- testOnlySetsHeight();
});
describe('payload height is 0', () => {
- beforeEach(() => { hook = useIFrameBehavior(props); });
- testOnlySetsHeight(0);
+ it('sets iframe height with payload height', () => {
+ mockState(defaultStateVals);
+ renderHook(() => useIFrameBehavior(props));
+ const { cb } = useEventListener.mock.calls[0][1];
+ cb(resizeMessage(0));
+ expect(setIframeHeight).toHaveBeenCalledWith(0);
+ expect(setIframeHeight).not.toHaveBeenCalledWith(customHeight);
+ expect(setIframeHeight).not.toHaveBeenCalledWith(defaultHeight);
+ });
});
describe('payload is present but uninitialized', () => {
+ beforeEach(() => {
+ mockState(defaultStateVals);
+ });
it('sets iframe height with payload height', () => {
- hook = useIFrameBehavior(props);
+ renderHook(() => useIFrameBehavior(props));
testSetIFrameHeight();
});
it('sets hasLoaded and calls onLoaded', () => {
- hook = useIFrameBehavior(props);
+ renderHook(() => useIFrameBehavior(props));
const { cb } = useEventListener.mock.calls[0][1];
cb(resizeMessage());
- expect(state.setState.hasLoaded).toHaveBeenCalledWith(true);
+ expect(setHasLoaded).toHaveBeenCalledWith(true);
expect(props.onLoaded).toHaveBeenCalled();
});
test('onLoaded is optional', () => {
- hook = useIFrameBehavior({ ...props, onLoaded: undefined });
+ renderHook(() => useIFrameBehavior({ ...props, onLoaded: undefined }));
const { cb } = useEventListener.mock.calls[0][1];
cb(resizeMessage());
- expect(state.setState.hasLoaded).toHaveBeenCalledWith(true);
+ expect(setHasLoaded).toHaveBeenCalledWith(true);
});
});
it('scrolls to current window vertical offset if one is set', () => {
const windowTopOffset = 32;
- state.mockVals({ ...defaultStateVals, windowTopOffset });
- hook = useIFrameBehavior(props);
+ mockState({ ...defaultStateVals, windowTopOffset });
+ renderHook(() => useIFrameBehavior(props));
const { cb } = useEventListener.mock.calls[0][1];
cb(videoFullScreenMessage());
expect(window.scrollTo).toHaveBeenCalledWith(0, windowTopOffset);
});
it('does not scroll if towverticalp offset is not set', () => {
- hook = useIFrameBehavior(props);
+ renderHook(() => useIFrameBehavior(props));
const { cb } = useEventListener.mock.calls[0][1];
cb(resizeMessage());
expect(window.scrollTo).not.toHaveBeenCalled();
@@ -245,16 +247,16 @@ describe('useIFrameBehavior hook', () => {
});
beforeEach(() => {
window.scrollY = scrollY;
- hook = useIFrameBehavior(props);
+ renderHook(() => useIFrameBehavior(props));
[[, { cb }]] = useEventListener.mock.calls;
});
it('sets window top offset based on window.scrollY if opening the video', () => {
cb(fullScreenMessage(true));
- expect(state.setState.windowTopOffset).toHaveBeenCalledWith(scrollY);
+ expect(setWindowTopOffset).toHaveBeenCalledWith(scrollY);
});
it('sets window top offset to null if closing the video', () => {
cb(fullScreenMessage(false));
- expect(state.setState.windowTopOffset).toHaveBeenCalledWith(null);
+ expect(setWindowTopOffset).toHaveBeenCalledWith(null);
});
});
describe('offset message', () => {
@@ -266,7 +268,7 @@ describe('useIFrameBehavior hook', () => {
document.getElementById = mockGetEl;
const oldScrollTo = window.scrollTo;
window.scrollTo = jest.fn();
- hook = useIFrameBehavior(props);
+ renderHook(() => useIFrameBehavior(props));
const { cb } = useEventListener.mock.calls[0][1];
const offset = 99;
cb({ data: { offset } });
@@ -278,46 +280,33 @@ describe('useIFrameBehavior hook', () => {
});
});
describe('visibility tracking', () => {
- it('sets up visibility tracking after iframe has loaded', () => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- useIFrameBehavior(props);
+ it('sets up visibility tracking after iframe loads', () => {
+ mockState({ ...defaultStateVals, hasLoaded: true });
- const effects = getEffects([true, props.elementId], React);
- expect(effects.length).toEqual(2);
- effects[0](); // Execute the visibility tracking effect.
+ renderHook(() => useIFrameBehavior(props));
expect(global.window.addEventListener).toHaveBeenCalledTimes(2);
expect(global.window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
expect(global.window.addEventListener).toHaveBeenCalledWith('resize', expect.any(Function));
- // Initial visibility update.
- expect(postMessage).toHaveBeenCalledWith(
- {
- type: 'unit.visibilityStatus',
- data: {
- topPosition: 100,
- viewportHeight: 800,
- },
- },
+ // Initial visibility update is handled by the `handleIFrameLoad` method.
+ expect(postMessage).not.toHaveBeenCalledWith(
+ expect.objectContaining({ type: 'unit.visibilityStatus' }),
config.LMS_BASE_URL,
);
});
it('does not set up visibility tracking before iframe has loaded', () => {
- state.mockVals({ ...defaultStateVals, hasLoaded: false });
- useIFrameBehavior(props);
-
- const effects = getEffects([false, props.elementId], React);
- expect(effects).toBeNull();
+ window.location.hash = ''; // Avoid posting hash message.
+ mockState({ ...defaultStateVals, hasLoaded: false });
+ renderHook(() => useIFrameBehavior(props));
expect(global.window.addEventListener).not.toHaveBeenCalled();
expect(postMessage).not.toHaveBeenCalled();
});
it('cleans up event listeners on unmount', () => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- useIFrameBehavior(props);
+ mockState({ ...defaultStateVals, hasLoaded: true });
+ const { unmount } = renderHook(() => useIFrameBehavior(props));
- const effects = getEffects([true, props.elementId], React);
- const cleanup = effects[0](); // Execute the effect and get the cleanup function.
- cleanup(); // Call the cleanup function.
+ unmount(); // Call the cleanup function.
expect(global.window.removeEventListener).toHaveBeenCalledTimes(2);
expect(global.window.removeEventListener).toHaveBeenCalledWith('scroll', expect.any(Function));
@@ -328,14 +317,16 @@ describe('useIFrameBehavior hook', () => {
describe('output', () => {
describe('handleIFrameLoad', () => {
it('sets and logs error if has not loaded', () => {
- hook = useIFrameBehavior(props);
- hook.handleIFrameLoad();
- expect(state.setState.showError).toHaveBeenCalledWith(true);
+ mockState(defaultStateVals);
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
+ expect(setShowError).toHaveBeenCalledWith(true);
expect(logError).toHaveBeenCalled();
});
it('sends track event if has not loaded', () => {
- hook = useIFrameBehavior(props);
- hook.handleIFrameLoad();
+ mockState(defaultStateVals);
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
const eventName = 'edx.bi.error.learning.iframe_load_failed';
const eventProperties = {
unitId: props.id,
@@ -344,33 +335,72 @@ describe('useIFrameBehavior hook', () => {
expect(sendTrackEvent).toHaveBeenCalledWith(eventName, eventProperties);
});
it('does not set/log errors if loaded', () => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- hook = useIFrameBehavior(props);
- hook.handleIFrameLoad();
- expect(state.setState.showError).not.toHaveBeenCalled();
+ mockState({ ...defaultStateVals, hasLoaded: true });
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
+ expect(setShowError).not.toHaveBeenCalled();
expect(logError).not.toHaveBeenCalled();
});
it('does not send track event if loaded', () => {
- state.mockVals({ ...defaultStateVals, hasLoaded: true });
- hook = useIFrameBehavior(props);
- hook.handleIFrameLoad();
+ mockState({ ...defaultStateVals, hasLoaded: true });
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
expect(sendTrackEvent).not.toHaveBeenCalled();
});
it('registers an event handler to process fetchCourse events.', () => {
- hook = useIFrameBehavior(props);
- hook.handleIFrameLoad();
+ mockState(defaultStateVals);
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
const eventName = 'test-event-name';
const event = { data: { event_name: eventName } };
window.onmessage(event);
expect(dispatch).toHaveBeenCalledWith(processEvent(event.data, fetchCourse));
});
+ it('updates initial iframe visibility on load', () => {
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ result.current.handleIFrameLoad();
+ expect(postMessage).toHaveBeenCalledWith(
+ {
+ type: 'unit.visibilityStatus',
+ data: {
+ topPosition: 100,
+ viewportHeight: 800,
+ },
+ },
+ config.LMS_BASE_URL,
+ );
+ });
});
it('forwards handleIframeLoad, showError, and hasLoaded from state fields', () => {
- state.mockVals(stateVals);
- hook = useIFrameBehavior(props);
- expect(hook.iframeHeight).toEqual(stateVals.iframeHeight);
- expect(hook.showError).toEqual(stateVals.showError);
- expect(hook.hasLoaded).toEqual(stateVals.hasLoaded);
+ mockState(stateVals);
+ const { result } = renderHook(() => useIFrameBehavior(props));
+ expect(result.current.iframeHeight).toBe(stateVals.iframeHeight);
+ expect(result.current.showError).toBe(stateVals.showError);
+ expect(result.current.hasLoaded).toBe(stateVals.hasLoaded);
+ });
+ });
+ describe('navigate link for the next unit on auto advance', () => {
+ it('test for link when it is not last unit', () => {
+ mockState(defaultStateVals);
+ renderHook(() => useIFrameBehavior(props));
+ const { cb } = useEventListener.mock.calls[0][1];
+ const autoAdvanceMessage = () => ({
+ data: { type: messageTypes.autoAdvance },
+ });
+ cb(autoAdvanceMessage());
+ expect(mockNavigate).toHaveBeenCalledWith('/next-unit-link');
+ });
+ it('test for link when it is last unit', () => {
+ mockState(defaultStateVals);
+ useSequenceNavigationMetadata.mockReset();
+ useSequenceNavigationMetadata.mockReturnValue({ isLastUnit: true, nextLink: '/next-unit-link' });
+ renderHook(() => useIFrameBehavior(props));
+ const { cb } = useEventListener.mock.calls[0][1];
+ const autoAdvanceMessage = () => ({
+ data: { type: messageTypes.autoAdvance },
+ });
+ cb(autoAdvanceMessage());
+ expect(mockNavigate).not.toHaveBeenCalled();
});
});
});
diff --git a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.ts
similarity index 62%
rename from src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
rename to src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.ts
index ab40436a70..4a882da321 100644
--- a/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.js
+++ b/src/courseware/course/sequence/Unit/hooks/useIFrameBehavior.ts
@@ -1,25 +1,28 @@
+import React, { useState } from 'react';
import { getConfig } from '@edx/frontend-platform';
import { sendTrackEvent } from '@edx/frontend-platform/analytics';
-import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
+import { useNavigate } from 'react-router-dom';
import { throttle } from 'lodash';
-import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils';
import { logError } from '@edx/frontend-platform/logging';
import { fetchCourse } from '@src/courseware/data';
import { processEvent } from '@src/course-home/data/thunks';
import { useEventListener } from '@src/generic/hooks';
+import { getSequenceId } from '@src/courseware/data/selectors';
+import { useModel } from '@src/generic/model-store';
+import { useSequenceNavigationMetadata } from '@src/courseware/course/sequence/sequence-navigation/hooks';
import { messageTypes } from '../constants';
import useLoadBearingHook from './useLoadBearingHook';
-export const stateKeys = StrictDict({
- iframeHeight: 'iframeHeight',
- hasLoaded: 'hasLoaded',
- showError: 'showError',
- windowTopOffset: 'windowTopOffset',
-});
+export const iframeBehaviorState = {
+ iframeHeight: (val) => useState
(val), // eslint-disable-line
+ hasLoaded: (val) => useState(val), // eslint-disable-line
+ showError: (val) => useState(val), // eslint-disable-line
+ windowTopOffset: (val) => useState(val), // eslint-disable-line
+} as const;
const useIFrameBehavior = ({
elementId,
@@ -31,23 +34,29 @@ const useIFrameBehavior = ({
useLoadBearingHook(id);
const dispatch = useDispatch();
-
- const [iframeHeight, setIframeHeight] = useKeyedState(stateKeys.iframeHeight, 0);
- const [hasLoaded, setHasLoaded] = useKeyedState(stateKeys.hasLoaded, false);
- const [showError, setShowError] = useKeyedState(stateKeys.showError, false);
- const [windowTopOffset, setWindowTopOffset] = useKeyedState(stateKeys.windowTopOffset, null);
+ const activeSequenceId = useSelector(getSequenceId);
+ const navigate = useNavigate();
+ const activeSequence = useModel('sequences', activeSequenceId);
+ const activeUnitId = activeSequence.unitIds.length > 0
+ ? activeSequence.unitIds[activeSequence.activeUnitIndex] : null;
+ const { isLastUnit, nextLink } = useSequenceNavigationMetadata(activeSequenceId, activeUnitId);
+
+ const [iframeHeight, setIframeHeight] = iframeBehaviorState.iframeHeight(0);
+ const [hasLoaded, setHasLoaded] = iframeBehaviorState.hasLoaded(false);
+ const [showError, setShowError] = iframeBehaviorState.showError(false);
+ const [windowTopOffset, setWindowTopOffset] = iframeBehaviorState.windowTopOffset(null);
React.useEffect(() => {
- const frame = document.getElementById(elementId);
+ const frame = document.getElementById(elementId) as HTMLIFrameElement | null;
const { hash } = window.location;
if (hash) {
// The url hash will be sent to LMS-served iframe in order to find the location of the
// hash within the iframe.
- frame.contentWindow.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
+ frame?.contentWindow?.postMessage({ hashName: hash }, `${getConfig().LMS_BASE_URL}`);
}
}, [id, onLoaded, iframeHeight, hasLoaded]);
- const receiveMessage = React.useCallback(({ data }) => {
+ const receiveMessage = React.useCallback(({ data }: MessageEvent) => {
const { type, payload } = data;
if (type === messageTypes.resize) {
setIframeHeight(payload.height);
@@ -71,7 +80,13 @@ const useIFrameBehavior = ({
} else if (data.offset) {
// We listen for this message from LMS to know when the page needs to
// be scrolled to another location on the page.
- window.scrollTo(0, data.offset + document.getElementById('unit-iframe').offsetTop);
+ window.scrollTo(0, data.offset + document.getElementById('unit-iframe')!.offsetTop);
+ } else if (type === messageTypes.autoAdvance) {
+ // We are listening to autoAdvance message to move to next sequence automatically.
+ // In case it is the last unit we need not do anything.
+ if (!isLastUnit && nextLink) {
+ navigate(nextLink);
+ }
}
}, [
id,
@@ -87,37 +102,36 @@ const useIFrameBehavior = ({
useEventListener('message', receiveMessage);
// Send visibility status to the iframe. It's used to mark XBlocks as viewed.
+ const updateIframeVisibility = () => {
+ const iframeElement = document.getElementById(elementId) as HTMLIFrameElement | null;
+ const rect = iframeElement?.getBoundingClientRect();
+ const visibleInfo = {
+ type: 'unit.visibilityStatus',
+ data: {
+ topPosition: rect?.top,
+ viewportHeight: window.innerHeight,
+ },
+ };
+ iframeElement?.contentWindow?.postMessage(
+ visibleInfo,
+ `${getConfig().LMS_BASE_URL}`,
+ );
+ };
+
+ // Set up visibility tracking event listeners.
React.useEffect(() => {
if (!hasLoaded) {
return undefined;
}
- const iframeElement = document.getElementById(elementId);
+ const iframeElement = document.getElementById(elementId) as HTMLIFrameElement | null;
if (!iframeElement || !iframeElement.contentWindow) {
return undefined;
}
- const updateIframeVisibility = () => {
- const rect = iframeElement.getBoundingClientRect();
- const visibleInfo = {
- type: 'unit.visibilityStatus',
- data: {
- topPosition: rect.top,
- viewportHeight: window.innerHeight,
- },
- };
- iframeElement.contentWindow.postMessage(
- visibleInfo,
- `${getConfig().LMS_BASE_URL}`,
- );
- };
-
// Throttle the update function to prevent it from sending too many messages to the iframe.
const throttledUpdateVisibility = throttle(updateIframeVisibility, 100);
- // Update the visibility of the iframe in case the element is already visible.
- updateIframeVisibility();
-
// Add event listeners to update the visibility of the iframe when the window is scrolled or resized.
window.addEventListener('scroll', throttledUpdateVisibility);
window.addEventListener('resize', throttledUpdateVisibility);
@@ -152,6 +166,9 @@ const useIFrameBehavior = ({
dispatch(processEvent(e.data, fetchCourse));
}
};
+
+ // Update the visibility of the iframe in case the element is already visible.
+ updateIframeVisibility();
};
React.useEffect(() => {
diff --git a/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.js b/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.js
index 513b0b7636..424b4ba3be 100644
--- a/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.js
+++ b/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.js
@@ -1,19 +1,11 @@
import React from 'react';
-
-import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils/dist';
-
import { useEventListener } from '@src/generic/hooks';
-export const stateKeys = StrictDict({
- isOpen: 'isOpen',
- options: 'options',
-});
-
export const DEFAULT_HEIGHT = '100%';
const useModalIFrameData = () => {
- const [isOpen, setIsOpen] = useKeyedState(stateKeys.isOpen, false);
- const [options, setOptions] = useKeyedState(stateKeys.options, { height: DEFAULT_HEIGHT });
+ const [isOpen, setIsOpen] = React.useState(false);
+ const [options, setOptions] = React.useState({ height: DEFAULT_HEIGHT });
const handleModalClose = () => {
const rootFrame = document.querySelector('iframe');
diff --git a/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.test.js b/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.test.js
index 99e886f113..29068a1797 100644
--- a/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useModalIFrameData.test.js
@@ -1,74 +1,85 @@
-import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+import React from 'react';
+import { renderHook } from '@testing-library/react';
import { useEventListener } from '@src/generic/hooks';
import { messageTypes } from '../constants';
-import useModalIFrameData, { stateKeys, DEFAULT_HEIGHT } from './useModalIFrameData';
+import useModalIFrameData, { DEFAULT_HEIGHT } from './useModalIFrameData';
jest.mock('react', () => ({
...jest.requireActual('react'),
useCallback: jest.fn((cb, prereqs) => ({ cb, prereqs })),
+ useState: jest.fn((initialValue) => [initialValue, jest.fn()]),
}));
jest.mock('@src/generic/hooks', () => ({
useEventListener: jest.fn(),
}));
-const state = mockUseKeyedState(stateKeys);
+const setIsOpen = jest.fn();
+const setOptions = jest.fn();
+
+const defaultState = {
+ isOpen: false,
+ options: { height: DEFAULT_HEIGHT },
+};
+
+const mockUseStateWithValues = (values) => {
+ jest.spyOn(React, 'useState')
+ .mockReturnValueOnce([values.isOpen, setIsOpen])
+ .mockReturnValueOnce([values.options, setOptions]);
+};
describe('useModalIFrameData', () => {
beforeEach(() => {
jest.clearAllMocks();
- state.mock();
});
const testHandleModalClose = ({ trigger }) => {
const postMessage = jest.fn();
document.querySelector = jest.fn().mockReturnValue({ contentWindow: { postMessage } });
trigger();
- state.expectSetStateCalledWith(stateKeys.isOpen, false);
+ expect(React.useState).toHaveBeenNthCalledWith(1, false);
expect(postMessage).toHaveBeenCalledWith({ type: 'plugin.modal-close' }, '*');
};
describe('behavior', () => {
- it('initializes isOpen to false', () => {
- useModalIFrameData();
- state.expectInitializedWith(stateKeys.isOpen, false);
- });
- it('initializes options with default height', () => {
- useModalIFrameData();
- state.expectInitializedWith(stateKeys.options, { height: DEFAULT_HEIGHT });
+ it('should initialize with modal closed and default height', () => {
+ const { result } = renderHook(() => useModalIFrameData());
+
+ expect(result.current.modalOptions).toEqual({
+ isOpen: false,
+ height: DEFAULT_HEIGHT,
+ });
});
describe('eventListener', () => {
const oldOptions = { some: 'old', options: 'yeah' };
const prepareListener = () => {
- useModalIFrameData();
expect(useEventListener).toHaveBeenCalled();
const call = useEventListener.mock.calls[0][1];
expect(call.prereqs).toEqual([]);
return call.cb;
};
it('consumes modal events and opens sets modal options with open: true', () => {
- state.mockVals({
- [stateKeys.isOpen]: false,
- [stateKeys.options]: oldOptions,
+ mockUseStateWithValues({
+ isOpen: false,
+ options: oldOptions,
});
+ renderHook(() => useModalIFrameData());
const receiveMessage = prepareListener();
const payload = { test: 'values' };
receiveMessage({ data: { type: messageTypes.modal, payload } });
- expect(state.setState.isOpen).toHaveBeenCalledWith(true);
- expect(state.setState.options).toHaveBeenCalled();
- const [[setOptionsCb]] = state.setState.options.mock.calls;
+ expect(setIsOpen).toHaveBeenCalledWith(true);
+ expect(setOptions).toHaveBeenCalled();
+ const [[setOptionsCb]] = setOptions.mock.calls;
expect(setOptionsCb(oldOptions)).toEqual({ ...oldOptions, ...payload });
});
it('ignores events with no type', () => {
- state.mockVals({
- [stateKeys.isOpen]: false,
- [stateKeys.options]: oldOptions,
- });
+ const { result } = renderHook(() => useModalIFrameData());
+ const initialState = result.current.modalOptions;
const receiveMessage = prepareListener();
const payload = { test: 'values' };
receiveMessage({ data: { payload } });
- expect(state.setState.isOpen).not.toHaveBeenCalled();
- expect(state.setState.options).not.toHaveBeenCalled();
+ expect(result.current.modalOptions).toEqual(initialState);
});
it('calls handleModalClose behavior when receiving a "plugin.modal-close" event', () => {
+ renderHook(() => useModalIFrameData());
const receiveMessage = prepareListener();
testHandleModalClose({
trigger: () => {
@@ -80,13 +91,14 @@ describe('useModalIFrameData', () => {
});
describe('output', () => {
test('returns handleModalClose callback', () => {
+ mockUseStateWithValues(defaultState);
testHandleModalClose({ trigger: useModalIFrameData().handleModalClose });
});
it('forwards modalOptions from state values', () => {
const modalOptions = { test: 'options' };
- state.mockVals({
- [stateKeys.options]: modalOptions,
- [stateKeys.isOpen]: true,
+ mockUseStateWithValues({
+ isOpen: true,
+ options: modalOptions,
});
expect(useModalIFrameData().modalOptions).toEqual({
...modalOptions,
diff --git a/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.js b/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.js
index 960944c60f..a190b62df5 100644
--- a/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.js
+++ b/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.js
@@ -1,19 +1,13 @@
import React from 'react';
-
-import { StrictDict, useKeyedState } from '@edx/react-unit-test-utils/dist';
import { useModel } from '@src/generic/model-store';
import { modelKeys } from '../constants';
-export const stateKeys = StrictDict({
- shouldDisplay: 'shouldDisplay',
-});
-
/**
* @return {bool} should the honor code be displayed?
*/
const useShouldDisplayHonorCode = ({ id, courseId }) => {
- const [shouldDisplay, setShouldDisplay] = useKeyedState(stateKeys.shouldDisplay, false);
+ const [shouldDisplay, setShouldDisplay] = React.useState(false);
const { graded } = useModel(modelKeys.units, id);
const { userNeedsIntegritySignature } = useModel(modelKeys.coursewareMeta, courseId);
diff --git a/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.test.js b/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.test.js
index af4aac568d..19ecf5adb1 100644
--- a/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.test.js
+++ b/src/courseware/course/sequence/Unit/hooks/useShouldDisplayHonorCode.test.js
@@ -1,22 +1,12 @@
-import React from 'react';
-
-import { getEffects, mockUseKeyedState } from '@edx/react-unit-test-utils';
+import { renderHook } from '@testing-library/react';
import { useModel } from '@src/generic/model-store';
-
+import useShouldDisplayHonorCode from './useShouldDisplayHonorCode';
import { modelKeys } from '../constants';
-import useShouldDisplayHonorCode, { stateKeys } from './useShouldDisplayHonorCode';
-
-jest.mock('react', () => ({
- ...jest.requireActual('react'),
- useEffect: jest.fn(),
-}));
jest.mock('@src/generic/model-store', () => ({
useModel: jest.fn(),
}));
-const state = mockUseKeyedState(stateKeys);
-
const props = {
id: 'test-id',
courseId: 'test-course-id',
@@ -28,52 +18,29 @@ const mockModels = (graded, userNeedsIntegritySignature) => {
));
};
-describe('useShouldDisplayHonorCode hook', () => {
+describe('useShouldDisplayHonorCode', () => {
beforeEach(() => {
jest.clearAllMocks();
- mockModels(false, false);
- state.mock();
});
- describe('behavior', () => {
- it('initializes shouldDisplay to false', () => {
- useShouldDisplayHonorCode(props);
- state.expectInitializedWith(stateKeys.shouldDisplay, false);
- });
- describe('effect - on userNeedsIntegritySignature', () => {
- describe('graded and needs integrity signature', () => {
- it('sets shouldDisplay(true)', () => {
- mockModels(true, true);
- useShouldDisplayHonorCode(props);
- const cb = getEffects([state.setState.shouldDisplay, true], React)[0];
- cb();
- expect(state.setState.shouldDisplay).toHaveBeenCalledWith(true);
- });
- });
- describe('not graded', () => {
- it('sets should not display', () => {
- mockModels(true, false);
- useShouldDisplayHonorCode(props);
- const cb = getEffects([state.setState.shouldDisplay, false], React)[0];
- cb();
- expect(state.setState.shouldDisplay).toHaveBeenCalledWith(false);
- });
- });
- describe('does not need integrity signature', () => {
- it('sets should not display', () => {
- mockModels(false, true);
- useShouldDisplayHonorCode(props);
- const cb = getEffects([state.setState.shouldDisplay, true], React)[0];
- cb();
- expect(state.setState.shouldDisplay).toHaveBeenCalledWith(false);
- });
- });
- });
+
+ it('should return false when userNeedsIntegritySignature is false', () => {
+ mockModels(true, false);
+
+ const { result } = renderHook(() => useShouldDisplayHonorCode(props));
+ expect(result.current).toBe(false);
+ });
+
+ it('should return false when graded is false', () => {
+ mockModels(false, true);
+
+ const { result } = renderHook(() => useShouldDisplayHonorCode(props));
+ expect(result.current).toBe(false);
});
- describe('output', () => {
- it('returns shouldDisplay value from state', () => {
- const testValue = 'test-value';
- state.mockVal(stateKeys.shouldDisplay, testValue);
- expect(useShouldDisplayHonorCode(props)).toEqual(testValue);
- });
+
+ it('should return true when both userNeedsIntegritySignature and graded are true', () => {
+ mockModels(true, true);
+
+ const { result } = renderHook(() => useShouldDisplayHonorCode(props));
+ expect(result.current).toBe(true);
});
});
diff --git a/src/courseware/course/sequence/Unit/index.jsx b/src/courseware/course/sequence/Unit/index.jsx
index 37eb396d88..3a9c71bc94 100644
--- a/src/courseware/course/sequence/Unit/index.jsx
+++ b/src/courseware/course/sequence/Unit/index.jsx
@@ -22,7 +22,6 @@ const Unit = ({
onLoaded,
id,
isOriginalUserStaff,
- isEnabledOutlineSidebar,
renderUnitNavigation,
}) => {
const { formatMessage } = useIntl();
@@ -48,7 +47,7 @@ const Unit = ({
return (
- enabled && 'UnitNaviagtion'),
};
@@ -68,16 +67,8 @@ describe('
{renderPreviousButton()}
{renderUnitButtons()}
{renderNextButton()}
- );
+ ) : null;
};
SequenceNavigation.propTypes = {
diff --git a/src/courseware/course/sidebar/SidebarContextProvider.jsx b/src/courseware/course/sidebar/SidebarContextProvider.jsx
index 05472c01dd..9b3b824d53 100644
--- a/src/courseware/course/sidebar/SidebarContextProvider.jsx
+++ b/src/courseware/course/sidebar/SidebarContextProvider.jsx
@@ -1,13 +1,11 @@
import { breakpoints, useWindowSize } from '@openedx/paragon';
import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
import {
useEffect, useState, useMemo, useCallback,
} from 'react';
import { useModel } from '@src/generic/model-store';
import { getLocalStorage, setLocalStorage } from '@src/data/localStorage';
-import { getCoursewareOutlineSidebarSettings } from '../../data/selectors';
import * as discussionsSidebar from './sidebars/discussions';
import * as notificationsSidebar from './sidebars/notifications';
@@ -25,11 +23,10 @@ const SidebarProvider = ({
const shouldDisplayFullScreen = useWindowSize().width < breakpoints.extraLarge.minWidth;
const shouldDisplaySidebarOpen = useWindowSize().width > breakpoints.extraLarge.minWidth;
const query = new URLSearchParams(window.location.search);
- const { alwaysOpenAuxiliarySidebar } = useSelector(getCoursewareOutlineSidebarSettings);
const isInitiallySidebarOpen = shouldDisplaySidebarOpen || query.get('sidebar') === 'true';
let initialSidebar = shouldDisplayFullScreen ? getLocalStorage(`sidebar.${courseId}`) : null;
- if (!shouldDisplayFullScreen && isInitiallySidebarOpen && alwaysOpenAuxiliarySidebar) {
+ if (!shouldDisplayFullScreen && isInitiallySidebarOpen) {
initialSidebar = isUnitHasDiscussionTopics
? SIDEBARS[discussionsSidebar.ID].ID
: verifiedMode && SIDEBARS[notificationsSidebar.ID].ID;
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
index 8cd17712f5..8eaf5e8a0b 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
@@ -23,7 +23,6 @@ const CourseOutlineTray = () => {
const {
courseId,
unitId,
- isEnabledSidebar,
currentSidebar,
handleToggleCollapse,
isActiveEntranceExam,
@@ -77,7 +76,7 @@ const CourseOutlineTray = () => {
);
- if (!isEnabledSidebar || isActiveEntranceExam || currentSidebar !== ID) {
+ if (isActiveEntranceExam || currentSidebar !== ID) {
return null;
}
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
index 1f826a690a..aba41c8291 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
@@ -67,15 +67,6 @@ describe('
- PageWrap: {
- "children": [
- " ",
- [
- " ",
- [],
- " "
- ],
- " "
- ]
-}
-
-`;
diff --git a/src/decode-page-route/index.test.jsx b/src/decode-page-route/index.test.jsx
index 8abf352dbd..81f22517a8 100644
--- a/src/decode-page-route/index.test.jsx
+++ b/src/decode-page-route/index.test.jsx
@@ -62,11 +62,10 @@ describe('DecodePageRoute', () => {
const props = matchPath({
path: '/course/:courseId/home',
}, `/course/${decodedCourseId}/home`);
- const { container } = renderPage(props);
+ renderPage(props);
expect(props.pathname).toContain(decodedCourseId);
expect(mockNavigate).not.toHaveBeenCalled();
- expect(container).toMatchSnapshot();
});
it('should decode the url and replace the history if necessary', () => {
diff --git a/src/index.test.jsx b/src/index.test.jsx
index 4ff17b46ff..27e9bb819d 100644
--- a/src/index.test.jsx
+++ b/src/index.test.jsx
@@ -69,15 +69,11 @@ describe('app registry', () => {
const callArgs = subscribe.mock.calls[0];
expect(callArgs[0]).toEqual(APP_READY);
callArgs[1]();
- const [rendered] = mockRender.mock.calls[0];
- expect(rendered).toMatchSnapshot();
});
- test('subscribe: APP_INIT_ERROR. snapshot: displays an ErrorPage to root element', () => {
+ test('subscribe: APP_INIT_ERROR.', () => {
const callArgs = subscribe.mock.calls[1];
expect(callArgs[0]).toEqual(APP_INIT_ERROR);
const error = { message: 'test-error-message' };
callArgs[1](error);
- const [rendered] = mockRender.mock.calls[0];
- expect(rendered).toMatchSnapshot();
});
});
diff --git a/src/plugin-slots/ContentIFrameLoaderSlot/README.md b/src/plugin-slots/ContentIFrameLoaderSlot/README.md
index 9ee49e5d27..be835f7831 100644
--- a/src/plugin-slots/ContentIFrameLoaderSlot/README.md
+++ b/src/plugin-slots/ContentIFrameLoaderSlot/README.md
@@ -1,4 +1,4 @@
-# Content iframe Loader Slot
+# Content IFrame Loader Slot
### Slot ID: `org.openedx.frontend.learning.content_iframe_loader.v1`
@@ -6,5 +6,51 @@
* `content_iframe_loader_slot`
### Props:
-* `courseId`
-* `defaultLoaderComponent`
+* `courseId` - String identifier for the current course
+* `defaultLoaderComponent` - React component used as the default loading indicator
+
+## Description
+
+This slot is used to customize the loading indicator displayed while course content is being loaded in an iframe. It appears when content is loading but hasn't fully rendered yet, providing a customizable loading experience for learners.
+
+The default implementation shows a `PageLoading` component with a screen reader message.
+
+## Example
+
+The following `env.config.jsx` will replace the default loading spinner with a custom loading component that shows the course ID and a custom message.
+
+
+
+
+```js
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+ pluginSlots: {
+ 'org.openedx.frontend.learning.content_iframe_loader.v1': {
+ plugins: [
+ {
+ op: PLUGIN_OPERATIONS.Insert,
+ widgetId: 'default_contents',
+ widget: {
+ id: 'custom_iframe_loader',
+ type: DIRECT_PLUGIN,
+ RenderWidget: ({ courseId, defaultLoaderComponent }) => (
+
+
Loading course content...
+
Course: {courseId}
+
+ {defaultLoaderComponent}
+
+
Please wait while we prepare your learning experience
+
= ({
slotOptions={{
mergeProps: true,
}}
- >
-
+
+
📢 Course Announcement
+
+ Important updates for course {courseId}
+
+
+ Context: {model}
+
+
+ View Details
+
+
+
+
+
+
+
Premium Content
+
This content is available to verified learners only.
+
+
+
+
+ Upgrade your enrollment for course {courseId} to access:
+
+
+ ✅ Graded assignments and quizzes
+ 🏆 Verified certificate upon completion
+ 💬 Full discussion forum access
+ 📱 Mobile app offline access
+
+
+ Upgrade Now
+
+
+
📬 Course Notifications
+
+ {notificationCurrentState === 'accessLastHour' && (
+
+
⏰ Last Chance!
+
Your access expires in less than an hour.
+
+ )}
+
+ {notificationCurrentState === 'accessDaysLeft' && (
+
+
📅 Access Reminder
+
Your course access expires in a few days.
+
+ )}
+
+
+
+ 📚 New course material available
+ setNotificationCurrentState('accessDateView')}
+ >
+ View
+
+
+
+
+
+
+ 🎯 Assignment due tomorrow
+ Due Soon
+
+
+
+
+
+ Course: {courseId} | Model: {model}
+
+
+
{
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ toggleSidebar();
+ }
+ }}
+ >
+
+
+ {notification.icon}
+
+
+ {notification.title}
+ {notification.message}
+
+
+
+
+
📙: {unit.title}
📙: {unitId}
diff --git a/src/plugin-slots/UnitTitleSlot/index.jsx b/src/plugin-slots/UnitTitleSlot/index.jsx
index 237f35e0e5..05aa728724 100644
--- a/src/plugin-slots/UnitTitleSlot/index.jsx
+++ b/src/plugin-slots/UnitTitleSlot/index.jsx
@@ -8,7 +8,6 @@ import messages from '@src/courseware/course/sequence/messages';
const UnitTitleSlot = ({
unitId,
unit,
- isEnabledOutlineSidebar,
renderUnitNavigation,
}) => {
const { formatMessage } = useIntl();
@@ -21,7 +20,7 @@ const UnitTitleSlot = ({
pluginProps={{
unitId,
unit,
- isEnabledOutlineSidebar,
+ isEnabledOutlineSidebar: true,
renderUnitNavigation,
}}
>
@@ -29,7 +28,7 @@ const UnitTitleSlot = ({
{unit.title}
- {isEnabledOutlineSidebar && renderUnitNavigation(true)}
+ {renderUnitNavigation(true)}