Merge pull request #1234 from ral-facilities/improve-route-for-home-p…

…age-#1233

improve route for home page #1233

cypress/e2e/with_mock_data/homePage.cy.ts

@@ -24,4 +24,11 @@ describe('IMS HomePage', () => {
         'https://www.clf.stfc.ac.uk/Pages/EPAC-Applications.aspx'
       );
   });
+  it('displays error message for invalid homepage route', () => {
+    cy.visit('/ims/fdsf');
+
+    cy.findByText(
+      `The route you are trying to access doesn't exist. Please click the Scigateway logo button in the header to navigate back to the Home page.`
+    ).should('exist');
+  });
 });

src/App.tsx

@@ -37,7 +37,10 @@ import CatalogueItemsLandingPage from './catalogue/items/catalogueItemsLandingPa
 import CatalogueItemsPage from './catalogue/items/catalogueItemsPage.component';
 import ConfigProvider from './configProvider.component';
 import handleIMS_APIError from './handleIMS_APIError';
-import { HomePage } from './homePage/homePage.component';
+import {
+  HomePage,
+  HomePageErrorComponent,
+} from './homePage/homePage.component';
 import IMSThemeProvider from './imsThemeProvider.component';
 import Items from './items/items.component';
 import ItemsLandingPage from './items/itemsLandingPage.component';
@@ -111,7 +114,14 @@ const routeObject: RouteObject[] = [
     Component: Layout,
     children: [
       { path: paths.root, Component: HomePage },
-      { path: paths.homepage, Component: HomePage },
+      {
+        path: paths.homepage,
+        Component: Outlet,
+        children: [
+          { Component: HomePage, index: true },
+          { path: '*', Component: HomePageErrorComponent },
+        ],
+      },
       {
         path: paths.admin,
         Component: AdminLayout,

src/homePage/__snapshots__/homePage.component.test.tsx.snap

@@ -1,5 +1,24 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`Home Page Error Component > renders catalogue error page correctly 1`] = `
+<DocumentFragment>
+  <div
+    class="MuiBox-root css-7gabc3"
+  >
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-11gsi37-MuiTypography-root"
+    >
+      Invalid Route
+    </p>
+    <p
+      class="MuiTypography-root MuiTypography-body1 css-1uwgr7b-MuiTypography-root"
+    >
+      The route you are trying to access doesn't exist. Please click the Scigateway logo button in the header to navigate back to the Home page.
+    </p>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Home page component > homepage renders correctly 1`] = `
 <DocumentFragment>
   <div

src/homePage/homePage.component.test.tsx

@@ -1,5 +1,8 @@
 import { RenderResult } from '@testing-library/react';
-import { HomePage } from '../homePage/homePage.component';
+import {
+  HomePage,
+  HomePageErrorComponent,
+} from '../homePage/homePage.component';
 import { renderComponentWithRouterProvider } from '../testUtils';
 
 describe('Home page component', () => {
@@ -13,3 +16,15 @@ describe('Home page component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+describe('Home Page Error Component', () => {
+  const createView = () => {
+    return renderComponentWithRouterProvider(<HomePageErrorComponent />);
+  };
+
+  it('renders catalogue error page correctly', async () => {
+    const view = createView();
+
+    expect(view.asFragment()).toMatchSnapshot();
+  });
+});

src/homePage/homePage.component.tsx

@@ -2,6 +2,7 @@ import { Box, Button, Grid, Paper, alpha, styled } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import ErrorPage from '../common/errorPage.component';
 import { InventoryManagementSystemSettingsContext } from '../configProvider.component';
 import BackgroundImage from '/images/background.jpg';
 import Decal1Image from '/images/decal1.svg';
@@ -13,6 +14,15 @@ import GreenSwirl1Image from '/images/green-swirl1.png';
 import GreenSwirl2Image from '/images/green-swirl2.png';
 import DGLogo from '/images/scigateway-white-text-blue-mark-logo.svg';
 
+export const HomePageErrorComponent = () => {
+  return (
+    <ErrorPage
+      boldErrorText="Invalid Route"
+      errorText="The route you are trying to access doesn't exist. Please click the Scigateway logo button in the header to navigate back to the Home page."
+    />
+  );
+};
+
 export interface BaseHomePageProps {
   logo: string;
   backgroundImage: string;