Dsteem Milestone - Browser Testing harness

in Steem Dev16 hours ago

Follow-up to yesterday's docs-on-Pages announcement: the Browser Testing harness is now live at https://blazeapps007.github.io/dsteem/harness/ — a static, form-driven page with manual coverage of every dsteem operation (47 ops across 10 tabs), deployed by the same GitHub Actions workflow that builds the typedoc site. Commit fa27358 adds the harness folder, wires it into the Pages workflow, and ships everything to the live site. Self-contained: no npm-registry install of dsteem involved.

dsteem-harness-live.png


Live Now

https://blazeapps007.github.io/dsteem/harness/

Open it in any modern browser. The page loads the IIFE bundle (lib/dsteem.browser.global.js, ~350 KB), exposes window.dsteem, and renders a form for every single operation in dsteem's Operation discriminated union:

TabOps
Accountaccount_create, account_create_with_delegation, create_claimed_account, claim_account, account_update, account_update2, change_recovery_account
Contentcomment, comment_options, delete_comment, vote
Wallettransfer, transfer_to_savings, transfer_from_savings, cancel_transfer_from_savings, claim_reward_balance
Powertransfer_to_vesting, withdraw_vesting, set_withdraw_vesting_route, delegate_vesting_shares
Marketfeed_publish, convert, limit_order_create, limit_order_create2, limit_order_cancel, decline_voting_rights
Escrowescrow_transfer, escrow_approve, escrow_dispute, escrow_release
Witnesswitness_update, witness_set_properties, account_witness_vote, account_witness_proxy
Customcustom_json, custom_binary, custom
Governancecreate_proposal, update_proposal_votes, remove_proposal
Recovery / Legacyrequest_account_recovery, recover_account, reset_account, set_reset_account, pow, pow2, report_over_production

Plus a read-only Lookups panel — getAccounts, getDynamicGlobalProperties, getChainProperties, getCurrentMedianHistoryPrice, getRCMana, getVPMana, getBlock, getDiscussions, getConfig, and a raw client.call escape hatch.


Commit

Commit: fa27358
Message: Add Browser Testing harness; update Pages workflow.

Two paired changes — the harness itself, plus the workflow change that puts it on the live site.

1. Browser Testing/ (new folder)

A self-contained static site. No build step, no framework, no transpile.

