fix: add test in CourseOutlineTray

openedx · Nov 30, 2024 · 038b05b · 038b05b
1 parent 020e7fb
commit 038b05b
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git 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 = (
     <div className="outline-sidebar-heading-wrapper sticky d-flex justify-content-between align-self-start align-items-center bg-light-200 p-2.5 pl-4">
       {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
@@ -98,6 +98,28 @@ describe('<CourseOutlineTray />', () => {
     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();