;; 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: send (8 tests — 8 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream send tests. 8 of 8 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 "can send events"
  :html "<div _='on click send foo to #bar'></div> | <div id='bar' _='on foo add .foo-sent'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.classList.contains(\"foo-sent\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo add .foo-sent\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-bar \"foo-sent\"))
  ))")
(~hyperscript/hs-test-card
  :name "can reference sender in events"
  :html "<div _='on click log 0 send foo to #bar log 3'></div> | <div id='bar' _='on foo add .foo-sent to sender log 1, me, sender'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo-sent\").should.equal(false) && div.classList.contains(\"foo-sent\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click log 0 send foo to #bar log 3\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo add .foo-sent to sender log 1, me, sender\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo-sent\"))
  ))")
(~hyperscript/hs-test-card
  :name "can send events with args"
  :html "<div _='on click send foo(x:42) to #bar'></div> | <div id='bar' _='on foo put event.detail.x into my.innerHTML'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.innerHTML.should.equal(\"42\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo(x:42) to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo put event.detail.x into my.innerHTML\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-bar \"foo-sent\")))
    (assert= (dom-inner-html _el-bar) \"42\")
  ))")
(~hyperscript/hs-test-card
  :name "can send events with dots"
  :html "<div _='on click send foo.bar to #bar'></div> | <div id='bar' _='on foo.bar add .foo-sent'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.classList.contains(\"foo-sent\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo.bar to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo.bar add .foo-sent\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-bar \"foo-sent\"))
  ))")
(~hyperscript/hs-test-card
  :name "can send events with dots with args"
  :html "<div _='on click send foo.bar(x:42) to #bar'></div> | <div id='bar' _='on foo.bar put event.detail.x into my.innerHTML'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.innerHTML.should.equal(\"42\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo.bar(x:42) to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo.bar put event.detail.x into my.innerHTML\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-bar \"foo-sent\")))
    (assert= (dom-inner-html _el-bar) \"42\")
  ))")
(~hyperscript/hs-test-card
  :name "can send events with colons"
  :html "<div _='on click send foo:bar to #bar'></div> | <div id='bar' _='on foo:bar add .foo-sent'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.classList.contains(\"foo-sent\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo:bar to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo:bar add .foo-sent\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-bar \"foo-sent\"))
  ))")
(~hyperscript/hs-test-card
  :name "can send events with colons with args"
  :html "<div _='on click send foo:bar(x:42) to #bar'></div> | <div id='bar' _='on foo:bar put event.detail.x into my.innerHTML'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.innerHTML.should.equal(\"42\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click send foo:bar(x:42) to #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo:bar put event.detail.x into my.innerHTML\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-bar \"foo-sent\")))
    (assert= (dom-inner-html _el-bar) \"42\")
  ))")
(~hyperscript/hs-test-card
  :name "can send events to any expression"
  :html "<div _='def bar return #bar on click send foo to bar()'></div> | <div id='bar' _='on foo add .foo-sent'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo-sent\").should.equal(false) && bar.classList.contains(\"foo-sent\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"def bar return #bar on click send foo to bar()\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-bar \"_\" \"on foo add .foo-sent\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (hs-activate! _el-div)
    (hs-activate! _el-bar)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-bar \"foo-sent\"))
  ))"))))
