Skip to main content
ELYTE
HardFrontendDebug

Fix the Multi-step Wizard

A 3-step wizard has two production bugs. Bug 1: double-clicking "Next" fires validation twice and can jump two steps at once. Bug 2: clicking "Back" while validation is pending causes the stale result to silently advanc...

Start problemBrowse all problems

What you will practice

TypeScriptReactState ManagementAsync Patterns

Requirements

  • Keep `App` as the default exported React component with the provided `validateStep` prop.
  • Render the current step in `step-indicator`.
  • Render `next-btn`, and render `back-btn` when the user can go back.
  • Clicking Next must validate the current step with `validateStep(step, data)`.
  • Rapid Next clicks must call `validateStep` at most once while validation is pending.
  • Do not advance the wizard if the user navigated away before validation resolves.
  • Re-enable Next after validation resolves.

Starter files

App.tsxEditable starter

What the judge checks

  • Runs in the react environment with the react-testing-library runner.
  • Uses a 8000ms judge budget.
  • Requires test IDs: next-btn, step-indicator.
  • Provides APIs: validateStep.
  • Behavior rules include: Next Disabled While Validating, No Double Submission While Pending, Back Cancels Stale Validation, Valid Flow Navigates Correctly.

Constraints

  • next-btn must be disabled while validateStep is pending
  • Do not advance the wizard if the user navigated away before validation resolves
  • next-btn must re-enable after validateStep resolves so the user can try again

Example behavior

Input
User clicks next-btn on step 2 (validation pending), then clicks back-btn
Output
User is on step 1. When step 2 validation later resolves true, nothing happens — wizard stays on step 1.

Follow-up

How would you extend this to support validation that can reject (throw an error), showing an error message on the current step without advancing or going back?