P445:[{"_460":99,"_461":103,"_462":463},"app1","app2","diffPatch","diff --git a/package.json b/package.json\nindex 1bccd9d..2565511 100644\n--- a/package.json\n+++ b/package.json\n@@ -1,6 +1,6 @@\n {\n \"type\": \"module\",\n- \"name\": \"exercises_03.best-practices_04.solution.element-presence\",\n+ \"name\": \"exercises_03.best-practices_05.problem.page-navigation\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"test\": \"vitest\",\n@@ -8,7 +8,8 @@\n },\n \"dependencies\": {\n \"react\": \"^19.0.0\",\n- \"react-dom\": \"^19.0.0\"\n+ \"react-dom\": \"^19.0.0\",\n+ \"react-router\": \"^7.2.0\"\n },\n \"devDependencies\": {\n \"@tailwindcss/vite\": \"^4.0.11\",\ndiff --git a/src/app.tsx b/src/app.tsx\nindex 58f3fd6..f09995b 100644\n--- a/src/app.tsx\n+++ b/src/app.tsx\n@@ -1,5 +1,22 @@\n+import { BrowserRouter, Routes, Route } from 'react-router'\n import { DiscountCodeForm } from './discount-code-form.js'\n \n export function App() {\n-\treturn \n+\treturn (\n+\t\t\n+\t\t\t\n+\t\t\t\t} />\n+\t\t\t\t\n+\t\t\t\t\t\t\t

Cart

\n+\t\t\t\t\t\t\t

This is a cart page.

\n+\t\t\t\t\t\t\n+\t\t\t\t\t}\n+\t\t\t\t/>\n+\t\t\t\tPage not found

} />\n+\t\t\t\n+\t\t\n+\t)\n }\ndiff --git a/src/discount-code-form.browser.test.tsx b/src/discount-code-form.browser.test.tsx\nindex f147803..dcc9cb3 100644\n--- a/src/discount-code-form.browser.test.tsx\n+++ b/src/discount-code-form.browser.test.tsx\n@@ -4,7 +4,16 @@ import { http, HttpResponse } from 'msw'\n import { test } from '../test-extend'\n import { DiscountCodeForm, type Discount } from './discount-code-form'\n \n+// 🐨 Declare a new variable called `wrapper`.\n+// Make it a React component that renders \n+// from the \"react-router\" package around any `children`\n+// provided to the `wrapper` component.\n+// 💰 const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = () => {}\n+// 💰 {children}\n+\n test('applies a discount code', async () => {\n+\t// 🐨 Provide the `wrapper` in the render options.\n+\t// 💰 render(, { wrapper })\n \trender()\n \n \tconst discountInput = page.getByLabelText('Discount code')\n@@ -36,6 +45,7 @@ test('displays a warning for legacy discount codes', async ({ worker }) => {\n \t\t),\n \t)\n \n+\t// 🐨 Provide the `wrapper` for this render.\n \trender()\n \n \tconst discountInput = page.getByLabelText('Discount code')\n@@ -66,6 +76,7 @@ test('displays an error when fetching the discount fails', async ({\n \t\t),\n \t)\n \n+\t// 🐨 Provide the `wrapper` for this render.\n \trender()\n \n \tconst discountInput = page.getByLabelText('Discount code')\n@@ -82,6 +93,7 @@ test('displays an error when fetching the discount fails', async ({\n })\n \n test('removes the applied discount code', async () => {\n+\t// 🐨 Provide the `wrapper` for this render.\n \trender()\n \n \tconst discountInput = page.getByLabelText('Discount code')\n@@ -102,3 +114,19 @@ test('removes the applied discount code', async () => {\n \n \tawait expect.element(discountText).not.toBeInTheDocument()\n })\n+\n+test('displays the \"Back to cart\" link', async () => {\n+\t// 🐨 Provide the `wrapper` for this render.\n+\trender()\n+\n+\t// 🐨 Declare a new variable called `backToCartLink` and\n+\t// assign it a locator of the element with the role \"link\"\n+\t// and accessible text \"Back to cart\".\n+\t// 💰 page.getByRole(role, { name })\n+\n+\t// 🐨 Add an assertion that the `backToCartLink` element is visible.\n+\n+\t// 🐨 Add another assertion that the `backToCartLink` has the\n+\t// correct value of the \"href\" attribute (\"/cart\").\n+\t// 💰 .toHaveAttribute(attributeName, attributeValue)\n+})\ndiff --git a/src/discount-code-form.tsx b/src/discount-code-form.tsx\nindex 5b9d9f1..6a254e7 100644\n--- a/src/discount-code-form.tsx\n+++ b/src/discount-code-form.tsx\n@@ -1,4 +1,5 @@\n import { useReducer, useState, type FormEventHandler } from 'react'\n+import { Link } from 'react-router'\n \n interface Notification {\n \ttype: 'error' | 'warning'\n@@ -80,7 +81,6 @@ export function DiscountCodeForm() {\n \t\tevent,\n \t) => {\n \t\tevent.preventDefault()\n-\t\tsetNotification(undefined)\n \t\tdispatch({ type: 'submitting' })\n \n \t\tconst data = new FormData(event.currentTarget)\n@@ -183,6 +183,15 @@ export function DiscountCodeForm() {\n \t\t\t\t\t>\n \t\t\t\t\t\tApply discount\n \t\t\t\t\t\n+\n+\t\t\t\t\t

\n+\t\t\t\t\t\t\n+\t\t\t\t\t\t\tBack to cart\n+\t\t\t\t\t\t\n+\t\t\t\t\t

\n \t\t\t\t\n \t\t\t)}\n "]

package.json-13+14App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/app.tsx-5+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-28+56App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.tsx-17+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

package.json-13+14App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/app.tsx-5+22App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.browser.test.tsx-28+56App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

src/discount-code-form.tsx-17+26App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2