feat: setup test for sequence

.env.development

@@ -37,7 +37,7 @@ ENABLE_NEW_VIDEO_UPLOAD_PAGE = false
 ENABLE_UNIT_PAGE = true
 ENABLE_VIDEO_UPLOAD_PAGE_LINK_IN_CONTENT_DROPDOWN = false
 ENABLE_TAGGING_TAXONOMY_PAGES = true
-ENABLE_NEW_COURSE_OUTLINE_PAGE = true
+ENABLE_NEW_COURSE_OUTLINE_PAGE = false
 BBB_LEARN_MORE_URL=''
 HOTJAR_APP_ID=''
 HOTJAR_VERSION=6

package.json

@@ -72,6 +72,7 @@
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
     "regenerator-runtime": "0.13.7",
+    "rosie": "^2.1.1",
     "universal-cookie": "^4.0.4",
     "uuid": "^3.4.0",
     "yup": "0.31.1"

src/course-unit/CourseUnit.jsx

@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
 import { useParams } from 'react-router-dom';
 import { useIntl, injectIntl } from '@edx/frontend-platform/i18n';
 import { Container, Layout } from '@edx/paragon';
@@ -13,6 +13,7 @@ import ProcessingNotification from '../generic/processing-notification';
 import InternetConnectionAlert from '../generic/internet-connection-alert';
 import { getProcessingNotification } from '../generic/processing-notification/data/selectors';
 import Sequence from './course-sequence';
+import { fetchSequence, fetchCourse } from './data/thunk';
 
 import { useCourseUnit } from './hooks';
 import messages from './messages';
