04/03: add problem and solution texts

Author: kettanaito

exercises/04.debugging/01.problem.dom-snapshots/README.mdx

@@ -9,7 +9,7 @@ While you can observe and analyze certain actions in a test, it's a bit tricker
 
 Sometimes you just need to take a look at the current state of the DOM _during_ the test. This is where DOM snapshots come in!
 
-👨‍💼 In this exercise, your task is to **track down and fix a nasty bug** that found its way in the code. To do that, you will observe the rendered markup as it changes from the test actions, using a `debug()` utility function. Complete the instructions in the `debug.browser.test.tsx` test suite and have the tests passing.
+👨‍💼 In this exercise, your task is to **track down and fix a nasty bug** that found its way in the code. To do that, you will observe the rendered markup as it changes from the test actions, using a `debug()` utility function. Complete the instructions in the <InlineFile file="./src/tic-tac-toe.browser.test.tsx">`tic-tac-toe.browser.test.tsx`</InlineFile> test suite and have the tests passing.
 
 ---
 

exercises/04.debugging/01.problem.dom-snapshots/src/debug.browser.test.tsx renamed to exercises/04.debugging/01.problem.dom-snapshots/src/tic-tac-toe.browser.test.tsx

@@ -2,15 +2,15 @@
 
 I've got two failing tests on my hands, and a good place to start is to isolate the one I'm going to address first:
 
