From 57f3076ca77ccc28a471def9e32729714604e53a Mon Sep 17 00:00:00 2001
From: The Joel <jotelfootball@gmail.com>
Date: Thu, 25 Jun 2026 17:16:53 +0100
Subject: [PATCH] feat: add NotFound route and tests

---
 src/App.tsx                               | 14 ++-------
 src/pages/NotFoundPage.tsx                |  2 +-
 src/pages/__tests__/NotFoundPage.test.tsx | 36 ++++++++++++++++-------
 src/routes.tsx                            | 14 +++++++++
 4 files changed, 43 insertions(+), 23 deletions(-)
 create mode 100644 src/routes.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 82e270e..22bde09 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,18 +1,8 @@
 import { Toaster } from 'react-hot-toast';
 import { createBrowserRouter, RouterProvider } from 'react-router';
-import LandingPage from './pages/LandingPage';
-import NotFoundPage from './pages/NotFoundPage';
+import { routes } from './routes';
 
-const router = createBrowserRouter([
-	{
-		path: '/',
-		element: <LandingPage />,
-	},
-	{
-		path: '*',
-		element: <NotFoundPage />,
-	},
-]);
+const router = createBrowserRouter(routes);
 
 function App() {
 	return (
diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx
index 3cbce28..bfc897e 100644
--- a/src/pages/NotFoundPage.tsx
+++ b/src/pages/NotFoundPage.tsx
@@ -25,7 +25,7 @@ function NotFoundPage() {
 						Access Layer
 					</p>
 					<h1 className="mt-4 max-w-3xl font-grotesque text-5xl font-black leading-none tracking-tight sm:text-6xl md:text-7xl">
-						This marketplace path is not live yet.
+						This marketplace path was not found.
 					</h1>
 					<p className="mt-6 max-w-2xl font-jakarta text-base leading-8 text-white/70 sm:text-lg">
 						The creator key route you opened does not exist. Return to the
diff --git a/src/pages/__tests__/NotFoundPage.test.tsx b/src/pages/__tests__/NotFoundPage.test.tsx
index 7749e68..b34e1eb 100644
--- a/src/pages/__tests__/NotFoundPage.test.tsx
+++ b/src/pages/__tests__/NotFoundPage.test.tsx
@@ -1,21 +1,37 @@
 import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router';
-import { describe, expect, it } from 'vitest';
+import { createMemoryRouter, MemoryRouter, RouterProvider } from 'react-router';
+import { describe, expect, it, vi } from 'vitest';
 import NotFoundPage from '@/pages/NotFoundPage';
+import { routes } from '@/routes';
 
-describe('NotFoundPage', () => {
-	it('points unknown routes back to the marketplace home', () => {
-		render(
-			<MemoryRouter initialEntries={['/missing-route']}>
-				<NotFoundPage />
-			</MemoryRouter>
-		);
+vi.mock('@/pages/LandingPage', () => ({
+	default: () => <main>Marketplace home</main>,
+}));
+
+const UNKNOWN_ROUTE = '/creator/this-route-does-not-exist';
+
+describe('NotFoundPage routing integration', () => {
+	it('renders NotFoundPage when the app navigates to an unknown route', () => {
+		const router = createMemoryRouter(routes, {
+			initialEntries: [UNKNOWN_ROUTE],
+		});
+
+		render(<RouterProvider router={router} />);
 
 		expect(
 			screen.getByRole('heading', {
-				name: /this marketplace path is not live yet/i,
+				name: /not found/i,
 			})
 		).toBeInTheDocument();
+		expect(screen.getByText(/route not found/i)).toBeInTheDocument();
+	});
+
+	it('provides link back to marketplace home', () => {
+		render(
+			<MemoryRouter>
+				<NotFoundPage />
+			</MemoryRouter>
+		);
 
 		expect(
 			screen.getByRole('link', { name: /back to marketplace/i })
diff --git a/src/routes.tsx b/src/routes.tsx
new file mode 100644
index 0000000..7cc9370
--- /dev/null
+++ b/src/routes.tsx
@@ -0,0 +1,14 @@
+import type { RouteObject } from 'react-router';
+import LandingPage from './pages/LandingPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+export const routes: RouteObject[] = [
+	{
+		path: '/',
+		element: <LandingPage />,
+	},
+	{
+		path: '*',
+		element: <NotFoundPage />,
+	},
+];