03/01: finish newsletter form test

Author: kettanaito

exercises/03.best-practices/01.solution.accessibility-selectors/README.mdx

@@ -9,6 +9,7 @@ A **form** should work nicely:
 - `.getByRole('heading')` for the form section heading on the page.
 - `.getByLabelText()` for inputs.
 - `.getByRole('button')` (again) for the submit button, but this time the button's text is broken by a visual element (an icon).
+- `.getByText()` for the submit success message to showcase selecting generic text on the page.
 
 Best practices:
 

exercises/03.best-practices/01.solution.accessibility-selectors/src/newsletter-form.browser.test.tsx

@@ -15,14 +15,15 @@ test('submits the newsletter form', async () => {
 	const emailInput = page.getByLabelText('Your email')
 	await userEvent.fill(emailInput, '[email protected]')
 
-	/**
-	 * @note Vitest doesn't support the `normalize` options
-	 * you'd normally use to sanitize an element with a broken text.
-	 */
 	const submitButton = page.getByRole('button', {
-		name: 'Join the newsletter',
+		/**
+		 * @todo @fixme Find a way to showcase node text sanitization in Vitest.
+		 */
+		name: 'Join the 📨 newsletter',
 	})
 	await userEvent.click(submitButton)
 
-	/** @todo Assert */
+	await expect
+		.element(page.getByText('Thank you for joining the newsletter!'))
+		.toBeVisible()
 })

exercises/03.best-practices/01.solution.accessibility-selectors/src/newsletter-form.tsx

@@ -1,30 +1,43 @@
+import { useState, type FormEventHandler } from 'react'
+
 export function NewsletterForm() {
+	const [isSubmitted, setSubmitted] = useState(false)
+
+	const handleSubmit: FormEventHandler = (event) => {
+		event.preventDefault()
+		setSubmitted(true)
+	}
+
 	return (
 		<section className="w-96 rounded-lg border bg-white p-10">
 			<h2 className="mb-6 border-b pb-2.5 text-2xl font-bold">Newsletter</h2>
-			<form className="flex flex-col gap-5">
-				<div>
-					<label htmlFor="email" className="mb-1 block">
-						Your email
-					</label>
-					<input
-						id="email"
-						name="email"
-						type="email"
-						className="w-full rounded-md border px-2 py-1 focus:ring-4"
-						placeholder="[email protected]"
-						autoComplete="off"
-						required
-					/>
-				</div>
+			{isSubmitted ? (
+				<p>Thank you for joining the newsletter!</p>
+			) : (
+				<form onSubmit={handleSubmit} className="flex flex-col gap-5">
+					<div>
+						<label htmlFor="email" className="mb-1 block">
+							Your email
+						</label>
+						<input
+							id="email"
+							name="email"
+							type="email"
+							className="w-full rounded-md border px-2 py-1 focus:ring-4"
+							placeholder="[email protected]"
+							autoComplete="off"
+							required
+						/>
+					</div>
 
-				<button
-					type="submit"
-					className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-500 focus:ring-4"
-				>
-					Join the 📨 newsletter
-				</button>
-			</form>
+					<button
+						type="submit"
+						className="rounded-md bg-blue-600 px-4 py-2 text-white hover:bg-blue-500 focus:ring-4"
+					>
+						Join the 📨 newsletter
+					</button>
+				</form>
+			)}
 		</section>
 	)
 }