-```tsx filename=debug.browser.test.tsx
+```tsx filename=tic-tac-toe.browser.test.tsx
 test.only('places cross marks in a horizontal line', async () => {
 ```
 
 Now that the test results represent only this failing test, I can move on with taking a look at what's going on here.
 
 The goal of this test is to validate one of the scenarios of interacting with the `<TicTacToe />` component. If I place three marks in a horizontal line, they should form a winning line. This is precisely what the test actions do:
 
-```tsx filename=debug.browser.test.tsx
+```tsx filename=tic-tac-toe.browser.test.tsx
 await page.getByRole('button', { name: 'left middle' }).click()
 await page.getByRole('button', { name: 'middle', exact: true }).click()
 await page.getByRole('button', { name: 'right middle' }).click()
@@ -30,7 +30,7 @@ The rightmost mark is missing! But how? The test is clearly marking the left mid
 
 Luckily, I can observe the full state of the rendered DOM at any point in time using the `debug()` utility returned from `render()`:
 
-```tsx filename=debug.browser.test.tsx add=1,7
+```tsx filename=tic-tac-toe.browser.test.tsx add=1,7
 const { debug } = render(<TicTacToe />)
 
 await page.getByRole('button', { name: 'left middle' }).click()

exercises/04.debugging/01.solution.dom-snapshots/README.mdx

@@ -2,7 +2,7 @@
 
 Using debugger allows me to step through my test wherever and whenever I need to. It would be really helpful to pause after my test marks a cell in the `<TicTacToe />` component. I can do that by placing a `debugger` statement after the corresponding actions in the test:
 
-```tsx filename=debug.browser.test.tsx nonumber nocopy highlight=5,8,11
+```tsx filename=tic-tac-toe.browser.test.tsx nonumber nocopy highlight=5,8,11
 test('places cross marks in a horizontal line', async () => {
 	render(<TicTacToe />)
 
@@ -26,24 +26,11 @@ Running this test via the "Debug Vitest Browser" will now stop the test executio
 
 Every `debugger` statement _creates a breakpoint_. Once the JavaScript engine reaches that breakpoint, its execution will pause until it's resumed. I can inspect the DOM, styles, JavaScript execution, and the test state as if the time has froze now!
 
-## Adding breakpoints
-
-Placing a `debugger` statement anywhere in your code or test is not the only way to create a breakpoint. In fact, you might've noticed that putting the `debugger` in our test makes us _modify that test_!
-
-That isn't nice. Instead, you can add a breakpoint through your IDE.
-
-1. Locate the line of code you want to set a breakpoint at;
-1. Either click on the red circle on the gutter next to that line or right-click the gutter and select "Add a breakpoint":
-
-![A screenshot of Visual Studio code showing two red circles on the gutter next to the code, and an open context menu with the debugging options](/assets/04-02-add-breakpoint.png)
-
-> 🦉 Note that adding a breakpoint on a line will pause the execution **before** that line runs, not after. If you want to pause after a certian action, put a breakpoint after it in the code.
-
 ## `--inspect-brk` vs `--inspect`
 
 One more noteworthy thing it the flags we are using to create a debugging process, specifically, the `--inspect-brk` flag.
 
-You may provide both `--inspect` and `--inspect-brk` flags to Vitest, but they behave differently. `--inspect-brk` will make Vitest _automatically add a breakpoint on every `render()`_, while `--inspect` will not.
+You may provide both `--inspect` and `--inspect-brk` flags to Vitest, but they behave differently. `--inspect-brk` will make Vitest _automatically add a breakpoint before every `render()`_, while `--inspect` will not.
 
 ## What's next?
 

exercises/04.debugging/01.solution.dom-snapshots/src/debug.browser.test.tsx renamed to exercises/04.debugging/01.solution.dom-snapshots/src/tic-tac-toe.browser.test.tsx

@@ -0,0 +1,27 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "node-terminal",
+			"name": "Run Vitest Browser",
+			"request": "launch",
+			"command": "npm test -- --inspect-brk --browser --no-file-parallelism",
+			"env": {
+				"DEBUG": "true"
+			}
+		},
+		{
+			"type": "chrome",
+			"request": "attach",
+			"name": "Attach to Vitest Browser",
+			"port": 9229
+		}
+	],
+	"compounds": [
+		{
+			"name": "Debug Vitest Browser",
+			"configurations": ["Attach to Vitest Browser", "Run Vitest Browser"],
+			"stopAll": true
+		}
+	]
+}

exercises/04.debugging/02.problem.debugger/src/debug.browser.test.tsx renamed to exercises/04.debugging/02.problem.debugger/src/tic-tac-toe.browser.test.tsx

@@ -0,0 +1,17 @@
+# Breakpoints
+
+Placing a `debugger` statement anywhere in your code or test is not the only way to create a breakpoint. In fact, you might've noticed that putting the `debugger` in our test makes us _modify that test_!
+
+That isn't nice. Instead, you can add a breakpoint through your IDE.
+
+1. Locate the line of code you want to set a breakpoint at;
+1. Either click on the red circle on the gutter next to that line or right-click the gutter and select "Add a breakpoint":
+
+![A screenshot of Visual Studio code showing two red circles on the gutter next to the code, and an open context menu with the debugging options](/assets/04-03-add-breakpoint.png)
+
+> 🦉 Note that adding a breakpoint on a line will pause the execution **before** that line runs, not after. If you want to pause after a certian action, put a breakpoint after it in the code.
+
+👨‍💼 In this exercise, I will have a few tasks for you.
+
+1. Replace the `debugger` statements in the <InlineFile file="./src/tic-tac-toe-browser.test.tsx">`./src/`tic-tac-toe-browser.test.tsx`</InlineFile> with breakpoints set in your IDE. Run the tests in the debug mode to verify that breakpoints actually stop the test run where you want them to.
+1. Complete the test case in <InlineFile file="./src/main-menu.browser.test.tsx">`./src/`main-menu.browser.test.tsx`</InlineFile>. This is a new component rendering a menu in our app. It looks simple enough but there's something odd about those active links... Once you finish the test, run it in the debug mode and try to see how you can use conditional breakpoints to get to the root cause of the issue.

exercises/04.debugging/02.solution.debugger/README.mdx

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" type="image/svg+xml" href="/vite.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite App</title>
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+	</head>
+	<body>
+		<div id="root"></div>
+		<script type="module" src="/src/main.tsx"></script>
+	</body>
+</html>

exercises/04.debugging/02.solution.debugger/src/debug.browser.test.tsx renamed to exercises/04.debugging/02.solution.debugger/src/tic-tac-toe.browser.test.tsx

@@ -0,0 +1,25 @@
+{
+  "type": "module",
+  "name": "exercises_04.debugging_03.problem.breakpoints",
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest"
+  },
+  "dependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.6",
+    "@types/react": "^19.0.6",
+    "@types/react-dom": "^19.0.3",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/browser": "^3.0.4",
+    "autoprefixer": "^10.4.20",
+    "playwright": "^1.49.1",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.7",
+    "vitest": "^3.0.4"
+  }
+}

exercises/04.debugging/03.problem.breakpoints/.vscode/launch.json

@@ -0,0 +1,6 @@
+export default {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

exercises/04.debugging/03.problem.breakpoints/README.mdx

@@ -0,0 +1,5 @@
+import { TicTacToe } from './tic-tac-toe.js'
+
+export function App() {
+	return <TicTacToe />
+}

exercises/04.debugging/03.problem.breakpoints/index.html

@@ -0,0 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+	@apply flex size-full items-center justify-center bg-slate-100 p-10;
+
+	font-family:
+		'DM Sans',
+		system-ui,
+		-apple-system,
+		BlinkMacSystemFont,
+		'Segoe UI',
+		Roboto,
+		Oxygen,
+		Ubuntu,
+		Cantarell,
+		'Open Sans',
+		'Helvetica Neue',
+		sans-serif;
+	font-style: normal;
+	font-optical-sizing: auto;
+}

exercises/04.debugging/03.problem.breakpoints/package.json

@@ -0,0 +1,28 @@
+import { page } from '@vitest/browser/context'
+import { render } from 'vitest-browser-react'
+import { MemoryRouter } from 'react-router'
+import { MainMenu } from './main-menu.js'
+
+test('renders the currently active menu link', async () => {
+	// 🐨 Render the <MainMenu /> component.
+	// Use a custom `wrapper` and `<MemoryRouter />` from "react-router"
+	// so the rendered component can access routing-related data.
+	//
+	// 🐨 Create a variable called `allLinks` and assign it the result
+	// of locating all elements with the role "link".
+	// 💰 page.getByRole(role).elements()
+	//
+	// 🐨 Create another variable called `currentPageLink`.
+	// For its value, try to find a link element from `allLinks`
+	// whose "aria-current" attribute equals to "page".
+	// 💰 element.getAttribute(attributeName)
+	//
+	// 🐨 Finally, write an assertion that the `currentPageLink`
+	// has acessible name that equals to "Analytics".
+	// await expect.element(locator).toHaveAccessibleName(name)
+	//
+	// Once you run this test, you will notice it's failing.
+	// 🐨 See what's wrong by adding a conditional breakpoint
+	// somewhere during the <MenuItemsList /> rendering.
+	// For the condition, use the title of the wrong active link.
+})

exercises/04.debugging/03.problem.breakpoints/postcss.config.js

@@ -0,0 +1,66 @@
+import { matchPath, NavLink, useLocation } from 'react-router'
+
+interface MenuItem {
+	title: string
+	url: string
+	children?: Array<MenuItem>
+}
+
+const menuItems: Array<MenuItem> = [
+	{
+		title: 'Docs',
+		url: '/docs',
+	},
+	{
+		title: 'Dashboard',
+		url: '/dashboard',
+		children: [
+			{
+				title: 'Profile',
+				url: '/dashboard/profile',
+			},
+			{
+				title: 'Analytics',
+				url: '/dashboard/analytics',
+			},
+			{
+				title: 'Settings',
+				url: '/dashboard/settings',
+			},
+		],
+	},
+] as const
+
+function MenuItemsList(props: { items: Array<MenuItem> }) {
+	const location = useLocation()
+
+	return (
+		<ul className="ml-4">
+			{props.items.map((item) => {
+				const isActive = matchPath(
+					{ path: item.url, end: false },
+					location.pathname,
+				)
+
+				return (
+					<li key={item.url}>
+						<NavLink
+							to={item.url}
+							className={[
+								'px-2 py-1 hover:text-blue-600 hover:underline',
+								isActive ? 'font-bold text-black' : 'text-gray-600',
+							].join(' ')}
+						>
+							{item.title}
+						</NavLink>
+						{item.children ? <MenuItemsList items={item.children} /> : null}
+					</li>
+				)
+			})}
+		</ul>
+	)
+}
+
+export function MainMenu() {
+	return <MenuItemsList items={menuItems} />
+}

exercises/04.debugging/03.problem.breakpoints/public/vite.svg

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import { App } from './app.jsx'
+
+createRoot(document.getElementById('root')!).render(
+	<StrictMode>
+		<App />
+	</StrictMode>,
+)

exercises/04.debugging/03.problem.breakpoints/src/app.tsx

@@ -0,0 +1,19 @@
+import { page } from '@vitest/browser/context'
+import { render } from 'vitest-browser-react'
+import { TicTacToe } from './tic-tac-toe.js'
+
+test('places cross marks in a horizontal line', async () => {
+	render(<TicTacToe />)
+
+	await page.getByRole('button', { name: 'left middle' }).click()
+	debugger
+
+	await page.getByRole('button', { name: 'middle', exact: true }).click()
+	debugger
+
+	await page.getByRole('button', { name: 'right middle' }).click()
+	debugger
+
+	const squares = page.getByRole('button').elements().slice(3, 6)
+	expect(squares.map((element) => element.textContent)).toEqual(['✗', '✗', '✗'])
+})

exercises/04.debugging/03.problem.breakpoints/src/index.css

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+
+export function TicTacToe() {
+	return (
+		<div className="grid grid-cols-3 grid-rows-3">
+			<Button aria-label="top left" className="border-l-0 border-t-0" />
+			<Button aria-label="top middle" className="border-t-0" />
+			<Button aria-label="top right" className="border-r-0 border-t-0" />
+			<Button aria-label="left middle" className="border-l-0" />
+			<Button aria-label="middle" />
+			<Button aria-label="bottom left" className="border-r-0" />
+			<Button aria-label="right middle" className="border-b-0 border-l-0" />
+			<Button aria-label="bottom middle" className="border-b-0" />
+			<Button aria-label="bottom right" className="border-b-0 border-r-0" />
+		</div>
+	)
+}
+
+function Button(
+	props: Omit<
+		React.DetailedHTMLProps<
+			React.ButtonHTMLAttributes<HTMLButtonElement>,
+			HTMLButtonElement
+		>,
+		'children' | 'onClick'
+	>,
+) {
+	const [selected, setSelected] = useState(false)
+	const text = selected ? '✗' : ''
+
+	return (
+		<button
+			{...props}
+			className={[
+				'size-16 border border-slate-400 text-4xl text-blue-500 hover:bg-slate-200',
+			]
+				.concat(props.className || '')
+				.join(' ')}
+			onClick={() => setSelected(!selected)}
+		>
+			{text}
+		</button>
+	)
+}

exercises/04.debugging/03.problem.breakpoints/src/main-menu.browser.test.tsx

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

exercises/04.debugging/03.problem.breakpoints/src/main-menu.tsx

@@ -0,0 +1,19 @@
+import type { Config } from 'tailwindcss'
+
+export default {
+	content: ['./index.html', './src/**/*.{ts,tsx}'],
+	theme: {
+		extend: {
+			keyframes: {
+				'slide-in': {
+					'0%': { transform: 'translateY(50%)' },
+					'100%': { transform: 'translateY(0)' },
+				},
+			},
+			animation: {
+				'slide-in': 'slide-in .4s',
+			},
+		},
+	},
+	plugins: [],
+} satisfies Config