[FAL-3375] Feat: Adding video selection gallery page to the routes (#461)

* feat: Adding video selection gallery page to the routes

* test: CourseAuthoringRoutes.test.jsx added

src/CourseAuthoringRoutes.jsx

@@ -6,6 +6,7 @@ import CourseAuthoringPage from './CourseAuthoringPage';
 import { PagesAndResources } from './pages-and-resources';
 import ProctoredExamSettings from './proctored-exam-settings/ProctoredExamSettings';
 import EditorContainer from './editors/EditorContainer';
+import VideoSelectorContainer from './selectors/VideoSelectorContainer';
 
 /**
  * As of this writing, these routes are mounted at a path prefixed with the following:
@@ -42,6 +43,14 @@ const CourseAuthoringRoutes = ({ courseId }) => {
             />
             )}
         </PageRoute>
+        <PageRoute path={`${path}/videos`}>
+          {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
+            && (
+            <VideoSelectorContainer
+              courseId={courseId}
+            />
+            )}
+        </PageRoute>
       </Switch>
     </CourseAuthoringPage>
   );

src/CourseAuthoringRoutes.test.jsx

@@ -0,0 +1,123 @@
+import React from 'react';
+import { AppProvider } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform';
+import { render, screen } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import CourseAuthoringRoutes from './CourseAuthoringRoutes';
+import initializeStore from './store';
+
+const courseId = 'course-v1:edX+TestX+Test_Course';
+const pagesAndResourcesMockText = 'Pages And Resources';
+const proctoredExamSeetingsMockText = 'Proctored Exam Settings';
+const editorContainerMockText = 'Editor Container';
+const videoSelectorContainerMockText = 'Video Selector Container';
+let store;
+const mockComponentFn = jest.fn();
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'),
+  useRouteMatch: () => ({
+    path: `/course/${courseId}`,
+  }),
+}));
+jest.mock('./pages-and-resources/PagesAndResources', () => (props) => {
+  mockComponentFn(props);
+  return pagesAndResourcesMockText;
+});
+jest.mock('./proctored-exam-settings/ProctoredExamSettings', () => (props) => {
+  mockComponentFn(props);
+  return proctoredExamSeetingsMockText;
+});
+jest.mock('./editors/EditorContainer', () => (props) => {
+  mockComponentFn(props);
+  return editorContainerMockText;
+});
+jest.mock('./selectors/VideoSelectorContainer', () => (props) => {
+  mockComponentFn(props);
+  return videoSelectorContainerMockText;
+});
+
+describe('<CourseAuthoringRoutes>', () => {
+  beforeEach(() => {
+    initializeMockApp({
+      authenticatedUser: {
+        userId: 3,
+        username: 'abc123',
+        administrator: true,
+        roles: [],
+      },
+    });
+    store = initializeStore();
+  });
+
+  it('renders the PagesAndResources component when the pages and resources route is active', () => {
+    render(
+      <AppProvider store={store}>
+        <MemoryRouter initialEntries={[`/course/${courseId}/pages-and-resources`]}>
+          <CourseAuthoringRoutes courseId={courseId} />
+        </MemoryRouter>
+      </AppProvider>,
+    );
+
+    expect(screen.queryByText(pagesAndResourcesMockText)).toBeInTheDocument();
+    expect(screen.queryByText(proctoredExamSeetingsMockText)).not.toBeInTheDocument();
+    expect(mockComponentFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        courseId,
+      }),
+    );
+  });
+
+  it('renders the ProctoredExamSettings component when the proctored exam settings route is active', () => {
+    render(
+      <AppProvider store={store}>
+        <MemoryRouter initialEntries={[`/course/${courseId}/proctored-exam-settings`]}>
+          <CourseAuthoringRoutes courseId={courseId} />
+        </MemoryRouter>
+      </AppProvider>,
+    );
+
+    expect(screen.queryByText(proctoredExamSeetingsMockText)).toBeInTheDocument();
+    expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+    expect(mockComponentFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        courseId,
+      }),
+    );
+  });
+
+  it('renders the EditorContainer component when the course editor route is active', () => {
+    render(
+      <AppProvider store={store}>
+        <MemoryRouter initialEntries={[`/course/${courseId}/editor/video/block-id`]}>
+          <CourseAuthoringRoutes courseId={courseId} />
+        </MemoryRouter>
+      </AppProvider>,
+    );
+
+    expect(screen.queryByText(editorContainerMockText)).toBeInTheDocument();
+    expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+    expect(mockComponentFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        courseId,
+      }),
+    );
+  });
+
+  it('renders the VideoSelectorContainer component when the course videos route is active', () => {
+    render(
+      <AppProvider store={store}>
+        <MemoryRouter initialEntries={[`/course/${courseId}/videos`]}>
+          <CourseAuthoringRoutes courseId={courseId} />
+        </MemoryRouter>
+      </AppProvider>,
+    );
+
+    expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
+    expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+    expect(mockComponentFn).toHaveBeenCalledWith(
+      expect.objectContaining({
+        courseId,
+      }),
+    );
+  });
+});

src/selectors/VideoSelectorContainer.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { VideoSelectorPage } from '@edx/frontend-lib-content-components';
+import { getConfig } from '@edx/frontend-platform';
+
+const VideoSelectorContainer = ({
+  courseId,
+}) => (
+  <div className="selector-page">
+    <VideoSelectorPage
+      courseId={courseId}
+      studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+      lmsEndpointUrl={getConfig().LMS_BASE_URL}
+    />
+  </div>
+  );
+
+VideoSelectorContainer.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
+export default VideoSelectorContainer;

src/selectors/VideoSelectorContainer.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import VideoSelectorContainer from './VideoSelectorContainer';
+
+jest.mock('@edx/frontend-lib-content-components', () => ({ VideoSelectorPage: () => 'HeaderTitle' }));
+
+jest.mock('react-router', () => ({
+  ...jest.requireActual('react-router'), // use actual for all non-hook parts
+  useParams: () => ({
+    blockId: 'company-id1',
+    blockType: 'html',
+  }),
+}));
+
+const props = { courseId: 'cOuRsEId' };
+
+describe('Video Selector Container', () => {
+  describe('snapshots', () => {
+    test('rendering correctly with expected Input', () => {
+      expect(shallow(<VideoSelectorContainer {...props} />)).toMatchSnapshot();
+    });
+  });
+});

src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Video Selector Container snapshots rendering correctly with expected Input 1`] = `
+<div
+  className="selector-page"
+>
+  <VideoSelectorPage
+    courseId="cOuRsEId"
+    lmsEndpointUrl="http://localhost:18000"
+    studioEndpointUrl="http://localhost:18010"
+  />
+</div>
+`;