;; 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: wait (7 tests — 7 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream wait tests. 7 of 7 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 wait on time"
  :html "<div _='on click                              add .foo then                              wait 20ms then                              add .bar'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click  add .foo then wait 20ms then add .bar\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (dom-has-class? _el-div \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "can wait on event"
  :html "<div _='on click                              add .foo then                              wait for foo then                              add .bar'></div>"
  :action "div.click(); div.dispatchEvent(new CustomEvent(\"foo\")"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click  add .foo then wait for foo then add .bar\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (dom-has-class? _el-div \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "waiting on an event sets 'it' to the event"
  :html "<div _='on click wait for foo         then put its.detail into me'></div>"
  :action "div.click(); div.dispatchEvent(new CustomEvent(\"foo\", { detail: \"hyperscript is hyper cool\" })"
  :check "div.innerHTML.should.equal(\"\") && div.innerHTML.should.equal(\"hyperscript is hyper cool\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click wait for foo then put its.detail into me\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert= (dom-inner-html _el-div) \"hyperscript is hyper cool\")
  ))")
(~hyperscript/hs-test-card
  :name "can destructure properties in a wait"
  :html "<div _='on click wait for foo(bar)         then put bar into me'></div>"
  :action "div.click(); div.dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: \"bar\" } })"
  :check "div.innerHTML.should.equal(\"\") && div.innerHTML.should.equal(\"bar\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click wait for foo(bar) then put bar into me\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert= (dom-inner-html _el-div) \"bar\")
  ))")
(~hyperscript/hs-test-card
  :name "can wait on event on another element"
  :html "<div id='d2'></div> | <div _='on click                              add .foo then                              wait for foo from #d2 then                              add .bar'></div>"
  :action "div.click(); div2.dispatchEvent(new CustomEvent(\"foo\")"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-d2 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-attr _el-div \"_\" \"on click  add .foo then wait for foo from #d2 then add .bar\")
    (dom-append sandbox _el-d2)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (dom-has-class? _el-div \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "can wait on event or timeout 1"
  :html "<div id='d2'></div> | <div _='on click                              add .foo then                              wait for foo or 0ms then                              add .bar'></div>"
  :action "div.click(); div2.dispatchEvent(new CustomEvent(\"foo\")"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-d2 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-attr _el-div \"_\" \"on click  add .foo then wait for foo or 0ms then add .bar\")
    (dom-append sandbox _el-d2)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (dom-has-class? _el-div \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "can wait on event or timeout 2"
  :html "<div id='d2'></div> | <div _='on click                              add .foo then                              wait for foo or 0ms then                              add .bar'></div>"
  :action "div.click(); div2.dispatchEvent(new CustomEvent(\"foo\")"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-d2 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-attr _el-div \"_\" \"on click  add .foo then wait for foo or 0ms then add .bar\")
    (dom-append sandbox _el-d2)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (dom-dispatch _el-div \"foo\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
    (assert (dom-has-class? _el-div \"bar\"))
  ))"))))
