diff --git a/src/CourseAuthoringRoutes.jsx b/src/CourseAuthoringRoutes.jsx
index aa987268f..33441abd9 100644
--- a/src/CourseAuthoringRoutes.jsx
+++ b/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 }) => {
/>
)}
+
+ {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
+ && (
+
+ )}
+
);
diff --git a/src/CourseAuthoringRoutes.test.jsx b/src/CourseAuthoringRoutes.test.jsx
new file mode 100644
index 000000000..471322b1c
--- /dev/null
+++ b/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('', () => {
+ 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(
+
+
+
+
+ ,
+ );
+
+ 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(
+
+
+
+
+ ,
+ );
+
+ 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(
+
+
+
+
+ ,
+ );
+
+ 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(
+
+
+
+
+ ,
+ );
+
+ expect(screen.queryByText(videoSelectorContainerMockText)).toBeInTheDocument();
+ expect(screen.queryByText(pagesAndResourcesMockText)).not.toBeInTheDocument();
+ expect(mockComponentFn).toHaveBeenCalledWith(
+ expect.objectContaining({
+ courseId,
+ }),
+ );
+ });
+});
diff --git a/src/selectors/VideoSelectorContainer.jsx b/src/selectors/VideoSelectorContainer.jsx
new file mode 100644
index 000000000..1b3d0aedb
--- /dev/null
+++ b/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,
+}) => (
+
+
+
+ );
+
+VideoSelectorContainer.propTypes = {
+ courseId: PropTypes.string.isRequired,
+};
+
+export default VideoSelectorContainer;
diff --git a/src/selectors/VideoSelectorContainer.test.jsx b/src/selectors/VideoSelectorContainer.test.jsx
new file mode 100644
index 000000000..a7aa282cd
--- /dev/null
+++ b/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()).toMatchSnapshot();
+ });
+ });
+});
diff --git a/src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap b/src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap
new file mode 100644
index 000000000..16c968b4c
--- /dev/null
+++ b/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`] = `
+
+
+
+`;