Home
Courses
Learn React 19: The Complete Guide to Modern Web Apps

Challenge: Test a Complex Form Workflow

Learn to test a multi-step form workflow that includes step navigation, validation, async submission, optimistic UI, and accessibility semantics, using a manual test harness and behavior-focused assertions.

We'll cover the following...

Problem statement

Build and test a complex Order request form workflow with two steps: Contact and Review & submit. The workflow must preserve draft state across step transitions, validate required fields, handle an async submission lifecycle, and provide clear, user-visible outcomes. When submission starts, progress must be announced via a live region, duplicate submissions must be prevented, and an optimistic receipt must be shown and then reconciled to Confirmed on success or rolled back on failure. When validation fails, errors must be exposed semantically, and focus must shift to the first invalid field to keep the workflow accessible and predictable. Internal state is not tested. Verification targets observable behavior, accessible semantics, and committed UI phases.

Success criteria

The following success criteria confirm that the Order request form workflow remains reliable and accessible across step transitions, and that validation, focus management, live announcements, duplicate-submission prevention, and optimistic-to-confirmed (or rollback) submission states work together correctly.

  • The form renders Step 1 first and preserves draft values when navigating Back and Next.

  • Step navigation forward is blocked when the current step is invalid, and inline errors render near the associated fields.

  • On validation failure, focus moves to the first invalid field and an error message is announced via role="alert".

  • Submitting triggers an async lifecycle that announces Submitting… via role="status", disables Submit, and prevents duplicate submissions.

  • While submitting, an optimistic Pending receipt appears immediately; on success it becomes Confirmed, and on failure it rolls back and surfaces an error with a retry path.

  • A basic aXe check reports zero violations for the rendered page (and the harness fails if violations exist).

Technical requirements: Implement the following features step by step

Task 1: Multi-step wizard shell and stable draft state

  • Create a two-step wizard with Back/Next controls. Draft state must live in the parent so step transitions never discard data.

Task 2: Step validation and semantic errors

  • Add synchronous validation for required fields (name and email). Errors must render near the field, be linked with aria-describedby, and block navigation forward.

Task 3: Focus management at workflow seams

  • When the user attempts to continue with invalid fields, focus must move to the first invalid input.

Task 4: Transactional submit with React 19 coordination

  • Implement submission using React 19 APIs:

    • useActionState models submission outcome and error message.

    • useOptimistic shows a pending receipt immediately.

    • useTransition wraps non-urgent UI transitions.

    • A transaction lock prevents duplicate submissions and shows “Submitting…” while pending.

Task 5: Manual test harness + aXe structural check

  • Create a manual harness that runs in the browser console and validates the workflow behavior end-to-end, including aXe checks with axe-core.

Project structure

Below is the hierarchy of the project files and folders: