fix: hardcoded course name

Author: rpenido

src/course-outline/outline-sidebar/OutlineInfoSidebar.tsx

@@ -6,11 +6,13 @@ import { ComponentCountSnippet } from '@src/generic/block-type-utils';
 import { useGetBlockTypes } from '@src/search-manager';
 
 import { SidebarContent, SidebarSection, SidebarTitle } from '@src/generic/sidebar';
+import { useCourseOutline } from '../hooks';
 
 import messages from './messages';
 
 export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
   const intl = useIntl();
+  const { courseName } = useCourseOutline({ courseId });
 
   const { data: componentData } = useGetBlockTypes(
     [`context_key = "${courseId}"`],
@@ -19,7 +21,7 @@ export const OutlineInfoSidebar = ({ courseId }: { courseId: string }) => {
   return (
     <div>
       <SidebarTitle
-        title="Course 1"
+        title={courseName}
         icon={SchoolOutline}
       />
       <SidebarContent>

src/course-outline/outline-sidebar/OutlineSidebar.test.tsx

@@ -4,20 +4,46 @@ import { userEvent } from '@testing-library/user-event';
 import {
   initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
+import { CourseAuthoringProvider } from '@src/CourseAuthoringContext';
+import { executeThunk } from '@src/utils';
+
+import {
+  fetchCourseOutlineIndexQuery,
+} from '../data/thunk';
+import {
+  getCourseOutlineIndexApiUrl,
+} from '../data/api';
+import {
+  courseOutlineIndexMock,
+} from '../__mocks__';
 
 import { OutlineSidebarProvider } from './OutlineSidebarContext';
 import OutlineSidebar from './OutlineSidebar';
 
 const courseId = 'course-v1:TestOrg+TestCourse+2023_1';
 
+const extraWrapper = ({ children }) => (
+  <CourseAuthoringProvider courseId={courseId}>
+    <OutlineSidebarProvider>
+      {children}
+    </OutlineSidebarProvider>
+  </CourseAuthoringProvider>
+);
 const renderComponent = () => render(
   <OutlineSidebar courseId={courseId} />,
-  { extraWrapper: OutlineSidebarProvider },
+  { extraWrapper },
 );
 
 describe('<OutlineSidebar>', () => {
-  beforeEach(() => {
-    initializeMocks();
+  beforeEach(async () => {
+    const mocks = initializeMocks();
+
+    const { axiosMock, reduxStore: store } = mocks;
+    axiosMock
+      .onGet(getCourseOutlineIndexApiUrl(courseId))
+      .reply(200, courseOutlineIndexMock);
+
+    await executeThunk(fetchCourseOutlineIndexQuery(courseId), store.dispatch);
   });
 
   it('should render the help sidebar by default', async () => {
@@ -36,7 +62,7 @@ describe('<OutlineSidebar>', () => {
 
     // Check that the new sidebar is rendered, with the Info page
     await waitFor(() => {
-      expect(screen.getByText('Course 1')).toBeInTheDocument();
+      expect(screen.getByText('Demonstration Course')).toBeInTheDocument();
     });
 
     const sidebarToggle = screen.getByTestId('sidebar-toggle');
@@ -48,14 +74,14 @@ describe('<OutlineSidebar>', () => {
     await userEvent.click(toggleButton);
 
     // Check that there are no more Info sidebar elements
-    expect(screen.queryByText('Course 1')).not.toBeInTheDocument();
+    expect(screen.queryByText('Demonstration Course')).not.toBeInTheDocument();
 
     // Show the sidebar
     await userEvent.click(toggleButton);
 
     // Check that the new sidebar is rendered, with the Info page
     await waitFor(() => {
-      expect(screen.getByText('Course 1')).toBeInTheDocument();
+      expect(screen.getByText('Demonstration Course')).toBeInTheDocument();
     });
 
     // Change page