restructure best practices

Author: kettanaito

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

@@ -0,0 +1,7 @@
+# Accessibility selectors
+
+Now that we have MSW set up, let's write some tests for the Discount code form! For that, we will need to select elements and interact with them just like our users would.
+
+- Why accessibility selectors matter?
+- Why not `test-id`?
+- Implicit benefits of selectors (validate the accessibility of your markup; you cannot force your way to things the user cannot "see" on the page)

exercises/03.best-practices/01.solution.network-mocking/index.html renamed to exercises/03.best-practices/01.solution.accessibility-selectors/index.html

@@ -1,6 +1,6 @@
 {
   "type": "module",
-  "name": "exercises_03.best-practices_02.solution.accessibility-selectors",
+  "name": "exercises_03.best-practices_01.solution.accessibility-selectors",
   "scripts": {
     "dev": "vite",
     "test": "vitest"
@@ -16,18 +16,12 @@
     "@types/react": "^19.0.6",
     "@types/react-dom": "^19.0.3",
     "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/browser": "^3.0.2",
+    "@vitest/browser": "^3.0.3",
     "autoprefixer": "^10.4.20",
-    "msw": "^2.7.0",
     "playwright": "^1.49.1",
     "postcss": "^8.4.49",
     "tailwindcss": "^3.4.17",
     "vite": "^6.0.7",
-    "vitest": "^3.0.2"
-  },
-  "msw": {
-    "workerDirectory": [
-      "public"
-    ]
+    "vitest": "^3.0.3"
   }
 }

exercises/03.best-practices/02.solution.accessibility-selectors/package.json renamed to exercises/03.best-practices/01.solution.accessibility-selectors/package.json

@@ -0,0 +1,15 @@
+import { page } from '@vitest/browser/context'
+import { render } from 'vitest-browser-react'
+import { DiscountCodeForm } from './discount-code-form.js'
+
+test('renders the discount form', async () => {
+	render(<DiscountCodeForm />)
+
+	const discountInput = page.getByLabelText('Discount code')
+	await expect.element(discountInput).toBeVisible()
+
+	const applyDiscountButton = page.getByRole('button', {
+		name: 'Apply discount',
+	})
+	await expect.element(applyDiscountButton).toBeVisible()
+})

exercises/03.best-practices/01.solution.network-mocking/postcss.config.js renamed to exercises/03.best-practices/01.solution.accessibility-selectors/postcss.config.js

@@ -0,0 +1,57 @@
+import { useState, type FormEventHandler } from 'react'
+
+export interface Discount {
+	code: string
+	amount: number
+}
+
+export function DiscountCodeForm() {
+	const [appliedDiscount, setAppliedDiscount] = useState<Discount>()
+
+	const handleSubmit: FormEventHandler<HTMLFormElement> = async (event) => {
+		event.preventDefault()
+
+		const data = new FormData(event.currentTarget)
+		const code = data.get('discountCode') as string
+
+		setAppliedDiscount({
+			code,
+			amount: 20,
+		})
+	}
+
+	return (
+		<section className="w-96 rounded-lg border bg-white p-10">
+			{appliedDiscount ? (
+				<p>
+					Discount: <strong>{appliedDiscount.code}</strong> (-
+					{appliedDiscount.amount}%)
+				</p>
+			) : (
+				<form onSubmit={handleSubmit} className="flex flex-col gap-5">
+					<div>
+						<label htmlFor="discountCode" className="mb-1 block">
+							Discount code
+						</label>
+						<input
+							id="discountCode"
+							name="discountCode"
+							className="w-full rounded-md border px-2 py-1 focus:ring-4"
+							placeholder="ABCD1234"
+							pattern="[A-Z]{4}[0-9]{4}"
+							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"
+					>
+						Apply discount
+					</button>
+				</form>
+			)}
+		</section>
+	)
+}

exercises/03.best-practices/01.solution.network-mocking/public/vite.svg renamed to exercises/03.best-practices/01.solution.accessibility-selectors/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>,
+)