diff --git a/exercises/05.errors/01.solution.composition/error-boundary.test.ts b/exercises/05.errors/01.solution.composition/error-boundary.test.ts new file mode 100644 index 000000000..99adc683e --- /dev/null +++ b/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() + }, +) diff --git a/exercises/05.errors/01.solution.composition/index.tsx b/exercises/05.errors/01.solution.composition/index.tsx index 71c6097a1..2ed32afdc 100644 --- a/exercises/05.errors/01.solution.composition/index.tsx +++ b/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)} /> diff --git a/exercises/05.errors/02.solution.show-boundary/error-boundary.test.ts b/exercises/05.errors/02.solution.show-boundary/error-boundary.test.ts new file mode 100644 index 000000000..465fde19f --- /dev/null +++ b/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() +}) diff --git a/exercises/05.errors/03.solution.reset/error-boundary.test.ts b/exercises/05.errors/03.solution.reset/error-boundary.test.ts new file mode 100644 index 000000000..0c7c9049f --- /dev/null +++ b/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() +})