fix: unit link in preview mode

Author: KristinAoki

src/courseware/course/sidebar/sidebars/course-outline/components/SidebarUnit.test.jsx

@@ -36,12 +36,12 @@ describe('<SidebarUnit />', () => {
     };
   };
 
-  function renderWithProvider(props = {}, sidebarContext = defaultSidebarContext) {
+  function renderWithProvider(props = {}, sidebarContext = defaultSidebarContext, pathname = '/course') {
     const { container } = render(
       <AppProvider store={store} wrapWithRouter={false}>
         <IntlProvider locale="en">
           <SidebarContext.Provider value={{ ...sidebarContext }}>
-            <MemoryRouter>
+            <MemoryRouter initialEntries={[{ pathname }]}>
               <SidebarUnit
                 isFirst
                 id={unit.id}
@@ -138,4 +138,34 @@ describe('<SidebarUnit />', () => {
       expect(window.sessionStorage.getItem('hideCourseOutlineSidebar')).toEqual('true');
     });
   });
+
+  describe('UnitLinkWrapper', () => {
+    describe('course in preview mode', () => {
+      beforeEach(async () => {
+        await initTestStore();
+        renderWithProvider({ unit: { ...unit } }, { ...defaultSidebarContext, shouldDisplayFullScreen: true }, '/preview/course');
+      });
+
+      it('href includes /preview', async () => {
+        const unitLink = screen.getByText(unit.title).closest('a');
+        const linkHref = unitLink.getAttribute('href');
+
+        expect(linkHref.includes('/preview/')).toBeTruthy();
+      });
+    });
+
+    describe('course in live mode', () => {
+      beforeEach(async () => {
+        await initTestStore();
+        renderWithProvider({ unit: { ...unit } }, { ...defaultSidebarContext, shouldDisplayFullScreen: true });
+      });
+
+      it('href does not include /preview/', async () => {
+        const unitLink = screen.getByText(unit.title).closest('a');
+        const linkHref = unitLink.getAttribute('href');
+
+        expect(linkHref.includes('/preview/')).toBeFalsy();
+      });
+    });
+  });
 });

src/courseware/course/sidebar/sidebars/course-outline/components/UnitLinkWrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 import { useCourseOutlineSidebar } from '../hooks';
 
@@ -27,10 +27,14 @@ const UnitLinkWrapper: React.FC<Props> = ({
   children,
 }) => {
   const { handleUnitClick } = useCourseOutlineSidebar();
+  const { pathname } = useLocation();
+  const isPreview = pathname.startsWith('/preview');
+  const baseUrl = `/course/${courseId}/${sequenceId}/${id}`;
+  const link = isPreview ? `/preview${baseUrl}` : baseUrl;
 
   return (
     <Link
-      to={`/course/${courseId}/${sequenceId}/${id}`}
+      to={link}
       className="row w-100 m-0 d-flex align-items-center text-gray-700"
       onClick={() => handleUnitClick({ sequenceId, activeUnitId, id })}
     >