Browser Testing/
├── README.md           — Quickstart, safety rules, full op coverage table
├── package.json        — {"dsteem": "file:.."} + postinstall + serve scripts
├── setup.js            — copies node_modules/dsteem/dist/*.global.js → lib/
├── .gitignore          — node_modules, lib, package-lock.json
├── index.html          — Top bar (RPC + key + mode toggle), 10 tabs, lookup + output panels
├── css/
│   └── styles.css      — Dark theme, sticky topbar, color-coded log tags
└── js/
    ├── app.js          — Bootstrap: RPC switching, mainnet detection, key derivation
    ├── form-builder.js — registerOp() helper: schema-driven + custom-render paths
    ├── output.js       — Timestamped BUILD/SIGNED/BROADCAST/LOOKUP/ERROR log
    ├── lookups.js      — 10 read-only lookup cards
    ├── ops-account.js  — 7 account ops (with reusable authorityWidget + password-derive helper)
    ├── ops-content.js  — 4 content ops (incl. comment_options beneficiary list)
    ├── ops-wallet.js   — 5 transfer/savings/reward ops
    ├── ops-power.js    — 4 vesting ops
    ├── ops-market.js   — 6 market ops (with PriceType widget)
    ├── ops-escrow.js   — 4 escrow ops (ISO datetime defaults)
    ├── ops-witness.js  — 4 witness ops (incl. witness_set_properties hex builder)
    ├── ops-custom.js   — 3 custom ops (hex/JSON validation)
    ├── ops-governance.js — 3 proposal ops
    └── ops-recovery.js — 4 recovery + 3 legacy (pow / pow2 / report_over_production) ops

The transaction-build code mirrors BroadcastAPI.sendOperations exactly — same ref_block_num & 0xFFFF, same Buffer.from(head_block_id, 'hex').readUInt32LE(4) for ref_block_prefix, same expiration calculation. So a signed transaction produced by clicking Build & Sign in the browser is byte-equivalent to one produced by calling client.broadcast.sendOperations from Node.

Each form gives the tester three buttons:

  • Build & Sign — local, no network call apart from the head-block fetch; logs the signed transaction JSON to the output panel
  • Broadcast — only enabled when the per-form [x] Broadcast checkbox is ticked, and only when a key is present; calls the matching BroadcastAPI wrapper (or sendOperations for ops without a dedicated wrapper)
  • The button label is red when the active RPC is mainnet, green otherwise

2. .github/workflows/pages.yml (extended)

The existing Pages workflow used to deploy only the typedoc docs. Now it deploys both, side by side, in one combined artifact:

- Install root deps                            # npm install
- Build dsteem                                 # npm run build  → produces dist/dsteem.browser.global.js
- Generate API docs (typedoc 0.28)             # npm run build:docs  → docs/
- Install Browser Testing harness deps         # cd "Browser Testing" && npm install
                                               # postinstall runs setup.js, copies the bundle into lib/
- Assemble combined Pages site:
    _site/                                     ← typedoc docs (unchanged URL)
    _site/harness/                             ← Browser Testing harness
- Upload _site as Pages artifact
- Deploy

No second Pages environment, no separate gh-pages branch — one workflow, one artifact, two consumer paths.

URLContent
https://blazeapps007.github.io/dsteem/typedoc API reference (unchanged)
https://blazeapps007.github.io/dsteem/harness/this harness (new)

Verification

Smoke-tested in a headless Chromium against the local build before pushing:

CheckResult
npm install in Browser Testing/ runs postinstall[setup] Copied dsteem.browser.global.js (350.6 KB) to lib/
lib/dsteem.browser.global.js served via http-server✓ HTTP 200, 359 KB
Page loads, window.dsteem.VERSION === "0.12.0"
.op-form cards in DOM47 (Account 7, Content 4, Wallet 5, Power 4, Market 6, Escrow 4, Witness 4, Custom 3, Governance 3, Recovery/Legacy 7)
Console errors / page errors0 / 0
Bundle-error banner✓ hidden
Mainnet warning banner on api.steemit.com✓ red
Per-op Broadcast checkbox starts unchecked

After push, the Pages workflow rebuilt the combined _site/ and republished — / continues to serve the typedoc reference, /harness/ now serves the harness.


Safety design

This harness asks the tester to paste a private key into a webpage. That's load-bearing risk. Mitigations:

  • Default mode: Build & Sign only — the harness never broadcasts unless a per-op checkbox is ticked.
  • Mainnet banner: red banner at the top whenever RPC resolves to a mainnet host; the Broadcast button itself turns red on mainnet too.
  • Keys never persisted: account name and RPC URL go to localStorage; the WIF / login-password field is wiped on reload, never stored.
  • No third-party scripts: the deployed page loads zero external JS/CSS. Only lib/dsteem.browser.global.js, css/styles.css, and the per-tab js/ops-*.js files — all served from the same GitHub Pages origin.
  • README warning: "Use a dedicated test account. Never paste your owner key. Never use this on a shared machine."

These don't prevent misuse — paste-a-key UX never can — but they make the default behaviour safe and the dangerous path explicit.


Why install from file:.. and not npm?

The harness's package.json deliberately reads:

"dependencies": { "dsteem": "file:.." }

— not "dsteem": "^0.12". Because [email protected] on the npm registry is the un-modernized 2019 version. The v0.12.0 work in this repo hasn't been published yet, and when it is, it'll go under a new package name (planned: blazesteem) to avoid stomping on the original. So for now the harness always installs the bundle from this source tree — the Pages workflow does exactly the same thing.

When [email protected] lands on npm, the file:.. line becomes "dsteem": "npm:blazesteem@^0.12" and the rest of the harness (which references node_modules/dsteem/dist/dsteem.browser.global.js through the setup.js copier) keeps working as-is.


🧪 Try it

Deployed (zero setup): https://blazeapps007.github.io/dsteem/harness/

Locally:

git clone https://github.com/blazeapps007/dsteem.git
cd dsteem
git checkout BlazeDevelopment
npm install && npm run build

cd "Browser Testing"
npm install                    # postinstall copies the bundle into lib/
npm run serve                  # → http://localhost:8080

A good first run:

  1. Lookups panel → getAccounts with your account name → confirm account JSON renders.
  2. Paste a posting WIF (or use Login mode with username + password). The derived STM… pubkey should match posting.key_auths[0][0] from the account JSON you just fetched.
  3. Custom tab → custom_json → fill in id: "harness-test", json: {"hello":"world"}, leave Broadcast unchecked → Build & Sign → inspect the signed-TX JSON in the output panel.
  4. Tick Broadcast, click Broadcast → live confirmation with block_num and id. Costs nothing but a sliver of RC.

If something misbehaves vs. what dsteem should produce, that's a release blocker — file an issue on the repo.


Series So Far


What's Next

The harness exists so the next post can be the testing report — actually broadcasting a transaction of each operation type through the live harness, against api.steemit.com, and reporting on what worked, what didn't, and what surprised me. Community testers, this is your week — break it before Phase 8 ships.

After that: Phase 8 — the npm publish under the blazesteem name, the migration guide for v0.11.x consumers, and the formal v0.12.0 tag.


How You Can Help

  • 🔍 Visit the harness: https://blazeapps007.github.io/dsteem/harness/ — click through every tab, confirm forms render, file any cosmetic issues
  • 🧪 Sign + broadcast a test op: a tiny custom_json is the cheapest dry-run. Compare the signed-TX JSON to what client.broadcast.json(...) produces in Node — they should be byte-equivalent
  • 🐛 Hunt for divergence: anything where the harness produces a different signed-TX shape than the Node BroadcastAPI does is a P0 bug
  • 💬 Comment: if any op is missing a field hint or has an unhelpful default, say so — defaults are easy to fix

This work was developed with Claude AI assistance. All technical decisions reflect Steem ecosystem needs and the hard requirement of zero breaking changes .


Support Secure Steem Development

If you value proactive engineering, UX polish, and performance optimizations for the STEEM ecosystem, please consider supporting my witness: blaze.apps

🗳️ Vote Here:
Vote for blaze.apps Witness

Disclaimer: This post announces commit fa27358 on the BlazeDevelopment branch. The harness is a manual testing tool, not part of CI, and not a substitute for the existing Playwright browser smoke that runs in CI on every push.

Coin Marketplace

STEEM 0.05
TRX 0.33
JST 0.079
BTC 63953.57
ETH 1690.68
USDT 1.00
SBD 0.42