temp!: attempted broader Jest tests

Attempted to create unit tests for the changes to SequenceLink.js, only to discover that doing so would require some broader end to end testing. That is to say, it would be unproductive to dig any deeper into testing. I am making this commit to at least document the work I did, for my own records.

BREAKING CHANGE: Don't merge this commit. I will be making another commit that removes the breaking tests.

package.json

@@ -17,7 +17,8 @@
     "prepare": "husky install",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
-    "test": "fedx-scripts jest --coverage --passWithNoTests"
+    "test": "fedx-scripts jest --coverage --passWithNoTests",
+    "testx": "fedx-scripts jest -t 'Outline Tab' --coverage --passWithNoTests"
   },
   "author": "edX",
   "license": "AGPL-3.0",

src/course-home/outline-tab/OutlineTab.test.jsx

@@ -23,6 +23,8 @@ import { CERT_STATUS_TYPE } from './alerts/certificate-status-alert/CertificateS
 import OutlineTab from './OutlineTab';
 import LoadedTabPage from '../../tab-page/LoadedTabPage';
 
+import SequenceLink from './SequenceLink';
+
 initializeMockApp();
 jest.mock('@edx/frontend-platform/analytics');
 
@@ -154,6 +156,49 @@ describe('Outline Tab', () => {
       const sequenceLink = screen.getByText('Title of Sequence');
       expect(sequenceLink.getAttribute('href')).toContain(`/course/${courseId}`);
     });
+
+    it('if exam due date set, exam description AND due date appear', async () => {
+      // Create a due date set a year into the future
+      const now = new Date();
+      const dueDate = new Date(now.getFullYear() + 1, now.getMonth(), now.getDate());
+
+      // Build course blocks with a future due date set
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', {
+        sequenceBlocks: [
+          <SequenceLink
+            key={0}
+            id={0}
+            courseId={courseId}
+            sequence={
+              {
+                complete: false,
+                description: 'Description of Sequence',
+                due: dueDate,
+                showLink: true,
+                title: 'Title of Subsection',
+              }
+            }
+            first={null}
+          />,
+        ],
+      });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      // Button renders as "Expand All"
+      const expandButton = screen.getByRole('button', { name: 'Expand all' });
+      expect(expandButton).toBeInTheDocument();
+
+      // Click to expand section
+      userEvent.click(expandButton);
+
+      // Look for a substring that says "(exam type) Exam due (datetime)""
+      expect(screen.getByText(/Exam due/)).toBeInDocument();
+    });
+
+    // If due date is NOT set, ONLY display description
   });
 
   describe('Suggested schedule alerts', () => {

src/course-home/outline-tab/SequenceLink.jsx

@@ -39,6 +39,50 @@ const SequenceLink = ({
   const coursewareUrl = <Link to={`/course/${courseId}/${id}`}>{title}</Link>;
   const displayTitle = showLink ? coursewareUrl : title;
 
+  const dueDateMessage = (
+    <FormattedMessage
+      id="learning.outline.sequence-due-date-set"
+      defaultMessage="{description} due {assignmentDue}"
+      description="Used below an assignment title"
+      values={{
+        assignmentDue: (
+          <FormattedTime
+            key={`${id}-due`}
+            day="numeric"
+            month="short"
+            year="numeric"
+            timeZoneName="short"
+            value={due}
+            {...timezoneFormatArgs}
+          />
+        ),
+        description: description || '',
+      }}
+    />
+  );
+
+  const noDueDateMessage = (
+    <FormattedMessage
+      id="learning.outline.sequence-due-date-not-set"
+      defaultMessage="{description}"
+      description="Used below an assignment title"
+      values={{
+        assignmentDue: (
+          <FormattedTime
+            key={`${id}-due`}
+            day="numeric"
+            month="short"
+            year="numeric"
+            timeZoneName="short"
+            value={due}
+            {...timezoneFormatArgs}
+          />
+        ),
+        description: description || '',
+      }}
+    />
+  );
+
   return (
     <li>
       <div className={classNames('', { 'mt-2 pt-2 border-top border-light': !first })}>
@@ -70,31 +114,11 @@ const SequenceLink = ({
             <EffortEstimate className="ml-3 align-middle" block={sequence} />
           </div>
         </div>
-        {due && (
+        <div className="row w-100 m-0 ml-3 pl-3">
-          <div className="row w-100 m-0 ml-3 pl-3">
+          <small className="text-body pl-2">
-            <small className="text-body pl-2">
+            {due ? dueDateMessage : noDueDateMessage}
-              <FormattedMessage
+          </small>
-                id="learning.outline.sequence-due"
+        </div>
-                defaultMessage="{description} due {assignmentDue}"
-                description="Used below an assignment title"
-                values={{
-                  assignmentDue: (
-                    <FormattedTime
-                      key={`${id}-due`}
-                      day="numeric"
-                      month="short"
-                      year="numeric"
-                      timeZoneName="short"
-                      value={due}
-                      {...timezoneFormatArgs}
-                    />
-                  ),
-                  description: description || '',
-                }}
-              />
-            </small>
-          </div>
-        )}
       </div>
     </li>
   );