03/05: improve exercise

Author: kettanaito

exercises/03.best-practices/04.problem.element-presence/README.mdx

@@ -4,7 +4,7 @@ So far we've covered finding and interacting with elements that are present or w
 
 This is where you would normally reach for an [inverse assertion](https://www.epicweb.dev/inverse-assertions) to get a predictable result and guard yourself from false-positive tests:
 
-```ts
+```ts nonumber
 const notificationVisiblePromise = vi.waitFor(() => {
 	expect(notification).toBeVisible()
 })
@@ -17,7 +17,7 @@ await expect(notificationVisiblePromise).rejects.toThrow()
 
 Or, alternatively, use the designated `waitForElementToBeRemoved()` utility from React Testing Library:
 
-```ts
+```ts nonumber
 await waitForElementToBeRemoved(notification)
 ```
 

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

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.7",

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

@@ -8,7 +8,7 @@ import { DiscountCodeForm, type Discount } from './discount-code-form'
 // Make it a React component that renders <MemoryRouter>
 // from the "react-router" package around any `children`
 // provided to the `wrapper` component.
-// 💰 const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> => () => {}
+// 💰 const wrapper: React.JSXElementConstructor<{ children: React.ReactNode }> = () => {}
 // 💰 <MemoryRouter>{children}</MemoryRouter>
 
 test('applies a discount code', async () => {
@@ -119,11 +119,14 @@ test('displays the "Back to cart" link', async () => {
 	// 🐨 Provide the `wrapper` for this render.
 	render(<DiscountCodeForm />)
 
-	// 🐨 Locate the "Back to cart" link on the page.
-	// Assign its locator to a variable called `backToCartLink`.
+	// 🐨 Declare a new variable called `backToCartLink` and
+	// assign it a locator of the element with the role "link"
+	// and accessible text "Back to cart".
 	// 💰 page.getByRole(role, { name })
 
-	// 🐨 Write an assertion that the `backToCartLink` has the
-	// correct value of the "href" attribute.
+	// 🐨 Add an assertion that the `backToCartLink` element is visible.
+
+	// 🐨 Add another assertion that the `backToCartLink` has the
+	// correct value of the "href" attribute ("/cart").
 	// 💰 .toHaveAttribute(attributeName, attributeValue)
 })

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

@@ -60,6 +60,19 @@ test('displays the "Back to cart" link', async () => {
 })
 ```
 
+Next, I will add a quick assertion that this link is visible:
+
+```tsx filename=discount-code-form.browser.test.tsx add=5
+test('displays the "Back to cart" link', async () => {
+	render(<DiscountCodeForm />, { wrapper })
+
+	const backToCartLink = page.getByRole('link', { name: 'Back to cart' })
+	await expect.element(backToCartLink).toBeVisible()
+})
+```
+
+> 🦉 The `.toBeVisible()` matcher provides a bunch of implicit assertions to make sure that the element is visible and also **accessible** to the user.
+
 This is the moment where the user would click on the link and land on the cart page. **But our test is not going to do that**. Instead, all I will do is make sure that the link got rendered with the correct attributes:
 
 ```tsx filename=discount-code-form.browser.test.tsx add=5

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

@@ -8,7 +8,8 @@
   },
   "dependencies": {
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "react-router": "^7.2.0"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.0.7",
@@ -18,7 +19,6 @@
     "@vitest/browser": "^3.0.5",
     "msw": "^2.7.3",
     "playwright": "^1.49.1",
-    "react-router": "^7.1.3",
     "tailwindcss": "^4.0.7",
     "vite": "^6.0.7",
     "vitest": "^3.0.5"