React + TypeScript health adventure game with a full BDD test suite using Cucumber.js and Playwright.
Most "BDD" demos are unit tests wearing a Gherkin hat. I wanted the honest version: scenarios a non-engineer could read, driving a real browser against a real running app, failing for real reasons.
The app under test had to be small enough to hold in your head and stateful enough to be worth describing. So: a health bar that decays in real time, a step counter that pays 10 HP a step, a donut shop capped at five, and a name editor with live validation. That cap is the interesting one — the fifth purchase succeeds, the sixth refuses and says so, and that refusal is a scenario, not an edge case someone remembered to test.
Three layers, strictly separated. Feature files in plain English; step definitions that translate a sentence into an action; Playwright underneath driving Chromium. Twenty-three scenarios across five feature files, covering every screen in the shots here.
State is one React Context holding health, maxHealth, steps, donuts and playerName — deliberately boring. The subject of the investigation was the test architecture, and a clever store would only have muddied what the scenarios were proving.