diff --git a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
index 6a2677d0f8..17d75637f2 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.jsx
@@ -67,7 +67,6 @@ const CourseOutlineTray = ({ intl }) => {
setOpenSequenceId((prevOpenSequenceId) => (prevOpenSequenceId === sequenceId ? null : sequenceId));
};
- // Sidebar Heading definition
const sidebarHeading = (
{isDisplaySequenceLevel && backButtonTitle ? (
@@ -135,8 +134,8 @@ const CourseOutlineTray = ({ intl }) => {
key={sequenceId}
courseId={courseId}
sequence={sequences[sequenceId]}
- isOpen={sequenceId === openSequenceId} // Control if the sequence is open
- onToggle={() => handleToggleSequence(sequenceId)} // Change the state
+ isOpen={sequenceId === openSequenceId}
+ onToggle={() => handleToggleSequence(sequenceId)}
activeUnitId={unitId}
/>
))
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 87d7d7c1cc..1454d4f525 100644
--- a/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
+++ b/src/courseware/course/sidebar/sidebars/course-outline/CourseOutlineTray.test.jsx
@@ -98,6 +98,28 @@ describe('', () => {
expect(mockToggleSidebar).toHaveBeenCalledWith(null);
});
+ it('toggles openSequenceId correctly when a sequence is clicked', async () => {
+ await initTestStore();
+ renderWithProvider();
+ const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
+ expect(sequenceButton).toBeInTheDocument();
+ userEvent.click(sequenceButton);
+ expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'true');
+ userEvent.click(sequenceButton);
+ expect(screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` })).toHaveAttribute('aria-expanded', 'false');
+ });
+
+ it('updates setOpenSequenceId correctly when toggling sequences', async () => {
+ await initTestStore();
+ renderWithProvider();
+ const sequenceButton = screen.getByRole('button', { name: `${sequence.title} , ${courseOutlineMessages.incompleteAssignment.defaultMessage}` });
+ expect(sequenceButton).toBeInTheDocument();
+ userEvent.click(sequenceButton);
+ expect(sequenceButton).toHaveAttribute('aria-expanded', 'true');
+ userEvent.click(sequenceButton);
+ expect(sequenceButton).toHaveAttribute('aria-expanded', 'false');
+ });
+
it('navigates to section or sequence level correctly on click by back/section button', async () => {
await initTestStore();
renderWithProvider();