mirror of
https://github.com/priyanshujain/sanderling.git
synced 2026-10-02 19:17:10 +00:00
pj
8c8e87761d
Defers the navigation back so the button is tappable while the label reads Saved, widening the double-submit window the counting property is there to catch.
Folio (web)
A React + Vite port of the folio personal-ledger app: login with demo credentials, create accounts, add credits and debits. Exists as the minimal web example sanderling runs its property-based specs against.
Stack
- React 19 + Vite + TypeScript
- Stable HTML
idattributes on every interactive element so the spec targets DOM nodes by id, not by aria-label parsing data-*attributes (data-cents,data-account-id,data-txn-count) carry structured numeric state for property assertions
Prerequisites
justbun(installs the JS toolchain; the project usesbun.lock, notpackage-lock.jsonorpnpm-lock.yaml)- Chrome installed (sanderling drives it via CDP)
bun install
Demo credentials
email: [email protected]
password: ledger123
Run a sanderling test
just test
The justfile boots the Vite dev server on port 5173, waits for the port
to respond, then runs sanderling test --platform web --bundle-id http://localhost:5173 against it. Override the port with PORT=4000 just test; DURATION, SEED, and OUTPUT work the same way as in the KMP
folio example.
Traces land in ./sanderling/runs/<timestamp>/.
How it connects to sanderling
- The spec at
sanderling/spec.tsfinds elements by HTMLid(#email,#add-account,#ledger,#txn-amount, ...). Anything the spec touches has a stable id in the markup. - Numeric state the spec asserts on is exposed via
data-centsand similar attributes. The spec readsel.attrs["data-cents"]rather than parsing currency strings out ofaria-label. - Account cards expose
data-account-id+data-balanceso the spec can correlate cards across steps without depending on DOM order. just testinvokessanderling test --platform web, which connects to Chrome via the Chrome DevTools Protocol; no extension or app SDK is involved.