feat: setup test for sequence

package.json

@@ -72,6 +72,8 @@
     "react-transition-group": "4.4.5",
     "redux": "4.0.5",
     "regenerator-runtime": "0.13.7",
+    "reselect": "4.1.8",
+    "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,130 @@
-.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;
+      // padding-left: 1rem;
+      // padding-right: 1rem;
+      // display: inline-flex;
+      // align-items: center;
+      // justify-content: flex-start;
+      // border-right: 0;
+
+      // & + .btn {
+      //   border-top: 0;
+      // }
+
+      .unit-title {
+        flex-grow: 1;
+        text-align: left;
+        overflow: hidden;
+        min-width: 0;
+        margin: 0 1rem;
+        text-overflow: ellipsis;
+        // color: $gray-700;
+      }
+
+      &.btn-primary {
+        background-color: $primary-500;
+        color: $white;
+      }
+
+      // &.active {
+        // .unit-icon {
+        //   color: $primary-500;
+        // }
+
+        // &:after {
+          // content: "";
+          // position: absolute;
+          // bottom: 0px;
+          // left: 0px;
+          // top: 0px;
+          // right: auto;
+          // width: 2px;
+          // height: auto;
+          // background: $primary;
+        // }
+      // }
+    }
+
+    // .dropdown-item {
+    //   &.active {
+    //     // This is un-doing the default react-bootstrap styling for active dropdown-item elements.
+    //     background-color: transparent;
+    //   }
+    // }
+  }
+
+  .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;
+    }
   }
 }