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: , - }, - { - path: '*', - element: , - }, -]); +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

- This marketplace path is not live yet. + This marketplace path was not found.

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( - - - - ); +vi.mock('@/pages/LandingPage', () => ({ + default: () =>

Marketplace home
, +})); + +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(); 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( + + + + ); 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: , + }, + { + path: '*', + element: , + }, +];