;; 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: add (19 tests — 14 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream add tests. 14 of 19 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-dom))"
        :style "color:#7c3aed" "dom"))
    (div :style "display:flex;flex-direction:column"
      (~hyperscript/hs-test-card
  :name "can add class ref on a single div"
  :html "<div _='on click add .foo'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can add class ref w/ double dash on a single div"
  :html "<div _='on click add .foo--bar'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo--bar\").should.equal(false) && div.classList.contains(\"foo--bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo--bar\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo--bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "can add class ref on a single form"
  :html "<form _='on click add .foo'></form>"
  :action "form.click()"
  :check "form.classList.contains(\"foo\").should.equal(false) && form.classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-form (dom-create-element \"form\")))
    (dom-set-attr _el-form \"_\" \"on click add .foo\")
    (dom-append sandbox _el-form)
    (hs-activate! _el-form)
    (dom-dispatch _el-form \"click\" nil)
    (assert (dom-has-class? _el-form \"foo\"))
  ))")
(~hyperscript/hs-test-card
  :name "can target another div for class ref"
  :html "<div id='bar'></div> | <div _='on click add .foo to #bar'></div>"
  :action "div.click()"
  :check "bar.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && bar.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-bar (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-div \"_\" \"on click add .foo to #bar\")
    (dom-append sandbox _el-bar)
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-bar \"foo\"))
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can add to query in me"
  :html "<div _='on click add .foo to <p/> in me'><p id='p1'></p></div>"
  :action "div.click()"
  :check "p1.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && p1.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-p1 (dom-create-element \"p\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo to <p/> in me\")
    (dom-set-attr _el-p1 \"id\" \"p1\")
    (dom-append sandbox _el-div)
    (dom-append _el-div _el-p1)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-p1 \"foo\"))
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can add to children"
  :html "<div _='on click add .foo to my children'><p id='p1'></p></div>"
  :action "div.click()"
  :check "p1.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && p1.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-p1 (dom-create-element \"p\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo to my children\")
    (dom-set-attr _el-p1 \"id\" \"p1\")
    (dom-append sandbox _el-div)
    (dom-append _el-div _el-p1)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-p1 \"foo\"))
    (assert (not (dom-has-class? _el-div \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "can add non-class attributes"
  :html "<div _='on click add [@foo=\"bar\"]'></div>"
  :action "div.click()"
  :check "div.hasAttribute(\"foo\").should.equal(false) && div.getAttribute(\"foo\").should.equal(\"bar\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add [@foo=\\\"bar\\\"]\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-attr _el-div \"foo\") \"bar\")
  ))")
(~hyperscript/hs-test-card
  :name "can add css properties"
  :html "<div style='color: blue' _='on click add {color: red; font-family: monospace}'></div>"
  :action "div.click()"
  :check "div.style.color.should.equal(\"blue\") && div.style.color.should.equal(\"red\") && div.style.fontFamily.should.equal(\"monospace\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add {color: red; font-family: monospace}\")
    (dom-set-attr _el-div \"style\" \"color: blue\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"color\") \"red\")
    (assert= (dom-get-style _el-div \"fontFamily\") \"monospace\")
  ))")
(~hyperscript/hs-test-card
  :name "can add templated css properties"
  :html "<div style='color: blue' _='on click add {color: ${\"red\"};}'></div>"
  :action "div.click()"
  :check "div.style.color.should.equal(\"blue\") && div.style.color.should.equal(\"red\")"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add {color: ${\\\"red\\\"};}\")
    (dom-set-attr _el-div \"style\" \"color: blue\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert= (dom-get-style _el-div \"color\") \"red\")
  ))")
(~hyperscript/hs-test-card
  :name "can add multiple class refs"
  :html "<div _='on click add .foo .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(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo .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 add class refs w/ colons and dashes"
  :html "<div _='on click add .foo:bar-doh'></div>"
  :action "div.click()"
  :check "div.classList.contains(\"foo:bar-doh\").should.equal(false) && div.classList.contains(\"foo:bar-doh\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo:bar-doh\")
    (dom-append sandbox _el-div)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (dom-has-class? _el-div \"foo:bar-doh\"))
  ))")
(~hyperscript/hs-test-card
  :name "can filter class addition via the when clause"
  :html "<div _='on click add .rey to .bar when it matches .doh'></div> | <div class='bar'></div> | <div class='bar doh'></div>"
  :action "div1.click()"
  :check "div2.classList.contains(\"rey\").should.equal(false) && div3.classList.contains(\"rey\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .rey to .bar when it matches .doh\")
    (dom-add-class _el-div1 \"bar\")
    (dom-add-class _el-div2 \"bar\")
    (dom-add-class _el-div2 \"doh\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-class? _el-div1 \"rey\")))
    (assert (dom-has-class? _el-div2 \"rey\"))
  ))")
(~hyperscript/hs-test-card
  :name "can filter property addition via the when clause"
  :html "<div _='on click add @rey to .bar when it matches .doh'></div> | <div class='bar'></div> | <div class='bar doh'></div>"
  :action "div1.click()"
  :check "div2.hasAttribute(\"rey\").should.equal(false) && div3.hasAttribute(\"rey\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add @rey to .bar when it matches .doh\")
    (dom-add-class _el-div1 \"bar\")
    (dom-add-class _el-div2 \"bar\")
    (dom-add-class _el-div2 \"doh\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-div1)
    (dom-append sandbox _el-div2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    (assert (not (dom-has-attr? _el-div1 \"rey\")))
    (assert (dom-has-attr? _el-div2 \"rey\"))
  ))")
(~hyperscript/hs-test-card
  :name "can add to an HTMLCollection"
  :html "<div _='on click add .foo to the children of #bar'></div> | <div id='bar'><div id='c1'></div><div id='c2'></div></div>"
  :action "div1.click()"
  :check "byId(\"c1\").classList.contains(\"foo\").should.equal(false) && byId(\"c2\").classList.contains(\"foo\").should.equal(false) && byId(\"c1\").classList.contains(\"foo\").should.equal(true) && byId(\"c2\").classList.contains(\"foo\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-div (dom-create-element \"div\")) (_el-bar (dom-create-element \"div\")) (_el-c1 (dom-create-element \"div\")) (_el-c2 (dom-create-element \"div\")))
    (dom-set-attr _el-div \"_\" \"on click add .foo to the children of #bar\")
    (dom-set-attr _el-bar \"id\" \"bar\")
    (dom-set-attr _el-c1 \"id\" \"c1\")
    (dom-set-attr _el-c2 \"id\" \"c2\")
    (dom-append sandbox _el-div)
    (dom-append sandbox _el-bar)
    (dom-append _el-bar _el-c1)
    (dom-append _el-bar _el-c2)
    (hs-activate! _el-div)
    (dom-dispatch _el-div \"click\" nil)
    ;; SKIP check: skip byId(\"c1\").classList.contains(\"foo\").should.equal(false)
    ;; SKIP check: skip byId(\"c2\").classList.contains(\"foo\").should.equal(false)
    ;; SKIP check: skip byId(\"c1\").classList.contains(\"foo\").should.equal(true)
    ;; SKIP check: skip byId(\"c2\").classList.contains(\"foo\").should.equal(true)
  ))")
(~hyperscript/hs-test-card
  :name "supports async expressions in when clause"
  :html "<div id='trigger' _='on click add .foo to #d2 when asyncCheck()'></div><div id='d2'></div>"
  :action "find('#trigger').dispatchEvent('click')"
  :check "toHaveClass(/foo/)"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "when clause sets result to matched elements"
  :html "<div id='trigger' _='on click add .foo to .item when it matches .yes then if the result is empty show #none else hide #none'></div><div id='d1' class='item yes'></div><div id='d2' class='item'></div><div id='none' style='display:none'></div>"
  :action "find('#trigger').dispatchEvent('click')"
  :check "toBeHidden()"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "when clause result is empty when nothing matches"
  :html "<div id='trigger' _='on click add .foo to .item when it matches .nope then if the result is empty remove @hidden from #none'></div><div id='d1' class='item'></div><div id='none' hidden></div>"
  :action "find('#trigger').dispatchEvent('click')"
  :check "toHaveAttribute('hidden')"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can add a value to an array"
  :html "<div _=\"on click
		                      set :arr to [1,2,3]
		                      add 4 to :arr
		                      put :arr as String into me\"></div>"
  :action "find('div').dispatchEvent('click')"
  :check "toHaveText(\"1,2,3,4\")"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
(~hyperscript/hs-test-card
  :name "can add a value to a set"
  :html "<div _=\"on click
		                      set :s to [] as Set
		                      add 'a' to :s
		                      add 'b' to :s
		                      add 'a' to :s
		                      put :s.size into me\"></div>"
  :action "find('div').dispatchEvent('click')"
  :check "toHaveText(\"2\")"
  :run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
