diff --git a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx
index 4c1a430fd5..c2ab814b12 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx
@@ -8,6 +8,7 @@ import { sendTrackEvent, sendTrackingLogEvent } from '@edx/frontend-platform/ana
import { initializeMockApp, initializeTestStore } from '@src/setupTest';
import SidebarContext from '../../../SidebarContext';
import SidebarUnit from './SidebarUnit';
+import { ID } from '../constants';
jest.mock('@edx/frontend-platform/analytics', () => ({
sendTrackEvent: jest.fn(),
@@ -20,7 +21,7 @@ describe('', () => {
let store = {};
let unit;
let sequenceId;
- let mockData;
+ let defaultSidebarContext;
const initTestStore = async (options) => {
store = await initializeTestStore(options);
@@ -29,16 +30,17 @@ describe('', () => {
const sequence = state.courseware.courseOutline.sequences[sequenceId];
unit = state.courseware.courseOutline.units[sequence.unitIds[0]];
- mockData = {
+ defaultSidebarContext = {
toggleSidebar: jest.fn(),
+ currentSidebar: ID,
};
};
- function renderWithProvider(props = {}) {
+ function renderWithProvider(props = {}, sidebarContext = defaultSidebarContext) {
const { container } = render(
-
+
', () => {
expect(screen.getByText(unit.title)).toBeInTheDocument();
});
- it('sends log event correctly when unit is clicked', async () => {
- const user = userEvent.setup();
- await initTestStore();
- renderWithProvider({ unit: { ...unit } });
- const logData = {
- id: unit.id,
- current_tab: 1,
- tab_count: 1,
- target_id: unit.id,
- target_tab: 1,
- widget_placement: 'left',
- };
+ describe('When a unit is clicked', () => {
+ it('sends log event correctly', async () => {
+ const user = userEvent.setup();
+ await initTestStore();
+ renderWithProvider({ unit: { ...unit } });
+ const logData = {
+ id: unit.id,
+ current_tab: 1,
+ tab_count: 1,
+ target_id: unit.id,
+ target_tab: 1,
+ widget_placement: 'left',
+ };
+
+ await user.click(screen.getByText(unit.title));
+
+ expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);
+ expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);
+ });
- await user.click(screen.getByText(unit.title));
+ it('leaves sidebar open in desktop mode', async () => {
+ const user = userEvent.setup();
+ await initTestStore();
+ renderWithProvider({ unit: { ...unit } });
+ await user.click(screen.getByText(unit.title));
- expect(sendTrackEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);
- expect(sendTrackingLogEvent).toHaveBeenCalledWith('edx.ui.lms.sequence.tab_selected', logData);
+ expect(defaultSidebarContext.toggleSidebar).not.toHaveBeenCalled();
+ expect(window.sessionStorage.getItem('hideCourseOutlineSidebar')).toBeNull();
+ });
+
+ it('closes sidebar on mobile devices', async () => {
+ const user = userEvent.setup();
+ await initTestStore();
+ renderWithProvider({ unit: { ...unit } }, { ...defaultSidebarContext, shouldDisplayFullScreen: true });
+ await user.click(screen.getByText(unit.title));
+
+ expect(defaultSidebarContext.toggleSidebar).toHaveBeenCalledTimes(1);
+ expect(defaultSidebarContext.toggleSidebar).toHaveBeenCalledWith(null);
+ expect(window.sessionStorage.getItem('hideCourseOutlineSidebar')).toEqual('true');
+ });
});
});
diff --git a/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx b/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx
index 47c6c89e26..c685fe59d2 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/hooks.jsx
@@ -85,6 +85,11 @@ export const useCourseOutlineSidebar = () => {
logEvent('edx.ui.lms.sequence.tab_selected', 'left');
dispatch(checkBlockCompletion(courseId, sequenceId, activeUnitId));
+
+ // Hide the sidebar after selecting a unit on a mobile device.
+ if (shouldDisplayFullScreen) {
+ handleToggleCollapse();
+ }
};
useEffect(() => {