add tests for 05

exercises/05.errors/01.solution.composition/error-boundary.test.ts

@@ -0,0 +1,22 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+
+import './index.tsx'
+
+testStep(
+	'Error boundary is rendered immediately due to render error',
+	async () => {
+		// Check if the error message is displayed
+		const errorMessage = await screen.findByRole('alert')
+		expect(errorMessage).toBeDefined()
+		expect(errorMessage.textContent).toContain('There was an error:')
+
+		// Check if the error message contains the specific error
+		const errorDetails = await screen.findByText(/invalid time/i)
+		expect(errorDetails).toBeDefined()
+
+		// Ensure the form is not rendered
+		const form = screen.queryByRole('form')
+		expect(form).toBeNull()
+	},
+)

exercises/05.errors/01.solution.composition/index.tsx

@@ -85,9 +85,8 @@ function OnboardingForm() {
 					id="startDateInput"
 					name="startDate"
 					type="date"
-					// 💰 you can comment this out to avoid the runtime error
+					// This line causes the error during render
 					defaultValue={new Date('today').toISOString().slice(0, 10)}
-					// defaultValue={new Date().toISOString().slice(0, 10)}
 				/>
 			</div>
 			<button type="submit">Submit</button>

exercises/05.errors/02.solution.show-boundary/error-boundary.test.ts

@@ -0,0 +1,25 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+import { userEvent } from '@testing-library/user-event'
+
+const user = userEvent.setup()
+
+import './index.tsx'
+
+testStep('Error boundary is rendered after form submission', async () => {
+	// submit the form
+	await user.click(await screen.findByRole('button', { name: /submit/i }))
+
+	// Check if the error message is displayed
+	const errorMessage = await screen.findByRole('alert')
+	expect(errorMessage).toBeDefined()
+	expect(errorMessage.textContent).toContain('There was an error:')
+
+	// Check if the error message contains the specific error
+	const errorDetails = await screen.findByText(/toUpperCase/i)
+	expect(errorDetails).toBeDefined()
+
+	// Ensure the form is not rendered after error
+	const form = screen.queryByRole('form')
+	expect(form).toBeNull()
+})

exercises/05.errors/03.solution.reset/error-boundary.test.ts

@@ -0,0 +1,41 @@
+import { expect, testStep, dtl } from '@epic-web/workshop-utils/test'
+const { screen } = dtl
+import { userEvent } from '@testing-library/user-event'
+
+const user = userEvent.setup()
+
+import './index.tsx'
+
+testStep('Error boundary is rendered after form submission', async () => {
+	// submit the form
+	await user.click(await screen.findByRole('button', { name: /submit/i }))
+
+	// Check if the error message is displayed
+	const errorMessage = await screen.findByRole('alert')
+	expect(errorMessage).toBeDefined()
+	expect(errorMessage.textContent).toContain('There was an error:')
+
+	// Check if the error message contains the specific error
+	const errorDetails = await screen.findByText(/toUpperCase/i)
+	expect(errorDetails).toBeDefined()
+
+	// Ensure the form is not rendered after error
+	const form = screen.queryByRole('form')
+	expect(form).toBeNull()
+})
+
+testStep('Clicking "Try again" resets the error boundary', async () => {
+	// Click the "Try again" button
+	const tryAgainButton = await screen.findByRole('button', {
+		name: /try again/i,
+	})
+	await user.click(tryAgainButton)
+
+	// Verify that the submit button appears again
+	const submitButton = await screen.findByRole('button', { name: /submit/i })
+	expect(submitButton).toBeDefined()
+
+	// Ensure the error message is no longer present
+	const errorMessage = screen.queryByRole('alert')
+	expect(errorMessage).toBeNull()
+})