progress

exercises/03.forms/01.solution.form/form.test.ts

@@ -3,9 +3,13 @@ const { screen } = dtl
 
 import './index.tsx'
 
-await testStep('Form is rendered', () =>
-	dtl.waitFor(() => document.querySelector('form')),
-)
+await testStep('Form is rendered', () => {
+	return dtl.waitFor(() => {
+		const form = document.querySelector('form')
+		expect(form).toBeInTheDocument()
+		return form
+	})
+})
 
 await testStep('Username input is rendered', async () => {
 	const usernameInput = await screen.findByLabelText(/username/i)

exercises/03.forms/02.solution.action/action.test.ts

@@ -0,0 +1,13 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+
+import './index.tsx'
+
+const form = await dtl.waitFor(() => {
+	const form = document.querySelector('form')
+	expect(form).toBeInTheDocument()
+	return form
+})
+
+await testStep('Form has correct action', async () => {
+	expect(form).toHaveAttribute('action', 'api/onboarding')
+})

exercises/03.forms/02.solution.action/form.test.ts

@@ -0,0 +1,21 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+await testStep('Form is rendered', () => {
+	return dtl.waitFor(() => {
+		const form = document.querySelector('form')
+		expect(form).toBeInTheDocument()
+		return form
+	})
+})
+
+await testStep('Username input is rendered', async () => {
+	const usernameInput = await screen.findByLabelText(/username/i)
+	expect(usernameInput).toHaveAttribute('name', 'username')
+})
+
+await testStep('Submit button is rendered', () =>
+	screen.findByRole('button', { name: /submit/i }),
+)

exercises/03.forms/02.solution.action/index.tsx

@@ -2,13 +2,13 @@ import { createRoot } from 'react-dom/client'
 
 function App() {
 	return (
-		<form action="api/onboarding">
+		<div>
 			<div>
 				<label htmlFor="usernameInput">Username:</label>
 				<input id="usernameInput" name="username" />
 			</div>
 			<button type="submit">Submit</button>
-		</form>
+		</div>
 	)
 }
 

package.json

@@ -38,6 +38,7 @@
   "devDependencies": {
     "@epic-web/config": "^1.5.3",
     "@epic-web/workshop-utils": "^4.19.1",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "npm:types-react@19.0.0-alpha.5",
     "@types/react-dom": "npm:types-react-dom@19.0.0-alpha.5",
     "eslint": "^9.1.1",