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`] = ` +
+ +
+`;