03/02: add test renaming to tasks

Author: kettanaito

exercises/03.best-practices/02.problem.user-events/src/discount-code-form.browser.test.tsx

@@ -2,6 +2,9 @@ import { page } from '@vitest/browser/context'
 import { render } from 'vitest-browser-react'
 import { DiscountCodeForm } from './discount-code-form.js'
 
+// 🐨 Rename this test name to reflect the changes
+// you are about to make.
+// 💰 "applies a discount code"
 test('renders the discount form', async () => {
 	render(<DiscountCodeForm />)
 

exercises/03.best-practices/02.solution.user-events/README.mdx

@@ -4,7 +4,16 @@ In its current state, our discount form component test gives you some value, but
 
 The main purpose of the discount form component is to apply the given discount code. _That_ is what has to be reflected in automated tests.
 
-In the `discount-code-form.browser.test.tsx`, I will start by renaming the test case to reflect what I am testing here.
+First, I will rename the test case name to reflect the changes I'm about to make:
+
+```ts filename=discount-code-form.browser.test.tsx remove=1 add=2
+test('renders the discount form', async () => {
+test('applies a discount code', async () => {
+```
+
+> 🦉 Check out the [How to write better test names](https://www.epicweb.dev/talks/how-to-write-better-test-names) talk to learn about 5 tips for stellar test names.
+
+Next, in the `discount-code-form.browser.test.tsx`, I will start by renaming the test case to reflect what I am testing here.
 
 ```tsx filename=discount-code-form.browser.test.tsx remove=1 add=2 nocopy
 test('renders the discount form', async () => {