FC-86 feat: Empty page templates

src/course-about/CourseAboutPage.tsx

@@ -0,0 +1,6 @@
+const CourseAboutPage = () => (
+  // TODO: remove it when will start develop page
+  <h1>Course About Page</h1>
+);
+
+export default CourseAboutPage;

src/home/HomePage.tsx

@@ -0,0 +1,6 @@
+const HomePage = () => (
+  // TODO: remove it when will start develop page
+  <h1>Home page</h1>
+);
+
+export default HomePage;

src/index.test.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { Routes, Route } from 'react-router-dom';
+import { AppProvider } from '@edx/frontend-platform/react';
+
+import HomePage from './home/HomePage';
+import CatalogPage from './сatalog/CatalogPage';
+import CourseAboutPage from './course-about/CourseAboutPage';
+import { render } from './setupTest';
+
+jest.mock('@edx/frontend-platform', () => ({
+  ...jest.requireActual('@edx/frontend-platform'),
+  getAuthenticatedUser: () => ({ username: 'test_user', roles: [] }),
+}));
+
+jest.mock('@edx/frontend-platform/react', () => {
+  const original = jest.requireActual('@edx/frontend-platform/react');
+  return {
+    ...original,
+    useAuthenticatedUser: () => ({ username: 'test_user', roles: [] }),
+    // eslint-disable-next-line react/prop-types
+    AppProvider: ({ children }) => <div>{children}</div>,
+  };
+});
+
+jest.mock('@edx/frontend-component-header', () => (
+  <header>Header</header>
+));
+
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: () => <footer>Footer</footer>,
+}));
+
+const renderWithProviders = (path = '/') => {
+  // eslint-disable-next-line no-underscore-dangle
+  window._testHistory = [path];
+
+  return render(
+    <AppProvider>
+      <Routes>
+        <Route path="/" element={<HomePage />} />
+        <Route path="/courses" element={<CatalogPage />} />
+        <Route path="/courses/:courseId/about" element={<CourseAboutPage />} />
+      </Routes>
+    </AppProvider>,
+  );
+};
+
+describe('App routing', () => {
+  it('renders HomePage at route /', () => {
+    const { getByText } = renderWithProviders('/');
+
+    expect(getByText('Home page')).toBeInTheDocument();
+  });
+
+  it('renders CatalogPage at route /courses', () => {
+    const { getByText } = renderWithProviders('/courses');
+
+    expect(getByText('Catalog Page')).toBeInTheDocument();
+  });
+
+  it('renders CourseAboutPage at route /courses/123/about', () => {
+    const { getByText } = renderWithProviders('/courses/123/about');
+
+    expect(getByText('Course About Page')).toBeInTheDocument();
+  });
+});

src/index.tsx

@@ -12,10 +12,14 @@ import {
 } from '@tanstack/react-query';
 import Header from '@edx/frontend-component-header';
 import { FooterSlot } from '@edx/frontend-component-footer';
+import { Routes, Route } from 'react-router-dom';
+import { Container } from '@openedx/paragon';
 
-import ExamplePage from './example/ExamplePage';
-import messages from './i18n';
+import HomePage from './home/HomePage';
+import CatalogPage from './сatalog/CatalogPage';
+import CourseAboutPage from './course-about/CourseAboutPage';
 
+import messages from './i18n';
 import './index.scss';
 
 const queryClient = new QueryClient();
@@ -27,7 +31,15 @@ subscribe(APP_READY, () => {
     <AppProvider>
       <QueryClientProvider client={queryClient}>
         <Header />
-        <ExamplePage />
+        <main className="d-flex flex-column flex-grow-1">
+          <Container className="container-xl">
+            <Routes>
+              <Route path="/" element={<HomePage />} />
+              <Route path="/courses" element={<CatalogPage />} />
+              <Route path="/courses/:courseId/about" element={<CourseAboutPage />} />
+            </Routes>
+          </Container>
+        </main>
         <FooterSlot />
       </QueryClientProvider>
     </AppProvider>,

src/setupTest.js

@@ -1,3 +1,40 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { render as rtlRender } from '@testing-library/react';
+import PropTypes from 'prop-types';
+import { MemoryRouter } from 'react-router-dom';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+function render(ui) {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false,
+      },
+    },
+  });
+
+  const Wrapper = ({ children }) => (
+    // eslint-disable-next-line react/jsx-filename-extension
+    <QueryClientProvider client={queryClient}>
+      {/* eslint-disable-next-line no-underscore-dangle */}
+      <MemoryRouter initialEntries={window._testHistory || ['/']}>
+        <IntlProvider locale="en">
+          {children}
+        </IntlProvider>
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+
+  Wrapper.propTypes = {
+    children: PropTypes.node.isRequired,
+  };
+
+  return rtlRender(ui, { wrapper: Wrapper });
+}
+
+export {
+  render,
+};

src/сatalog/CatalogPage.tsx

@@ -0,0 +1,6 @@
+const CatalogPage = () => (
+  // TODO: remove it when will start develop page
+  <h1>Catalog Page</h1>
+);
+
+export default CatalogPage;