;; 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: tell (10 tests — 10 runnable)"
    (p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream tell tests. 10 of 10 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 "establishes a proper beingTold symbol"
  :html "<div id='d1' _='on click                           add .foo                           tell #d2                            add .bar'></div><div id='d2'></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(true) && div2.classList.contains(\"bar\").should.equal(true) && div2.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  add .foo then tell #d2 then add .bar\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"bar\")))
    (assert (dom-has-class? _el-d1 \"foo\"))
    (assert (dom-has-class? _el-d2 \"bar\"))
    (assert (not (dom-has-class? _el-d2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "does not overwrite the me symbol"
  :html "<div id='d1' _='on click                           add .foo                           tell #d2                            add .bar to me'></div><div id='d2'></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(true) && div1.classList.contains(\"foo\").should.equal(true) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  add .foo then tell #d2 then add .bar to me\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (dom-has-class? _el-d1 \"bar\"))
    (assert (dom-has-class? _el-d1 \"foo\"))
    (assert (not (dom-has-class? _el-d2 \"bar\")))
    (assert (not (dom-has-class? _el-d2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "works with an array"
  :html "<div id='d1' _='on click                           add .foo                           tell <p/> in me                            add .bar'><p id='p1'></p><p id='p2'></p><div id='d2'></div></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && p1.classList.contains(\"bar\").should.equal(false) && p1.classList.contains(\"foo\").should.equal(false) && p2.classList.contains(\"bar\").should.equal(false) && p2.classList.contains(\"foo\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(true) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && p1.classList.contains(\"bar\").should.equal(true) && p1.classList.contains(\"foo\").should.equal(false) && p2.classList.contains(\"bar\").should.equal(true) && p2.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-p1 (dom-create-element \"p\")) (_el-p2 (dom-create-element \"p\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  add .foo then tell <p/> in me  add .bar\")
    (dom-set-attr _el-p1 \"id\" \"p1\")
    (dom-set-attr _el-p2 \"id\" \"p2\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append _el-d1 _el-p1)
    (dom-append _el-d1 _el-p2)
    (dom-append _el-d1 _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"bar\")))
    (assert (dom-has-class? _el-d1 \"foo\"))
    (assert (not (dom-has-class? (dom-query-by-id \"div2\") \"bar\")))
    (assert (not (dom-has-class? (dom-query-by-id \"div2\") \"foo\")))
    (assert (dom-has-class? _el-p1 \"bar\"))
    (assert (not (dom-has-class? _el-p1 \"foo\")))
    (assert (dom-has-class? _el-p2 \"bar\"))
    (assert (not (dom-has-class? _el-p2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "restores a proper implicit me symbol"
  :html "<div id='d1' _='on click                           tell #d2                            add .bar                          end                          add .foo'></div><div id='d2'></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(true) && div2.classList.contains(\"bar\").should.equal(true) && div2.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  tell #d2 then add .bar end  add .foo\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"bar\")))
    (assert (dom-has-class? _el-d1 \"foo\"))
    (assert (dom-has-class? _el-d2 \"bar\"))
    (assert (not (dom-has-class? _el-d2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "ignores null"
  :html "<div id='d1' _='on click                           tell null                            add .bar                          end                          add .foo'></div><div id='d2'></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"foo\").should.equal(true) && div2.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"foo\").should.equal(false)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  tell null then add .bar end  add .foo\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"bar\")))
    (assert (dom-has-class? _el-d1 \"foo\"))
    (assert (not (dom-has-class? _el-d2 \"bar\")))
    (assert (not (dom-has-class? _el-d2 \"foo\")))
  ))")
(~hyperscript/hs-test-card
  :name "you symbol represents the thing being told"
  :html "<div id='d1' _='on click                           tell #d2                            add .bar to you'></div><div id='d2'></div>"
  :action "div1.click()"
  :check "div1.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(false) && div1.classList.contains(\"bar\").should.equal(false) && div2.classList.contains(\"bar\").should.equal(true)"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  tell #d2 then add .bar to you\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert (not (dom-has-class? _el-d1 \"bar\")))
    (assert (dom-has-class? _el-d2 \"bar\"))
  ))")
(~hyperscript/hs-test-card
  :name "your symbol represents the thing being told"
  :html "<div id='d1' _='on click                           tell #d2                            put your innerText into me'></div><div id='d2'>foo</div>"
  :action "div1.click()"
  :check "div1.innerText.should.equal(\"\") && div2.innerText.should.equal(\"foo\") && div1.innerText.should.equal(\"foo\") && div2.innerText.should.equal(\"foo\")"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  tell #d2 then put your innerText into me\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-inner-html _el-d2 \"foo\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    ;; SKIP check: skip div1.innerText.should.equal(\"\")
    ;; SKIP check: skip div2.innerText.should.equal(\"foo\")
    ;; SKIP check: skip div1.innerText.should.equal(\"foo\")
  ))")
(~hyperscript/hs-test-card
  :name "attributes refer to the thing being told"
  :html "<div id='d1' _='on click                           tell #d2                            put @foo into me'></div><div foo='bar' id='d2'></div>"
  :action "div1.click()"
  :check "div1.innerText.should.equal(\"\") && div2.innerText.should.equal(\"\") && div1.innerText.should.equal(\"bar\") && div2.innerText.should.equal(\"\")"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click  tell #d2 then put @foo into me\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-attr _el-d2 \"foo\" \"bar\")
    (dom-append sandbox _el-d1)
    (dom-append sandbox _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    ;; SKIP check: skip div1.innerText.should.equal(\"\")
    ;; SKIP check: skip div2.innerText.should.equal(\"\")
    ;; SKIP check: skip div1.innerText.should.equal(\"bar\")
  ))")
(~hyperscript/hs-test-card
  :name "yourself attribute also works"
  :html "<div id=\"d1\" _=\"on click tell #d2 remove yourself\"><div id=\"d2\"></div></div>"
  :action "div1.click()"
  :check "div1.innerHTML.should.equal(`<div id=\"d2\"></div>`) && div1.innerHTML.should.equal(\"\")"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click tell #d2 remove yourself\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-append sandbox _el-d1)
    (dom-append _el-d1 _el-d2)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert= (dom-inner-html _el-d1) \"\")
  ))")
(~hyperscript/hs-test-card
  :name "tell terminates with a feature"
  :html "<div id=\"d1\" _=\"on click tell #d2 remove yourself on click tell #d3 remove yourself\"><div id=\"d2\"></div><div id=\"d3\"></div></div>"
  :action "div1.click()"
  :check "div1.innerHTML.should.equal(`<div id=\"d2\"></div><div id=\"d3\"></div>`) && div1.innerHTML.should.equal(\"\")"
  :run-src "(fn (sandbox)
  (let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
    (dom-set-attr _el-d1 \"id\" \"d1\")
    (dom-set-attr _el-d1 \"_\" \"on click tell #d2 remove yourself on click tell #d3 remove yourself\")
    (dom-set-attr _el-d2 \"id\" \"d2\")
    (dom-set-attr _el-d3 \"id\" \"d3\")
    (dom-append sandbox _el-d1)
    (dom-append _el-d1 _el-d2)
    (dom-append _el-d1 _el-d3)
    (hs-activate! _el-d1)
    (dom-dispatch _el-d1 \"click\" nil)
    (assert= (dom-inner-html _el-d1) \"\")
  ))"))))