@@ -21,6 +22,7 @@ import './CourseUnit.scss';
 const CourseUnit = ({ courseId }) => {
   const { sequenceId, blockId } = useParams();
   const intl = useIntl();
+  const dispatch = useDispatch();
   const {
     isLoading,
     breadcrumbsData,
@@ -33,21 +35,18 @@ const CourseUnit = ({ courseId }) => {
     handleTitleEdit,
     handleInternetConnectionFailed,
   } = useCourseUnit({ intl, courseId, blockId });
-  // console.log('blockId', blockId);
+
   document.title = getPageHeadTitle('', unitTitle);
 
   const {
     isShow: isShowProcessingNotification,
     title: processingNotificationTitle,
   } = useSelector(getProcessingNotification);
 
-  const handleUnitNavigationClick = () => {
-    console.log('handleUnitNavigationClick');
-  };
-
-  const handleNextSequenceClick = () => {};
-
-  const handlePreviousSequenceClick = () => {};
+  useEffect(() => {
+    dispatch(fetchSequence(sequenceId));
+    dispatch(fetchCourse(courseId));
+  }, []);
 
   if (isLoading) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
@@ -74,9 +73,6 @@ const CourseUnit = ({ courseId }) => {
             courseId={courseId}
             sequenceId={sequenceId}
             unitId={blockId}
-            unitNavigationHandler={handleUnitNavigationClick}
-            nextSequenceHandler={handleNextSequenceClick}
-            previousSequenceHandler={handlePreviousSequenceClick}
           />
           <Layout
             lg={[{ span: 9 }, { span: 3 }]}

src/course-unit/course-sequence/CourseSequence.scss

@@ -1,8 +1,94 @@
-.sequence-nav {
-  margin-bottom: 28px;
+@import "~@edx/brand/paragon/fonts";
+@import "~@edx/brand/paragon/variables";
+@import "~@edx/paragon/scss/core/core";
+@import "~@edx/brand/paragon/overrides";
 
-  .sequence-nav-button {
-    color: #454545;
+.sequence-container {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  margin-bottom: 4rem;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.sequence-navigation {
+  display: flex;
+
+  @media (min-width: map-get($grid-breakpoints, "sm")) {
+    margin: -1px -1px 0;
+  }
+
+  .btn {
+    flex-grow: 1;
+    display: inline-flex;
+    position: relative;
+    height: 3rem;
+    justify-content: center;
+    align-items: center;
+    white-space: nowrap;
+
+    &:focus {
+      z-index: 1;
+    }
+  }
+
+  .sequence-navigation-tabs-container {
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: 100%;
+    display: flex;
+    // min-width 0 prevents the flex item from overflowing the parent container
+    // https://dev.to/martyhimmel/quick-tip-to-stop-flexbox-from-overflowing-peb
+    min-width: 0;
+  }
+
+  .sequence-navigation-tabs {
+    .btn:not(.new-unit-btn) {
+      flex-basis: 100%;
+      min-width: 2rem;
+    }
+  }
+
+  .sequence-navigation-dropdown {
+    .dropdown-menu .btn {
+      flex-basis: 100%;
+      min-width: 4rem;
+
+      .unit-title {
+        flex-grow: 1;
+        text-align: left;
+        overflow: hidden;
+        min-width: 0;
+        margin: 0 1rem;
+        text-overflow: ellipsis;
+      }
+
+      &.btn-primary {
+        background-color: $primary-500;
+        color: $white;
+      }
+    }
+  }
+
+  .new-unit-btn {
     min-width: 200px;
   }
+
+  .previous-btn,
+  .next-btn {
+    min-width: 200px;
+
+    @media (max-width: -1 + map-get($grid-breakpoints, "sm")) {
+      min-width: fit-content;
+      padding-top: 1rem;
+      padding-bottom: 1rem;
+    }
+
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
+      padding-left: 2rem;
+      padding-right: 2rem;
+    }
+  }
 }

src/course-unit/course-sequence/Sequence.jsx

@@ -1,51 +1,22 @@
-import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { ButtonGroup, Button } from '@edx/paragon';
-import { ChevronLeft, ChevronRight } from '@edx/paragon/icons';
-import { Link } from 'react-router-dom';
-import { useDispatch, useSelector } from 'react-redux';
-
-// http://localhost:2001/course/course-v1:edX+DemoX+Demo_Course/container/block-v1:edX+DemoX+Demo_Course+type@sequential+block@edx_introduction/block-v1:edX+DemoX+Demo_Course+type@vertical+block@vertical_0270f6de40fc
-
+import { useSelector } from 'react-redux';
+import classNames from 'classnames';
+import { breakpoints, useWindowSize } from '@edx/paragon';
+import { injectIntl } from '@edx/frontend-platform/i18n';
+import SequenceNavigation from './sequence-navigation/SequenceNavigation';
 import { useModel } from '../../generic/model-store';
 
-import messages from './messages';
-import SequenceNavigationTabs from './sequence-navigation/SequenceNavigationTabs';
-import { useSequenceNavigationMetadata } from './hooks';
-import { fetchSequence, fetchCourse } from '../data/thunk';
-
 const Sequence = ({
-  intl,
   courseId,
   sequenceId,
   unitId,
   unitNavigationHandler,
   nextSequenceHandler,
   previousSequenceHandler,
 }) => {
-  const { sequenceStatus } = useSelector(state => state.courseUnit);
-  // const course = useModel('coursewareMeta', courseId);
   const sequence = useModel('sequences', sequenceId);
-  const dispatch = useDispatch();
-  // const unit = useModel('units', unitId);
-  const globalStore = useSelector(state => state);
-  // const courseDetails = useModel('courseDetails', courseId);
-
-  const {
-    isFirstUnit, isLastUnit, nextLink, previousLink,
-  } = useSequenceNavigationMetadata(
-    sequenceId,
-    unitId,
-  );
-  // console.log('isFirstUnit', isFirstUnit);
-  // console.log('isLastUnit', isLastUnit);
-
-  useEffect(() => {
-    dispatch(fetchSequence(sequenceId));
-    dispatch(fetchCourse(courseId));
-  }, []);
-  console.log('globalStore', globalStore);
+  const shouldDisplayNotificationTriggerInSequence = useWindowSize().width < breakpoints.small.minWidth;
+  const sequenceStatus = useSelector(state => state.courseUnit.sequenceStatus);
 
   const handleNavigate = (destinationUnitId) => {
     unitNavigationHandler(destinationUnitId);
@@ -71,82 +42,44 @@ const Sequence = ({
     }
   };
 
-  const renderPreviousButton = () => {
-    const disabled = isFirstUnit;
-
-    return (
-      <Button
-        className="sequence-nav-button button-prev"
-        variant={disabled ? 'brand' : 'outline-primary'}
-        iconBefore={ChevronLeft}
-        disabled={disabled}
-        onClick={() => handlePrevious()}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : previousLink}
-      >
-        {intl.formatMessage(messages.prevBtnText)}
-      </Button>
-    );
-  };
-
-  const renderNextButton = () => {
-    const disabled = isLastUnit;
-
-    return (
-      <Button
-        className="sequence-nav-button button-next"
-        variant={disabled ? 'brand' : 'outline-primary'}
-        iconAfter={ChevronRight}
-        disabled={disabled}
-        onClick={() => handleNext()}
-        as={disabled ? undefined : Link}
-        to={disabled ? undefined : nextLink}
-      >
-        {intl.formatMessage(messages.nextBtnText)}
-      </Button>
-    );
-  };
+  const defaultContent = (
+    <div className="sequence-container d-inline-flex flex-row">
+      <div className={classNames('sequence w-100', { 'position-relative': shouldDisplayNotificationTriggerInSequence })}>
+        <SequenceNavigation
+          courseId={courseId}
+          sequenceId={sequenceId}
+          unitId={unitId}
+          nextHandler={() => {
+            handleNext();
+          }}
+          onNavigate={(destinationUnitId) => {
+            handleNavigate(destinationUnitId);
+          }}
+          previousHandler={() => {
+            handlePrevious();
+          }}
+        />
+      </div>
+    </div>
+  );
 
-  const renderUnitButtons = () => {
-    // if (isLocked) {
-    //   return (
-    //       <UnitButton unitId={unitId} title="" contentType="lock" isActive onClick={() => {}} />
-    //   );
-    // }
-    if (sequence.unitIds.length === 0) {
-      return (
-        <div style={{ flexBasis: '100%', minWidth: 0, borderBottom: 'solid 1px #EAEAEA' }} />
-      );
-    }
+  if (sequenceStatus === 'LOADED') {
     return (
-      <SequenceNavigationTabs
-        unitIds={sequence.unitIds}
-        unitId={unitId}
-        sequenceId={sequenceId}
-        courseId={courseId}
-        // showCompletion={sequence.showCompletion}
-        onNavigate={(destinationUnitId) => {
-          handleNavigate(destinationUnitId);
-        }}
-      />
+      <div>
+        {defaultContent}
+      </div>
     );
-  };
+  }
 
-  return sequenceStatus === 'LOADED' && (
-    <ButtonGroup
-      as="nav"
-      className="sequence-nav d-flex"
-      aria-label={intl.formatMessage(messages.sequenceNavLabelText)}
-    >
-      {renderPreviousButton()}
-      {renderUnitButtons()}
-      {renderNextButton()}
-    </ButtonGroup>
+  // sequence status 'failed' and any other unexpected sequence status.
+  return (
+    <p className="text-center py-5 mx-auto" style={{ maxWidth: '30em' }}>
+      failed
+    </p>
   );
 };
 
 Sequence.propTypes = {
-  intl: intlShape.isRequired,
   unitId: PropTypes.string,
   courseId: PropTypes.string.isRequired,
   sequenceId: PropTypes.string,