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

@@ -20,6 +20,7 @@
     "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-scripts": "5.0.1",
@@ -54,6 +55,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'
 
@@ -17,39 +18,44 @@ import { SettingsProvider } from './context/SettingsContext'
 
 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>
+      <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>
+              <Route path="leaderboard" element={<Leaderboard />}></Route>
+              <Route path="settings" element={<Settings volume={volume} handleVolumeChange={handleVolumeChange} />}></Route>
+            </Route>
+            <Route path="*" element={<PageNotFound />}></Route>
+          </Routes>
+        </AuthProvider>
+      </SettingsProvider>
   )
 
 }

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
+    )
+  }
 })
+