From 4acc84eca0ec240a31e17da7e0fbb1d4e0ceae2c Mon Sep 17 00:00:00 2001
From: johnvente <jhon.vente@edunext.co>
Date: Thu, 4 Jan 2024 18:15:22 -0500
Subject: [PATCH] test: some test for hide from toc feature

---
 .../outline-tab/OutlineTab.test.jsx           | 92 +++++++++++++++++++
 src/course-home/outline-tab/Section.jsx       |  8 +-
 src/course-home/outline-tab/SequenceLink.jsx  | 10 +-
 src/course-home/outline-tab/messages.js       |  4 +-
 4 files changed, 106 insertions(+), 8 deletions(-)

diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx
index bcb219d49e..ba536adaa0 100644
--- a/src/course-home/outline-tab/OutlineTab.test.jsx
+++ b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -1269,5 +1269,97 @@ describe('Outline Tab', () => {
       await waitFor(() => expect(axiosMock.history.post).toHaveLength(1));
       expect(axiosMock.history.post[0].url).toEqual(resendEmailUrl);
     });
+
+    it('section should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.getByTestId('hide-from-toc-section-text');
+      expect(iconHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode.textContent).toBe('Hidden in Course Outline, accessible via link');
+    });
+
+    it('section should not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-icon');
+      const textHiddenFromTocSectionNode = screen.queryByTestId('hide-from-toc-section-text');
+
+      expect(iconHiddenFromTocSectionNode).not.toBeInTheDocument();
+      expect(textHiddenFromTocSectionNode).not.toBeInTheDocument();
+    });
+
+    it('sequence link should show hidden from toc message when hide_from_toc is true', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: true,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLinkNode = screen.getByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.getByTestId('hide-from-toc-sequence-link-text');
+      expect(iconHiddenFromTocSequenceLinkNode).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink.textContent).toBe('Subsections are not navigable between each other, they can only be accessed through their link.');
+    });
+
+    it('sequence link not show hidden from toc message when hide_from_toc is false', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      const courseBlocksIds = Object.keys(courseBlocks.blocks);
+      const newCourseBlocks = courseBlocksIds.reduce((blocks, blockId) => ({
+        ...blocks,
+        [blockId]: {
+          ...courseBlocks.blocks[blockId],
+          hide_from_toc: false,
+        },
+      }), {});
+
+      setTabData({
+        course_blocks: { blocks: newCourseBlocks },
+      });
+      await fetchAndRender();
+
+      const iconHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-icon');
+      const textHiddenFromTocSequenceLink = screen.queryByTestId('hide-from-toc-sequence-link-text');
+
+      expect(iconHiddenFromTocSequenceLink).not.toBeInTheDocument();
+      expect(textHiddenFromTocSequenceLink).not.toBeInTheDocument();
+    });
   });
 });
diff --git a/src/course-home/outline-tab/Section.jsx b/src/course-home/outline-tab/Section.jsx
index af0615256b..9156dcce7d 100644
--- a/src/course-home/outline-tab/Section.jsx
+++ b/src/course-home/outline-tab/Section.jsx
@@ -70,14 +70,18 @@ const Section = ({
           , {intl.formatMessage(complete ? messages.completedSection : messages.incompleteSection)}
         </span>
       </div>
+      {hideFromTOC && (
       <div className="row">
         {hideFromTOC && (
           <span className="small d-flex align-content-end">
-            <Icon className="mr-2" src={DisabledVisible} />
-            {intl.formatMessage(messages.hiddenSection)}
+            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-section-icon" />
+            <span data-testid="hide-from-toc-section-text">
+              {intl.formatMessage(messages.hiddenSection)}
+            </span>
           </span>
         )}
       </div>
+      )}
     </div>
   );
 
diff --git a/src/course-home/outline-tab/SequenceLink.jsx b/src/course-home/outline-tab/SequenceLink.jsx
index d42edc3a29..338b464f3b 100644
--- a/src/course-home/outline-tab/SequenceLink.jsx
+++ b/src/course-home/outline-tab/SequenceLink.jsx
@@ -117,14 +117,16 @@ const SequenceLink = ({
             <EffortEstimate className="ml-3 align-middle" block={sequence} />
           </div>
         </div>
+        {hideFromTOC && (
         <div className="row w-100 my-2 mx-4 pl-3">
-          {hideFromTOC && (
           <span className="small d-flex">
-            <Icon className="mr-2" src={DisabledVisible} />
-            {intl.formatMessage(messages.hiddenSequenceLink)}
+            <Icon className="mr-2" src={DisabledVisible} data-testid="hide-from-toc-sequence-link-icon" />
+            <span data-testid="hide-from-toc-sequence-link-text">
+              {intl.formatMessage(messages.hiddenSequenceLink)}
+            </span>
           </span>
-          )}
         </div>
+        )}
         <div className="row w-100 m-0 ml-3 pl-3">
           <small className="text-body pl-2">
             {due ? dueDateMessage : noDueDateMessage}
diff --git a/src/course-home/outline-tab/messages.js b/src/course-home/outline-tab/messages.js
index b7faf9c590..46ac3bd2f0 100644
--- a/src/course-home/outline-tab/messages.js
+++ b/src/course-home/outline-tab/messages.js
@@ -38,12 +38,12 @@ const messages = defineMessages({
   },
   hiddenSection: {
     id: 'learning.outline.hiddenSection',
-    defaultMessage: 'Hidden in Course Outline, accessible via link.',
+    defaultMessage: 'Hidden in Course Outline, accessible via link',
     description: 'Label for hidden section in course outline',
   },
   hiddenSequenceLink: {
     id: 'learning.outline.hiddenSequenceLink',
-    defaultMessage: 'Subsections are not navigable beetwen each other, they can only be accessed through their link.',
+    defaultMessage: 'Subsections are not navigable between each other, they can only be accessed through their link.',
     description: 'Label for hidden sequence in course outline',
   },
   dates: {