fix: update tests

Author: ihor-romaniuk

src/courseware/CoursewareContainer.test.jsx

@@ -193,6 +193,15 @@ describe('CoursewareContainer', () => {
       expect(courseHeader.querySelector('.course-title')).toHaveTextContent(courseHomeMetadata.title);
     }
 
+    function assertNoSequenceNavigation(container) {
+      const sequenceNavButtons = container.querySelectorAll('nav.sequence-navigation a, nav.sequence-navigation button');
+      expect(sequenceNavButtons).toHaveLength(0);
+
+      expect(container.querySelector('button, a')).not.toHaveTextContent('Previous');
+      expect(container.querySelector('svg.fa-tasks')).toBeNull();
+      expect(container.querySelector('button, a')).not.toHaveTextContent('Next');
+    }
+
     beforeEach(async () => {
       // On page load, SequenceContext attempts to scroll to the top of the page.
       global.scrollTo = jest.fn();
@@ -213,6 +222,7 @@ describe('CoursewareContainer', () => {
         const container = await loadContainer();
 
         assertLoadedHeader(container);
+        assertNoSequenceNavigation(container);
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -235,6 +245,7 @@ describe('CoursewareContainer', () => {
         const container = await loadContainer();
 
         assertLoadedHeader(container);
+        assertNoSequenceNavigation(container);
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -266,6 +277,7 @@ describe('CoursewareContainer', () => {
           setUrl(sectionTree[1].id);
           const container = await loadContainer();
           assertLoadedHeader(container);
+          assertNoSequenceNavigation(container);
           assertLocation(container, sequenceTree[1][0].id, unitTree[1][0][0].id);
         });
       });
@@ -320,6 +332,7 @@ describe('CoursewareContainer', () => {
         const container = await loadContainer();
 
         assertLoadedHeader(container);
+        assertNoSequenceNavigation(container);
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -338,6 +351,7 @@ describe('CoursewareContainer', () => {
         const container = await loadContainer();
 
         assertLoadedHeader(container);
+        assertNoSequenceNavigation(container);
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
@@ -354,11 +368,23 @@ describe('CoursewareContainer', () => {
         const container = await loadContainer();
 
         assertLoadedHeader(container);
+        assertNoSequenceNavigation(container);
 
         expect(container.querySelector('.fake-unit')).toHaveTextContent('Unit Contents');
         expect(container.querySelector('.fake-unit')).toHaveTextContent(courseId);
         expect(container.querySelector('.fake-unit')).toHaveTextContent(unitBlocks[2].id);
       });
+
+      it('should render the sequence_navigation plugin slot correctly', async () => {
+        axiosMock
+          .onPost(`${courseId}/xblock/${sequenceBlock.id}/handler/get_completion`)
+          .reply(200, { complete: true });
+
+        history.push(`/course/${courseId}/${sequenceBlock.id}/${unitBlocks[0].id}`);
+        await loadContainer();
+
+        expect(screen.getByTestId('org.openedx.frontend.learning.sequence_navigation.v1')).toBeInTheDocument();
+      });
     });
   });
 

src/courseware/course/Course.test.jsx

@@ -202,6 +202,37 @@ describe('Course', () => {
     });
   });
 
+  it('doesn\'t renders course breadcrumbs by default', async () => {
+    const courseMetadata = Factory.build('courseMetadata');
+    const unitBlocks = Array.from({ length: 3 }).map(() => Factory.build(
+      'block',
+      { type: 'vertical' },
+      { courseId: courseMetadata.id },
+    ));
+    const testStore = await initializeTestStore({
+      courseMetadata, unitBlocks,
+    }, false);
+    const { courseware, models } = testStore.getState();
+    const { courseId, sequenceId } = courseware;
+    const testData = {
+      ...mockData,
+      courseId,
+      sequenceId,
+      unitId: Object.values(models.units)[1].id, // Corner cases are already covered in `Sequence` tests.
+    };
+    render(<Course {...testData} />, { store: testStore, wrapWithRouter: true });
+
+    loadUnit();
+    await waitFor(() => {
+      expect(screen.queryByText('Loading learning sequence...')).not.toBeInTheDocument();
+    });
+    // expect the section and sequence "titles" not to be loaded in as breadcrumb labels.
+    await waitFor(() => {
+      expect(screen.queryByText(Object.values(models.sections)[0].title)).not.toBeInTheDocument();
+      expect(screen.queryByText(Object.values(models.sequences)[0].title)).not.toBeInTheDocument();
+    });
+  });
+
   it('passes handlers to the sequence', async () => {
     const nextSequenceHandler = jest.fn();
     const previousSequenceHandler = jest.fn();

src/courseware/course/sequence/Sequence.jsx

@@ -89,6 +89,24 @@ const Sequence = ({
     sendTrackingLogEvent(eventName, payload);
   };
 
+  const sequenceNavProps = {
+    /* istanbul ignore next */
+    nextHandler: () => {
+      logEvent('edx.ui.lms.sequence.next_selected', 'top');
+      handleNext();
+    },
+    /* istanbul ignore next */
+    previousHandler: () => {
+      logEvent('edx.ui.lms.sequence.previous_selected', 'top');
+      handlePrevious();
+    },
+    /* istanbul ignore next */
+    onNavigate: (destinationUnitId) => {
+      logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
+      handleNavigate(destinationUnitId);
+    },
+  };
+
   useSequenceBannerTextAlert(sequenceId);
   useSequenceEntranceExamAlert(courseId, sequenceId, intl);
 
@@ -170,21 +188,18 @@ const Sequence = ({
         <CourseOutlineSidebarSlot />
         <div className="sequence w-100">
           <div className="sequence-navigation-container">
+            {/*
+              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.
+            */}
             <SequenceNavigationSlot
               sequenceId={sequenceId}
               unitId={unitId}
-              nextHandler={() => {
-                logEvent('edx.ui.lms.sequence.next_selected', 'top');
-                handleNext();
-              }}
-              onNavigate={(destinationUnitId) => {
-                logEvent('edx.ui.lms.sequence.tab_selected', 'top', destinationUnitId);
-                handleNavigate(destinationUnitId);
-              }}
-              previousHandler={() => {
-                logEvent('edx.ui.lms.sequence.previous_selected', 'top');
-                handlePrevious();
-              }}
+              {...sequenceNavProps}
               {...{
                 nextSequenceHandler,
                 handleNavigate,