03/05: assert on href and enabled

Author: kettanaito

exercises/03.best-practices/05.solution.page-navigation/README.mdx

@@ -1,3 +1,5 @@
 # Page navigation
 
 Problem: the component you are testing does navigation to another page. Let's see what exactly you should test here on the integration level and how to do so.
+
+- Showcases how to create a custom _wrapper_ for `<MemoryRouter />`.

exercises/03.best-practices/05.solution.page-navigation/package.json

@@ -21,6 +21,7 @@
     "msw": "^2.7.0",
     "playwright": "^1.49.1",
     "postcss": "^8.4.49",
+    "react-router": "^7.1.3",
     "tailwindcss": "^3.4.17",
     "vite": "^6.0.7",
     "vitest": "^3.0.2"

exercises/03.best-practices/05.solution.page-navigation/src/app.tsx

@@ -1,27 +1,22 @@
-import { useMemo } from 'react'
+import { BrowserRouter, Routes, Route } from 'react-router'
 import { DiscountCodeForm } from './discount-code-form.js'
 
 export function App() {
-	const location = useMemo(() => {
-		return window.location
-	}, [])
-
-	switch (location.pathname) {
-		case '/': {
-			return <DiscountCodeForm />
-		}
-
-		case '/cart': {
-			return (
-				<div className="text-center">
-					<h1 className="mb-2 text-4xl font-bold">Cart</h1>
-					<p className="text-slate-600">This is a cart page.</p>
-				</div>
-			)
-		}
-
-		default: {
-			return <p>Page not found</p>
-		}
-	}
+	return (
+		<BrowserRouter>
+			<Routes>
+				<Route path="/" element={<DiscountCodeForm />} />
+				<Route
+					path="/cart"
+					element={
+						<div className="text-center">
+							<h1 className="mb-2 text-4xl font-bold">Cart</h1>
+							<p className="text-slate-600">This is a cart page.</p>
+						</div>
+					}
+				/>
+				<Route path="*" element={<p>Page not found</p>} />
+			</Routes>
+		</BrowserRouter>
+	)
 }

exercises/03.best-practices/05.solution.page-navigation/src/discount-code-form.browser.test.tsx

@@ -1,11 +1,18 @@
 import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { http, HttpResponse } from 'msw'
+import { MemoryRouter, useLocation } from 'react-router'
 import { test } from '../test-extend.js'
 import { DiscountCodeForm, type Discount } from './discount-code-form.js'
 
+const wrapper: React.JSXElementConstructor<{
+	children: React.ReactNode
+}> = ({ children }) => {
+	return <MemoryRouter>{children}</MemoryRouter>
+}
+
 test('applies a discount code', async () => {
-	render(<DiscountCodeForm />)
+	render(<DiscountCodeForm />, { wrapper })
 
 	const discountInput = page.getByLabelText('Discount code')
 	await discountInput.fill('EPIC2025')
@@ -36,7 +43,7 @@ test('displays a warning for legacy discount codes', async ({ worker }) => {
 		),
 	)
 
-	render(<DiscountCodeForm />)
+	render(<DiscountCodeForm />, { wrapper })
 
 	const discountInput = page.getByLabelText('Discount code')
 	await discountInput.fill('LEGA2000')
@@ -63,7 +70,7 @@ test('displays an error when fetching the discount fails', async ({
 		}),
 	)
 
-	render(<DiscountCodeForm />)
+	render(<DiscountCodeForm />, { wrapper })
 
 	const discountInput = page.getByLabelText('Discount code')
 	await discountInput.fill('CODE1234')
@@ -79,7 +86,7 @@ test('displays an error when fetching the discount fails', async ({
 })
 
 test('removes the applied discount code', async () => {
-	render(<DiscountCodeForm />)
+	render(<DiscountCodeForm />, { wrapper })
 
 	const discountInput = page.getByLabelText('Discount code')
 	await discountInput.fill('EPIC2025')
@@ -99,3 +106,11 @@ test('removes the applied discount code', async () => {
 
 	await expect.element(discountText).not.toBeInTheDocument()
 })
+
+test('redirects to the cart page ...', async () => {
+	render(<DiscountCodeForm />, { wrapper })
+
+	const backToCartLink = page.getByRole('link', { name: 'Back to cart' })
+	await expect.element(backToCartLink).toHaveAttribute('href', '/cart')
+	await expect.element(backToCartLink).toBeEnabled()
+})

exercises/03.best-practices/05.solution.page-navigation/src/discount-code-form.tsx

@@ -1,4 +1,5 @@
 import { useReducer, useState, type FormEventHandler } from 'react'
+import { Link } from 'react-router'
 
 interface Notification {
 	type: 'error' | 'warning'
@@ -184,12 +185,12 @@ export function DiscountCodeForm() {
 					</button>
 
 					<p className="text-center">
-						<a
-							href="/cart"
+						<Link
+							to="/cart"
 							className="text-sm font-medium text-slate-500 hover:underline"
 						>
 							Back to cart
-						</a>
+						</Link>
 					</p>
 				</form>
 			)}

exercises/03.best-practices/06.solution.component-wrappers/README.mdx

@@ -1,3 +1,5 @@
 # Debugging tests
 
 Learn how to debug your browser tests in Vitest. Your runbook to follow when a test fails.
+
+- There's `{ debug } = render(element)` that can be used!