page-404:

webapp/e2e/steps/utils.js

@@ -1,7 +1,9 @@
 async function selectNavOptionByHref(page, hrefValue) {
-  await page.click('div.header-button')
-  await page.click(`a.nav-link[href="${hrefValue}"]`)
-  await page.click('div.close-button')
+  await page.click('div.header-button');
+  await page.waitForSelector(`a.nav-link[href="${hrefValue}"]`, { visible: true });
+  await page.click(`a.nav-link[href="${hrefValue}"]`);
+  await page.click('div.close-button');
 }
 
+
 module.exports = { selectNavOptionByHref }

webapp/package.json

@@ -16,12 +16,14 @@
     "i18next": "^23.10.1",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-http-backend": "^2.5.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-countdown": "^2.3.2",
     "react-dom": "^18.2.0",
     "react-i18next": "^14.1.0",
+    "react-lottie": "^1.2.4",
     "react-password-strength-bar": "^0.4.1",
-    "react-router-dom": "^6.3.0",
+    "react-router-dom": "^6.23.0",
     "react-scripts": "5.0.1",
     "web-vitals": "^3.5.1"
   },
@@ -54,6 +56,7 @@
     ]
   },
   "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
     "axios-mock-adapter": "^1.22.0",
     "cross-env": "^7.0.3",
     "expect-puppeteer": "^9.0.2",

webapp/src/App.js

@@ -9,6 +9,7 @@ import Settings from './pages/Settings/Settings'
 import Login from './pages/Login/Login'
 import Logout from './pages/Logout/Logout'
 import Register from './pages/Register/Register'
+import PageNotFound from "./pages/PageNotFound/PageNotFound";
 
 import { ProtectedRoute } from './components/ProtectedRoute'
 
@@ -19,39 +20,43 @@ import { useState } from 'react'
 
 function App() {
 
-  //State for the volume
-  const [volume, setVolume] = useState(10);
-
-  const handleVolumeChange = (event, newVolume) => {
-    setVolume(newVolume);
-  };
-
-  return (
-    <SettingsProvider>
-      <AuthProvider>
-        <Routes>
-          <Route element={<AppLayout volume={volume} />}>
-            <Route path="/" index element={<Home />}></Route>
-            <Route path="/login" element={<Login />}></Route>
-            <Route path="/register" element={<Register />}></Route>
-            <Route path="/logout" element={<Logout />} />
-            <Route
-              path="game"
-              element={
-                <ProtectedRoute>
-                  <Game />
-                </ProtectedRoute>
-              }
-            ></Route>
-            <Route path="profile/:username?" element={<Profile />} />
-            <Route path="leaderboard" element={<Leaderboard />}></Route>
-            <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
-          </Route>
-        </Routes>
-      </AuthProvider>
-    </SettingsProvider>
-  )
+    //State for the volume
+    const [volume, setVolume] = useState(10);
+
+    const handleVolumeChange = (event, newVolume) => {
+        setVolume(newVolume);
+    };
+
+    return (
+        <SettingsProvider>
+            <AuthProvider>
+                <Routes>
+                    <Route element={<AppLayout volume={volume} />}>
+                        <Route path="/" index element={<Home />}></Route>
+                        <Route path="/login" element={<Login />}></Route>
+                        <Route path="/register" element={<Register />}></Route>
+                        <Route path="/logout" element={<Logout />} />
+                        <Route
+                            path="game"
+                            element={
+                                <ProtectedRoute>
+                                    <Game />
+                                </ProtectedRoute>
+                            }
+                        ></Route>
+                        <Route path="profile/:username?" element={<Profile />} />
+                        <Route path="leaderboard" element={<Leaderboard />}></Route>
+                        <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
+                    </Route>
+                    <Route
+                        path="*"
+                        element={<PageNotFound />}
+                    />
+                </Routes>
+            </AuthProvider>
+        </SettingsProvider>
+    )
 
 }
 
-export default App
+export default App

webapp/src/components/test/index.test.js

@@ -4,15 +4,25 @@ import { render } from '@testing-library/react'
 import App from '../../App'
 import { runI18n } from './utils/i18n.test-utils'
 
+jest.mock('react-lottie', () => ({
+  __esModule: true,
+  default: () => <div>Lottie</div>,
+}));
+
+
 it('renders without crashing', () => {
   runI18n()
-  const root = document.createElement('div')
-  document.body.appendChild(root)
 
-  render(
-    <BrowserRouter>
-      <App />
-    </BrowserRouter>,
-    root
-  )
+  if (typeof document !== 'undefined') {
+    const root = document.createElement('div')
+    document.body.appendChild(root)
+
+    render(
+        <BrowserRouter>
+          <App />
+        </BrowserRouter>,
+        root
+    )
+  }
 })
+