04/03: improve exercise instructions

Author: kettanaito

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

@@ -116,7 +116,7 @@ Sometimes the rendered element tree is too large to digest all at once. This is
 You can print a single or multiple elements by providing their locators to the `debug()` function:
 
 ```tsx nonumber
-debug(page.getByRole('button', { name /middle/ }))
+debug(page.getByRole('button', { name: /middle/ }).elements())
 ```
 
 For example, the code above will print all the buttons that have `middle` in their accessible name. Note that the elements you provide to `debug()` don't have to be related in any way. This means you can cherry-pick only those sections of the markup that interest you:

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

@@ -15,6 +15,7 @@ test('renders the currently active menu link', async () => {
 	// 🐨 Create another variable called `currentPageLink`.
 	// For its value, try to find a link element from `allLinks`
 	// whose "aria-current" attribute equals to "page".
+	// 💰 allLinks.find(predicate)!
 	// 💰 element.getAttribute(attributeName)
 	//
 	// 🐨 Finally, write an assertion that the `currentPageLink`

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

@@ -42,6 +42,9 @@ function MenuItemsList(props: { items: Array<MenuItem> }) {
 					location.pathname,
 				)
 
+				// 🐨 Right-click on the gutter next to the line with the `return`
+				// and choose "Add Conditional Breakpoint...".
+				// 🐨 Enter `item.title === 'Dashboard'` as the breakpoint's condition.
 				return (
 					<li key={item.url}>
 						<NavLink

exercises/04.debugging/03.problem.breakpoints/src/tic-tac-toe.browser.test.tsx

@@ -6,12 +6,17 @@ test('places cross marks in a horizontal line', async () => {
 	render(<TicTacToe />)
 
 	await page.getByRole('button', { name: 'left middle' }).click()
+	// 💣 Remove this debugger statement.
 	debugger
+	// 🐨 Instead, put a breakpoint on the next line by clicking
+	// on the gutter next to the line number in your IDE.
 
 	await page.getByRole('button', { name: 'middle', exact: true }).click()
+	// 💣 Repeat the same steps here.
 	debugger
 
 	await page.getByRole('button', { name: 'right middle' }).click()
+	// 💣 Repeat the same steps here.
 	debugger
 
 	const squares = page.getByRole('button').elements().slice(3, 6)

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

@@ -50,6 +50,7 @@ function MenuItemsList(props: { items: Array<MenuItem> }) {
 								'px-2 py-1 hover:text-blue-600 hover:underline',
 								isActive ? 'font-bold text-black' : 'text-gray-600',
 							].join(' ')}
+							end={true}
 						>
 							{item.title}
 						</NavLink>