;; AUTO-GENERATED from spec/tests/hyperscript-upstream-tests.json
;; DO NOT EDIT — regenerate with:
;;   python3 tests/playwright/generate-sx-tests.py --emit-pages

(defcomp ()
  (~docs/page :title "Hyperscript: when (41 tests — 0 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream when tests. 0 of 41 are reproducible in-browser; the remainder show their source for reference.")
    (p :style "color:#78716c;font-size:0.875rem;margin-bottom:1rem"
      "Theme: " (a :href "/sx/(applications.(hyperscript.gallery-events))"
        :style "color:#7c3aed" "events"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "provides access to `it` and syncs initial value"
  :html "<div _=\"when $global changes put it into me\"></div>"
  :action "await run(\"set $global to '; await run(\"set $global to '; await run(\"set $global to 42\""
  :check "toHaveText('initial'); toHaveText('hello world'); toHaveText('42')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "detects changes from $global variable"
  :html "<div _=\"when $global changes put it into me\"></div>"
  :action "await run(\"set $global to '"
  :check "toHaveText('Changed!')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "detects changes from :element variable"
  :html "<div _=\"init set :count to 0 end
			         when :count changes put it into me end
			         on click increment :count\">0</div>"
  :action "find('div').click(); find('div').click()"
  :check "toHaveText('0'); toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "triggers multiple elements watching same variable"
  :html "<div id=\"d1\" _=\"when $shared changes put 'first' into me\"></div><div id=\"d2\" _=\"when $shared changes put 'second' into me\"></div>"
  :action "await run(\"set $shared to '"
  :check "toHaveText('first'); toHaveText('second')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "executes multiple commands"
  :html "<div _=\"when $multi changes put 'first' into me then add .executed to me\"></div>"
  :action "await run(\"set $multi to '"
  :check "toHaveText('first'); toHaveClass(/executed/)"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "does not execute when variable is undefined initially"
  :html "<div _=\"when $neverSet changes put 'synced' into me\">original</div>"
  :action ""
  :check "toHaveText('original')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "only triggers when variable actually changes value"
  :html "<div _=\"when $dedup changes increment :callCount then put :callCount into me\"></div>"
  :action "await run(\"set $dedup to '; await run(\"set $dedup to '; await run(\"set $dedup to '"
  :check "toHaveText('1'); toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "auto-tracks compound expressions"
  :html "<div _=\"when ($a + $b) changes put it into me\"></div>"
  :action "await run(\"set $a to 1\"; await run(\"set $b to 2\"; await run(\"set $a to 10\"; await run(\"set $b to 20\""
  :check "toHaveText('3'); toHaveText('12'); toHaveText('30')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "detects attribute changes"
  :html "<div data-title=\"original\" _=\"when @data-title changes put it into me\"></div>"
  :action ""
  :check "toHaveText('original')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "detects form input value changes via user interaction"
  :html "<input type=\"text\" id=\"reactive-input\" value=\"start\" /><span _=\"when #reactive-input.value changes put it into me\"></span>"
  :action "evaluate({...})"
  :check "toHaveText('start'); toHaveText('typed')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "detects property change via hyperscript set"
  :html "<input type=\"text\" id=\"prog-input\" value=\"initial\" /><span _=\"when #prog-input.value changes put it into me\"></span>"
  :action "await run(\"set #prog-input.value to '"
  :check "toHaveText('initial')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "disposes effect when element is removed from DOM"
  :html "<div _=\"when $dispose changes put it into me\"></div>"
  :action "await run(\"set $dispose to '; await run(\"set $dispose to '"
  :check "toHaveText('before'); toBe('before')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "batches multiple synchronous writes into one effect run"
  :html "<div _=\"when ($batchA + $batchB) changes increment :runCount then put :runCount into me\"></div>"
  :action "await run(\"set $batchA to 0\"; await run(\"set $batchB to 0\""
  :check "toHaveText('1'); toHaveText('2')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "handles chained reactivity across elements"
  :html "<div _=\"when $source changes set $derived to (it * 2)\"></div><div id=\"output\" _=\"when $derived changes put it into me\"></div>"
  :action "await run(\"set $source to 5\"; await run(\"set $source to 20\""
  :check "toHaveText('10'); toHaveText('40')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports multiple when features on the same element"
  :html "<div _=\"when $left changes put it into my @data-left end
			         when $right changes put it into my @data-right\"></div>"
  :action "await run(\"set $left to '; await run(\"set $right to '; await run(\"set $left to '"
  :check "toHaveAttribute('data-left', 'L'); toHaveAttribute('data-right', 'R'); toHaveAttribute('data-left', 'newL'); toHaveAttribute('data-right', 'R')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "works with on handlers that modify the watched variable"
  :html "<div _=\"init set :label to 'initial' end
			         when :label changes put it into me end
			         on click set :label to 'clicked'\">initial</div>"
  :action "find('div').click()"
  :check "toHaveText('initial'); toHaveText('clicked')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "does not cross-trigger on unrelated variable writes"
  :html "<div _=\"when $trigger changes
			             increment :count
			             put :count into me
			             set $other to 'side-effect'\"></div>"
  :action "await run(\"set $trigger to '"
  :check "toHaveText('1'); toHaveText('1')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "handles rapid successive changes correctly"
  :html "<div _=\"when $rapid changes put it into me\"></div>"
  :action "await run(\"set $rapid to \""
  :check "toHaveText('9')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "isolates element-scoped variables between elements"
  :html "<div id=\"d1\" _=\"init set :value to 'A' end
			               when :value changes put it into me end
			               on click set :value to 'A-clicked'\">A</div><div id=\"d2\" _=\"init set :value to 'B' end
			               when :value changes put it into me end
			               on click set :value to 'B-clicked'\">B</div>"
  :action "find('#d1').click(); find('#d2').click()"
  :check "toHaveText('A'); toHaveText('B'); toHaveText('A-clicked'); toHaveText('B'); toHaveText('B-clicked'); toHaveText('A-clicked')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "handles NaN without infinite re-firing"
  :html "<input type=\"text\" id=\"nan-input\" value=\"not a number\" /><span _=\"when (#nan-input.value * 1) changes put it into me\"></span>"
  :action "evaluate({...})"
  :check "toHaveText('NaN'); toHaveText('NaN')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "fires when either expression changes using or"
  :html "<div _=\"when $x or $y changes put it into me\"></div>"
  :action "await run(\"set $x to '; await run(\"set $y to '"
  :check "toHaveText('from-x'); toHaveText('from-y')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "supports three or more expressions with or"
  :html "<div _=\"when $r or $g or $b changes put it into me\"></div>"
  :action "await run(\"set $r to '; await run(\"set $g to '; await run(\"set $b to '"
  :check "toHaveText('red'); toHaveText('green'); toHaveText('blue')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "#element.checked is tracked"
  :html "<input type=\"checkbox\" id=\"cb-input\" /><span _=\"when #cb-input.checked changes put it into me\"></span>"
  :action ""
  :check "toHaveText('false')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "my @attr is tracked"
  :html "<div data-x=\"one\" _=\"when my @data-x changes put it into me\"></div>"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "value of #element is tracked"
  :html "<input type=\"text\" id=\"of-input\" value=\"init\" /><span _=\"when (value of #of-input) changes put it into me\"></span>"
  :action "find('#of-input').fill('changed')"
  :check "toHaveText('init')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "math on tracked symbols works"
  :html "<div _=\"when ($mA * $mB) changes put it into me\"></div>"
  :action "await run(\"set $mA to 3\"; await run(\"set $mB to 4\"; await run(\"set $mA to 10\""
  :check "toHaveText('12')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "comparison on tracked symbol works"
  :html "<div _=\"when ($cmpVal > 5) changes put it into me\"></div>"
  :action "await run(\"set $cmpVal to 3\"; await run(\"set $cmpVal to 10\""
  :check "toHaveText('false')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "string template with tracked symbol works"
  :html "<div _=\"when `hello ${$tplName}` changes put it into me\"></div>"
  :action "await run(\"set $tplName to '; await run(\"set $tplName to '"
  :check "toHaveText('hello world')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "function call on tracked value works (Math.round)"
  :html "<div _=\"when (Math.round($rawNum)) changes put it into me\"></div>"
  :action "await run(\"set $rawNum to 3.7\"; await run(\"set $rawNum to 9.2\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "inline style change via JS is NOT detected"
  :html "<div id=\"style-target\" style=\"opacity: 1\" _=\"when (*opacity) changes put it into me\">not fired</div>"
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "reassigning whole array IS detected"
  :html "<div _=\"when $arrWhole changes put it.join(',') into me\"></div>"
  :action "await run(\"set $arrWhole to [1, 2, 3]\"; await run(\"set $arrWhole to [4, 5, 6]\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "mutating array element in place is NOT detected"
  :html "<div _=\"when $arrMut[0] changes put it into me\"></div>"
  :action "await run(\"set $arrMut to [1, 2, 3]\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "local variable in when expression produces a parse error"
  :html ""
  :action ""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "attribute observers are persistent (not recreated on re-run)"
  :html ""
  :action ""
  :check "toBe(0)"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "boolean short-circuit does not track unread branch"
  :html "<div _=\"when ($x and $y) changes put it into me\"></div>"
  :action "await run(\"set $x to false\"; await run(\"set $y to '; await run(\"set $y to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "diamond: cascaded derived values produce correct final value"
  :html "<span id=\"d-b\" _=\"when $a changes set $b to (it * 2)\"></span><span id=\"d-c\" _=\"when $a changes set $c to (it * 3)\"></span><div _=\"live increment :runs then put ($ (runs:)' into me\"></div>"
  :action "await run(\"set $a to 1\"; await run(\"set $a to 10\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "error in one effect does not break other effects in the same batch"
  :html "<span id=\"err-a\" _=\"when $trigger changes put null.boom into me\"></span><span id=\"err-b\" _=\"when $trigger changes put 'ok:"
  :action "await run(\"set $trigger to 0\"; await run(\"set $trigger to 42\""
  :check "toHaveText('ok:42')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "circular guard resets after cascade settles"
  :html "<span _=\"when $ping changes set $ping to (i<div _=\"when $ping changes put it into me\"></div>"
  :action "await run(\"set $ping to 0\"; await run(\"set $ping to 1\"; await run(\"set $ping to 0\"; await run(\"set $ping to 999\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "cross-microtask ping-pong is caught by circular guard"
  :html "<span _=\"when $ping changes set $pong to (i<span _=\"when $pong changes set $ping to (i<div _=\"when $ping changes put it into me\"></div>"
  :action "await run(\"set $ping to 1\""
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "element moved in DOM retains reactivity"
  :html "<div id=\"container-a\"><span _=\"when $movable changes put it into me\"></span></div><div id=\"container-b\"></div>"
  :action "await run(\"set $movable to '; await run(\"set $movable to '"
  :check "toHaveText('start')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "rapid detach/reattach in same sync block does not kill effect"
  :html "<div id=\"thrash-parent\"></div>"
  :action "await run(\"set $thrash to '; await run(\"set $thrash to '"
  :check ""
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
