Hyperscript gallery: one-per-file page migration (76 pages)
Migrates hyperscript demo/reference pages from grouped index files into one-per-page directory layout. Each gallery-<topic>/index.sx is a single defpage with its own demo, matching the one-per-file convention used elsewhere in sx/sx/applications/. Covers: control (call/go/if/log/repeat/settle), dom (add/append/empty/ focus/hide/measure/morph/put/remove/reset/scroll/set/show/swap/take/ toggle), events (asyncError/bootstrap/dialog/fetch/halt/init/on/pick/ send/socket/tell/wait/when), expressions (asExpression/attributeRef/ closest/collectionExpressions/comparisonOperator/default/in/increment/ logicalOperator/mathOperator/no/objectLiteral/queryRef/select/splitJoin), language (askAnswer/assignableElements/component/cookies/def/dom-scope/ evalStatically/js/parser/relativePositionalExpression/scoping), and reactivity (bind/live/liveTemplate/reactive-properties/resize/transition). Adds _islands/hs-test-card.sx — a shared island for hyperscript demos. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
99
sx/sx/applications/hyperscript/_islands/hs-test-card.sx
Normal file
99
sx/sx/applications/hyperscript/_islands/hs-test-card.sx
Normal file
@@ -0,0 +1,99 @@
|
||||
;; Live test card — renders one upstream hyperscript test as an interactive demo.
|
||||
;; :run-src is an SX SOURCE STRING like "(fn (sandbox) …)". The island parses
|
||||
;; + evals it at Run time. Strings round-trip through aser cleanly; anything
|
||||
;; callable-shaped (fn-list or actual lambda) gets rewritten to "<lambda>" and
|
||||
;; blows up on re-parse.
|
||||
(defisland
|
||||
~hyperscript/hs-test-card
|
||||
(&key name html action check run-src)
|
||||
(let
|
||||
((status (signal "idle"))
|
||||
(message (signal ""))
|
||||
(sandbox-ref (dict "current" nil)))
|
||||
(let
|
||||
((run-test (fn (e) (let ((sandbox (get sandbox-ref "current"))) (when sandbox (dom-set-inner-html sandbox "") (reset! status "running") (reset! message "") (guard (err (true (do (reset! status "fail") (reset! message (str err))))) (let ((runner-fn (eval-expr-cek (first (sx-parse run-src))))) (runner-fn sandbox)) (reset! status "pass") (reset! message "all assertions held"))))))
|
||||
(reset-test
|
||||
(fn
|
||||
(e)
|
||||
(let
|
||||
((sandbox (get sandbox-ref "current")))
|
||||
(when sandbox (dom-set-inner-html sandbox ""))
|
||||
(reset! status "idle")
|
||||
(reset! message ""))))
|
||||
(dot-colour
|
||||
(computed
|
||||
(fn
|
||||
()
|
||||
(let
|
||||
((s (deref status)))
|
||||
(cond
|
||||
((= s "pass") "#16a34a")
|
||||
((= s "fail") "#dc2626")
|
||||
((= s "running") "#7c3aed")
|
||||
(true "#a8a29e"))))))
|
||||
(dot-glyph
|
||||
(computed
|
||||
(fn
|
||||
()
|
||||
(let
|
||||
((s (deref status)))
|
||||
(cond
|
||||
((= s "pass") "✓")
|
||||
((= s "fail") "✗")
|
||||
((= s "running") "⟳")
|
||||
(true "○"))))))
|
||||
(result-text
|
||||
(computed
|
||||
(fn
|
||||
()
|
||||
(let
|
||||
((s (deref status)) (m (deref message)))
|
||||
(cond
|
||||
((= s "pass") (str "PASS — " m))
|
||||
((= s "fail") (str "FAIL — " m))
|
||||
((= s "running") "running…")
|
||||
(true "not run")))))))
|
||||
(div
|
||||
:class "hs-test-card"
|
||||
:style "border:1px solid #e7e5e4;border-radius:0.5rem;padding:0.75rem;background:#fff;margin-bottom:0.75rem"
|
||||
(div
|
||||
:style "display:flex;align-items:center;gap:0.5rem;margin-bottom:0.5rem"
|
||||
(span
|
||||
:style (str
|
||||
"font-size:1.25rem;font-weight:700;color:"
|
||||
(deref dot-colour))
|
||||
(deref dot-glyph))
|
||||
(span :style "font-weight:500;color:#292524" name)
|
||||
(span
|
||||
:style "margin-left:auto;font-size:0.75rem;color:#78716c"
|
||||
(deref result-text)))
|
||||
(div
|
||||
:style "font-size:0.75rem;font-family:ui-monospace,monospace;background:#fafaf9;border:1px solid #e7e5e4;border-radius:0.25rem;padding:0.5rem;margin-bottom:0.5rem;white-space:pre-wrap;overflow-x:auto"
|
||||
(div :style "color:#78716c" "HTML")
|
||||
(div :style "color:#292524;margin-bottom:0.25rem" html)
|
||||
(when
|
||||
action
|
||||
(div
|
||||
(div :style "color:#78716c" "action")
|
||||
(div :style "color:#292524;margin-bottom:0.25rem" action)))
|
||||
(when
|
||||
check
|
||||
(div
|
||||
(div :style "color:#78716c" "check")
|
||||
(div :style "color:#292524" check))))
|
||||
(div
|
||||
:style "border:1px dashed #d6d3d1;border-radius:0.25rem;padding:0.5rem;margin-bottom:0.5rem;min-height:2.5rem;background:#fafaf9"
|
||||
(div
|
||||
:style "font-size:0.625rem;color:#a8a29e;margin-bottom:0.25rem"
|
||||
"sandbox")
|
||||
(div :ref sandbox-ref :class "hs-test-sandbox"))
|
||||
(div
|
||||
:style "display:flex;gap:0.5rem"
|
||||
(button
|
||||
:on-click run-test
|
||||
:style "padding:0.25rem 0.75rem;border:1px solid #7c3aed;background:#7c3aed;color:#fff;border-radius:0.25rem;font-size:0.875rem;cursor:pointer"
|
||||
"Run")
|
||||
(button
|
||||
:on-click reset-test
|
||||
:style "padding:0.25rem 0.75rem;border:1px solid #d6d3d1;background:#fff;color:#44403c;border-radius:0.25rem;font-size:0.875rem;cursor:pointer"
|
||||
"Reset"))))))
|
||||
@@ -0,0 +1,14 @@
|
||||
;; Demo tests for the hyperscript `call` gallery.
|
||||
;; These prove the test-index wiring — more detailed tests can be added later.
|
||||
|
||||
(deftest
|
||||
gallery-call-loads
|
||||
:runner :playwright
|
||||
:url "/sx/(applications.(hyperscript.(gallery-control-call)))"
|
||||
(assert-text "h1,h2" :contains "call"))
|
||||
|
||||
(deftest
|
||||
gallery-call-has-cards
|
||||
:runner :playwright
|
||||
:url "/sx/(applications.(hyperscript.(gallery-control-call)))"
|
||||
(assert-count "[data-sx-island]" :gte 1))
|
||||
91
sx/sx/applications/hyperscript/gallery-control-call/index.sx
Normal file
91
sx/sx/applications/hyperscript/gallery-control-call/index.sx
Normal file
@@ -0,0 +1,91 @@
|
||||
;; 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: call (6 tests — 6 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream call tests. 6 of 6 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call javascript instance functions"
|
||||
:html "<div id='d1' _='on click call document.getElementById(\"d1\") then put it into window.results'></div>"
|
||||
:action "d1.click()"
|
||||
:check "value.should.equal(d1)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click call document.getElementById(\\\"d1\\\") then put it into window.results\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
;; SKIP check: skip value.should.equal(d1)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call global javascript functions"
|
||||
:html "<div _='on click call globalFunction(\"foo\")'></div>"
|
||||
:action "div.click()"
|
||||
:check "\"foo\".should.equal(calledWith)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call globalFunction(\\\"foo\\\")\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip \"foo\".should.equal(calledWith)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call no argument functions"
|
||||
:html "<div _='on click call globalFunction()'></div>"
|
||||
:action "div.click()"
|
||||
:check "called.should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call globalFunction()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip called.should.equal(true)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call functions w/ underscores"
|
||||
:html "<div _='on click call global_function()'></div>"
|
||||
:action "div.click()"
|
||||
:check "called.should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call global_function()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip called.should.equal(true)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call functions w/ dollar signs"
|
||||
:html "<div _='on click call $()'></div>"
|
||||
:action "div.click()"
|
||||
:check "called.should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call $()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip called.should.equal(true)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "call functions that return promises are waited on"
|
||||
:html "<div _='on click call promiseAnInt() then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerText.should.equal(\"\") && div.innerText.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call promiseAnInt() then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"42\")
|
||||
))"))))
|
||||
41
sx/sx/applications/hyperscript/gallery-control-go/index.sx
Normal file
41
sx/sx/applications/hyperscript/gallery-control-go/index.sx
Normal file
@@ -0,0 +1,41 @@
|
||||
;; 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: go (5 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream go tests. 0 of 5 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can parse go to with string URL"
|
||||
:html "<div _='on click go to \\\"#test-hash\\\"'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "deprecated url keyword still parses"
|
||||
:html "<div _='on click go to url /test'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "go to naked URL starting with / parses"
|
||||
:html "<div _='on click go to /test/path'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "go to element scrolls"
|
||||
:html "<div style='height: 2000px'></div><div id='target'>Target</div><div _='on click go to #target'></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "deprecated scroll form still works"
|
||||
:html "<div style='height: 2000px'></div><div id='target'>Target</div><div _='on click go to the top of #target'></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
253
sx/sx/applications/hyperscript/gallery-control-if/index.sx
Normal file
253
sx/sx/applications/hyperscript/gallery-control-if/index.sx
Normal file
@@ -0,0 +1,253 @@
|
||||
;; 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: if (19 tests — 18 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream if tests. 18 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic true branch works"
|
||||
:html "<div _='on click if true put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic true branch works with multiple commands"
|
||||
:html "<div _='on click if true log me then put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true log me then put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic true branch works with end"
|
||||
:html "<div _='on click if true put \"foo\" into me.innerHTML end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true put \\\"foo\\\" into me.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic true branch works with naked else"
|
||||
:html "<div _='on click if true put \"foo\" into me.innerHTML else'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true put \\\"foo\\\" into me.innerHTML else\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic true branch works with naked else end"
|
||||
:html "<div _='on click if true put \"foo\" into me.innerHTML else end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true put \\\"foo\\\" into me.innerHTML else end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic else branch works"
|
||||
:html "<div _='on click if false else put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic else branch works with end"
|
||||
:html "<div _='on click if false else put \"foo\" into me.innerHTML end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else put \\\"foo\\\" into me.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic else if branch works"
|
||||
:html "<div _='on click if false else if true put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else if true put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic else if branch works with end"
|
||||
:html "<div _='on click if false else if true put \"foo\" into me.innerHTML end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else if true put \\\"foo\\\" into me.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "otherwise alias works"
|
||||
:html "<div _='on click if false otherwise put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false otherwise put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "triple else if branch works"
|
||||
:html "<div _='on click if false else if false else put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else if false else put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "triple else if branch works with end"
|
||||
:html "<div _='on click if false else if false else put \"foo\" into me.innerHTML end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else if false else put \\\"foo\\\" into me.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic else branch works with multiple commands"
|
||||
:html "<div _='on click if false put \"bar\" into me.innerHTML else log me then put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false put \\\"bar\\\" into me.innerHTML else log me then put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "true branch with a wait works"
|
||||
:html "<div _='on click if true wait 10 ms then put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\") && d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if true wait 10 ms then put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "false branch with a wait works"
|
||||
:html "<div _='on click if false else wait 10 ms then put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\") && d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false else wait 10 ms then put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "if properly passes execution along if child is not executed"
|
||||
:html "<div _='on click if false end put \"foo\" into me.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if false end put \\\"foo\\\" into me.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "if properly supports nested if statements and end block"
|
||||
:html "<div _='on click \\n if window.tmp then\\n put \"foo\" into me\\n else if not window.tmp then\\n // do nothing\\n end\\n catch e\\n // just here for the parsing...\\n'</div>"
|
||||
:action "d1.click(); d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\") && d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if window.tmp then put \\\"foo\\\" into me then else if not window.tmp then // do nothing then end catch e then // just here for the parsing... then\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "if on new line does not join w/ else"
|
||||
:html "<div _='on click \\n if window.tmp then\\n else\\n if window.tmp then end\\n put \"foo\" into me\\n end\\n '</div>"
|
||||
:action "d1.click(); d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\") && d1.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click if window.tmp then else then if window.tmp then end put \\\"foo\\\" into me then end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "passes the sieve test"
|
||||
:html "(no make() call)"
|
||||
:action "(see body)"
|
||||
:check "evalHyperScript(str, {locals: {x: 1}}).should.equal(1) && evalHyperScript(str, {locals: {x: 2}}).should.equal(2) && evalHyperScript(str, {locals: {x: 3}}).should.equal(3) && evalHyperScript(str, {locals: {x: 4}}).should.equal(4) && evalHyperScript(str, {locals: {x: 5}}).should.equal(5) && evalHyperScript(str, {locals: {x: 6}}).should.equal(6) && evalHyperScript(str, {locals: {x: 6}}).should.equal(6) && evalHyperScript(str, {locals: {x: 7}}).should.equal(6) && evalHyperScript(str, {locals: {x: 8}}).should.equal(6) && evalHyperScript(str, {locals: {x: 9}}).should.equal(6) && evalHyperScript(str, {locals: {x: 10}}).should.equal(10) && evalHyperScript(str, {locals: {x: 11}}).should.equal(10)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
59
sx/sx/applications/hyperscript/gallery-control-log/index.sx
Normal file
59
sx/sx/applications/hyperscript/gallery-control-log/index.sx
Normal file
@@ -0,0 +1,59 @@
|
||||
;; 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: log (4 tests — 4 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream log tests. 4 of 4 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can log single item"
|
||||
:html "<div _='on click log me'></div>"
|
||||
:action "d1.click()"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click log me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can log multiple items"
|
||||
:html "<div _='on click log me, my'></div>"
|
||||
:action "d1.click()"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click log me, my\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can log multiple items with debug"
|
||||
:html "<div _='on click log me, my with console.debug'></div>"
|
||||
:action "d1.click()"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click log me, my with console.debug\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can log multiple items with error"
|
||||
:html "<div _='on click log me, my with console.error'></div>"
|
||||
:action "d1.click()"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click log me, my with console.error\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
))"))))
|
||||
381
sx/sx/applications/hyperscript/gallery-control-repeat/index.sx
Normal file
381
sx/sx/applications/hyperscript/gallery-control-repeat/index.sx
Normal file
@@ -0,0 +1,381 @@
|
||||
;; 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: repeat (30 tests — 20 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream repeat tests. 20 of 30 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic for loop works"
|
||||
:html "<div _='on click repeat for x in [1, 2, 3] put x at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"123\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat for x in [1, 2, 3] put x at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"123\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic for loop with null works"
|
||||
:html "<div _='on click repeat for x in null put x at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat for x in null put x at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "waiting in for loop works"
|
||||
:html "<div _='on click repeat for x in [1, 2, 3]\\n log me put x at end of me\\n wait 1ms\\n end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"1\") && d1.innerHTML.should.equal(\"123\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat for x in [1, 2, 3] log me then put x at end of me then wait 1ms then end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"123\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic raw for loop works"
|
||||
:html "<div _='on click for x in [1, 2, 3] put x at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"123\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click for x in [1, 2, 3] put x at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"123\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic raw for loop works"
|
||||
:html "<div _='on click for x in null put x at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click for x in null put x at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "waiting in raw for loop works"
|
||||
:html "<div _='on click for x in [1, 2, 3]\\n put x at end of me\\n wait 1ms\\n end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"1\") && d1.innerHTML.should.equal(\"123\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click for x in [1, 2, 3] put x at end of me then wait 1ms then end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"123\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "repeat forever works"
|
||||
:html "<script type='text/hyperscript'> def repeatForeverWithReturn() set retVal to 0 repeat forever set retVal to retVal + 1 if retVal == 5 then return retVal end end end</script><div id='d1' _='on click put repeatForeverWithReturn() into my.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put repeatForeverWithReturn() into my.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "repeat forever works w/o keyword"
|
||||
:html "<script type='text/hyperscript'> def repeatForeverWithReturn() set retVal to 0 repeat set retVal to retVal + 1 if retVal == 5 then return retVal end end end</script><div id='d1' _='on click put repeatForeverWithReturn() into my.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put repeatForeverWithReturn() into my.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic in loop works"
|
||||
:html "<div _='on click repeat in [1, 2, 3] put it at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"123\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat in [1, 2, 3] put it at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"123\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "index syntax works"
|
||||
:html "<div _='on click repeat for x in [\"a\", \"ab\", \"abc\"] index i put x + i at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"a0ab1abc2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat for x in [\\\"a\\\", \\\"ab\\\", \\\"abc\\\"] index i then put x + i at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"a0ab1abc2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "indexed by syntax works"
|
||||
:html "<div _='on click repeat for x in [\"a\", \"ab\", \"abc\"] indexed by i put x + i at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"a0ab1abc2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat for x in [\\\"a\\\", \\\"ab\\\", \\\"abc\\\"] indexed by i then put x + i at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"a0ab1abc2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "while keyword works"
|
||||
:html "<script type='text/hyperscript'> def repeatWhileTest() set retVal to 0 repeat while retVal < 5 set retVal to retVal + 1 end return retVal end</script><div id='d1' _='on click put repeatWhileTest() into my.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put repeatWhileTest() into my.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "until keyword works"
|
||||
:html "<script type='text/hyperscript'> def repeatUntilTest() set retVal to 0 repeat until retVal == 5 set retVal to retVal + 1 end return retVal end</script><div id='d1' _='on click put repeatUntilTest() into my.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put repeatUntilTest() into my.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "until event keyword works"
|
||||
:html "<div id='untilTest'></div> | <script type='text/hyperscript'> def repeatUntilTest() repeat until event click from #untilTest wait 2ms end return 42 end</script>"
|
||||
:action "div.click()"
|
||||
:check "value.should.equal(42)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-untilTest (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-untilTest \"id\" \"untilTest\")
|
||||
(dom-append sandbox _el-untilTest)
|
||||
(dom-dispatch _el-untilTest \"click\" nil)
|
||||
;; SKIP check: skip value.should.equal(42)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "only executes the init expression once"
|
||||
:html "<script type='text/hyperscript'> def getArray() set window.called to (window.called or 0) + 1 return [1, 2, 3] end</script><div id='d1' _='on click for x in getArray() put x into my.innerHTML end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"3\") && window.called.should.equal(1)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click for x in getArray() put x into my.innerHTML end\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"3\")
|
||||
;; SKIP check: skip window.called.should.equal(1)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can nest loops"
|
||||
:html "<script type='text/hyperscript'> def sprayInto(elt) for x in [1, 2, 3] for y in [1, 2, 3] put x * y at end of elt end end end</script><div id='d1' _='on click call sprayInto(me)'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"123246369\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click call sprayInto(me)\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"123246369\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic times loop works"
|
||||
:html "<div _='on click repeat 3 times put \"a\" at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"aaa\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat 3 times put \\\"a\\\" at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"aaa\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "times loop with expression works"
|
||||
:html "<div _='on click repeat 3 + 3 times put \"a\" at end of me end'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"aaaaaa\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat 3 + 3 times put \\\"a\\\" at end of me end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"aaaaaa\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "loop continue works"
|
||||
:html "<div _=\"on click
|
||||
repeat 2 times
|
||||
for x in ['A', 'B', 'C', 'D']
|
||||
if (x != 'D') then
|
||||
put 'success ' + x + '. ' at end of me
|
||||
continue
|
||||
put 'FAIL!!. ' at end of me
|
||||
end
|
||||
put 'expected D. ' at end of me
|
||||
end
|
||||
end
|
||||
\"></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"success A. success B. success C. expected D. success A. success B. success C. expected D. \")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat 2 times for x in ['A', 'B', 'C', 'D'] if (x != 'D') then put 'success ' + x + '. ' at end of me then continue then put 'FAIL!!. ' at end of me then end put 'expected D. ' at end of me then end end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"success A. success B. success C. expected D. success A. success B. success C. expected D. \")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "loop break works"
|
||||
:html "<div _=\"on click
|
||||
repeat 2 times
|
||||
for x in ['A', 'B', 'C', 'D']
|
||||
if x is 'C'
|
||||
break
|
||||
end
|
||||
put x at end of me
|
||||
end
|
||||
end
|
||||
\"></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"ABAB\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click repeat 2 times for x in ['A', 'B', 'C', 'D'] if x is 'C' then break then end put x at end of me then end end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"ABAB\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic raw for loop with null works"
|
||||
:html "<div _='on click for x in null put x at end of me end'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic property for loop works"
|
||||
:html "<div _='on click set x to {foo:1, bar:2, baz:3} for prop in x put x[prop] at end of me end'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"123\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bottom-tested repeat until"
|
||||
:html "<div _='on click set x to 0 repeat set x to until x is 3 end put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bottom-tested repeat while"
|
||||
:html "<div _='on click set x to 0 repeat set x to while x < 3 end put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bottom-tested loop always runs at least once"
|
||||
:html "<div _='on click set x to 0 repeat set x to until true end put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "break exits a simple repeat loop"
|
||||
:html "<div _=\"on click
|
||||
set x to 0
|
||||
repeat 10 times
|
||||
set x to x + 1
|
||||
if x is 3 break end
|
||||
end
|
||||
put x into me
|
||||
\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "continue skips rest of iteration in simple repeat loop"
|
||||
:html "<div _=\"on click
|
||||
repeat for x in [1, 2, 3, 4, 5]
|
||||
if x is 3 continue end
|
||||
put x at end of me
|
||||
end
|
||||
\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"1245\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "break exits a for-in loop"
|
||||
:html "<div _=\"on click
|
||||
repeat for x in [1, 2, 3, 4, 5]
|
||||
if x is 4 break end
|
||||
put x at end of me
|
||||
end
|
||||
\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"123\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "break exits a while loop"
|
||||
:html "<div _=\"on click
|
||||
set x to 0
|
||||
repeat while x < 100
|
||||
set x to x + 1
|
||||
if x is 5 break end
|
||||
end
|
||||
put x into me
|
||||
\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"5\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "for loop over undefined skips without error"
|
||||
:html "<div _='on click repeat for x in doesNotExist put x at end of me end then put \\\"done\\\" into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"done\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: settle (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream settle tests. 0 of 1 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-control))"
|
||||
:style "color:#7c3aed" "control"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can settle a collection of elements"
|
||||
:html "<div class='item'></div><div class='item'></div><div id='trigger' _='on click settle <.item/> then add .done to <.item/>'></div>"
|
||||
:action "find('#trigger').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
40
sx/sx/applications/hyperscript/gallery-control/index.sx
Normal file
40
sx/sx/applications/hyperscript/gallery-control/index.sx
Normal file
@@ -0,0 +1,40 @@
|
||||
;; 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 tests: control (65 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-if))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"if")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(19 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-repeat))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"repeat")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(30 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-log))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"log")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-call))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"call")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(6 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-go))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"go")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(5 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-control-settle))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"settle")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
)))
|
||||
265
sx/sx/applications/hyperscript/gallery-dom-add/index.sx
Normal file
265
sx/sx/applications/hyperscript/gallery-dom-add/index.sx
Normal file
@@ -0,0 +1,265 @@
|
||||
;; 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\"))"))))
|
||||
202
sx/sx/applications/hyperscript/gallery-dom-append/index.sx
Normal file
202
sx/sx/applications/hyperscript/gallery-dom-append/index.sx
Normal file
@@ -0,0 +1,202 @@
|
||||
;; 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: append (13 tests — 12 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream append tests. 12 of 13 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 append a string to another string"
|
||||
:html "<div _=\"on click
|
||||
set value to 'Hello there.' then
|
||||
append ' General Kenobi.' to value then
|
||||
set my.innerHTML to value\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"Hello there. General Kenobi.\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 'Hello there.' then append ' General Kenobi.' to value then set my.innerHTML to value\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"Hello there. General Kenobi.\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value into an array"
|
||||
:html "<div _=\"on click
|
||||
set value to [1,2,3]
|
||||
append 4 to value
|
||||
set my.innerHTML to value as String\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1,2,3,4\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to [1,2,3] then append 4 to value then set my.innerHTML to value as String\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1,2,3,4\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to 'it'"
|
||||
:html "<div _=\"on click
|
||||
set result to [1,2,3]
|
||||
append 4
|
||||
put it as String into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1,2,3,4\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set result to [1,2,3] then append 4 then put it as String into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1,2,3,4\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to a DOM node"
|
||||
:html "<div _=\"on click
|
||||
append '<span>This is my inner HTML</span>' to me
|
||||
append '<b>With Tags</b>' to me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"<span>This is my inner HTML</span><b>With Tags</b>\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click append '<span>This is my inner HTML</span>' to me then append '<b>With Tags</b>' to me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"<span>This is my inner HTML</span><b>With Tags</b>\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to a DOM element"
|
||||
:html "<div id=\"content\" _=\"on click
|
||||
append 'Content' to #content\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"Content\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-content (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-content \"id\" \"content\")
|
||||
(dom-set-attr _el-content \"_\" \"on click append 'Content' to #content\")
|
||||
(dom-append sandbox _el-content)
|
||||
(hs-activate! _el-content)
|
||||
(dom-dispatch _el-content \"click\" nil)
|
||||
(assert= (dom-inner-html _el-content) \"Content\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to I"
|
||||
:html "<div _=\"on click
|
||||
append 'Content' to I\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"Content\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click append 'Content' to I\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"Content\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to an object property"
|
||||
:html "<div id=\"id\" _=\"on click append '_new' to my id\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.id.should.equal(\"id_new\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-id (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-id \"id\" \"id\")
|
||||
(dom-set-attr _el-id \"_\" \"on click append '_new' to my id\")
|
||||
(dom-append sandbox _el-id)
|
||||
(hs-activate! _el-id)
|
||||
(dom-dispatch _el-id \"click\" nil)
|
||||
;; SKIP check: skip div.id.should.equal(\"id_new\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "multiple appends work"
|
||||
:html "<div id=\"id\" _=\"on click get 'foo' then append 'bar' then append 'doh' then append it to me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"foobardoh\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-id (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-id \"id\" \"id\")
|
||||
(dom-set-attr _el-id \"_\" \"on click get 'foo' then append 'bar' then append 'doh' then append it to me\")
|
||||
(dom-append sandbox _el-id)
|
||||
(hs-activate! _el-id)
|
||||
(dom-dispatch _el-id \"click\" nil)
|
||||
(assert= (dom-inner-html _el-id) \"foobardoh\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "append to undefined ignores the undefined"
|
||||
:html "<div id=\"id\" _=\"on click append 'bar' then append it to me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-id (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-id \"id\" \"id\")
|
||||
(dom-set-attr _el-id \"_\" \"on click append 'bar' then append it to me\")
|
||||
(dom-append sandbox _el-id)
|
||||
(hs-activate! _el-id)
|
||||
(dom-dispatch _el-id \"click\" nil)
|
||||
(assert= (dom-inner-html _el-id) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "append preserves existing content rather than overwriting it"
|
||||
:html "<div _=\"on click append '<a>New Content</a>' to me\"><button id=\"btn1\">Click Me</button></div>"
|
||||
:action "btn.click(); div.click(); btn.click()"
|
||||
:check "clicks.should.equal(1) && div.innerHTML.should.contain(\"New Content\") && btn.parentNode.should.equal(div)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-btn1 (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click append '<a>New Content</a>' to me\")
|
||||
(dom-set-attr _el-btn1 \"id\" \"btn1\")
|
||||
(dom-set-inner-html _el-btn1 \"Click Me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-btn1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip clicks.should.equal(1)
|
||||
;; SKIP check: skip div.innerHTML.should.contain(\"New Content\")
|
||||
;; SKIP check: skip btn.parentNode.should.equal(div)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "new content added by append will be live"
|
||||
:html "<div _=\"on click append \\`<button id='b1' _='on click increment window.temp'>Test</button>\\` to me\"></div>"
|
||||
:action "div.click(); btn.click()"
|
||||
:check "window.temp.should.equal(1)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click append `<button id='b1' _='on click increment window.temp'>Test</button>` to me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip window.temp.should.equal(1)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "new DOM content added by append will be live"
|
||||
:html "<div _=\"on click make a <span.topping/> then append it to me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "span.classList.contains(\"topping\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click make a <span.topping/> then append it to me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"topping\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can append a value to a set"
|
||||
:html "<div _=\"on click
|
||||
set :s to [1,2] as Set
|
||||
append 3 to :s
|
||||
append 1 to :s
|
||||
put :s.size into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
123
sx/sx/applications/hyperscript/gallery-dom-empty/index.sx
Normal file
123
sx/sx/applications/hyperscript/gallery-dom-empty/index.sx
Normal file
@@ -0,0 +1,123 @@
|
||||
;; 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: empty (13 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream empty tests. 0 of 13 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 empty an element"
|
||||
:html "<div id='d1'><p>hello</p><p>world</p></div><button _='on click empty #d1'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"helloworld\"); toHaveText(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "empty with no target empties me"
|
||||
:html "<div _='on click empty'>content</div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"content\"); toHaveText(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty multiple elements"
|
||||
:html "<div class='clearme'><p>a</p></div><div class='clearme'><p>b</p></div><button _='on click empty .clearme'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty an array"
|
||||
:html "<div _=\"on click
|
||||
set :arr to [1,2,3]
|
||||
empty :arr
|
||||
put :arr.length into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"0\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a set"
|
||||
:html "<div _=\"on click
|
||||
set :s to [1,2,3] as Set
|
||||
empty :s
|
||||
put :s.size into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"0\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a map"
|
||||
:html "<div _=\"on click
|
||||
set :m to {a:1, b:2} as Map
|
||||
empty :m
|
||||
put :m.size into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"0\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a text input"
|
||||
:html "
|
||||
<input type=\"text\" id=\"t1\" value=\"hello\" />
|
||||
<button _=\"on click empty #t1\">Empty</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue(\"hello\"); toHaveValue(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a textarea"
|
||||
:html "
|
||||
<textarea id=\"ta1\">some text</textarea>
|
||||
<button _=\"on click empty #ta1\">Empty</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a checkbox"
|
||||
:html "
|
||||
<input type=\"checkbox\" id=\"cb1\" checked />
|
||||
<button _=\"on click empty #cb1\">Empty</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a select"
|
||||
:html "
|
||||
<select id=\"sel1\">
|
||||
<option value=\"a\">A</option>
|
||||
<option value=\"b\" selected>B</option>
|
||||
</select>
|
||||
<button _=\"on click empty #sel1\">Empty</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toBe(-1)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can empty a form (clears all inputs)"
|
||||
:html "
|
||||
<form id=\"f1\">
|
||||
<input type=\"text\" id=\"t2\" value=\"val\" />
|
||||
<textarea id=\"ta2\">text</textarea>
|
||||
<input type=\"checkbox\" id=\"cb2\" checked />
|
||||
</form>
|
||||
<button _=\"on click empty #f1\">Empty</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue(\"\"); toHaveValue(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "clear is an alias for empty"
|
||||
:html "
|
||||
<input type=\"text\" id=\"t3\" value=\"hello\" />
|
||||
<button _=\"on click clear #t3\">Clear</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue(\"hello\"); toHaveValue(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "clear works on elements"
|
||||
:html "<div id='d2'><p>content</p></div><button _='on click clear #d2'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"content\"); toHaveText(\"\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
29
sx/sx/applications/hyperscript/gallery-dom-focus/index.sx
Normal file
29
sx/sx/applications/hyperscript/gallery-dom-focus/index.sx
Normal file
@@ -0,0 +1,29 @@
|
||||
;; 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: focus (3 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream focus tests. 0 of 3 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 focus an element"
|
||||
:html "<input id='i1' /><button _='on click focus #i1'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toBe(\"i1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "focus with no target focuses me"
|
||||
:html "<input id='i1' _='on click focus' />"
|
||||
:action "find('#i1').dispatchEvent('click')"
|
||||
:check "toBe(\"i1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can blur an element"
|
||||
:html "<input id='i1' _='on focus wait 10ms then blur me' />"
|
||||
:action "find('#i1').focus()"
|
||||
:check "toBe(\"BODY\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
194
sx/sx/applications/hyperscript/gallery-dom-hide/index.sx
Normal file
194
sx/sx/applications/hyperscript/gallery-dom-hide/index.sx
Normal file
@@ -0,0 +1,194 @@
|
||||
;; 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: hide (14 tests — 13 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream hide tests. 13 of 14 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 hide element with no target"
|
||||
:html "<div _='on click hide'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"none\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "hide element then show element retains original display"
|
||||
:html "<div _='on click 1 hide on click 2 show'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.style.display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"none\") && div.style.display.should.equal(\"\") && getComputedStyle(div).display.should.equal(\"block\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 1 hide on click 2 show\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with no target followed by command"
|
||||
:html "<div _='on click hide add .foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && 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 hide add .foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with no target followed by then"
|
||||
:html "<div _='on click hide then add .foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && 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 hide then add .foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with no target with a with"
|
||||
:html "<div _='on click hide with display then add .foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && div.classList.contains(\"foo\").should.equal(false) && getComputedStyle(div).display.should.equal(\"none\") && 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 hide with display then add .foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element, with display:none by default"
|
||||
:html "<div _='on click hide me'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with display:none explicitly"
|
||||
:html "<div _='on click hide me with display'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide me with display\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with opacity:0"
|
||||
:html "<div _='on click hide me with opacity'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide me with opacity\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.opacity
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element with opacity style literal"
|
||||
:html "<div _='on click hide me with *opacity'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide me with *opacity\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.opacity
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide element, with visibility:hidden"
|
||||
:html "<div _='on click hide me with visibility'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click hide me with visibility\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.visibility
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide other elements"
|
||||
:html "<div class=hideme></div> | <div _='on click hide .hideme'></div>"
|
||||
:action "div.click()"
|
||||
:check "getComputedStyle(hideme).display.should.equal(\"block\") && getComputedStyle(hideme).display.should.equal(\"none\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"hideme\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click hide .hideme\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: hideme.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can hide with custom strategy"
|
||||
:html "<div _='on click hide with myHide'></div>"
|
||||
:action "classList.remove(\"foo\"); 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 hide with myHide\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
;; SKIP action: classList.remove__foo__
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set default to custom strategy"
|
||||
:html "<div _='on click hide'></div>"
|
||||
:action "classList.remove(\"foo\"); 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 hide\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
;; SKIP action: classList.remove__foo__
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can filter hide via the when clause"
|
||||
:html "<div id='trigger' _='on click hide <div/> in me when it matches .hideable'> <div id='d1' class='hideable'></div> <div id='d2'></div></div>"
|
||||
:action "find('#trigger').dispatchEvent('click')"
|
||||
:check "toHaveCSS('display', 'none'); toHaveCSS('display', 'block')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
23
sx/sx/applications/hyperscript/gallery-dom-measure/index.sx
Normal file
23
sx/sx/applications/hyperscript/gallery-dom-measure/index.sx
Normal file
@@ -0,0 +1,23 @@
|
||||
;; 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: measure (2 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream measure tests. 0 of 2 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 measure with possessive syntax"
|
||||
:html "<div id='other' style='all: initial; position: fixed; top: 89px'></div><div _=\"on click measure #other\\'s top then set window.measurement to {top: top}\"></div>"
|
||||
:action ""
|
||||
:check "toBe(89)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can measure with of syntax"
|
||||
:html "<div id='other' style='all: initial; position: fixed; top: 89px'></div><div _='on click measure top of #other then set window.measurement to {top: top}'></div>"
|
||||
:action ""
|
||||
:check "toBe(89)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
71
sx/sx/applications/hyperscript/gallery-dom-morph/index.sx
Normal file
71
sx/sx/applications/hyperscript/gallery-dom-morph/index.sx
Normal file
@@ -0,0 +1,71 @@
|
||||
;; 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: morph (10 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream morph tests. 0 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-dom))"
|
||||
:style "color:#7c3aed" "dom"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic morph updates content"
|
||||
:html "<div id='target'>old</div><button _='on click morph #target to \\\"<div id=target>new</div>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph preserves element identity"
|
||||
:html "<div id='target'>old</div><button id='go' _='on click morph #target to \\\"<div id=target>new</div>\\\"'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\"); toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph updates attributes"
|
||||
:html "<div id='target' class='old'>content</div><button _='on click morph #target to \\\"<div id=target class=new>content</div>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveClass(\"new\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph adds new children"
|
||||
:html "<div id='target'><span>first</span></div><button id='go' _=\\\"on click morph #target to '<div id=target><span>first</span><span>second</span></div>'\\\">go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check "toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph removes old children"
|
||||
:html "<div id='target'><span>first</span><span>second</span></div><button id='go' _=\\\"on click morph #target to '<div id=target><span>first</span></div>'\\\">go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check "toBe(1)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph initializes hyperscript on new elements"
|
||||
:html "<div id='target'><p>old</p></div><button id='go' _=\\\"on click morph #target to '<div id=target><p id=inner _="on click put `clicked` into me">new</p></div>'\\\">go</button>"
|
||||
:action "find('#go').dispatchEvent('click'); find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\"); toHaveText(\"clicked\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph cleans up removed hyperscript elements"
|
||||
:html "<div id='target'> <div id='child' _='on click put \\\"alive\\\" into me'>child</div></div><button _='on click morph #target to \\\"<div id=target><p>replaced</p></div>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph reorders children by id"
|
||||
:html "<div id='target'> <div id='a'>A</div> <div id='b'>B</div></div><button _='on click morph #target to \\\"<div id=target><div id=b>B2</div><div id=a>A2</div></div>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toEqual([\"b\", \"a\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph preserves matched child identity"
|
||||
:html "<div id='target'><div id='child'>old</div></div><button id='go' _='on click morph #target to \\\"<div id=target><div id=child>new</div></div>\\\"'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check "toBe(true); toBe(\"new\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "morph with variable content"
|
||||
:html "<div id='target'>original</div><button id='go' _='on click set content to \\\"<div id=target>morphed</div>\\\" then morph #target to content'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check "toHaveText(\"morphed\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
561
sx/sx/applications/hyperscript/gallery-dom-put/index.sx
Normal file
561
sx/sx/applications/hyperscript/gallery-dom-put/index.sx
Normal file
@@ -0,0 +1,561 @@
|
||||
;; 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: put (38 tests — 35 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream put tests. 35 of 38 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 set properties"
|
||||
:html "<div id='d1' _='on click put \"foo\" into #d1.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" into #d1.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put directly into nodes"
|
||||
:html "<div id='d1' _='on click put \"foo\" into #d1'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.textContent.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" into #d1\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-text-content _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put nodes into nodes"
|
||||
:html "<div id='d1'></div> | <div id='d2' _='on click put #d1 into #d2'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d2.firstChild.should.equal(d1)"
|
||||
: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-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-d2 \"_\" \"on click put #d1 into #d2\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-d2)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
;; SKIP check: skip d2.firstChild.should.equal(d1)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put directly into symbols"
|
||||
:html "<div _='on click put \"foo\" into me'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "me symbol doesn't get stomped on direct write"
|
||||
:html "<div _='on click put \"foo\" into me then put \"bar\" into me'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into me then put \\\"bar\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set styles"
|
||||
:html "<div _='on click put \"red\" into my.style.color'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into my.style.color\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 set javascript globals"
|
||||
:html "<div _='on click put \"red\" into window.temp'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "window[\"temp\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into window.temp\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip window[\"temp\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into class ref w/ flatmapped property"
|
||||
:html "<div _='on click put \"foo\" into .divs.parentElement.innerHTML'></div> | <div id='d1'><div class='divs'></div></div><div id='d2'><div class='divs'></div></div>"
|
||||
:action "div.click()"
|
||||
:check "d1.textContent.should.equal(\"foo\") && d2.textContent.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-div4 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into .divs.parentElement.innerHTML\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-add-class _el-div2 \"divs\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-add-class _el-div4 \"divs\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append _el-d1 _el-div2)
|
||||
(dom-append sandbox _el-d2)
|
||||
(dom-append _el-d2 _el-div4)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-text-content _el-d1) \"foo\")
|
||||
(assert= (dom-text-content _el-d2) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into class ref w/ flatmapped property using of"
|
||||
:html "<div _='on click put \"foo\" into innerHTML of parentElement of .divs'></div> | <div id='d1'><div class='divs'></div></div><div id='d2'><div class='divs'></div></div>"
|
||||
:action "div.click()"
|
||||
:check "d1.textContent.should.equal(\"foo\") && d2.textContent.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-div4 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into innerHTML of parentElement of .divs\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-add-class _el-div2 \"divs\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-add-class _el-div4 \"divs\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append _el-d1 _el-div2)
|
||||
(dom-append sandbox _el-d2)
|
||||
(dom-append _el-d2 _el-div4)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-text-content _el-d1) \"foo\")
|
||||
(assert= (dom-text-content _el-d2) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set local variables"
|
||||
:html "<div id='d1' _='on click put \"foo\" into newVar then put newVar into #d1.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" into newVar then put newVar into #d1.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into id ref"
|
||||
:html "<div id='d1' _='on click put \"foo\" into #d1.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" into #d1.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can insert before"
|
||||
:html "<div id='d2' _='on click put #d1 before #d2'></div> | <div id='d1'>foo</div>"
|
||||
:action "d2.click()"
|
||||
:check "d2.previousSibling.textContent.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d2 (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-d2 \"_\" \"on click put #d1 before #d2\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-inner-html _el-d1 \"foo\")
|
||||
(dom-append sandbox _el-d2)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d2)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
;; SKIP check: skip d2.previousSibling.textContent.should.equal(\"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can insert after"
|
||||
:html "<div id='d1'>foo</div> | <div id='d2' _='on click put #d1 after #d2'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d2.nextSibling.textContent.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-inner-html _el-d1 \"foo\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-d2 \"_\" \"on click put #d1 after #d2\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-d2)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
;; SKIP check: skip d2.nextSibling.textContent.should.equal(\"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can insert after beginning"
|
||||
:html "<div id='d1' _='on click put \"foo\" at start of #d1'>*</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.textContent.should.equal(\"foo*\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" at start of #d1\")
|
||||
(dom-set-inner-html _el-d1 \"*\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-text-content _el-d1) \"foo*\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can insert before end"
|
||||
:html "<div id='d1' _='on click put \"foo\" at end of #d1'>*</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.textContent.should.equal(\"*foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"foo\\\" at end of #d1\")
|
||||
(dom-set-inner-html _el-d1 \"*\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-text-content _el-d1) \"*foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into attribute ref"
|
||||
:html "<div class='divs' _='on click put \"foo\" into @bar'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into @bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref"
|
||||
:html "<div class='divs' _='on click put \"foo\" into my @bar'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"foo\\\" into my @bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref 2"
|
||||
:html "<div class='divs' _=\"on click put 'foo' into #div2's @bar\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put 'foo' into #div2's @bar\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div2 \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref 3"
|
||||
:html "<div class='divs' _=\"on click put 'foo' into @bar of #div2\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put 'foo' into @bar of #div2\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div2 \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into style ref"
|
||||
:html "<div class='divs' _='on click put \"red\" into *color'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into *color\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d1.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref"
|
||||
:html "<div class='divs' _='on click put \"red\" into my *color'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into my *color\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d1.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref 2"
|
||||
:html "<div class='divs' _=\"on click put 'red' into #div2's *color\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put 'red' into #div2's *color\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d2.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref 3"
|
||||
:html "<div class='divs' _=\"on click put 'red' into the *color of #div2\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put 'red' into the *color of #div2\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d2.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "waits on promises"
|
||||
:html "<div id='d1' _='on click put promiseAString() into #d1.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\") && d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put promiseAString() into #d1.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put properties w/ array access syntax"
|
||||
:html "<div _='on click put \"red\" into my style[\"color\"]'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into my style[\\\"color\\\"]\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 put properties w/ array access syntax and var"
|
||||
:html "<div _='on click set foo to \"color\" then put \"red\" into my style[foo]'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set foo to \\\"color\\\" then put \\\"red\\\" into my style[foo]\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 put array vals w/ array access syntax"
|
||||
:html "<div _='on click set arr to [1, 2, 3] put \"red\" into arr[0] put arr[0] into my *color'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set arr to [1, 2, 3] put \\\"red\\\" into arr[0] put arr[0] into my *color\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 put array vals w/ array access syntax and var"
|
||||
:html "<div _='on click set arr to [1, 2, 3] set idx to 0 put \"red\" into arr[idx] put arr[0] into my *color'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set arr to [1, 2, 3] set idx to 0 put \\\"red\\\" into arr[idx] put arr[0] into my *color\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 "properly processes hyperscript in new content in a symbol write"
|
||||
:html "<div _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" into me'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "properly processes hyperscript in new content in a element target"
|
||||
:html "<div id='d1' _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" into <div#d1/>'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" into <div#d1/>\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "properly processes hyperscript in before"
|
||||
:html "<div id='d1' _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" before me'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" before me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "properly processes hyperscript at start of"
|
||||
:html "<div id='d1' _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" at the start of me'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" at the start of me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "properly processes hyperscript at end of"
|
||||
:html "<div id='d1' _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" at the end of me'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" at the end of me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "properly processes hyperscript after"
|
||||
:html "<div id='d1' _='on click put \"<button id=\\\\\"b1\\\\\" _=\\\\\"on click put 42 into me\\\\\">40</button>\" after me'></div>"
|
||||
:action "div.click(); button.click()"
|
||||
:check "button.innerHTML.should.equal(\"40\") && button.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click put \\\"<button id=\\\\\\\"b1\\\\\\\" _=\\\\\\\"on click put 42 into me\\\\\\\">40</button>\\\" after me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is null tolerant"
|
||||
:html "<div class='divs' _='on click put \"red\" into #a-bad-id-that-does-not-exist'></div>"
|
||||
:action "d1.click()"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click put \\\"red\\\" into #a-bad-id-that-does-not-exist\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "put null into attribute removes it"
|
||||
:html "<div id='d1' foo='bar' _='on click put null into @foo'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveAttribute('foo', 'bar'); toHaveAttribute('foo')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put at start of an array"
|
||||
:html "<div _=\"on click
|
||||
set :arr to [2,3]
|
||||
put 1 at start of :arr
|
||||
put :arr as String into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"1,2,3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put at end of an array"
|
||||
:html "<div _=\"on click
|
||||
set :arr to [1,2]
|
||||
put 3 at end of :arr
|
||||
put :arr as String into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"1,2,3\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
190
sx/sx/applications/hyperscript/gallery-dom-remove/index.sx
Normal file
190
sx/sx/applications/hyperscript/gallery-dom-remove/index.sx
Normal file
@@ -0,0 +1,190 @@
|
||||
;; 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: remove (14 tests — 9 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream remove tests. 9 of 14 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 remove class ref on a single div"
|
||||
:html "<div class='foo' _='on click remove .foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-set-attr _el-div \"_\" \"on click remove .foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove class ref on a single form"
|
||||
:html "<form class='foo' _='on click remove .foo'></form>"
|
||||
:action "form.click()"
|
||||
:check "form.classList.contains(\"foo\").should.equal(true) && form.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")))
|
||||
(dom-add-class _el-form \"foo\")
|
||||
(dom-set-attr _el-form \"_\" \"on click remove .foo\")
|
||||
(dom-append sandbox _el-form)
|
||||
(hs-activate! _el-form)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-form \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can target another div for class ref"
|
||||
:html "<div class='foo' id='bar'></div> | <div _='on click remove .foo from #bar'></div>"
|
||||
:action "div.click()"
|
||||
:check "bar.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false) && bar.classList.contains(\"foo\").should.equal(false) && 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-add-class _el-bar \"foo\")
|
||||
(dom-set-attr _el-div \"_\" \"on click remove .foo from #bar\")
|
||||
(dom-append sandbox _el-bar)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-bar \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove non-class attributes"
|
||||
:html "<div foo='bar' _='on click remove [@foo]'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.getAttribute(\"foo\").should.equal(\"bar\") && div.hasAttribute(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click remove [@foo]\")
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-attr? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove elements"
|
||||
:html "<div _='on click remove me'></div>"
|
||||
:action "div.click()"
|
||||
:check "assert.isNotNull(div.parentElement) && assert.isNull(div.parentElement)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click remove me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (nil? (dom-parent _el-div)))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove other elements"
|
||||
:html "<div _='on click remove #that'></div> | <div id='that'></div>"
|
||||
:action "div.click()"
|
||||
:check "assert.isNotNull(div2.parentElement) && assert.isNull(div2.parentElement)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-that (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click remove #that\")
|
||||
(dom-set-attr _el-that \"id\" \"that\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-that)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (nil? (dom-parent _el-that)))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove parent element"
|
||||
:html "<div id='p1'><button id='b1' _=\"on click remove my.parentElement\"></button></div> "
|
||||
:action "btn.click()"
|
||||
:check "assert.isNotNull(div.parentElement) && assert.isNull(div.parentElement)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-p1 (dom-create-element \"div\")) (_el-b1 (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-p1 \"id\" \"p1\")
|
||||
(dom-set-attr _el-b1 \"id\" \"b1\")
|
||||
(dom-set-attr _el-b1 \"_\" \"on click remove my.parentElement\")
|
||||
(dom-append sandbox _el-p1)
|
||||
(dom-append _el-p1 _el-b1)
|
||||
(hs-activate! _el-b1)
|
||||
(dom-dispatch _el-p1 \"click\" nil)
|
||||
(assert (nil? (dom-parent _el-p1)))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove multiple class refs"
|
||||
:html "<div class='foo bar doh' _='on click remove .foo .bar'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(true) && div.classList.contains(\"doh\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"doh\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-add-class _el-div \"bar\")
|
||||
(dom-add-class _el-div \"doh\")
|
||||
(dom-set-attr _el-div \"_\" \"on click remove .foo .bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div \"bar\")))
|
||||
(assert (dom-has-class? _el-div \"doh\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove query refs from specific things"
|
||||
:html "<div><div id='d1' _='on click remove <p/> from me'><p>foo</p>bar</div><p>doh</p></div>"
|
||||
:action "d1.click()"
|
||||
:check "div.innerHTML.includes(\"foo\").should.equal(true) && div.innerHTML.includes(\"bar\").should.equal(true) && div.innerHTML.includes(\"doh\").should.equal(true) && div.innerHTML.includes(\"foo\").should.equal(false) && div.innerHTML.includes(\"bar\").should.equal(true) && div.innerHTML.includes(\"doh\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-p (dom-create-element \"p\")) (_el-p3 (dom-create-element \"p\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click remove <p/> from me\")
|
||||
(dom-set-inner-html _el-p \"foo\")
|
||||
(dom-set-inner-html _el-p3 \"doh\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(dom-append _el-d1 _el-p)
|
||||
(dom-append _el-div _el-p3)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
;; SKIP check: skip div.innerHTML.includes(\"foo\").should.equal(true)
|
||||
;; SKIP check: skip div.innerHTML.includes(\"bar\").should.equal(true)
|
||||
;; SKIP check: skip div.innerHTML.includes(\"doh\").should.equal(true)
|
||||
;; SKIP check: skip div.innerHTML.includes(\"foo\").should.equal(false)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can filter class removal via the when clause"
|
||||
:html "<div id='trigger' _='on click remove .highlight from .item when it matches .old'></div><div id='d1' class='item old highlight'></div><div id='d2' class='item highlight'></div>"
|
||||
:action "find('#trigger').dispatchEvent('click')"
|
||||
:check "toHaveClass(/highlight/); toHaveClass(/highlight/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove CSS properties"
|
||||
:html "<div style='color: red; font-weight: bold;' _='on click remove {color} from me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toBe(''); toBe('bold')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove multiple CSS properties"
|
||||
:html "<div style='color: red; font-weight: bold; opacity: 0.5;' _='on click remove {color; font-weight} from me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toBe(''); toBe(''); toBe('0.5')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove a value from an array"
|
||||
:html "<div _=\"on click
|
||||
set :arr to [1,2,3,4]
|
||||
remove 3 from :arr
|
||||
put :arr as String into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"1,2,4\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can remove a value from a set"
|
||||
:html "<div _=\"on click
|
||||
set :s to ['a','b','c'] as Set
|
||||
remove 'b' from :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\"))"))))
|
||||
92
sx/sx/applications/hyperscript/gallery-dom-reset/index.sx
Normal file
92
sx/sx/applications/hyperscript/gallery-dom-reset/index.sx
Normal file
@@ -0,0 +1,92 @@
|
||||
;; 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: reset (8 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream reset tests. 0 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-dom))"
|
||||
:style "color:#7c3aed" "dom"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset a form"
|
||||
:html "
|
||||
<form id=\"f1\">
|
||||
<input type=\"text\" id=\"t1\" value=\"original\" />
|
||||
<button type=\"button\" _=\"on click set #t1's value to 'changed'\">Change</button>
|
||||
<button type=\"button\" id=\"rst\" _=\"on click reset #f1\">Reset</button>
|
||||
</form>
|
||||
"
|
||||
:action "find('#t1').fill('changed'); find('#rst').dispatchEvent('click')"
|
||||
:check "toHaveValue('changed'); toHaveValue('original')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reset with no target resets me (form)"
|
||||
:html "
|
||||
<form _=\"on custom reset\">
|
||||
<input type=\"text\" id=\"t2\" value=\"default\" />
|
||||
</form>
|
||||
"
|
||||
:action "find('#t2').fill('modified'); find('form').dispatchEvent('custom')"
|
||||
:check "toHaveValue('modified'); toHaveValue('default')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset a text input to defaultValue"
|
||||
:html "
|
||||
<input type=\"text\" id=\"t3\" value=\"hello\" />
|
||||
<button _=\"on click reset #t3\">Reset</button>
|
||||
"
|
||||
:action "find('#t3').fill('goodbye'); find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue('goodbye'); toHaveValue('hello')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset a checkbox"
|
||||
:html "
|
||||
<input type=\"checkbox\" id=\"cb1\" checked />
|
||||
<button _=\"on click reset #cb1\">Reset</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset an unchecked checkbox"
|
||||
:html "
|
||||
<input type=\"checkbox\" id=\"cb2\" />
|
||||
<button _=\"on click reset #cb2\">Reset</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset a textarea"
|
||||
:html "
|
||||
<textarea id=\"ta1\">original text</textarea>
|
||||
<button _=\"on click reset #ta1\">Reset</button>
|
||||
"
|
||||
:action "find('#ta1').fill('new text'); find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue('new text'); toHaveValue('original text')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset a select"
|
||||
:html "
|
||||
<select id=\"sel1\">
|
||||
<option value=\"a\">A</option>
|
||||
<option value=\"b\" selected>B</option>
|
||||
<option value=\"c\">C</option>
|
||||
</select>
|
||||
<button _=\"on click reset #sel1\">Reset</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveValue('c'); toHaveValue('b')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can reset multiple inputs"
|
||||
:html "
|
||||
<input type=\"text\" class=\"resettable\" value=\"one\" />
|
||||
<input type=\"text\" class=\"resettable\" value=\"two\" />
|
||||
<button _=\"on click reset .resettable\">Reset</button>
|
||||
"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
59
sx/sx/applications/hyperscript/gallery-dom-scroll/index.sx
Normal file
59
sx/sx/applications/hyperscript/gallery-dom-scroll/index.sx
Normal file
@@ -0,0 +1,59 @@
|
||||
;; 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: scroll (8 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream scroll tests. 0 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-dom))"
|
||||
:style "color:#7c3aed" "dom"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll to an element"
|
||||
:html "<div style='height: 2000px'></div><div id='target'>Target</div><div _='on click scroll to #target'></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll to top of element"
|
||||
:html "<div style='height: 2000px'></div><div id='target' style='height: 200px'>Target</div><div _='on click scroll to the top of #target'></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll down by amount"
|
||||
:html "<div style='height: 5000px'></div><div _='on click scroll down by 300px'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll up by amount"
|
||||
:html "<div style='height: 5000px'></div><div _='on click scroll up by 100px'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll by without direction (defaults to down)"
|
||||
:html "<div style='height: 5000px'></div><div _='on click scroll by 200px'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll container by amount"
|
||||
:html "<div id='box' style='height: 100px; overflow: auto'> <div style='height: 1000px'>tall</div></div><button id='go' _='on click scroll #box down by 200px'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll to element in container"
|
||||
:html "<div id='box' style='height: 100px; overflow: auto'> <div style='height: 500px'>spacer</div> <div id='item'>target</div></div><button id='go' _='on click scroll to #item in #box'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can scroll left by amount"
|
||||
:html "<div id='box' style='width: 100px; overflow: auto; white-space: nowrap'> <div style='width: 5000px; height: 50px'>wide</div></div><button id='go' _='on click scroll #box right by 300px'>go</button>"
|
||||
:action "find('#go').dispatchEvent('click')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
371
sx/sx/applications/hyperscript/gallery-dom-set/index.sx
Normal file
371
sx/sx/applications/hyperscript/gallery-dom-set/index.sx
Normal file
@@ -0,0 +1,371 @@
|
||||
;; 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: set (25 tests — 24 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream set tests. 24 of 25 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 set properties"
|
||||
:html "<div id='d1' _='on click set #d1.innerHTML to \"foo\"'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click set #d1.innerHTML to \\\"foo\\\"\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set indirect properties"
|
||||
:html "<div id='d1' _='on click set innerHTML of #d1 to \"foo\"'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click set innerHTML of #d1 to \\\"foo\\\"\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set complex indirect properties lhs"
|
||||
:html "<div _='on click set parentNode.innerHTML of #d1 to \"foo\"'><div id='d1'></div></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set parentNode.innerHTML of #d1 to \\\"foo\\\"\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set complex indirect properties rhs"
|
||||
:html "<div _='on click set innerHTML of #d1.parentNode to \"foo\"'><div id='d1'></div></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set innerHTML of #d1.parentNode to \\\"foo\\\"\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set chained indirect properties"
|
||||
:html "<div _='on click set the innerHTML of the parentNode of #d1 to \"foo\"'><div id='d1'></div></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set the innerHTML of the parentNode of #d1 to \\\"foo\\\"\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set styles"
|
||||
:html "<div _='on click set my.style.color to \"red\"'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set my.style.color to \\\"red\\\"\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 set javascript globals"
|
||||
:html "<div _='on click set window.temp to \"red\"'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "window[\"temp\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set window.temp to \\\"red\\\"\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip window[\"temp\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set local variables"
|
||||
:html "<div id='d1' _='on click set newVar to \"foo\" then put newVar into #d1.innerHTML'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click set newVar to \\\"foo\\\" then put newVar into #d1.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into id ref"
|
||||
:html "<div id='d1' _='on click set #d1.innerHTML to \"foo\"'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click set #d1.innerHTML to \\\"foo\\\"\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into class ref"
|
||||
:html "<div class='divs' _='on click set .divs.innerHTML to \"foo\"'></div> | <div class='divs''></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"foo\") && d2.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set .divs.innerHTML to \\\"foo\\\"\")
|
||||
(dom-add-class _el-div1 \"divs\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"foo\")
|
||||
(assert= (dom-inner-html _el-div1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into attribute ref"
|
||||
:html "<div class='divs' _='on click set @bar to \"foo\"'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set @bar to \\\"foo\\\"\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref"
|
||||
:html "<div class='divs' _=\"on click set #div2's @bar to 'foo'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set #div2's @bar to 'foo'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div2 \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref 2"
|
||||
:html "<div class='divs' _=\"on click set #div2's @bar to 'foo'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set #div2's @bar to 'foo'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div2 \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect attribute ref 3"
|
||||
:html "<div class='divs' _=\"on click set @bar of #div2 to 'foo'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.getAttribute(\"bar\").should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set @bar of #div2 to 'foo'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div2 \"bar\") \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into style ref"
|
||||
:html "<div class='divs' _='on click set *color to \"red\"'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set *color to \\\"red\\\"\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d1.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref"
|
||||
:html "<div class='divs' _=\"on click set #div2's *color to 'red'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set #div2's *color to 'red'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d2.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref 2"
|
||||
:html "<div class='divs' _=\"on click set #div2's *color to 'red'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set #div2's *color to 'red'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d2.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set into indirect style ref 3"
|
||||
:html "<div class='divs' _=\"on click set *color of #div2 to 'red'\"></div> | <div id='div2'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d2.style[\"color\"].should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"divs\")
|
||||
(dom-set-attr _el-div \"_\" \"on click set *color of #div2 to 'red'\")
|
||||
(dom-set-attr _el-div2 \"id\" \"div2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d2.style[\"color\"].should.equal(\"red\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set waits on promises"
|
||||
:html "<div id='d1' _='on click set #d1.innerHTML to promiseAString()'></div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerHTML.should.equal(\"\") && d1.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click set #d1.innerHTML to promiseAString()\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-d1) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set many properties at once with object literal"
|
||||
:html "<div _='on click set {bar: 2, baz: 3} on obj'></div>"
|
||||
:action "(see body)"
|
||||
:check "obj.should.deep.equal({ foo: 1, bar: 2, baz: 3 })"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can set props w/ array access syntax"
|
||||
:html "<div _='on click set my style[\"color\"] to \"red\"'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set my style[\\\"color\\\"] to \\\"red\\\"\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 set props w/ array access syntax and var"
|
||||
:html "<div _='on click set foo to \"color\" then set my style[foo] to \"red\"'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set foo to \\\"color\\\" then set my style[foo] to \\\"red\\\"\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 set arrays w/ array access syntax"
|
||||
:html "<div _='on click set arr to [1, 2, 3] set arr[0] to \"red\" set my *color to arr[0]'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set arr to [1, 2, 3] set arr[0] to \\\"red\\\" set my *color to arr[0]\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 set arrays w/ array access syntax and var"
|
||||
:html "<div _='on click set arr to [1, 2, 3] set idx to 0 set arr[idx] to \"red\" set my *color to arr[0]'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.style.color.should.equal(\"red\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set arr to [1, 2, 3] set idx to 0 set arr[idx] to \\\"red\\\" set my *color to arr[0]\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(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 "handles set url regression properly"
|
||||
:html "<div _='on click set trackingcode to `foo` set pdfurl to `https://yyy.xxxxxx.com/path/out/${trackingcode}.pdf` put pdfurl into me'>lolwat</div>"
|
||||
:action "d1.click()"
|
||||
:check "d1.innerText.should.equal(\"https://yyy.xxxxxx.com/path/out/foo.pdf\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set trackingcode to `foo` then set pdfurl to `https://yyy.xxxxxx.com/path/out/${trackingcode}.pdf` then put pdfurl into me\")
|
||||
(dom-set-inner-html _el-div \"lolwat\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip d1.innerText.should.equal(\"https://yyy.xxxxxx.com/path/out/f
|
||||
))"))))
|
||||
23
sx/sx/applications/hyperscript/gallery-dom-show/index.sx
Normal file
23
sx/sx/applications/hyperscript/gallery-dom-show/index.sx
Normal file
@@ -0,0 +1,23 @@
|
||||
;; 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: show (2 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream show tests. 0 of 2 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 "the result in a when clause refers to previous command result, not element being tested"
|
||||
:html "<div _=\\\"on click get 'found' show <span/> in me when the result is 'found'\\\"><span id='s1' style='display:none'>A</span><span id='s2' style='display:none'>B</span></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toBeVisible(); toBeVisible()"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "the result after show...when is the matched elements"
|
||||
:html "<div _=\\\"on click show <p/> in me when its textContent is 'yes' if the result is empty put 'none' into #out else put 'some' into #out\\\"><p style='display:none'>yes</p><p style='display:none'>no</p><span id='out'>--</span></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"some\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
37
sx/sx/applications/hyperscript/gallery-dom-swap/index.sx
Normal file
37
sx/sx/applications/hyperscript/gallery-dom-swap/index.sx
Normal file
@@ -0,0 +1,37 @@
|
||||
;; 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: swap (4 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream swap tests. 0 of 4 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 swap two variables"
|
||||
:html "<div id='d1' _='on click set x to \"a\" then set y to \"b\" then swap x with y then put x + y into me'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"ba\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can swap two properties"
|
||||
:html "<div id='d1' _='on click set #a.textContent to \"hello\" then set #b.textContent to \"world\" then swap #a.textContent with #b.textContent'></div>
|
||||
<span id='a'>x</span><span id='b'>y</span>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"world\"); toHaveText(\"hello\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can swap array elements"
|
||||
:html "<div id='d1' _='on click set arr to [1,2,3] then swap arr[0] with arr[2] then put arr as String into me'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"3,2,1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can swap a variable with a property"
|
||||
:html "<div id='d1' _='on click set x to \"old\" then set #target.dataset.val to \"new\" then swap x with #target.dataset.val then put x into me'></div>
|
||||
<span id='target' data-val='x'></span>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\"); toHaveAttribute('data-val', 'old')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
294
sx/sx/applications/hyperscript/gallery-dom-take/index.sx
Normal file
294
sx/sx/applications/hyperscript/gallery-dom-take/index.sx
Normal file
@@ -0,0 +1,294 @@
|
||||
;; 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: take (12 tests — 12 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream take tests. 12 of 12 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 take a class from other elements"
|
||||
:html "<div class='div foo'></div> | <div class='div' _='on click take .foo from .div'></div> | <div class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take .foo from .div\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (dom-has-class? _el-div1 \"foo\"))
|
||||
(assert (not (dom-has-class? _el-div2 \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take a class from other forms"
|
||||
:html "<form class='div foo'></form> | <form class='div' _='on click take .foo from .div'></form> | <form class='div'></form>"
|
||||
:action "f2.click()"
|
||||
:check "f1.classList.contains(\"foo\").should.equal(true) && f2.classList.contains(\"foo\").should.equal(false) && f3.classList.contains(\"foo\").should.equal(false) && f1.classList.contains(\"foo\").should.equal(false) && f2.classList.contains(\"foo\").should.equal(true) && f3.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")) (_el-form1 (dom-create-element \"form\")) (_el-form2 (dom-create-element \"form\")))
|
||||
(dom-add-class _el-form \"div\")
|
||||
(dom-add-class _el-form \"foo\")
|
||||
(dom-add-class _el-form1 \"div\")
|
||||
(dom-set-attr _el-form1 \"_\" \"on click take .foo from .div\")
|
||||
(dom-add-class _el-form2 \"div\")
|
||||
(dom-append sandbox _el-form)
|
||||
(dom-append sandbox _el-form1)
|
||||
(dom-append sandbox _el-form2)
|
||||
(hs-activate! _el-form1)
|
||||
(dom-dispatch (dom-query-by-id \"f2\") \"click\" nil)
|
||||
(assert (not (dom-has-class? (dom-query-by-id \"f1\") \"foo\")))
|
||||
(assert (dom-has-class? (dom-query-by-id \"f2\") \"foo\"))
|
||||
(assert (not (dom-has-class? (dom-query-by-id \"f3\") \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take a class for other elements"
|
||||
:html "<div class='div foo'></div> | <div class='div' _='on click take .foo from .div for #d3'></div> | <div id='d3' class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take .foo from .div for #d3\")
|
||||
(dom-set-attr _el-d3 \"id\" \"d3\")
|
||||
(dom-add-class _el-d3 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-d3)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div1 \"foo\")))
|
||||
(assert (dom-has-class? _el-d3 \"foo\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "a parent can take a class for other elements"
|
||||
:html "<div _='on click take .foo from .div for event.target'><div id='d1' class='div foo'></div><div id='d2' class='div'></div><div id='d3' class='div'></div></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click take .foo from .div for event.target\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-add-class _el-d1 \"div\")
|
||||
(dom-add-class _el-d1 \"foo\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-add-class _el-d2 \"div\")
|
||||
(dom-set-attr _el-d3 \"id\" \"d3\")
|
||||
(dom-add-class _el-d3 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(dom-append _el-div _el-d2)
|
||||
(dom-append _el-div _el-d3)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-d1 \"foo\")))
|
||||
(assert (dom-has-class? _el-d2 \"foo\"))
|
||||
(assert (not (dom-has-class? _el-d3 \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take an attribute from other elements"
|
||||
:html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo from .div'></div> | <div class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-set-attr _el-div \"data-foo\" \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take @data-foo from .div\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
|
||||
(assert= (dom-get-attr _el-div1 \"data-foo\") \"\")
|
||||
;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take an attribute with specific value from other elements"
|
||||
:html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo=baz from .div'></div> | <div class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-set-attr _el-div \"data-foo\" \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz from .div\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
|
||||
(assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
|
||||
;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take an attribute value from other elements and set specific values instead"
|
||||
:html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo=baz with \"qux\" from .div'></div> | <div class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d1.getAttribute(\"data-foo\").should.equal(\"qux\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && d3.getAttribute(\"data-foo\").should.equal(\"qux\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-set-attr _el-div \"data-foo\" \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz with \\\"qux\\\" from .div\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"data-foo\") \"qux\")
|
||||
(assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
|
||||
(assert= (dom-get-attr _el-div2 \"data-foo\") \"qux\")
|
||||
;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take an attribute value from other elements and set value from an expression instead"
|
||||
:html "<div class='div' data-foo='bar'></div> | <div class='div' data-foo='qux' _='on click take @data-foo=baz with my @data-foo from .div'></div> | <div class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"qux\") && d1.getAttribute(\"data-foo\").should.equal(\"qux\") && d2.getAttribute(\"data-foo\").should.equal(\"baz\") && d3.getAttribute(\"data-foo\").should.equal(\"qux\") && assert.isNull(d3.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-set-attr _el-div \"data-foo\" \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take @data-foo=baz with my @data-foo from .div\")
|
||||
(dom-set-attr _el-div1 \"data-foo\" \"qux\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"data-foo\") \"qux\")
|
||||
(assert= (dom-get-attr _el-div1 \"data-foo\") \"baz\")
|
||||
(assert= (dom-get-attr _el-div2 \"data-foo\") \"qux\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take an attribute for other elements"
|
||||
:html "<div class='div' data-foo='bar'></div> | <div class='div' _='on click take @data-foo from .div for #d3'></div> | <div id='d3' class='div'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d3.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d2.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-set-attr _el-div \"data-foo\" \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take @data-foo from .div for #d3\")
|
||||
(dom-set-attr _el-d3 \"id\" \"d3\")
|
||||
(dom-add-class _el-d3 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-d3)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-div \"data-foo\") \"bar\")
|
||||
(assert= (dom-get-attr _el-d3 \"data-foo\") \"\")
|
||||
;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "a parent can take an attribute for other elements"
|
||||
:html "<div _='on click take @data-foo from .div for event.target'><div id='d1' class='div' data-foo='bar'></div><div id='d2' class='div'></div><div id='d3' class='div'></div></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.getAttribute(\"data-foo\").should.equal(\"bar\") && d2.getAttribute(\"data-foo\").should.equal(\"\") && assert.isNull(d2.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\") && assert.isNull(d1.getAttribute(\"data-foo\") && assert.isNull(d3.getAttribute(\"data-foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-d3 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click take @data-foo from .div for event.target\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-add-class _el-d1 \"div\")
|
||||
(dom-set-attr _el-d1 \"data-foo\" \"bar\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-add-class _el-d2 \"div\")
|
||||
(dom-set-attr _el-d3 \"id\" \"d3\")
|
||||
(dom-add-class _el-d3 \"div\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(dom-append _el-div _el-d2)
|
||||
(dom-append _el-div _el-d3)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
(assert= (dom-get-attr _el-d1 \"data-foo\") \"bar\")
|
||||
(assert= (dom-get-attr _el-d2 \"data-foo\") \"\")
|
||||
;; SKIP check: skip assert.isNull(d2.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d3.getAttribute(\"data-foo\")
|
||||
;; SKIP check: skip assert.isNull(d1.getAttribute(\"data-foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take multiple classes from other elements"
|
||||
:html "<div class='div foo'></div> | <div class='div' _='on click take .foo .bar'></div> | <div class='div bar'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(false) && d3.classList.contains(\"bar\").should.equal(true) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(true) && d3.classList.contains(\"bar\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-div1 (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"div\")
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take .foo .bar\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-add-class _el-div2 \"bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (dom-has-class? _el-div1 \"foo\"))
|
||||
(assert (not (dom-has-class? _el-div2 \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div \"bar\")))
|
||||
(assert (dom-has-class? _el-div1 \"bar\"))
|
||||
(assert (not (dom-has-class? _el-div2 \"bar\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can take multiple classes from specific element"
|
||||
:html "<div class='div1 foo bar'></div> | <div class='div' _='on click take .foo .bar from .div1'></div> | <div class='div bar'></div>"
|
||||
:action "d2.click()"
|
||||
:check "d1.classList.contains(\"foo\").should.equal(true) && d2.classList.contains(\"foo\").should.equal(false) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(true) && d2.classList.contains(\"bar\").should.equal(false) && d3.classList.contains(\"bar\").should.equal(true) && d1.classList.contains(\"foo\").should.equal(false) && d2.classList.contains(\"foo\").should.equal(true) && d3.classList.contains(\"foo\").should.equal(false) && d1.classList.contains(\"bar\").should.equal(false) && d2.classList.contains(\"bar\").should.equal(true) && d3.classList.contains(\"bar\").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-add-class _el-div \"div1\")
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-add-class _el-div \"bar\")
|
||||
(dom-add-class _el-div1 \"div\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click take .foo .bar from .div1\")
|
||||
(dom-add-class _el-div2 \"div\")
|
||||
(dom-add-class _el-div2 \"bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div1)
|
||||
(dom-dispatch _el-div1 \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (dom-has-class? _el-div1 \"foo\"))
|
||||
(assert (not (dom-has-class? _el-div2 \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div \"bar\")))
|
||||
(assert (dom-has-class? _el-div1 \"bar\"))
|
||||
(assert (dom-has-class? _el-div2 \"bar\"))
|
||||
))"))))
|
||||
357
sx/sx/applications/hyperscript/gallery-dom-toggle/index.sx
Normal file
357
sx/sx/applications/hyperscript/gallery-dom-toggle/index.sx
Normal file
@@ -0,0 +1,357 @@
|
||||
;; 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: toggle (30 tests — 19 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream toggle tests. 19 of 30 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 toggle class ref on a single div"
|
||||
:html "<div _='on click toggle .foo'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle .foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle class ref on a single form"
|
||||
:html "<form _='on click toggle .foo'></form>"
|
||||
:action "form.click(); form.click()"
|
||||
:check "form.classList.contains(\"foo\").should.equal(false) && form.classList.contains(\"foo\").should.equal(true) && form.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")))
|
||||
(dom-set-attr _el-form \"_\" \"on click toggle .foo\")
|
||||
(dom-append sandbox _el-form)
|
||||
(hs-activate! _el-form)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-form \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can target another div for class ref toggle"
|
||||
:html "<div id='bar'></div> | <div _='on click toggle .foo on #bar'></div>"
|
||||
:action "div.click(); 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) && bar.classList.contains(\"foo\").should.equal(false) && 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 toggle .foo on #bar\")
|
||||
(dom-append sandbox _el-bar)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-bar \"foo\")))
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle non-class attributes"
|
||||
:html "<div _='on click toggle [@foo=\"bar\"]'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.hasAttribute(\"foo\").should.equal(false) && div.getAttribute(\"foo\").should.equal(\"bar\") && div.hasAttribute(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle [@foo=\\\"bar\\\"]\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-attr? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle non-class attributes on selects"
|
||||
:html "<select _='on click toggle [@foo=\"bar\"]'></select>"
|
||||
:action "select.click(); select.click()"
|
||||
:check "select.hasAttribute(\"foo\").should.equal(false) && select.getAttribute(\"foo\").should.equal(\"bar\") && select.hasAttribute(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-select (dom-create-element \"select\")))
|
||||
(dom-set-attr _el-select \"_\" \"on click toggle [@foo=\\\"bar\\\"]\")
|
||||
(dom-append sandbox _el-select)
|
||||
(hs-activate! _el-select)
|
||||
(dom-dispatch _el-select \"click\" nil)
|
||||
(dom-dispatch _el-select \"click\" nil)
|
||||
(assert (not (dom-has-attr? _el-select \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle for a fixed amount of time"
|
||||
:html "<div _='on click toggle .foo for 10ms'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle .foo for 10ms\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle until an event on another element"
|
||||
:html "<div id='d1'></div> | <div _='on click toggle .foo until foo from #d1'></div>"
|
||||
:action "div.click(); d1.dispatchEvent(new CustomEvent(\"foo\")"
|
||||
:check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"foo\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle .foo until foo from #d1\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-d1 \"foo\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle between two classes"
|
||||
:html "<div class='foo' _='on click toggle between .foo and .bar'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"foo\")
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle between .foo and .bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"foo\"))
|
||||
(assert (not (dom-has-class? _el-div \"bar\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle multiple class refs"
|
||||
:html "<div class='bar' _='on click toggle .foo .bar'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true) && div.classList.contains(\"foo\").should.equal(true) && div.classList.contains(\"bar\").should.equal(false) && div.classList.contains(\"foo\").should.equal(false) && div.classList.contains(\"bar\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-add-class _el-div \"bar\")
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle .foo .bar\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-div \"foo\")))
|
||||
(assert (dom-has-class? _el-div \"bar\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display"
|
||||
:html "<div _='on click toggle *display'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"block\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle *display\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle opacity"
|
||||
:html "<div _='on click toggle *opacity'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\") && getComputedStyle(div).opacity.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle *opacity\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.opacity
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle opacity"
|
||||
:html "<div _='on click toggle *visibility'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\") && getComputedStyle(div).visibility.should.equal(\"visible\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle *visibility\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.visibility
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display w/ my"
|
||||
:html "<div _='on click toggle my *display'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).display.should.equal(\"block\") && getComputedStyle(div).display.should.equal(\"none\") && getComputedStyle(div).display.should.equal(\"block\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle my *display\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display w/ my"
|
||||
:html "<div _='on click toggle my *opacity'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).opacity.should.equal(\"1\") && getComputedStyle(div).opacity.should.equal(\"0\") && getComputedStyle(div).opacity.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle my *opacity\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.opacity
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display w/ my"
|
||||
:html "<div _='on click toggle my *visibility'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div).visibility.should.equal(\"visible\") && getComputedStyle(div).visibility.should.equal(\"hidden\") && getComputedStyle(div).visibility.should.equal(\"visible\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle my *visibility\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div.visibility
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display on other elt"
|
||||
:html "<div _='on click toggle the *display of #d2'></div> | <div id='d2'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div2).display.should.equal(\"block\") && getComputedStyle(div2).display.should.equal(\"none\") && getComputedStyle(div2).display.should.equal(\"block\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle the *display of #d2\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div2.display
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display on other elt"
|
||||
:html "<div _='on click toggle the *opacity of #d2'></div> | <div id='d2'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div2).opacity.should.equal(\"1\") && getComputedStyle(div2).opacity.should.equal(\"0\") && getComputedStyle(div2).opacity.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle the *opacity of #d2\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div2.opacity
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle display on other elt"
|
||||
:html "<div _='on click toggle the *visibility of #d2'></div> | <div id='d2'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "getComputedStyle(div2).visibility.should.equal(\"visible\") && getComputedStyle(div2).visibility.should.equal(\"hidden\") && getComputedStyle(div2).visibility.should.equal(\"visible\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click toggle the *visibility of #d2\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP computed style: div2.visibility
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle crazy tailwinds class ref on a single form"
|
||||
:html "<form _='on click toggle .group-\\\\[:nth-of-type\\\\(3\\\\)_\\\\&\\\\]:block'></form>"
|
||||
:action "form.click(); form.click()"
|
||||
:check "form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(false) && form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(true) && form.classList.contains(\"group-[:nth-of-type(3)_&]:block\").should.equal(false)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")))
|
||||
(dom-set-attr _el-form \"_\" \"on click toggle .group-[:nth-of-type(3)_&]:block\")
|
||||
(dom-append sandbox _el-form)
|
||||
(hs-activate! _el-form)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(assert (not (dom-has-class? _el-form \"group-[:nth-of-type(3)_&]:block\")))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle between two attribute values"
|
||||
:html "<div data-state='active' _=\\\"on click toggle between [@data-state='active'] and [@data-state='inactive']\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveAttribute('data-state', 'active'); toHaveAttribute('data-state', 'inactive'); toHaveAttribute('data-state', 'active')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle between different attributes"
|
||||
:html "<div enabled='true' _=\\\"on click toggle between [@enabled='true'] and [@disabled='true']\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveAttribute('enabled', 'true'); toHaveAttribute('disabled', 'true'); toHaveAttribute('enabled', 'true')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle visibility"
|
||||
:html "<div _='on click toggle *visibility'></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle opacity w/ my"
|
||||
:html "<div _='on click toggle my *opacity'></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0'); toHaveCSS('opacity', '1')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle visibility w/ my"
|
||||
:html "<div _='on click toggle my *visibility'></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle opacity on other elt"
|
||||
:html "<div _='on click toggle the *opacity of #d2'></div><div id='d2'></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0'); toHaveCSS('opacity', '1')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle visibility on other elt"
|
||||
:html "<div _='on click toggle the *visibility of #d2'></div><div id='d2'></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('visibility', 'visible'); toHaveCSS('visibility', 'hidden'); toHaveCSS('visibility', 'visible')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle *display between two values"
|
||||
:html "<div style='display:none' _=\\\"on click toggle *display of me between 'none' and 'flex'\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('display', 'none'); toHaveCSS('display', 'flex'); toHaveCSS('display', 'none')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle *opacity between three values"
|
||||
:html "<div style='opacity:0' _=\\\"on click toggle *opacity of me between '0', '0.5' and '1'\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('opacity', '0'); toHaveCSS('opacity', '0.5'); toHaveCSS('opacity', '1'); toHaveCSS('opacity', '0')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle a global variable between two values"
|
||||
:html "<div _=\\\"on click toggle $mode between 'edit' and 'preview'\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toBe('edit'); toBe('preview'); toBe('edit')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can toggle a global variable between three values"
|
||||
:html "<div _=\\\"on click toggle $state between 'a', 'b' and 'c'\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toBe('a'); toBe('b'); toBe('c'); toBe('a')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
90
sx/sx/applications/hyperscript/gallery-dom/index.sx
Normal file
90
sx/sx/applications/hyperscript/gallery-dom/index.sx
Normal file
@@ -0,0 +1,90 @@
|
||||
;; 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 tests: dom (215 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-add))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"add")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(19 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-remove))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"remove")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(14 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-toggle))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"toggle")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(30 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-set))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"set")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(25 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-put))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"put")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(38 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-hide))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"hide")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(14 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-take))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"take")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(12 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-append))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"append")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(13 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-empty))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"empty")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(13 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-focus))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"focus")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(3 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-morph))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"morph")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(10 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-reset))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"reset")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(8 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-scroll))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"scroll")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(8 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-swap))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"swap")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-measure))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"measure")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(2 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-dom-show))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"show")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(2 tests)"))
|
||||
)))
|
||||
@@ -0,0 +1,33 @@
|
||||
;; 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: asyncError (2 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream asyncError tests. 0 of 2 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 "rejected promise stops execution"
|
||||
:html "<button _=\"on click
|
||||
call failAsync()
|
||||
put 'should not reach' into #out
|
||||
\">Go</button>
|
||||
<div id='out'>original</div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"original\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "rejected promise triggers catch block"
|
||||
:html "<button _=\"on click
|
||||
call failAsync()
|
||||
put 'unreachable' into #out
|
||||
catch e
|
||||
put e.message into #out
|
||||
\">Go</button>
|
||||
<div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"boom\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
124
sx/sx/applications/hyperscript/gallery-events-bootstrap/index.sx
Normal file
124
sx/sx/applications/hyperscript/gallery-events-bootstrap/index.sx
Normal file
@@ -0,0 +1,124 @@
|
||||
;; 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: bootstrap (14 tests — 3 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream bootstrap tests. 3 of 14 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 "hyperscript can have more than one action"
|
||||
:html "<div id='bar'></div><div _='on click add .foo to #bar then add .blah'></div>"
|
||||
:action ""
|
||||
:check "toHaveClass(/foo/); toHaveClass(/blah/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "stores state on elt._hyperscript"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toBe(true); toBe(true); toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "skips reinitialization if script unchanged"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action "evaluate({...}); div.click()"
|
||||
:check "toBe(1)"
|
||||
: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)
|
||||
;; SKIP action: evaluate__...__
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip toBe(1)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reinitializes if script attribute changes"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click'); evaluate({...})"
|
||||
:check "toHaveClass(/foo/); toHaveClass(/bar/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cleanup removes event listeners on the element"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action "find('div').dispatchEvent('click'); evaluate({...}); div.click()"
|
||||
:check "toHaveClass(/foo/); toHaveClass(/foo/)"
|
||||
: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)
|
||||
;; SKIP action: find__div__.dispatchEvent__click__
|
||||
;; SKIP action: evaluate__...__
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip toHaveClass(/foo/); toHaveClass(/foo/)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cleanup removes cross-element event listeners"
|
||||
:html "<div id='source'></div><div id='target' _='on click from #source add .foo'></div>"
|
||||
:action "find('#source').dispatchEvent('click'); evaluate({...}); source.click()"
|
||||
:check "toHaveClass(/foo/); toBe(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-source (dom-create-element \"div\")) (_el-target (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-source \"id\" \"source\")
|
||||
(dom-set-attr _el-target \"id\" \"target\")
|
||||
(dom-set-attr _el-target \"_\" \"on click from #source add .foo\")
|
||||
(dom-append sandbox _el-source)
|
||||
(dom-append sandbox _el-target)
|
||||
(hs-activate! _el-target)
|
||||
;; SKIP action: find___source__.dispatchEvent__click__
|
||||
;; SKIP action: evaluate__...__
|
||||
(dom-dispatch _el-source \"click\" nil)
|
||||
;; SKIP check: skip toHaveClass(/foo/); toBe(true)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cleanup tracks listeners in elt._hyperscript"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cleanup clears elt._hyperscript"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sets data-hyperscript-powered on initialized elements"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toHaveAttribute('data-hyperscript-powered', 'true')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "cleanup removes data-hyperscript-powered"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toHaveAttribute('data-hyperscript-powered', 'true')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "fires hyperscript:before:init and hyperscript:after:init"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toEqual(['before:init', 'after:init'])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "hyperscript:before:init can cancel initialization"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(false); toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "fires hyperscript:before:cleanup and hyperscript:after:cleanup"
|
||||
:html "<div _='on click add .foo'></div>"
|
||||
:action ""
|
||||
:check "toEqual(['before:cleanup', 'after:cleanup'])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "logAll config logs events to console"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,71 @@
|
||||
;; 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: dialog (10 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream dialog tests. 0 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 "show opens a dialog as modal"
|
||||
:html "<dialog id='d'><p>Hello</p></dialog><button _='on click show #d'>Open</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "hide closes a dialog"
|
||||
:html "<dialog id='d'><p>Hello</p><button id='close' _='on click hide #d'>Close</button></dialog>"
|
||||
:action "find('#close').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "show on already-open dialog is a no-op"
|
||||
:html "<dialog id='d'><p>Hello</p><button _='on click show #d'>Show Again</button></dialog>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "open opens a dialog"
|
||||
:html "<dialog id='d'><p>Hello</p></dialog><button _='on click open #d'>Open</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "close closes a dialog"
|
||||
:html "<dialog id='d'><p>Hello</p><button id='close' _='on click close #d'>Close</button></dialog>"
|
||||
:action "find('#close').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "open opens a details element"
|
||||
:html "<details id='d'><summary>More</summary><p>Content</p></details><button _='on click open #d'>Open</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "close closes a details element"
|
||||
:html "<details id='d' open><summary>More</summary><p>Content</p></details><button _='on click close #d'>Close</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open'); toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "open shows a popover"
|
||||
:html "<div id='p' popover><p>Popover content</p></div><button _='on click open #p'>Open</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "close hides a popover"
|
||||
:html "<div id='p' popover><p>Popover content</p><button id='close' _='on click close #p'>Close</button></div>"
|
||||
:action "find('#close').click()"
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "open on implicit me"
|
||||
:html "<dialog id='d' _='on myOpen open'></dialog><button _='on click send myOpen to #d'>Open</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveAttribute('open')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
273
sx/sx/applications/hyperscript/gallery-events-fetch/index.sx
Normal file
273
sx/sx/applications/hyperscript/gallery-events-fetch/index.sx
Normal file
@@ -0,0 +1,273 @@
|
||||
;; 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: fetch (23 tests — 17 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream fetch tests. 17 of 23 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 do a simple fetch"
|
||||
:html "<div _='on click fetch \"/test\" then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch \\\"/test\\\" then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ a naked URL"
|
||||
:html "<div _='on click fetch /test then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ html"
|
||||
:html "<div _='on click fetch /test as html then log it then put it into my.innerHTML put its childElementCount into my @data-count'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"[object DocumentFragment]\") && div.dataset.count.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as html then log it then put it into my.innerHTML put its childElementCount into my @data-count\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"[object DocumentFragment]\")
|
||||
;; SKIP check: skip div.dataset.count.should.equal(\"1\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ json"
|
||||
:html "<div _='on click fetch /test as json then get result as JSON then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal('{\"foo\":1}')"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as json then get result as JSON then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"'{\\\"foo\\\":1}'\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ json using Object syntax"
|
||||
:html "<div _='on click fetch /test as Object then get result as JSON then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal('{\"foo\":1}')"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as Object then get result as JSON then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"'{\\\"foo\\\":1}'\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ json using Object syntax and an 'an' prefix"
|
||||
:html "<div _='on click fetch /test as an Object then get result as JSON then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal('{\"foo\":1}')"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as an Object then get result as JSON then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"'{\\\"foo\\\":1}'\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch with a response object"
|
||||
:html "<div _='on click fetch /test as response then if its.ok put \"yep\" into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yep\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as response then if its.ok put \\\"yep\\\" into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yep\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ a custom conversion"
|
||||
:html "<div _='on click fetch /test as Number then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1.2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as Number then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1.2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple post"
|
||||
:html "<div _='on click fetch /test {method:\"POST\"} then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test {method:\\\"POST\\\"} then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple post alt syntax without curlies"
|
||||
:html "<div _='on click fetch /test with method:\"POST\" then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test with method:\\\"POST\\\" then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple post alt syntax w/ curlies"
|
||||
:html "<div _='on click fetch /test with {method:\"POST\"} then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test with {method:\\\"POST\\\"} then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put response conversion after with"
|
||||
:html "<div _='on click fetch /test with {method:\"POST\"} as text then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test with {method:\\\"POST\\\"} as text then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can put response conversion before with"
|
||||
:html "<div _='on click fetch /test as text with {method:\"POST\"} then put it into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test as text with {method:\\\"POST\\\"} then put it into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "triggers an event just before fetching"
|
||||
:html "<div _='on click fetch \"/test\" then put it into my.innerHTML end'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.classList.contains(\"foo-set\").should.equal(false) && div.classList.contains(\"foo-set\").should.equal(true) && div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch \\\"/test\\\" then put it into my.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"foo-set\"))
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "submits the fetch parameters to the event handler"
|
||||
:html "<div _='on click fetch \"/test\" {headers: {\"X-CustomHeader\": \"foo\"}} then put it into my.innerHTML end'></div>"
|
||||
:action "div.click()"
|
||||
:check "event.detail.headers.should.have.property('X-CustomHeader', 'foo') && div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch \\\"/test\\\" {headers: {\\\"X-CustomHeader\\\": \\\"foo\\\"}} then put it into my.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip event.detail.headers.should.have.property('X-CustomHeader',
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "allows the event handler to change the fetch parameters"
|
||||
:html "<div _='on click fetch \"/test\" then put it into my.innerHTML end'></div>"
|
||||
:action "div.click()"
|
||||
:check "arguments[1].should.have.property('headers') && arguments[1].headers.should.have.property('X-CustomHeader', 'foo') && div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch \\\"/test\\\" then put it into my.innerHTML end\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip arguments[1].should.have.property('headers')
|
||||
;; SKIP check: skip arguments[1].headers.should.have.property('X-CustomHeader',
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch an error that occurs when using fetch"
|
||||
:html "<div _='on click fetch /test catch e log e put \"yay\" into me'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"yay\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click fetch /test catch e log e put \\\"yay\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"yay\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can do a simple fetch w/ json using JSON syntax"
|
||||
:html "<div _='on click fetch /test as JSON then get result as JSONString then put it into my.innerHTML'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText('{\"foo\":1}')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "throws on non-2xx response by default"
|
||||
:html "<div _='on click fetch /test catch e put \\\"caught\\\" into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"caught\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "do not throw passes through 404 response"
|
||||
:html "<div _='on click fetch /test do not throw then put it into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"the body\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "don't throw passes through 404 response"
|
||||
:html "<div _=\"on click fetch /test don\\'t throw then put it into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"the body\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "as response does not throw on 404"
|
||||
:html "<div _='on click fetch /test as response then put it.status into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"404\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "Response can be converted to JSON via as JSON"
|
||||
:html "<div _=\\\"on click fetch /test as Response then put (it as JSON).name into me\\\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"Joe\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
53
sx/sx/applications/hyperscript/gallery-events-halt/index.sx
Normal file
53
sx/sx/applications/hyperscript/gallery-events-halt/index.sx
Normal file
@@ -0,0 +1,53 @@
|
||||
;; 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: halt (7 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream halt tests. 0 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 "halts event propagation and default"
|
||||
:html "<div id='outer' _='on click add .outer-clicked'> <a id='inner' href='#shouldnot' _='on click halt'>click me</a></div>"
|
||||
:action "find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveClass(/outer-clicked/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt stops execution after the halt"
|
||||
:html "<div _='on click halt then add .should-not-happen'>test</div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveClass(/should-not-happen/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt the event stops propagation but continues execution"
|
||||
:html "<div id='outer' _='on click add .outer-clicked'> <div id='inner' _='on click halt the event then add .continued'>click me</div></div>"
|
||||
:action "find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveClass(/outer-clicked/); toHaveClass(/continued/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt the event's stops propagation but continues execution"
|
||||
:html "<div id='outer' _='on click add .outer-clicked'> <div id='inner' _=\\\"on click halt the event's then add .continued\\\">click me</div></div>"
|
||||
:action "find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveClass(/outer-clicked/); toHaveClass(/continued/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt bubbling only stops propagation, not default"
|
||||
:html "<div id='outer' _='on click add .outer-clicked'> <div id='inner' _='on click halt bubbling then add .continued'>click me</div></div>"
|
||||
:action "find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveClass(/outer-clicked/); toHaveClass(/continued/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt works outside of event context"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "halt default only prevents default, not propagation"
|
||||
:html "<div id='outer' _='on click add .outer-clicked'> <div id='inner' _='on click halt default'>click me</div></div>"
|
||||
:action "find('#inner').dispatchEvent('click')"
|
||||
:check "toHaveClass(/outer-clicked/)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
36
sx/sx/applications/hyperscript/gallery-events-init/index.sx
Normal file
36
sx/sx/applications/hyperscript/gallery-events-init/index.sx
Normal file
@@ -0,0 +1,36 @@
|
||||
;; 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: init (3 tests — 1 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream init tests. 1 of 3 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 define an init block inline"
|
||||
:html "<div _='init set my.foo to 42 end on click put my.foo into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"init then set my.foo to 42 end on click put my.foo into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"42\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can define an init block in a script"
|
||||
:html "<script type='text/hyperscript'> init set window.foo to 42 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.foo.should.equal(42)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can initialize immediately"
|
||||
:html "<script type='text/hyperscript'>init set window.foo to 10 init immediately set window.bar to window.foo </script>"
|
||||
:action "(see body)"
|
||||
:check "window.foo.should.equal(10)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
897
sx/sx/applications/hyperscript/gallery-events-on/index.sx
Normal file
897
sx/sx/applications/hyperscript/gallery-events-on/index.sx
Normal file
@@ -0,0 +1,897 @@
|
||||
;; 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: on (63 tests — 54 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream on tests. 54 of 63 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 respond to events with dots in names"
|
||||
:html "<div _='on click send example.event to #d1'></div> | <div id='d1' _='on example.event add .called'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click send example.event to #d1\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on example.event add .called\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can respond to events with colons in names"
|
||||
:html "<div _='on click send example:event to #d1'></div> | <div id='d1' _='on example:event add .called'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click send example:event to #d1\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on example:event add .called\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can respond to events with minus in names"
|
||||
:html "<div _='on click send \"a-b\" to #d1'></div> | <div id='d1' _='on \"a-b\" add .called'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click send \\\"a-b\\\" to #d1\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on \\\"a-b\\\" add .called\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can respond to events on other elements"
|
||||
:html "<div id='bar'></div> | <div _='on click from #bar add .clicked'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"clicked\").should.equal(false) && div.classList.contains(\"clicked\").should.equal(true)"
|
||||
: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 from #bar add .clicked\")
|
||||
(dom-append sandbox _el-bar)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-bar \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"clicked\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "listeners on other elements are removed when the registering element is removed"
|
||||
:html "<div id='bar'></div> | <div _='on click from #bar set #bar.innerHTML to #bar.innerHTML + \"a\"'></div>"
|
||||
:action "bar.click(); bar.click()"
|
||||
:check "bar.innerHTML.should.equal(\"\") && bar.innerHTML.should.equal(\"a\") && bar.innerHTML.should.equal(\"a\")"
|
||||
: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 from #bar set #bar.innerHTML to #bar.innerHTML + \\\"a\\\"\")
|
||||
(dom-append sandbox _el-bar)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-bar \"click\" nil)
|
||||
(dom-dispatch _el-bar \"click\" nil)
|
||||
(assert= (dom-inner-html _el-bar) \"a\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "listeners on self are not removed when the element is removed"
|
||||
:html "<div _='on someCustomEvent put 1 into me'></div>"
|
||||
:action "div.remove(); div.dispatchEvent(new Event(\"someCustomEvent\")"
|
||||
:check "div.innerHTML.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports \"elsewhere\" modifier"
|
||||
:html "<div _='on click elsewhere add .clicked'></div>"
|
||||
:action "div.click(); body.click()"
|
||||
:check "div.classList.contains(\"clicked\").should.equal(false) && div.classList.contains(\"clicked\").should.equal(false) && div.classList.contains(\"clicked\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click elsewhere add .clicked\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"clicked\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports \"from elsewhere\" modifier"
|
||||
:html "<div _='on click from elsewhere add .clicked'></div>"
|
||||
:action "div.click(); body.click()"
|
||||
:check "div.classList.contains(\"clicked\").should.equal(false) && div.classList.contains(\"clicked\").should.equal(false) && div.classList.contains(\"clicked\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click from elsewhere add .clicked\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"clicked\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick detail fields out by name"
|
||||
:html "<div id='d1' _='on click send custom(foo:\"fromBar\") to #d2'></div> | <div id='d2' _='on custom(foo) call me.classList.add(foo)'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"fromBar\").should.equal(false) && div.classList.contains(\"fromBar\").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 send custom(foo:\\\"fromBar\\\") to #d2\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-d2 \"_\" \"on custom(foo) call me.classList.add(foo)\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-d1)
|
||||
(hs-activate! _el-d2)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert (dom-has-class? _el-d1 \"fromBar\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick event properties out by name"
|
||||
:html "<div id='d1' _='on click send fromBar to #d2'></div> | <div id='d2' _='on fromBar(type) call me.classList.add(type)'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"fromBar\").should.equal(false) && div.classList.contains(\"fromBar\").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 send fromBar to #d2\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-d2 \"_\" \"on fromBar(type) call me.classList.add(type)\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-d2)
|
||||
(hs-activate! _el-d1)
|
||||
(hs-activate! _el-d2)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(assert (dom-has-class? _el-d1 \"fromBar\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can fire an event on load"
|
||||
:html "<div id='d1' _='on load put \"Loaded\" into my.innerHTML'></div>"
|
||||
:action "(see body)"
|
||||
:check "div.innerText.should.equal(\"Loaded\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can be in a top level script tag"
|
||||
:html "<script type='text/hyperscript'>on load put \"Loaded\" into #loadedDemo.innerHTML</script><div id='loadedDemo'></div>"
|
||||
:action "(see body)"
|
||||
:check "byId(\"loadedDemo\").innerText.should.equal(\"Loaded\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can have a simple event filter"
|
||||
:html "<div id='d1' _='on click[false] log event then put \"Clicked\" into my.innerHTML'></div>"
|
||||
:action "div.click()"
|
||||
:check "byId(\"d1\").innerText.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d1 \"_\" \"on click[false] log event then put \\\"Clicked\\\" into my.innerHTML\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-d1)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
;; SKIP check: skip byId(\"d1\").innerText.should.equal(\"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can refer to event properties directly in filter"
|
||||
:html "<div _='on click[buttons==0] log event then put \"Clicked\" into my.innerHTML'></div> | <div _='on click[buttons==1] log event then put \"Clicked\" into my.innerHTML'></div> | <div _='on click[buttons==1 and buttons==0] log event then put \"Clicked\" into my.innerHTML'></div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerText.should.equal(\"Clicked\") && div.innerText.should.equal(\"\") && div.innerText.should.equal(\"\")"
|
||||
: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[buttons==0] log event then put \\\"Clicked\\\" into my.innerHTML\")
|
||||
(dom-set-attr _el-div1 \"_\" \"on click[buttons==1] log event then put \\\"Clicked\\\" into my.innerHTML\")
|
||||
(dom-set-attr _el-div2 \"_\" \"on click[buttons==1 and buttons==0] log event then put \\\"Clicked\\\" into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div1)
|
||||
(dom-append sandbox _el-div2)
|
||||
(hs-activate! _el-div)
|
||||
(hs-activate! _el-div1)
|
||||
(hs-activate! _el-div2)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"Clicked\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can refer to event detail properties directly in filter"
|
||||
:html "<div _='on example[foo] increment @count then put it into me'></div>"
|
||||
:action "div.dispatchEvent(event); div.dispatchEvent(event); div.dispatchEvent(event)"
|
||||
:check "div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can click after a positive event filter"
|
||||
:html "<div _='on foo(bar)[bar] put \"triggered\" into my.innerHTML'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: false } }); div.dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: true } })"
|
||||
:check "div.innerText.should.equal(\"\") && div.innerText.should.equal(\"triggered\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo(bar)[bar] put \\\"triggered\\\" into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"triggered\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "multiple event handlers at a time are allowed to execute with the every keyword"
|
||||
:html "<div _='on every click put increment() into my.innerHTML then wait for a customEvent'></div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"2\") && div.innerText.should.equal(\"3\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on every click put increment() into my.innerHTML then wait for a customEvent\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"1\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"2\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"3\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can have multiple event handlers"
|
||||
:html "<div _='on foo put increment() into my.innerHTML end on bar put increment() into my.innerHTML'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"foo\")"
|
||||
:check "div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"2\") && div.innerText.should.equal(\"3\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo put increment() into my.innerHTML end on bar put increment() into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"1\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"2\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"3\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can have multiple event handlers, no end"
|
||||
:html "<div _='on foo put increment() into my.innerHTML on bar put increment() into my.innerHTML'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"foo\")"
|
||||
:check "div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"2\") && div.innerText.should.equal(\"3\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo put increment() into my.innerHTML on bar put increment() into my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"1\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"2\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"3\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can queue events"
|
||||
:html "<div _='on foo wait for bar then call increment()'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\")"
|
||||
:check "i.should.equal(0) && i.should.equal(0) && i.should.equal(0) && i.should.equal(1) && i.should.equal(2) && i.should.equal(2)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo wait for bar then call increment()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
;; SKIP check: skip i.should.equal(0)
|
||||
;; SKIP check: skip i.should.equal(1)
|
||||
;; SKIP check: skip i.should.equal(2)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can queue first event"
|
||||
:html "<div _='on foo queue first wait for bar then call increment()'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\")"
|
||||
:check "i.should.equal(0) && i.should.equal(0) && i.should.equal(0) && i.should.equal(1) && i.should.equal(2) && i.should.equal(2)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo queue first wait for bar then call increment()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
;; SKIP check: skip i.should.equal(0)
|
||||
;; SKIP check: skip i.should.equal(1)
|
||||
;; SKIP check: skip i.should.equal(2)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can queue last event"
|
||||
:html "<div _='on foo queue last wait for bar then call increment()'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\")"
|
||||
:check "i.should.equal(0) && i.should.equal(0) && i.should.equal(0) && i.should.equal(1) && i.should.equal(2) && i.should.equal(2)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo queue last wait for bar then call increment()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
;; SKIP check: skip i.should.equal(0)
|
||||
;; SKIP check: skip i.should.equal(1)
|
||||
;; SKIP check: skip i.should.equal(2)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can queue all events"
|
||||
:html "<div _='on foo queue all wait for bar then call increment()'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"foo\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\"); div.dispatchEvent(new CustomEvent(\"bar\")"
|
||||
:check "i.should.equal(0) && i.should.equal(0) && i.should.equal(0) && i.should.equal(1) && i.should.equal(2) && i.should.equal(3)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on foo queue all wait for bar then call increment()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
(dom-dispatch _el-div \"bar\" nil)
|
||||
;; SKIP check: skip i.should.equal(0)
|
||||
;; SKIP check: skip i.should.equal(1)
|
||||
;; SKIP check: skip i.should.equal(2)
|
||||
;; SKIP check: skip i.should.equal(3)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "queue none does not allow future queued events"
|
||||
:html "<div _='on click queue none put increment() into my.innerHTML then wait for a customEvent'></div>"
|
||||
:action "div.click(); div.click(); div.dispatchEvent(new CustomEvent(\"customEvent\"); div.click()"
|
||||
:check "div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"1\") && div.innerText.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click queue none put increment() into my.innerHTML then wait for a customEvent\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"customEvent\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"1\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can invoke on multiple events"
|
||||
:html "<div _='on click or foo call increment()'></div>"
|
||||
:action "div.click(); div.dispatchEvent(new CustomEvent(\"foo\")"
|
||||
:check "i.should.equal(1) && i.should.equal(2)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click or foo call increment()\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
;; SKIP check: skip i.should.equal(1)
|
||||
;; SKIP check: skip i.should.equal(2)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for events in another element (lazy)"
|
||||
:html "<div _='on click in #d1 put it into window.tmp'> <div id='d1'></div> <div id='d2'></div> </div>"
|
||||
:action "div1.click()"
|
||||
:check "div1.should.equal(window.tmp)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click in #d1 put it into window.tmp\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append _el-div _el-d1)
|
||||
(dom-append _el-div _el-d2)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div1.should.equal(window.tmp)
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can filter events based on count"
|
||||
:html "<div _='on click 1 put 1 + my.innerHTML as Int into my.innerHTML'>0</div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1\") && div.innerHTML.should.equal(\"1\") && div.innerHTML.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 1 put 1 + my.innerHTML as Int into my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"0\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can filter events based on count range"
|
||||
:html "<div _='on click 1 to 2 put 1 + my.innerHTML as Int into my.innerHTML'>0</div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1\") && div.innerHTML.should.equal(\"2\") && div.innerHTML.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 1 to 2 put 1 + my.innerHTML as Int into my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"0\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can filter events based on unbounded count range"
|
||||
:html "<div _='on click 2 and on put 1 + my.innerHTML as Int into my.innerHTML'>0</div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"0\") && div.innerHTML.should.equal(\"1\") && div.innerHTML.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 2 and on put 1 + my.innerHTML as Int into my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"0\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can mix ranges"
|
||||
:html "<div _='on click 1 put \"one\" into my.innerHTML on click 3 put \"three\" into my.innerHTML on click 2 put \"two\" into my.innerHTML '>0</div>"
|
||||
:action "div.click(); div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"one\") && div.innerHTML.should.equal(\"two\") && div.innerHTML.should.equal(\"three\") && div.innerHTML.should.equal(\"three\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 1 put \\\"one\\\" into my.innerHTML on click 3 put \\\"three\\\" into my.innerHTML on click 2 put \\\"two\\\" into my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"0\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"three\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for general mutations"
|
||||
:html "<div _='on mutation put \"Mutated\" into me then wait for hyperscript:mutation'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation put \\\"Mutated\\\" into me then wait for hyperscript:mutation\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for attribute mutations"
|
||||
:html "<div _='on mutation of attributes put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of attributes put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for specific attribute mutations"
|
||||
:html "<div _='on mutation of @foo put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of @foo put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for specific attribute mutations and filter out other attribute mutations"
|
||||
:html "<div _='on mutation of @bar put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of @bar put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for childList mutations"
|
||||
:html "<div _='on mutation of childList put \"Mutated\" into me then wait for hyperscript:mutation'></div>"
|
||||
:action "div.appendChild(document.createElement(\"P\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of childList put \\\"Mutated\\\" into me then wait for hyperscript:mutation\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-append _el-div (dom-create-element \"P\"))
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for childList mutation filter out other mutations"
|
||||
:html "<div _='on mutation of childList put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of childList put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for characterData mutation filter out other mutations"
|
||||
:html "<div _='on mutation of characterData put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of characterData put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for multiple mutations"
|
||||
:html "<div _='on mutation of @foo or @bar put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of @foo or @bar put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for multiple mutations 2"
|
||||
:html "<div _='on mutation of @foo or @bar put \"Mutated\" into me'></div>"
|
||||
:action "div.setAttribute(\"bar\", \"bar\")"
|
||||
:check "div.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of @foo or @bar put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-div \"bar\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can listen for attribute mutations on other elements"
|
||||
:html "<div id='d1'></div> | <div _='on mutation of attributes from #d1 put \"Mutated\" into me'></div>"
|
||||
:action "div1.setAttribute(\"foo\", \"bar\")"
|
||||
:check "div2.innerHTML.should.equal(\"Mutated\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-div \"_\" \"on mutation of attributes from #d1 put \\\"Mutated\\\" into me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-set-attr _el-d1 \"foo\" \"bar\")
|
||||
(assert= (dom-inner-html _el-div) \"Mutated\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "each behavior installation has its own event queue"
|
||||
:html "<script type=text/hyperscript>behavior DemoBehavior on foo wait 10ms then set my innerHTML to 'behavior'</script> | <div _='install DemoBehavior'></div> | <div _='install DemoBehavior'></div> | <div _='install DemoBehavior'></div>"
|
||||
:action "div.dispatchEvent(new CustomEvent(\"foo\"); div2.dispatchEvent(new CustomEvent(\"foo\"); div3.dispatchEvent(new CustomEvent(\"foo\")"
|
||||
:check "div.innerHTML.should.equal(\"behavior\") && div2.innerHTML.should.equal(\"behavior\") && div3.innerHTML.should.equal(\"behavior\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-script (dom-create-element \"script\")) (_el-div (dom-create-element \"div\")) (_el-div2 (dom-create-element \"div\")) (_el-div3 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-script \"type\" \"text/hyperscript\")
|
||||
(dom-set-inner-html _el-script \"behavior DemoBehavior on foo wait 10ms then set my innerHTML to 'behavior'\")
|
||||
(dom-set-attr _el-div \"_\" \"install DemoBehavior\")
|
||||
(dom-set-attr _el-div2 \"_\" \"install DemoBehavior\")
|
||||
(dom-set-attr _el-div3 \"_\" \"install DemoBehavior\")
|
||||
(dom-append sandbox _el-script)
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-div2)
|
||||
(dom-append sandbox _el-div3)
|
||||
(hs-activate! _el-div)
|
||||
(hs-activate! _el-div2)
|
||||
(hs-activate! _el-div3)
|
||||
(dom-dispatch _el-div \"foo\" nil)
|
||||
(dom-dispatch _el-div2 \"foo\" nil)
|
||||
(dom-dispatch _el-div3 \"foo\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"behavior\")
|
||||
(assert= (dom-inner-html _el-div2) \"behavior\")
|
||||
(assert= (dom-inner-html _el-div3) \"behavior\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch exceptions thrown in js functions"
|
||||
:html "<button _='on click throwBar() catch e put e into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click throwBar() catch e put e into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch exceptions thrown in hyperscript functions"
|
||||
:html "<script type='text/hyperscript'> def throwBar() throw 'bar' end</script>s | <button _='on click throwBar() catch e put e into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click throwBar() catch e put e into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch top-level exceptions"
|
||||
:html "<button _='on click throw \"bar\" catch e put e into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click throw \\\"bar\\\" catch e put e into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch async top-level exceptions"
|
||||
:html "<button _='on click wait 1ms then throw \"bar\" catch e put e into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click wait 1ms then throw \\\"bar\\\" catch e put e into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async exceptions don't kill the event queue"
|
||||
:html "<button _='on click increment :x if :x is 1 wait 1ms then throw \"bar\" otherwise put \"success\" into me end catch e put e into me'></button>"
|
||||
:action "btn.click(); btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"success\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click increment :x then if :x is 1 then wait 1ms then throw \\\"bar\\\" otherwise then put \\\"success\\\" into me end catch e then put e into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"success\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "exceptions in catch block don't kill the event queue"
|
||||
:html "<button _='on click increment :x if :x is 1 throw \"bar\" otherwise put \"success\" into me end catch e put e into me then throw e'></button>"
|
||||
:action "btn.click(); btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"success\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click increment :x then if :x is 1 then throw \\\"bar\\\" otherwise then put \\\"success\\\" into me end catch e then put e into me then throw e\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"success\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "uncaught exceptions trigger 'exception' event"
|
||||
:html "<button _='on click put \"foo\" into me then throw \"bar\" on exception(error) put error into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click put \\\"foo\\\" into me then throw \\\"bar\\\" on exception(error) put error into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "caught exceptions do not trigger 'exception' event"
|
||||
:html "<button _='on click put \"foo\" into me then throw \"bar\" catch e log e on exception(error) put error into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click put \\\"foo\\\" into me then throw \\\"bar\\\" catch e log e on exception(error) put error into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "rethrown exceptions trigger 'exception' event"
|
||||
:html "<button _='on click put \"foo\" into me then throw \"bar\" catch e throw e on exception(error) put error into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click put \\\"foo\\\" into me then throw \\\"bar\\\" catch e throw e on exception(error) put error into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "basic finally blocks work"
|
||||
:html "<button _='on click throw \"bar\" finally put \"bar\" into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click throw \\\"bar\\\" finally put \\\"bar\\\" into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "finally blocks work when exception thrown in catch"
|
||||
:html "<button _='on click throw \"bar\" catch e throw e finally put \"bar\" into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click throw \\\"bar\\\" catch e throw e finally put \\\"bar\\\" into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async basic finally blocks work"
|
||||
:html "<button _='on click wait a tick then throw \"bar\" finally put \"bar\" into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click wait a tick then throw \\\"bar\\\" finally put \\\"bar\\\" into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"bar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async finally blocks work when exception thrown in catch"
|
||||
:html "<button _='on click wait a tick then throw \"bar\" catch e set :foo to \"foo\" then throw e finally put :foo + \"bar\" into me'></button>"
|
||||
:action "btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"foobar\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click wait a tick then throw \\\"bar\\\" catch e set :foo to \\\"foo\\\" then throw e finally put :foo + \\\"bar\\\" into me\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"foobar\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async exceptions in finally block don't kill the event queue"
|
||||
:html "<button _='on click increment :x finally if :x is 1 wait 1ms then throw \"bar\" otherwise put \"success\" into me end '></button>"
|
||||
:action "btn.click(); btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"success\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click increment :x finally then if :x is 1 then wait 1ms then throw \\\"bar\\\" otherwise then put \\\"success\\\" into me end\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"success\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "exceptions in finally block don't kill the event queue"
|
||||
:html "<button _='on click increment :x finally if :x is 1 throw \"bar\" otherwise put \"success\" into me end '></button>"
|
||||
:action "btn.click(); btn.click()"
|
||||
:check "btn.innerHTML.should.equal(\"success\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-button (dom-create-element \"button\")))
|
||||
(dom-set-attr _el-button \"_\" \"on click increment :x finally then if :x is 1 then throw \\\"bar\\\" otherwise then put \\\"success\\\" into me end\")
|
||||
(dom-append sandbox _el-button)
|
||||
(hs-activate! _el-button)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(dom-dispatch _el-button \"click\" nil)
|
||||
(assert= (dom-inner-html _el-button) \"success\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can ignore when target doesn't exist"
|
||||
:html "<div id='#d1' _=' on click from #doesntExist throw \"bar\" on click put \"clicked\" into me '></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"clicked\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-#d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-#d1 \"id\" \"#d1\")
|
||||
(dom-set-attr _el-#d1 \"_\" \"on click from #doesntExist then throw \\\"bar\\\" on click put \\\"clicked\\\" into me\")
|
||||
(dom-append sandbox _el-#d1)
|
||||
(hs-activate! _el-#d1)
|
||||
(dom-dispatch _el-#d1 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-#d1) \"clicked\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can handle an or after a from clause"
|
||||
:html "<div id='d1'></div> | <div id='d2'></div> | <div _=' on click from #d1 or click from #d2 increment @count then put @count into me '></div>"
|
||||
:action "d1.click(); d2.click()"
|
||||
:check "div.innerHTML.should.equal(\"1\") && div.innerHTML.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-d1 (dom-create-element \"div\")) (_el-d2 (dom-create-element \"div\")) (_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-set-attr _el-d2 \"id\" \"d2\")
|
||||
(dom-set-attr _el-div \"_\" \"on click from #d1 or click from #d2 then increment @count then put @count into me\")
|
||||
(dom-append sandbox _el-d1)
|
||||
(dom-append sandbox _el-d2)
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-d1 \"click\" nil)
|
||||
(dom-dispatch _el-d2 \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "handles custom events with null detail"
|
||||
:html "<div id='d1' _='on myEvent(foo) if foo put foo into me else put \\\"no-detail\\\" into me'></div>"
|
||||
:action "evaluate({...})"
|
||||
:check "toHaveText('no-detail')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "on first click fires only once"
|
||||
:html "<div _='on first click put 1 + my.innerHTML as Int into my.innerHTML'>0</div>"
|
||||
:action "find('div').dispatchEvent('click'); find('div').dispatchEvent('click')"
|
||||
:check "toHaveText('1'); toHaveText('1')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "caught exceptions do not trigger 'exception' event"
|
||||
:html "<button _='on click put \\\"foo\\\" into me then throw \\\"bar\\\" catch e log e on exception(error) put error into me'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText('foo')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "rethrown exceptions trigger 'exception' event"
|
||||
:html "<button _='on click put \\\"foo\\\" into me then throw \\\"bar\\\" catch e throw e on exception(error) put error into me'></button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText('bar')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can ignore when target doesn\\'t exist"
|
||||
:html "<div _=' on click from #doesntExist throw \\\"bar\\\" on click put \\\"clicked\\\" into me '></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText('clicked')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
53
sx/sx/applications/hyperscript/gallery-events-pick/index.sx
Normal file
53
sx/sx/applications/hyperscript/gallery-events-pick/index.sx
Normal file
@@ -0,0 +1,53 @@
|
||||
;; 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: pick (7 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream pick tests. 0 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 "does not hang on zero-length regex matches"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toContain(\"1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick first n items"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([10, 20, 30])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick last n items"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([40, 50])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick random item"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toContain(result)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick random n items"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick items using 'of' syntax"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([11, 12])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can pick match using 'of' syntax"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"32\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
150
sx/sx/applications/hyperscript/gallery-events-send/index.sx
Normal file
150
sx/sx/applications/hyperscript/gallery-events-send/index.sx
Normal file
@@ -0,0 +1,150 @@
|
||||
;; 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\"))
|
||||
))"))))
|
||||
@@ -0,0 +1,35 @@
|
||||
;; 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: socket (4 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream socket tests. 0 of 4 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 "parses socket with absolute ws:// URL"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe('ws://localhost:1234/ws')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts relative URL to wss:// on https pages"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe('wss://localhost/my-ws')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts relative URL to ws:// on http pages"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe('ws://localhost/my-ws')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "namespaced sockets work"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
203
sx/sx/applications/hyperscript/gallery-events-tell/index.sx
Normal file
203
sx/sx/applications/hyperscript/gallery-events-tell/index.sx
Normal file
@@ -0,0 +1,203 @@
|
||||
;; 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) \"\")
|
||||
))"))))
|
||||
119
sx/sx/applications/hyperscript/gallery-events-wait/index.sx
Normal file
119
sx/sx/applications/hyperscript/gallery-events-wait/index.sx
Normal file
@@ -0,0 +1,119 @@
|
||||
;; 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\"))
|
||||
))"))))
|
||||
269
sx/sx/applications/hyperscript/gallery-events-when/index.sx
Normal file
269
sx/sx/applications/hyperscript/gallery-events-when/index.sx
Normal file
@@ -0,0 +1,269 @@
|
||||
;; 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\"))"))))
|
||||
75
sx/sx/applications/hyperscript/gallery-events/index.sx
Normal file
75
sx/sx/applications/hyperscript/gallery-events/index.sx
Normal file
@@ -0,0 +1,75 @@
|
||||
;; 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 tests: events (199 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-wait))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"wait")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(7 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-send))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"send")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(8 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-fetch))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"fetch")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(23 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-tell))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"tell")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(10 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-on))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"on")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(63 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-init))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"init")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(3 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-dialog))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"dialog")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(10 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-halt))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"halt")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(7 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-when))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"when")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(41 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-asyncError))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"asyncError")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(2 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-pick))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"pick")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(7 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-socket))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"socket")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-events-bootstrap))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"bootstrap")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(14 tests)"))
|
||||
)))
|
||||
@@ -0,0 +1,113 @@
|
||||
;; 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: asExpression (17 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream asExpression tests. 0 of 17 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts value as Boolean"
|
||||
:html ""
|
||||
:action "await run(\"1 as Boolean\"; await run(\"0 as Boolean\"; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can use the a modifier if you like"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(new Date(1)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "parses string as JSON to object"
|
||||
:html ""
|
||||
:action "await run('\\'"
|
||||
:check "toBe(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts value as JSONString"
|
||||
:html ""
|
||||
:action "await run(\"{foo:'"
|
||||
:check "toBe('{\"foo\":\"bar\"}')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "pipe operator chains conversions"
|
||||
:html ""
|
||||
:action "await run(\"{foo:'"
|
||||
:check "toBe(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can use the an modifier if you'd like"
|
||||
:html ""
|
||||
:action "await run('\\'"
|
||||
:check "toBe(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "collects duplicate text inputs into an array"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toEqual([\"alpha\", \"beta\", \"gamma\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts multiple selects with programmatically changed selections"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toBe(\"cat\"); toBe(\"raccoon\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts a form element into Values | JSONString"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toBe('{\"firstName\":\"John\",\"lastName\":\"Connor\",\"areaCode\":\"213\",\"phone\":\"555-1212\"}')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts a form element into Values | FormEncoded"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toBe('firstName=John&lastName=Connor&areaCode=213&phone=555-1212')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts array as Set"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(true); toBe(3)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts object as Map"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(true); toBe(1); toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts object as Keys"
|
||||
:html ""
|
||||
:action "await run(\"{a:1, b:2} as Keys\""
|
||||
:check "toEqual([\"a\", \"b\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts object as Entries"
|
||||
:html ""
|
||||
:action "await run(\"{a:1} as Entries\""
|
||||
:check "toEqual([[\"a\", 1]])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts array as Reversed"
|
||||
:html ""
|
||||
:action "await run(\"[1,2,3] as Reversed\""
|
||||
:check "toEqual([3, 2, 1])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts array as Unique"
|
||||
:html ""
|
||||
:action "await run(\"[1,2,2,3,3] as Unique\""
|
||||
:check "toEqual([1, 2, 3])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "converts nested array as Flat"
|
||||
:html ""
|
||||
:action "await run(\"[[1,2],[3,4]] as Flat\""
|
||||
:check "toEqual([1, 2, 3, 4])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: attributeRef (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream attributeRef tests. 0 of 1 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attributeRef can be set through possessive w/ short syntax"
|
||||
:html "<div id='arDiv' _='on click set my @data-foo to \\\"blue\\\"' data-foo='red'></div>"
|
||||
:action "find('#arDiv').dispatchEvent('click')"
|
||||
:check "toBe(\"blue\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,29 @@
|
||||
;; 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: closest (3 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream closest tests. 0 of 3 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attributes can be set via the closest expression 2"
|
||||
:html "<div id='outerDiv2' foo='bar'><div id='d1b' _='on click set closest @foo to \\\"doh\\\"'></div></div>"
|
||||
:action "find('#d1b').dispatchEvent('click')"
|
||||
:check "toBe(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "closest does not consume a following where clause"
|
||||
:html "<table><tr><td><input type='checkbox' class='cb'><input type='checkbox' class='cb'><input id='master' type='checkbox' _=\\\"set :others to <input[type=checkbox]/> in the closest <table/> where it is not me on click put :others.length into #out\\\"></td></tr></table><div id='out'></div>"
|
||||
:action "find('#master').click()"
|
||||
:check "toHaveText(\"2\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "closest with to modifier still works after parse change"
|
||||
:html "<div id='outer'><div id='inner'></div></div>"
|
||||
:action ""
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,187 @@
|
||||
;; 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: collectionExpressions (22 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream collectionExpressions tests. 0 of 22 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "filters an array by condition"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "filters with comparison"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([4, 5])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works with DOM elements"
|
||||
:html "<ul id='list'><li class='yes'>A</li><li>B</li><li class='yes'>C</li></ul><button _='on click set items to <li/> in #list then set matches to items where it matches .yes then put matches mapped to its textContent into #out'>Go</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"AC\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sorts by a property"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sorts descending"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([3, 2, 1])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sorts numbers by a computed key"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "maps to a property"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"Alice\", \"Bob\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "maps with an expression"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([2, 4, 6])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where then mapped to"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"Alice\", \"Charlie\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sorted by then mapped to"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"Alice\", \"Charlie\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where then sorted by then mapped to"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"Bob\", \"Charlie\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "the result inside where refers to previous command result, not current element"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([4, 5])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where binds after in without parens"
|
||||
:html "<div id='container'><span class='a'>A</span><span class='b'>B</span><span class='a'>C</span></div>"
|
||||
:action "await run(\"<span/> in #container where it matches .a\""
|
||||
:check "toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sorted by binds after in without parens"
|
||||
:html "<ul id='list'><li>C</li><li>A</li><li>B</li></ul>"
|
||||
:action "await run(\"<li/> in #list where its textContent is not '"
|
||||
:check "toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where binds after property access"
|
||||
:html ""
|
||||
:action "await run(\"obj.items where it > 2\""
|
||||
:check "toEqual([3, 4])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where after in with mapped to"
|
||||
:html "<ul id='items'><li class='yes'>A</li><li>B</li><li class='yes'>C</li></ul>"
|
||||
:action "await run(
|
||||
\"<li/> in #items where it matches .yes mapped to its textContent\""
|
||||
:check "toEqual([\"A\", \"C\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where binds after in on closest"
|
||||
:html "<div id='box'><span class='a'>A</span><span class='b'>B</span><span class='a'>C</span></div><button _=\\\"on click set result to (<span/> in #box) where it matches .a then put result.length into me\\\">go (parens)</button><button id='b2' _=\\\"on click set result to <span/> in #box where it matches .a then put result.length into me\\\">go</button>"
|
||||
:action "find('#b2').click()"
|
||||
:check "toHaveText(\"2\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where in init followed by on feature"
|
||||
:html "<div id='box'><span class='a'>A</span><span class='b'>B</span></div><button _=\\\"set :items to <span/> in #box where it matches .a on click put :items.length into me\\\">go</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where in component init followed by on feature"
|
||||
:html "
|
||||
<div id='box'><span class='a'>A</span><span class='b'>B</span></div>
|
||||
<template component=\"test-where-comp\"
|
||||
_=\"set :items to <span/> in #box where it matches .a
|
||||
on click put :items.length into me\">
|
||||
<slot/>
|
||||
</template>
|
||||
<test-where-comp>go</test-where-comp>
|
||||
"
|
||||
:action "find('test-where-comp').click()"
|
||||
:check "toHaveText(\"1\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where with is not me in component template"
|
||||
:html "
|
||||
<div id='box'><input type=\"checkbox\" class=\"cb\"><input type=\"checkbox\" class=\"cb\"></div>
|
||||
<template component=\"test-where-me\">
|
||||
<input type=\"checkbox\" _=\"set :checkboxes to <input[type=checkbox]/> in #box where it is not me on change set checked of the :checkboxes to my checked\">
|
||||
</template>
|
||||
<test-where-me></test-where-me>
|
||||
"
|
||||
:action "find('test-where-me input').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "where with is not me followed by on feature"
|
||||
:html "
|
||||
<table>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\" checked></td></tr>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\"></td></tr>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\" checked></td></tr>
|
||||
<tr><td><input id=\"master\" type=\"checkbox\"
|
||||
_=\"set :checkboxes to <input[type=checkbox]/> in the closest <table/> where it is not me
|
||||
on change set checked of the :checkboxes to my checked\"></td></tr>
|
||||
</table>
|
||||
"
|
||||
:action "find('#master').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "full select-all pattern with multiple on features"
|
||||
:html "
|
||||
<table>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\" checked></td></tr>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\"></td></tr>
|
||||
<tr><td><input type=\"checkbox\" class=\"cb\" checked></td></tr>
|
||||
<tr><td><input id=\"master\" type=\"checkbox\"
|
||||
_=\"set :checkboxes to <input[type=checkbox]/> in the closest <table/> where it is not me
|
||||
on change
|
||||
set checked of the :checkboxes to my checked
|
||||
on change from the closest <table/>
|
||||
if no :checkboxes where it is checked
|
||||
set my indeterminate to false
|
||||
set my checked to false
|
||||
else if no :checkboxes where it is not checked
|
||||
set my indeterminate to false
|
||||
set my checked to true
|
||||
else
|
||||
set my indeterminate to true
|
||||
end\"></td></tr>
|
||||
</table>
|
||||
"
|
||||
:action "find('#master').click()"
|
||||
:check "toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,251 @@
|
||||
;; 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: comparisonOperator (40 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream comparisonOperator tests. 0 of 40 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is a works with instanceof fallback"
|
||||
:html "<div id='d1' _='on click if I am a Element put \\\"yes\\\" into me'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is a Node works via instanceof"
|
||||
:html "<div id='d1' _='on click if I am a Node put \\\"yes\\\" into me'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not a works with instanceof fallback"
|
||||
:html "<div id='d1' _='on click if \\\"hello\\\" is not a Element put \\\"yes\\\" into me'></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "contains ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "matches ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "starts with works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "ends with works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not start with works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not end with works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "starts with null is false"
|
||||
:html ""
|
||||
:action "await run(\"null starts with '; await run(\"null does not start with '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "ends with null is false"
|
||||
:html ""
|
||||
:action "await run(\"null ends with '; await run(\"null does not end with '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "starts with ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "ends with ignoring case works"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "starts with coerces to string"
|
||||
:html ""
|
||||
:action "await run(\"123 starts with '; await run(\"123 starts with '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "ends with coerces to string"
|
||||
:html ""
|
||||
:action "await run(\"123 ends with '; await run(\"123 ends with '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is between works"
|
||||
:html ""
|
||||
:action "await run(\"5 is between 1 and 10\"; await run(\"1 is between 1 and 10\"; await run(\"10 is between 1 and 10\"; await run(\"0 is between 1 and 10\"; await run(\"11 is between 1 and 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not between works"
|
||||
:html ""
|
||||
:action "await run(\"5 is not between 1 and 10\"; await run(\"0 is not between 1 and 10\"; await run(\"11 is not between 1 and 10\"; await run(\"1 is not between 1 and 10\"; await run(\"10 is not between 1 and 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "between works with strings"
|
||||
:html ""
|
||||
:action "await run(\"'; await run(\"'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "I am between works"
|
||||
:html ""
|
||||
:action "await run(\"I am between 1 and 10\"; await run(\"I am between 1 and 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "I am not between works"
|
||||
:html ""
|
||||
:action "await run(\"I am not between 1 and 10\"; await run(\"I am not between 1 and 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "precedes works"
|
||||
:html "<div id='a'></div><div id='b'></div><div id='c'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "follows works"
|
||||
:html "<div id='a'></div><div id='b'></div><div id='c'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not precede works"
|
||||
:html "<div id='a'></div><div id='b'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not follow works"
|
||||
:html "<div id='a'></div><div id='b'></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "precedes with null is false"
|
||||
:html ""
|
||||
:action "await run(\"null precedes null\"; await run(\"null does not precede null\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "I precede works"
|
||||
:html "<div id='a' _=\\\"on click if I precede #b put 'yes' into me\\\"></div><div id='b'></div>"
|
||||
:action "find('#a').dispatchEvent('click')"
|
||||
:check "toHaveText(\"yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is really works without equal to"
|
||||
:html ""
|
||||
:action "await run(\"2 is really 2\"; await run(\"2 is really '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not really works without equal to"
|
||||
:html ""
|
||||
:action "await run(\"2 is not really '; await run(\"2 is not really 2\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is equal works without to"
|
||||
:html ""
|
||||
:action "await run(\"2 is equal 2\"; await run(\"2 is equal 1\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not equal works without to"
|
||||
:html ""
|
||||
:action "await run(\"2 is not equal 2\"; await run(\"2 is not equal 1\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "am works as alias for is"
|
||||
:html ""
|
||||
:action "await run(\"2 am 2\"; await run(\"2 am 1\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not undefined still works as equality"
|
||||
:html ""
|
||||
:action "await run(\"5 is not undefined\"; await run(\"null is not undefined\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not null still works as equality"
|
||||
:html ""
|
||||
:action "await run(\"5 is not null\"; await run(\"null is not null\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is falls back to boolean property when rhs is undefined"
|
||||
:html "<input id='c1' type='checkbox' checked='checked'/><input id='c2' type='checkbox'/>"
|
||||
:action "await run(\"#c1 is checked\"; await run(\"#c2 is checked\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is not falls back to boolean property when rhs is undefined"
|
||||
:html "<input id='c1' type='checkbox' checked='checked'/><input id='c2' type='checkbox'/>"
|
||||
:action "await run(\"#c1 is not checked\"; await run(\"#c2 is not checked\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is boolean property works with disabled"
|
||||
:html "<button id='b1' disabled>Disabled</button><button id='b2'>Enabled</button>"
|
||||
:action "await run(\"#b1 is disabled\"; await run(\"#b2 is disabled\"; await run(\"#b2 is not disabled\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is still does equality when rhs variable exists"
|
||||
:html ""
|
||||
:action "await run(\"x is y\"; await run(\"x is y\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is boolean property works in where clause"
|
||||
:html "<input class='cb' type='checkbox' checked='checked'/><input class='cb' type='checkbox'/><input class='cb' type='checkbox' checked='checked'/>"
|
||||
:action "await run(\".cb where it is checked\""
|
||||
:check "toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,65 @@
|
||||
;; 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: default (9 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream default tests. 0 of 9 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can default possessive properties"
|
||||
:html "<div id='d1' _=\\\"on click default #d1's foo to 'bar' then put #d1's foo into me\\\"></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can default of-expression properties"
|
||||
:html "<div id='d1' _=\\\"on click default foo of me to 'bar' then put my foo into me\\\"></div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can default array elements"
|
||||
:html "<div _=\"on click set arr to [null, null] then default arr[0] to 'yes' then put arr[0] into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "default array element respects existing value"
|
||||
:html "<div _=\"on click set arr to ['existing', null] then default arr[0] to 'new' then put arr[0] into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"existing\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "default preserves zero"
|
||||
:html "<div _='on click set x to 0 then default x to 10 then put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"0\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "default overwrites empty string"
|
||||
:html "<div _='on click set x to \"\" then default x to \"fallback\" then put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"fallback\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "default preserves false"
|
||||
:html "<div _='on click set x to false then default x to true then put x into me'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"false\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can default style ref when unset"
|
||||
:html "<div _=\"on click default *background-color to 'red'\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('background-color', 'rgb(255, 0, 0)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "default style ref preserves existing value"
|
||||
:html "<div style=\"color: blue\" _=\"on click default *color to 'red'\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('color', 'rgb(0, 0, 255)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: in (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream in tests. 0 of 1 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "null value in array returns empty"
|
||||
:html ""
|
||||
:action "await run(\"null in [1, 2, 3]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,258 @@
|
||||
;; 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: increment (20 tests — 15 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream increment tests. 15 of 20 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment an empty variable"
|
||||
:html "<div _=\"on click increment value then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click increment value then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a variable"
|
||||
:html "<div _=\"on click set value to 20 then increment value by 2 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"22\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 20 then increment value by 2 then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"22\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment refer to result"
|
||||
:html "<div _=\"on click increment value by 2 then put it into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click increment value by 2 then put it into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment an attribute"
|
||||
:html "<div value=\"5\" _=\"on click increment @value then put @value into me\"></div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"8\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click increment @value then put @value into me\")
|
||||
(dom-set-attr _el-div \"value\" \"5\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"8\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment an floating point numbers"
|
||||
:html "<div value=\"5\" _=\"on click set value to 5.2 then increment value by 6.1 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"11.3\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 5.2 then increment value by 6.1 then put value into me\")
|
||||
(dom-set-attr _el-div \"value\" \"5\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"11.3\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a property"
|
||||
:html "<div _=\"on click increment my.innerHTML\">3</div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"6\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click increment my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"3\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"6\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment by zero"
|
||||
:html "<div _=\"on click set value to 20 then increment value by 0 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"20\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 20 then increment value by 0 then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"20\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a value multiple times"
|
||||
:html "<div _=\"on click increment my.innerHTML\"></div>"
|
||||
:action "div.click(); div.click(); div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click increment my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement an empty variable"
|
||||
:html "<div _=\"on click decrement value then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"-1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click decrement value then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"-1\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement a variable"
|
||||
:html "<div _=\"on click set value to 20 then decrement value by 2 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"18\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 20 then decrement value by 2 then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"18\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement an attribute"
|
||||
:html "<div value=\"5\" _=\"on click decrement @value then put @value into me\"></div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"2\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click decrement @value then put @value into me\")
|
||||
(dom-set-attr _el-div \"value\" \"5\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"2\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement an floating point numbers"
|
||||
:html "<div value=\"5\" _=\"on click set value to 6.1 then decrement value by 5.1 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"1\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 6.1 then decrement value by 5.1 then put value into me\")
|
||||
(dom-set-attr _el-div \"value\" \"5\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"1\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement a property"
|
||||
:html "<div _=\"on click decrement my.innerHTML\">3</div>"
|
||||
:action "div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"0\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click decrement my.innerHTML\")
|
||||
(dom-set-inner-html _el-div \"3\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"0\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement a value multiple times"
|
||||
:html "<div _=\"on click decrement my.innerHTML\"></div>"
|
||||
:action "div.click(); div.click(); div.click(); div.click(); div.click()"
|
||||
:check "div.innerHTML.should.equal(\"-5\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click decrement my.innerHTML\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"-5\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement by zero"
|
||||
:html "<div _=\"on click set value to 20 then decrement value by 0 then put value into me\"></div>"
|
||||
:action "div.click()"
|
||||
:check "div.innerHTML.should.equal(\"20\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set value to 20 then decrement value by 0 then put value into me\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"20\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment an array element"
|
||||
:html "<div _=\"on click set arr to [10, 20, 30] then increment arr[1] then put arr[1] into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"21\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can decrement an array element"
|
||||
:html "<div _=\"on click set arr to [10, 20, 30] then decrement arr[1] then put arr[1] into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"19\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a possessive property"
|
||||
:html "<div id=\"d1\" _=\"on click increment #d1's innerHTML\">5</div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"6\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a property of expression"
|
||||
:html "<div id=\"d1\" _=\"on click increment innerHTML of #d1\">5</div>"
|
||||
:action "find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveText(\"6\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can increment a style ref"
|
||||
:html "<div _=\"on click set my *opacity to 0.5 then increment *opacity by 0.25 then put *opacity into me\"></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"0.75\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,29 @@
|
||||
;; 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: logicalOperator (3 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream logicalOperator tests. 0 of 3 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "and short-circuits when lhs promise resolves to false"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(false); toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "or short-circuits when lhs promise resolves to true"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(true); toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "or evaluates rhs when lhs promise resolves to false"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"fallback\"); toBe(true)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,41 @@
|
||||
;; 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: mathOperator (5 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream mathOperator tests. 0 of 5 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "array + array concats"
|
||||
:html ""
|
||||
:action "await run(\"[1, 2] + [3, 4]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "array + single value appends"
|
||||
:html ""
|
||||
:action "await run(\"[1, 2] + 3\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "array + array does not mutate original"
|
||||
:html ""
|
||||
:action "await run(\"set a to [1, 2] then set b to a + [3] then return a\""
|
||||
:check "toEqual([1, 2])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "array concat chains"
|
||||
:html ""
|
||||
:action "await run(\"[1] + [2] + [3]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "empty array + array works"
|
||||
:html ""
|
||||
:action "await run(\"[] + [1, 2]\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,41 @@
|
||||
;; 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: no (5 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream no tests. 0 of 5 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "no returns false for non-empty array"
|
||||
:html ""
|
||||
:action "await run(\"no ['"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "no with where filters then checks emptiness"
|
||||
:html ""
|
||||
:action "await run(\"no [1, 2, 3] where it > 5\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "no with where returns false when matches exist"
|
||||
:html ""
|
||||
:action "await run(\"no [1, 2, 3] where it > 1\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "no with where and is not"
|
||||
:html ""
|
||||
:action "await run(\"no [1, 2, 3] where it is not 2\""
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "no with where on DOM elements"
|
||||
:html "<div id='box'><span class='a'>A</span><span class='b'>B</span></div><button _=\\\"on click if no <span/> in #box where it matches .c then put 'none' into #out else put 'found' into #out\\\">go</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"none\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: objectLiteral (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream objectLiteral tests. 0 of 1 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "allows trailing commas"
|
||||
:html ""
|
||||
:action "await run(\"{foo:true, bar-baz:false,}\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: queryRef (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream queryRef tests. 0 of 1 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "queryRef w/ $ works"
|
||||
:html "<div class='c1'></div><div foo='bar' class='c2'></div><div class='c3'></div>"
|
||||
:action ""
|
||||
:check "toBe(1)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,35 @@
|
||||
;; 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: select (4 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream select tests. 0 of 4 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "selects text in an input"
|
||||
:html "<input id='inp' value='hello world' /><button _='on click select #inp'>Select</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toBe(\"hello world\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "selects text in a textarea"
|
||||
:html "<textarea id='ta'>some text</textarea><button _='on click select #ta'>Select</button>"
|
||||
:action "find('button').click()"
|
||||
:check "toBe(\"some text\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "selects implicit me"
|
||||
:html "<input id='inp' value='test' _='on click select' />"
|
||||
:action "find('#inp').click()"
|
||||
:check "toBe(\"test\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "returns selected text"
|
||||
:html "<p id='text'>Hello World</p><button _='on click put the selection into #out'>Get</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"Hello\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,53 @@
|
||||
;; 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: splitJoin (7 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream splitJoin tests. 0 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-expressions))"
|
||||
:style "color:#7c3aed" "expressions"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "splits a string by delimiter"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"a\", \"b\", \"c\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "splits by whitespace"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toEqual([\"hello\", \"world\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "joins an array with delimiter"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"a, b, c\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "joins with empty string"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"xyz\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "split then where then joined"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"a-b-c\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "split then sorted then joined"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"apple, banana, cherry\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "split then mapped then joined"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(\"5,5\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
85
sx/sx/applications/hyperscript/gallery-expressions/index.sx
Normal file
85
sx/sx/applications/hyperscript/gallery-expressions/index.sx
Normal file
@@ -0,0 +1,85 @@
|
||||
;; 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 tests: expressions (139 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-increment))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"increment")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(20 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-select))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"select")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-collectionExpressions))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"collectionExpressions")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(22 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-splitJoin))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"splitJoin")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(7 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-default))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"default")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(9 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-asExpression))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"asExpression")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(17 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-attributeRef))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"attributeRef")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-closest))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"closest")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(3 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-comparisonOperator))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"comparisonOperator")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(40 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-in))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"in")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-logicalOperator))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"logicalOperator")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(3 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-mathOperator))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"mathOperator")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(5 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-no))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"no")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(5 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-objectLiteral))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"objectLiteral")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-expressions-queryRef))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"queryRef")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
)))
|
||||
@@ -0,0 +1,41 @@
|
||||
;; 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: askAnswer (5 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream askAnswer tests. 0 of 5 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "prompts and puts result in it"
|
||||
:html "<button _='on click ask \\\"What is your name?\\\" then put it into #out'>Ask</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"Alice\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "returns null on cancel"
|
||||
:html "<button _='on click ask \\\"Name?\\\" then put it into #out'>Ask</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"null\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shows an alert"
|
||||
:html "<button _='on click answer \\\"Hello!\\\" then put \\\"done\\\" into #out'>Go</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"done\"); toBe(\"Hello!\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "confirm returns first choice on OK"
|
||||
:html "<button _='on click answer \\\"Save?\\\" with \\\"Yes\\\" or \\\"No\\\" then put it into #out'>Go</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"Yes\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "confirm returns second choice on cancel"
|
||||
:html "<button _='on click answer \\\"Save?\\\" with \\\"Yes\\\" or \\\"No\\\" then put it into #out'>Go</button><div id='out'></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText(\"No\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,59 @@
|
||||
;; 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: assignableElements (8 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream assignableElements tests. 0 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set #id replaces element with HTML string"
|
||||
:html "<div id='target'>old</div><button _='on click set #target to \\\"<span id=target>new</span>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\"); toBe(\"SPAN\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set #id replaces element with another element"
|
||||
:html "<div id='target'>old</div><button _='on click make a <span.replaced/> then put \\\"moved\\\" into it then set #target to it'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toBe(\"moved\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set .class replaces all matching elements"
|
||||
:html "<ul id='list'> <li class='item'>a</li> <li class='item'>b</li> <li class='item'>c</li></ul><button _='on click set .item to \\\"<li class=item>replaced</li>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toBe(3); toEqual([\"replaced\", \"replaced\", \"replaced\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set <query/> replaces all matching elements"
|
||||
:html "<div id='box'> <p>one</p> <p>two</p></div><button _='on click set <p/> in #box to \\\"<p>done</p>\\\"'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toEqual([\"done\", \"done\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set closest replaces ancestor"
|
||||
:html "<div class='wrapper'><button _='on click set (closest <div/>) to \\\"<div class=wrapper>replaced</div>\\\"'>go</button></div>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"replaced\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "hyperscript in replacement content is initialized"
|
||||
:html "<div id='target'>old</div><button id='go' _=\\\"on click set #target to '<div id=target _="on click put `clicked` into me">new</div>'\\\">go</button>"
|
||||
:action "find('#go').dispatchEvent('click'); find('#target').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\"); toHaveText(\"clicked\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "swap #a with #b swaps DOM positions"
|
||||
:html "<div id='container'> <div id='a'>A</div> <div id='b'>B</div></div><button _='on click swap #a with #b'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toEqual([\"B\", \"A\"])"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "put into still works as innerHTML"
|
||||
:html "<div id='target'>old</div><button _='on click put \\\"new\\\" into #target'>go</button>"
|
||||
:action "find('button').dispatchEvent('click')"
|
||||
:check "toHaveText(\"new\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,253 @@
|
||||
;; 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: component (19 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream component tests. 0 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "registers a custom element from a template"
|
||||
:html "
|
||||
<template component=\"test-hello\">
|
||||
<span>Hello World</span>
|
||||
</template>
|
||||
<test-hello></test-hello>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "renders template expressions"
|
||||
:html "
|
||||
<template component=\"test-greet\">
|
||||
<span>Hello ${\"\\x24\"}{$name}!</span>
|
||||
</template>
|
||||
<test-greet></test-greet>
|
||||
"
|
||||
:action "await run(\"set $name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "applies _ hyperscript to component instance"
|
||||
:html "
|
||||
<template component=\"test-init\" _=\"init set ^msg to 'initialized'\">
|
||||
<span>${\"\\x24\"}{^msg}</span>
|
||||
</template>
|
||||
<test-init></test-init>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "processes _ on inner elements"
|
||||
:html "
|
||||
<template component=\"test-inner\" _=\"init set ^count to 0\">
|
||||
<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
|
||||
<span>0</span>
|
||||
</template>
|
||||
<test-inner></test-inner>
|
||||
"
|
||||
:action "find('test-inner button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reactively updates template expressions"
|
||||
:html "
|
||||
<template component=\"test-reactive\" _=\"init set ^count to 0\">
|
||||
<button _=\"on click increment ^count\">+</button>
|
||||
<span>Count: ${\"\\x24\"}{^count}</span>
|
||||
</template>
|
||||
<test-reactive></test-reactive>
|
||||
"
|
||||
:action "find('test-reactive button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports multiple independent instances"
|
||||
:html "
|
||||
<template component=\"test-multi\" _=\"init set ^count to 0\">
|
||||
<button _=\"on click increment ^count then put ^count into the next <span/>\">+</button>
|
||||
<span>0</span>
|
||||
</template>
|
||||
<test-multi id=\"a\"></test-multi>
|
||||
<test-multi id=\"b\"></test-multi>
|
||||
"
|
||||
:action "find('#a button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reads attributes via @"
|
||||
:html "
|
||||
<template component=\"test-attrs\" _=\"init set ^val to @data-start as Int\">
|
||||
<span>${\"\\x24\"}{^val}</span>
|
||||
</template>
|
||||
<test-attrs data-start=\"42\"></test-attrs>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports #for loops in template"
|
||||
:html "
|
||||
<template component=\"test-loop\" _=\"init set ^items to ['a', 'b', 'c']\">
|
||||
<ul>
|
||||
#for item in ^items
|
||||
<li>${\"\\x24\"}{item}</li>
|
||||
#end
|
||||
</ul>
|
||||
</template>
|
||||
<test-loop></test-loop>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports #if conditionals in template"
|
||||
:html "
|
||||
<template component=\"test-cond\" _=\"init set ^show to true\">
|
||||
#if ^show
|
||||
<span>visible</span>
|
||||
#end
|
||||
</template>
|
||||
<test-cond></test-cond>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "substitutes slot content into template"
|
||||
:html "
|
||||
<template component=\"test-card\">
|
||||
<div class=\"card\"><slot/></div>
|
||||
</template>
|
||||
<test-card><p>Hello from slot</p></test-card>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "blocks processing of inner hyperscript until render"
|
||||
:html "
|
||||
<template component=\"test-block\" _=\"init set ^msg to 'ready'\">
|
||||
<span _=\"on click put ^msg into me\">click me</span>
|
||||
</template>
|
||||
<test-block></test-block>
|
||||
"
|
||||
:action "find('test-block span').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports named slots"
|
||||
:html "
|
||||
<template component=\"test-named-slot\">
|
||||
<header><slot name=\"title\"></slot></header>
|
||||
<main><slot/></main>
|
||||
<footer><slot name=\"footer\"></slot></footer>
|
||||
</template>
|
||||
<test-named-slot>
|
||||
<h1 slot=\"title\">My Title</h1>
|
||||
<p>Default content</p>
|
||||
<span slot=\"footer\">Footer text</span>
|
||||
</test-named-slot>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "does not process slotted _ attributes prematurely"
|
||||
:html "
|
||||
<div _=\"init set ^x to 42\">
|
||||
<template component=\"test-slot-hs\">
|
||||
<div class=\"wrap\"><slot/></div>
|
||||
</template>
|
||||
<test-slot-hs>
|
||||
<span _=\"on click put ^x into me\">before</span>
|
||||
</test-slot-hs>
|
||||
</div>
|
||||
"
|
||||
:action "find('test-slot-hs span').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "slotted content resolves ^var from outer scope, not component scope"
|
||||
:html "
|
||||
<div _=\"init set ^outer to 'from-outside'\">
|
||||
<template component=\"test-scope-slot\" _=\"init set ^outer to 'from-component'\">
|
||||
<div class=\"inner\"><slot/></div>
|
||||
</template>
|
||||
<test-scope-slot>
|
||||
<span _=\"init put ^outer into me\">waiting</span>
|
||||
</test-scope-slot>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "component isolation prevents ^var leaking inward"
|
||||
:html "
|
||||
<div _=\"init set ^leaked to 'should-not-see'\">
|
||||
<template component=\"test-isolated\" _=\"init set ^internal to 'component-only'\">
|
||||
<span _=\"init if ^leaked is not undefined put 'leaked!' into me else put ^internal into me\">waiting</span>
|
||||
</template>
|
||||
<test-isolated></test-isolated>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind keeps ^var in sync with attribute changes"
|
||||
:html "
|
||||
<template component=\"test-bind-attr\" _=\"bind ^count to @data-count\">
|
||||
<span>${\"\\x24\"}{^count}</span>
|
||||
</template>
|
||||
<test-bind-attr data-count=\"5\"></test-bind-attr>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attrs evaluates attribute as hyperscript in parent scope"
|
||||
:html "
|
||||
<template component=\"test-args\" _=\"init set ^list to attrs.items\">
|
||||
<ul>
|
||||
#for item in ^list
|
||||
<li>${\"\\x24\"}{item}</li>
|
||||
#end
|
||||
</ul>
|
||||
</template>
|
||||
<test-args items=\"$stuff\"></test-args>
|
||||
"
|
||||
:action "await run(\"set $stuff to ['"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attrs works with bind for reactive pass-through"
|
||||
:html "
|
||||
<template component=\"test-args-bind\" _=\"bind ^val to attrs.count\">
|
||||
<span>${\"\\x24\"}{^val}</span>
|
||||
</template>
|
||||
<test-args-bind count=\"$count\"></test-args-bind>
|
||||
<button _=\"on click increment $count\">+</button>
|
||||
"
|
||||
:action "find('button').click(); await run(\"set $count to 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attrs bind is bidirectional — inner changes flow outward"
|
||||
:html "
|
||||
<template component=\"test-args-bidir\" _=\"bind ^count to attrs.count\">
|
||||
<span>${\"\\x24\"}{^count}</span>
|
||||
<button _=\"on click increment ^count\">+</button>
|
||||
</template>
|
||||
<test-args-bidir count=\"$count\"></test-args-bidir>
|
||||
<p _=\"live put $count into me\"></p>
|
||||
"
|
||||
:action "find('test-args-bidir button').click(); await run(\"set $count to 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: cookies (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream cookies tests. 0 of 1 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "length is 0 when no cookies are set"
|
||||
:html ""
|
||||
:action ""
|
||||
:check "toBe(0)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
238
sx/sx/applications/hyperscript/gallery-language-def/index.sx
Normal file
238
sx/sx/applications/hyperscript/gallery-language-def/index.sx
Normal file
@@ -0,0 +1,238 @@
|
||||
;; 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: def (27 tests — 7 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream def tests. 7 of 27 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can define a basic no arg function"
|
||||
:html "<script type='text/hyperscript'>def foo() add .called to #d1 end</script> | <div _='on click call foo()'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo()\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can define a basic one arg function"
|
||||
:html "<script type='text/hyperscript'>def foo(str) put str into #d1.innerHTML end</script> | <div _='on click call foo(\"called\")'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.innerHTML.should.equal(\"\") && div.innerHTML.should.equal(\"called\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo(\\\"called\\\")\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-inner-html _el-div) \"called\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "functions can be namespaced"
|
||||
:html "<script type='text/hyperscript'>def utils.foo() add .called to #d1 end</script> | <div _='on click call utils.foo()'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call utils.foo()\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "is called synchronously"
|
||||
:html "<script type='text/hyperscript'>def foo() log meend</script> | <div _='on click call foo() then add .called to #d1'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo() then add .called to #d1\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can call asynchronously"
|
||||
:html "<script type='text/hyperscript'>def foo() wait 1ms log meend</script> | <div _='on click call foo() then add .called to #d1'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.classList.contains(\"called\").should.equal(false) && div.classList.contains(\"called\").should.equal(true)"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo() then add .called to #d1\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert (dom-has-class? _el-div \"called\"))
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can return a value synchronously"
|
||||
:html "<script type='text/hyperscript'>def foo() return \"foo\"end</script> | <div _='on click call foo() then put it into #d1.innerText'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.innerText.should.equal(\"\") && div.innerText.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo() then put it into #d1.innerText\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can exit"
|
||||
:html "<script type='text/hyperscript'>def foo() exit end</script>"
|
||||
:action "(see body)"
|
||||
:check "(no explicit assertion)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can return a value asynchronously"
|
||||
:html "<script type='text/hyperscript'>def foo() wait 1ms return \"foo\"end</script> | <div _='on click call foo() then put it into #d1.innerText'></div> | <div id='d1'></div>"
|
||||
:action "bar.click()"
|
||||
:check "div.innerText.should.equal(\"\") && div.innerText.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-d1 (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click call foo() then put it into #d1.innerText\")
|
||||
(dom-set-attr _el-d1 \"id\" \"d1\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-d1)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
;; SKIP check: skip div.innerText.should.equal(\"\")
|
||||
;; SKIP check: skip div.innerText.should.equal(\"foo\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can interop with javascript"
|
||||
:html "<script type='text/hyperscript'>def foo() return \"foo\"end</script>"
|
||||
:action "(see body)"
|
||||
:check "foo().should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can interop with javascript asynchronously"
|
||||
:html "<script type='text/hyperscript'>def foo() wait 1ms return \"foo\"end</script>"
|
||||
:action "(see body)"
|
||||
:check "val.should.equal(\"foo\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch exceptions"
|
||||
:html "<script type='text/hyperscript'>def foo() throw \"bar\"catch e set window.bar to e end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can rethrow in catch blocks"
|
||||
:html "<script type='text/hyperscript'>def foo() throw \"bar\"catch e throw e end</script>"
|
||||
:action "(see body)"
|
||||
:check "true.should.equal(false) && e.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can return in catch blocks"
|
||||
:html "<script type='text/hyperscript'>def foo() throw \"bar\"catch e return 42 end</script>"
|
||||
:action "(see body)"
|
||||
:check "foo().should.equal(42)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch async exceptions"
|
||||
:html "<script type='text/hyperscript'>def doh() wait 10ms throw \"bar\"end def foo() call doh()catch e set window.bar to e end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can catch nested async exceptions"
|
||||
:html "<script type='text/hyperscript'>def doh() wait 10ms throw \"bar\"end def foo() call doh()catch e set window.bar to e end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can rethrow in async catch blocks"
|
||||
:html "<script type='text/hyperscript'>def foo() throw \"bar\"catch e wait 10ms throw e end</script>"
|
||||
:action "(see body)"
|
||||
:check "reason.should.equal(\"bar\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can return in async catch blocks"
|
||||
:html "<script type='text/hyperscript'>def foo() throw \"bar\"catch e wait 10ms return 42 end</script>"
|
||||
:action "(see body)"
|
||||
:check "val.should.equal(42)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can install a function on an element and use in children w/ no leak"
|
||||
:html "<div _='def func() put 42 into #d3'><div id='d1' _='on click call func()'></div><div id='d2'></div><div id='d3'></div> </div>"
|
||||
:action "(see body)"
|
||||
:check "byId(\"d3\").innerText.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can install a function on an element and use in children w/ return value"
|
||||
:html "<div _='def func() return 42'><div id='d1' _='on click put func() into me'></div><div id='d2'></div><div id='d3'></div> </div>"
|
||||
:action "(see body)"
|
||||
:check "byId(\"d1\").innerText.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can install a function on an element and use me symbol correctly"
|
||||
:html "<div _='def func() put 42 into me'><div id='d1' _='on click call func()'></div><div id='d2'></div><div id='d3'></div> </div>"
|
||||
:action "(see body)"
|
||||
:check "div.innerText.should.equal(\"42\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "finally blocks run normally"
|
||||
:html "<script type='text/hyperscript'>def foo() set window.bar to 10finally set window.bar to 20 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(20)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "finally blocks run when an exception occurs"
|
||||
:html "<script type='text/hyperscript'>def foo() set window.bar to 10 throw \"foo\"finally set window.bar to 20 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(20)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "finally blocks run when an exception expr occurs"
|
||||
:html "<script type='text/hyperscript'>def foo() set window.bar to 10 call throwsAsyncException()finally set window.bar to 20 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(20)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async finally blocks run normally"
|
||||
:html "<script type='text/hyperscript'>def foo() wait a tick then set window.bar to 10finally set window.bar to 20 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(20)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "async finally blocks run when an exception occurs"
|
||||
:html "<script type='text/hyperscript'>def foo() wait a tick then set window.bar to 10 throw \"foo\"finally set window.bar to 20 end</script>"
|
||||
:action "(see body)"
|
||||
:check "window.bar.should.equal(20)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "exit stops execution mid-function"
|
||||
:html "<script type='text/hyperscript'>def foo() set x to 1 then exit then set x to 2 then return x end</script>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can return without a value"
|
||||
:html "<script type='text/hyperscript'>def foo() return end</script>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,189 @@
|
||||
;; 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: dom-scope (25 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream dom-scope tests. 0 of 25 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "isolated stops ^var resolution"
|
||||
:html "
|
||||
<div _=\"init set ^color to 'red'\">
|
||||
<div dom-scope=\"isolated\">
|
||||
<span _=\"init if ^color is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "closest jumps to matching ancestor"
|
||||
:html "
|
||||
<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
|
||||
<div dom-scope=\"isolated\" _=\"init set ^val to 'from-inner'\">
|
||||
<span dom-scope=\"closest .outer\" _=\"init put ^val into me\">none</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "closest with no match stops resolution"
|
||||
:html "
|
||||
<div _=\"init set ^val to 'found'\">
|
||||
<span dom-scope=\"closest .nonexistent\" _=\"init if ^val is not undefined put 'leaked' into me else put 'blocked' into me\">waiting</span>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "parent of jumps past matching ancestor to its parent"
|
||||
:html "
|
||||
<div class=\"outer\" _=\"init set ^val to 'from-outer'\">
|
||||
<div class=\"middle\" dom-scope=\"isolated\" _=\"init set ^val to 'from-middle'\">
|
||||
<span dom-scope=\"parent of .middle\" _=\"init put ^val into me\">none</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "isolated allows setting ^var on the isolated element itself"
|
||||
:html "
|
||||
<div _=\"init set ^outer to 'leaked'\">
|
||||
<div dom-scope=\"isolated\" _=\"init set ^inner to 'contained'\">
|
||||
<span _=\"init put ^inner into me\">none</span>
|
||||
</div>
|
||||
</div>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "child reads ^var set by parent"
|
||||
:html "<div _=\"init set ^count to 42\"> <span _=\"on click put ^count into me\">0</span></div>"
|
||||
:action "find('span').click()"
|
||||
:check "toHaveText('42')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "child writes ^var and parent sees it"
|
||||
:html "<div _=\"init set ^count to 0\"> <button _=\"on click set ^count to 99\">set</button> <span _=\"on click put ^count into me\">0</span></div>"
|
||||
:action "find('button').click(); find('span').click()"
|
||||
:check "toHaveText('99')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "deeply nested child reads ^var from grandparent"
|
||||
:html "<div _=\"init set ^name to 'alice'\"> <div> <div> <span _=\"on click put ^name into me\">empty</span> </div> </div></div>"
|
||||
:action "find('span').click()"
|
||||
:check "toHaveText('alice')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "closest ancestor wins (shadowing)"
|
||||
:html "<div _=\"init set ^color to 'red'\"> <div _=\"init set ^color to 'blue'\"> <span _=\"on click put ^color into me\">empty</span> </div></div>"
|
||||
:action "find('span').click()"
|
||||
:check "toHaveText('blue')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sibling subtrees have independent ^vars"
|
||||
:html "<div id=\"a\" _=\"init set ^val to 'A'\"> <span _=\"on click put ^val into me\">empty</span></div><div id=\"b\" _=\"init set ^val to 'B'\"> <span _=\"on click put ^val into me\">empty</span></div>"
|
||||
:action "find('#a span').click(); find('#b span').click()"
|
||||
:check "toHaveText('A'); toHaveText('B')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "write to ^var not found anywhere creates on current element"
|
||||
:html "<div> <button _=\"on click set ^newvar to 'created' then put ^newvar into next <span/>\">go</button> <span>empty</span></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText('created')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "child write updates the ancestor, not a local copy"
|
||||
:html "<div _=\"init set ^shared to 0\"> <button _=\"on click set ^shared to 10\">set</button> <span _=\"on click put ^shared into me\">0</span></div>"
|
||||
:action "find('button').click(); find('span').click()"
|
||||
:check "toHaveText('10')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "increment works on inherited var"
|
||||
:html "<div _=\"init set ^count to 0\"> <button _=\"on click increment ^count\" <span _=\"on click put ^count into me\">0</span></div>"
|
||||
:action "find('button').click(); find('button').click(); find('button').click(); find('span').click()"
|
||||
:check "toHaveText('3')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "dom keyword works as scope modifier"
|
||||
:html "<div _=\"init set dom count to 42\"> <span _=\"on click put dom count into me\">0</span></div>"
|
||||
:action "find('span').click()"
|
||||
:check "toHaveText('42')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set ^var on explicit element"
|
||||
:html "<div class=\"store\"> <button _=\"on click set ^data on closest .store to 'hello'\">set</button> <span _=\"on click put ^data on closest .store into me\">read</span></div>"
|
||||
:action "find('button').click(); find('span').click()"
|
||||
:check "toHaveText('hello')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "on clause targets a specific ancestor"
|
||||
:html "<div class=\"outer\" _=\"init set ^outerVal to 'outer'\"> <div class=\"inner\" _=\"init set ^innerVal to 'inner'\"> <span _=\"on click put ^outerVal on closest .outer into me\">read</span> </div></div>"
|
||||
:action "find('span').click()"
|
||||
:check "toHaveText('outer')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "on clause with id reference"
|
||||
:html "<div id=\"state-holder\"></div><button _=\"on click set ^count on #state-holder to 99\">set</button><span _=\"on click put ^count on #state-holder into me\">read</span>"
|
||||
:action "find('button').click(); find('span').click()"
|
||||
:check "toHaveText('99')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "when reacts to ^var changes"
|
||||
:html "<div _=\"init set ^count to 0\"> <button _=\"on click increment ^count\" <output _=\"when ^count changes put it into me\">0</output></div>"
|
||||
:action "find('button').click(); find('button').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 "always reacts to ^var changes"
|
||||
:html "<div _=\"init set ^name to 'alice'\"> <button _=\"on click set ^name to 'bob'\">rename</button> <output _=\"live put 'Hello </div>"
|
||||
:action "find('button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "multiple children react to same ^var"
|
||||
:html "<div _=\"init set ^color to 'red'\"> <button _=\"on click set ^color to 'blue'\">change</button> <span id=\"a\" _=\"when ^color changes put it into me\"></span> <span id=\"b\" _=\"when ^color changes put it into me\"></span></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText('red'); toHaveText('red'); toHaveText('blue'); toHaveText('blue')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sibling subtrees react independently with ^var"
|
||||
:html "<div id=\"a\" _=\"init set ^val to 0\"> <button _=\"on click increment ^val\" <output _=\"when ^val changes put it into me\">0</output></div><div id=\"b\" _=\"init set ^val to 0\"> <button _=\"on click increment ^val\" <output _=\"when ^val changes put it into me\">0</output></div>"
|
||||
:action "find('#a button').click(); find('#a button').click(); find('#b button').click()"
|
||||
:check "toHaveText('0'); toHaveText('0'); toHaveText('2'); toHaveText('0'); toHaveText('1'); toHaveText('2')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind works with ^var"
|
||||
:html "<div _=\"init set ^search to ''\"> <input type=\"text\" _=\"bind ^search and my value\" /> <output _=\"when ^search changes put it into me\"></output></div>"
|
||||
:action "find('input').fill('hello')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "derived ^var chains reactively"
|
||||
:html "<div _=\"init set ^price to 10 then set ^qty to 2 then set ^total to 20\"> <span _=\"when ^price changes set ^total to (^price * ^qty)\"></span> <span _=\"when ^qty changes set ^total to (^price * ^qty)\"></span> <output _=\"when ^total changes put it into me\"></output> <button id=\"price-btn\" _=\"on click set ^price to 25\">set price</button> <button id=\"qty-btn\" _=\"on click set ^qty to 5\">set qty</button></div>"
|
||||
:action "find('#price-btn').click(); find('#qty-btn').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "effect stops when element is removed"
|
||||
:html "<div _=\"init set ^msg to 'hello'\"> <output _=\"when ^msg changes put it into me\"></output> <button _=\"on click set ^msg to 'updated'\">update</button></div>"
|
||||
:action "find('button').click()"
|
||||
:check "toHaveText('hello')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "dedup prevents re-fire on same ^var value"
|
||||
:html "<div _=\"init set ^val to 'same'\"> <output _=\"when ^val changes increment :runs then put :runs into me\"></output> <button _=\"on click set ^val to 'same'\">same</button> <button id=\"diff\" _=\"on click set ^val to 'different'\">diff</button></div>"
|
||||
:action "find('#diff').click()"
|
||||
:check "toHaveText('1'); toHaveText('1'); toHaveText('2')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,59 @@
|
||||
;; 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: evalStatically (8 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream evalStatically tests. 0 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works on number literals"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works on boolean literals"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works on null literal"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works on plain string literals"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works on time expressions"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "throws on template strings"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "throws on symbol references"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "throws on math expressions"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
17
sx/sx/applications/hyperscript/gallery-language-js/index.sx
Normal file
17
sx/sx/applications/hyperscript/gallery-language-js/index.sx
Normal file
@@ -0,0 +1,17 @@
|
||||
;; 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: js (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream js tests. 0 of 1 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "handles rejected promises without hanging"
|
||||
:html "<div _='on click js return Promise.reject(\\\"boom\\\") end catch e put e into my.innerHTML'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"boom\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,53 @@
|
||||
;; 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: parser (7 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream parser tests. 0 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can have comments in attributes (triple dash)"
|
||||
:html "<div _='on click put \\\"clicked\\\" into my.innerHTML ---put some content into the div...'></div>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveText(\"clicked\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "recovers across feature boundaries and reports all errors"
|
||||
:html "<div id='d1' _='on click blargh end on mouseenter put \\\"hovered\\\" into my.innerHTML'></div>"
|
||||
:action ""
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "recovers across multiple feature errors"
|
||||
:html "<div id='d1' _='on click blargh end on mouseenter also_bad end on focus put \\\"focused\\\" into my.innerHTML'></div>"
|
||||
:action ""
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "fires hyperscript:parse-error event with all errors"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check "toBe(2)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "element-level isolation still works with error recovery"
|
||||
:html "<div><div id='d1' _='on click blargh end on mouseenter also_bad'></div><div id='d2' _='on click put \\\"clicked\\\" into my.innerHTML'></div></div>"
|
||||
:action "find('#d2').dispatchEvent('click')"
|
||||
:check "toHaveText(\"clicked\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "_hyperscript() evaluate API still throws on first error"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "parse error at EOF on trailing newline does not crash"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,35 @@
|
||||
;; 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: relativePositionalExpression (4 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream relativePositionalExpression tests. 0 of 4 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can access property of next element with possessive"
|
||||
:html "<div id=\"d1\"></div><div id=\"d2\">hello</div>"
|
||||
:action ""
|
||||
:check "toBe('hello')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can access property of previous element with possessive"
|
||||
:html "<div id=\"d1\">world</div><div id=\"d2\"></div>"
|
||||
:action ""
|
||||
:check "toBe('world')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can access style of next element with possessive"
|
||||
:html "<div id=\"d1\"></div><div id=\"d2\" style=\"color: red\"></div>"
|
||||
:action ""
|
||||
:check "toBe('red')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can write to next element with put command"
|
||||
:html ""
|
||||
:action "find('#d1').dispatchEvent('click'); evaluate({...})"
|
||||
:check "toHaveText('updated')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,17 @@
|
||||
;; 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: scoping (1 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream scoping tests. 0 of 1 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-language))"
|
||||
:style "color:#7c3aed" "language"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "element scoped variables span features w/short syntax"
|
||||
:html "<div id='d1' _='on click 1 set :x to 10 on click 2 set @out to :x'></div>"
|
||||
:action "find('#d1').dispatchEvent('click'); find('#d1').dispatchEvent('click')"
|
||||
:check "toHaveAttribute('out', '10')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
65
sx/sx/applications/hyperscript/gallery-language/index.sx
Normal file
65
sx/sx/applications/hyperscript/gallery-language/index.sx
Normal file
@@ -0,0 +1,65 @@
|
||||
;; 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 tests: language (106 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-def))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"def")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(27 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-askAnswer))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"askAnswer")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(5 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-dom-scope))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"dom-scope")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(25 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-evalStatically))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"evalStatically")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(8 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-assignableElements))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"assignableElements")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(8 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-component))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"component")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(19 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-js))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"js")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-parser))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"parser")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(7 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-scoping))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"scoping")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-cookies))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"cookies")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(1 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-language-relativePositionalExpression))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"relativePositionalExpression")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
)))
|
||||
283
sx/sx/applications/hyperscript/gallery-reactivity-bind/index.sx
Normal file
283
sx/sx/applications/hyperscript/gallery-reactivity-bind/index.sx
Normal file
@@ -0,0 +1,283 @@
|
||||
;; 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: bind (44 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream bind tests. 0 of 44 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "syncs variable and input value in both directions"
|
||||
:html "<input type=\"text\" id=\"name-input\" value=\"Alice\" /><span _=\"bind $name and #name-input.value end
|
||||
when $name changes put it into me\"></span>"
|
||||
:action "evaluate({...}); await run(\"set $name to '"
|
||||
:check "toHaveText('Alice'); toHaveText('Bob')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "syncs variable and attribute in both directions"
|
||||
:html "<div _=\"bind $theme and @data-theme\"></div>"
|
||||
:action "await run(\"set $theme to '; await run(\"set $theme to '"
|
||||
:check "toHaveAttribute('data-theme', 'light'); toHaveAttribute('data-theme', 'dark')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "dedup prevents infinite loop in two-way bind"
|
||||
:html "<div _=\"bind $color and @data-color\"></div>"
|
||||
:action "await run(\"set $color to '; await run(\"set $color to '"
|
||||
:check "toHaveAttribute('data-color', 'red'); toHaveAttribute('data-color', 'blue')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "\"with\" is a synonym for \"and\""
|
||||
:html "<input type=\"text\" id=\"city-input\" value=\"Paris\" /><span _=\"bind $city to #city-input.value end
|
||||
when $city changes put it into me\"></span>"
|
||||
:action "await run(\"set $city to '"
|
||||
:check "toHaveText('Paris')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shorthand on text input binds to value"
|
||||
:html "<input type=\"text\" value=\"hello\"
|
||||
_=\"bind $greeting to me end
|
||||
when $greeting changes put it into next <span/>\"></input><span></span>"
|
||||
:action "find('input').fill('goodbye'); await run(\"set $greeting to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shorthand on checkbox binds to checked"
|
||||
:html "<input type=\"checkbox\" _=\"bind $isDarkMode to me\" /><span _=\"when $isDarkMode changes put it into me\"></span>"
|
||||
:action "await run(\"set $isDarkMode to false\"; await run(\"set $isDarkMode to false\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shorthand on textarea binds to value"
|
||||
:html "<textarea _=\"bind $bio to me\">Hello world</textarea><span _=\"when $bio changes put it into me\"></span>"
|
||||
:action "find('textarea').fill('New bio')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shorthand on select binds to value"
|
||||
:html "<select _=\"bind $country to me\">
|
||||
<option value=\"us\">United States</option>
|
||||
<option value=\"uk\">United Kingdom</option>
|
||||
<option value=\"fr\">France</option>
|
||||
</select><span _=\"when $country changes put it into me\"></span>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "unsupported element: bind to plain div errors"
|
||||
:html ""
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "shorthand on type=number preserves number type"
|
||||
:html "<input type=\"number\" _=\"bind $price to me\" /><span _=\"when $price changes put it into me\"></span>"
|
||||
:action "await run(\"set $price to 42\""
|
||||
:check "toHaveText('42')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "boolean bind to attribute uses presence/absence"
|
||||
:html "<div _=\"bind $isEnabled and @data-active\"></div>"
|
||||
:action "await run(\"set $isEnabled to true\"; await run(\"set $isEnabled to false\""
|
||||
:check "toHaveAttribute('data-active', '')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "boolean bind to aria-* attribute uses \"true\"/\"false\" strings"
|
||||
:html "<div _=\"bind $isHidden and @aria-hidden\"></div>"
|
||||
:action "await run(\"set $isHidden to true\"; await run(\"set $isHidden to false\""
|
||||
:check "toHaveAttribute('aria-hidden', 'true'); toHaveAttribute('aria-hidden', 'false')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "style bind is one-way: variable drives style, not vice versa"
|
||||
:html "<div _=\"bind $opacity and *opacity\">visible</div>"
|
||||
:action "await run(\"set $opacity to 1\"; await run(\"set $opacity to 0.3\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "same value does not re-set input (prevents cursor jump)"
|
||||
:html "<input type=\"text\" value=\"hello\" _=\"bind $message to me\" />"
|
||||
:action ""
|
||||
:check "toBe(false)"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "external JS property write does not sync (known limitation)"
|
||||
:html "<input type=\"text\" value=\"original\" _=\"bind $searchTerm to me\" /><span _=\"when $searchTerm changes put it into me\"></span>"
|
||||
:action "evaluate({...})"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "form.reset() syncs variable back to default value"
|
||||
:html "<form id=\"test-form\"> <input type=\"text\" value=\"default\" _=\"bind $formField to me\" /></form><span _=\"when $formField changes put it into me\"></span>"
|
||||
:action "find('input').fill('user typed this')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "clicking a radio sets the variable to its value"
|
||||
:html "<input type=\"radio\" name=\"color\" value=\"red\" _=\"bind $color to me\" /><input type=\"radio\" name=\"color\" value=\"blue\" _=\"bind $color to me\" /><input type=\"radio\" name=\"color\" value=\"green\" _=\"bind $color to me\" /><span _=\"when $color changes put it into me\"></span>"
|
||||
:action "find('input[value=\"blue\"]').click(); find('input[value=\"green\"]').click(); await run(\"set $color to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "setting variable programmatically checks the matching radio"
|
||||
:html "<input type=\"radio\" name=\"size\" value=\"small\" _=\"bind $size to me\" /><input type=\"radio\" name=\"size\" value=\"medium\" _=\"bind $size to me\" /><input type=\"radio\" name=\"size\" value=\"large\" _=\"bind $size to me\" />"
|
||||
:action "await run(\"set $size to '; await run(\"set $size to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "initial value checks the correct radio on load"
|
||||
:html "<input type=\"radio\" name=\"fruit\" value=\"apple\" _=\"bind $fruit to me\" /><input type=\"radio\" name=\"fruit\" value=\"banana\" _=\"bind $fruit to me\" /><input type=\"radio\" name=\"fruit\" value=\"cherry\" _=\"bind $fruit to me\" />"
|
||||
:action "await run(\"set $fruit to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "variable drives class: setting variable adds/removes class"
|
||||
:html "<div _=\"bind .dark and $darkMode\">test</div>"
|
||||
:action "await run(\"set $darkMode to false\"; await run(\"set $darkMode to true\"; await run(\"set $darkMode to false\""
|
||||
:check "toHaveClass('dark')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "external class change syncs back to variable"
|
||||
:html "<div _=\"bind .dark and $darkMode\">test</div>"
|
||||
:action "await run(\"set $darkMode to false\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "right side wins on class init"
|
||||
:html "<div _=\"bind .highlight to $highlighted\">test</div>"
|
||||
:action "await run(\"set $highlighted to true\""
|
||||
:check "toHaveClass('highlight')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — input value (Y) overwrites variable (X)"
|
||||
:html "<input type=\"text\" value=\"Bob\" _=\"bind $name to my value\" />"
|
||||
:action "await run(\"set $name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — variable (Y) overwrites input value (X)"
|
||||
:html "<input type=\"text\" value=\"Bob\" _=\"bind my value to $name\" />"
|
||||
:action "await run(\"set $name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — attribute (Y) initializes variable (X)"
|
||||
:html "<div data-color=\"red\" _=\"bind $color to @data-color\"></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — variable (Y) initializes attribute (X)"
|
||||
:html "<div _=\"bind @data-theme to $theme\"></div>"
|
||||
:action "await run(\"set $theme to '"
|
||||
:check "toHaveAttribute('data-theme', 'dark')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — variable (Y) drives class (X)"
|
||||
:html "<div _=\"bind .dark to $isDark\"></div>"
|
||||
:action "await run(\"set $isDark to true\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "init: right side wins — class (Y) drives variable (X)"
|
||||
:html "<div class=\"dark\" _=\"bind $isDark to .dark\"></div>"
|
||||
:action "await run(\"set $isDark to false\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "possessive property: bind $var to my value"
|
||||
:html "<input type=\"text\" value=\"hello\" _=\"bind $myVal to my value\" />"
|
||||
:action "find('input').fill('world')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "possessive attribute: bind $var and my @data-label"
|
||||
:html "<div _=\"bind $label and my @data-label\"></div>"
|
||||
:action "await run(\"set $label to '; await run(\"set $label to '"
|
||||
:check "toHaveAttribute('data-label', 'important')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "of-expression: bind $var to value of #input"
|
||||
:html "<input type=\"text\" id=\"of-input\" value=\"initial\" /><div _=\"bind $search to value of #of-input\"></div>"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "class bound to another element checkbox"
|
||||
:html "<input type=\"checkbox\" id=\"dark-toggle\" /><div _=\"bind .dark and #dark-toggle's checked\">test</div>"
|
||||
:action ""
|
||||
:check "toHaveClass('dark')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "attribute bound to another element input value"
|
||||
:html "<input type=\"text\" id=\"title-input\" value=\"Hello\" /><h1 _=\"bind @data-title and #title-input's value\"></h1>"
|
||||
:action "find('#title-input').fill('World')"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "two inputs synced via bind"
|
||||
:html "<input type=\"range\" id=\"slider\" value=\"50\" /><input type=\"number\" _=\"bind my value and #slider's value\" />"
|
||||
:action "evaluate({...})"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind variable to element by id auto-detects value"
|
||||
:html "<input type=\"text\" id=\"name-field\" value=\"\" /><div _=\"bind $name to #name-field\"></div>"
|
||||
:action "evaluate({...}); await run(\"set $name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind variable to checkbox by id auto-detects checked"
|
||||
:html "<input type=\"checkbox\" id=\"agree-cb\" /><div _=\"bind $agreed to #agree-cb\"></div>"
|
||||
:action "await run(\"set $agreed to false\"; await run(\"set $agreed to true\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind variable to number input by id auto-detects valueAsNumber"
|
||||
:html "<input type=\"number\" id=\"qty-input\" /><div _=\"bind $qty to #qty-input\"></div>"
|
||||
:action "await run(\"set $qty to 5\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind element to element: both sides auto-detect"
|
||||
:html "<input type=\"range\" id=\"range-slider\" value=\"50\" /><input type=\"number\" _=\"bind me to #range-slider\" />"
|
||||
:action "evaluate({...})"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "right side wins on init: variable (Y) initializes input (X)"
|
||||
:html "<input type=\"text\" value=\"Bob\" _=\"bind me to $name\" />"
|
||||
:action "await run(\"set $name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "right side wins on init: input (Y) initializes variable (X)"
|
||||
:html "<input type=\"text\" value=\"Bob\" _=\"bind $name to me\" />"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind to contenteditable element auto-detects textContent"
|
||||
:html "<div contenteditable=\"true\" _=\"bind $text to me\">initial</div>"
|
||||
:action "await run(\"set $text to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind to custom element with value property auto-detects value"
|
||||
:html "<test-input _=\"bind $custom to me\"></test-input>"
|
||||
:action "evaluate({...}); await run(\"set $custom to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "radio change listener is removed on cleanup"
|
||||
:html "<input type=\"radio\" name=\"color\" value=\"red\" _=\"bind $color to me\" checked /><input type=\"radio\" name=\"color\" value=\"blue\" _=\"bind $color to me\" />"
|
||||
:action "evaluate({...}); evaluate({...}); await run(\"set $color to '; await run(\"$color\""
|
||||
:check "toBe('red')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "form reset listener is removed on cleanup"
|
||||
:html "<form><input type=\"text\" id=\"binput\" value=\"initial\" _=\"bind $val to me\" /><button type=\"reset\">Reset</button></form>"
|
||||
:action "await run(\"set $val to '; await run(\"set $val to '; await run(\"$val\""
|
||||
:check "toBe('changed')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
168
sx/sx/applications/hyperscript/gallery-reactivity-live/index.sx
Normal file
168
sx/sx/applications/hyperscript/gallery-reactivity-live/index.sx
Normal file
@@ -0,0 +1,168 @@
|
||||
;; 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: live (23 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream live tests. 0 of 23 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "derives a variable from a computed expression"
|
||||
:html "<div _=\"live set $total to ($price * $qty) end
|
||||
when $total changes put it into me\"></div>"
|
||||
:action "await run(\"set $price to 10\"; await run(\"set $qty to 3\"; await run(\"set $price to 25\""
|
||||
:check "toHaveText('30')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "updates DOM text reactively with put"
|
||||
:html "<div _=\"live put 'hello ' + $greeting into me\"></div>"
|
||||
:action "await run(\"set $greeting to '; await run(\"set $greeting to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sets an attribute reactively"
|
||||
:html "<div _=\"live set my @data-theme to $theme\"></div>"
|
||||
:action "await run(\"set $theme to '; await run(\"set $theme to '"
|
||||
:check "toHaveAttribute('data-theme', 'light')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "sets a style reactively"
|
||||
:html "<div _=\"live set *opacity to $opacity\">visible</div>"
|
||||
:action "await run(\"set $opacity to 1\"; await run(\"set $opacity to 0.5\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "puts a computed dollar amount into the DOM"
|
||||
:html "<div _=\"live put '$' + ($price * $qty) into me\"></div>"
|
||||
:action "await run(\"set $price to 10\"; await run(\"set $qty to 2\"; await run(\"set $qty to 5\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "block form re-runs all commands when any dependency changes"
|
||||
:html "<span id=\"w\" _=\"when $doubleWidth changes put it into me\"></span><span id=\"h\" _=\"when $doubleHeight changes put it into me\"></span><div _=\"live
|
||||
set $doubleWidth to ($width * 2)
|
||||
set $doubleHeight to ($height * 2)
|
||||
end\"></div>"
|
||||
:action "await run(\"set $width to 100\"; await run(\"set $height to 200\"; await run(\"set $height to 300\""
|
||||
:check "toHaveText('200')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "separate live statements create independent effects"
|
||||
:html "<span id=\"w\" _=\"when $doubleWidth changes put it into me\"></span><span id=\"h\" _=\"when $doubleHeight changes put it into me\"></span><div _=\"live set $doubleWidth to ($width * 2) end
|
||||
live set $doubleHeight to ($height * 2)\"></div>"
|
||||
:action "await run(\"set $width to 100\"; await run(\"set $height to 200\"; await run(\"set $height to 300\""
|
||||
:check "toHaveText('200')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "block form cascades inter-dependent commands"
|
||||
:html "<div _=\"live
|
||||
set $subtotal to ($price * $qty)
|
||||
set $total to ($subtotal + $tax)
|
||||
end
|
||||
when $total changes put it into me\"></div>"
|
||||
:action "await run(\"set $price to 10\"; await run(\"set $qty to 3\"; await run(\"set $tax to 5\"; await run(\"set $price to 20\"; await run(\"set $tax to 10\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "toggles a class based on a boolean variable"
|
||||
:html "<div _=\"live
|
||||
if $isActive add .active to me else remove .active from me end
|
||||
end\">test</div>"
|
||||
:action "await run(\"set $isActive to false\"; await run(\"set $isActive to true\"; await run(\"set $isActive to false\""
|
||||
:check "toHaveClass('active')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "toggles display style based on a boolean variable"
|
||||
:html "<div _=\"live
|
||||
if $isVisible set *display to 'block' else set *display to 'none' end
|
||||
end\">content</div>"
|
||||
:action "await run(\"set $isVisible to true\"; await run(\"set $isVisible to false\"; await run(\"set $isVisible to true\""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "effects stop when element is removed from DOM"
|
||||
:html "<div _=\"live put $message into me\"></div>"
|
||||
:action "await run(\"set $message to '; await run(\"set $message to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "conditional branch only tracks the active dependency"
|
||||
:html "<div _=\"live
|
||||
if $showFirst put $firstName into me else put $lastName into me end
|
||||
end\"></div>"
|
||||
:action "await run(\"set $showFirst to true\"; await run(\"set $firstName to '; await run(\"set $lastName to '; await run(\"set $firstName to '; await run(\"set $lastName to '"
|
||||
:check "toHaveText('Bob'); toHaveText('Jones')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "multiple live on same element work independently"
|
||||
:html "<div _=\"live set my @data-name to $firstName end
|
||||
live set my @data-age to $age\"></div>"
|
||||
:action "await run(\"set $firstName to '; await run(\"set $age to 30\"; await run(\"set $firstName to '"
|
||||
:check "toHaveAttribute('data-name', 'Alice'); toHaveAttribute('data-age', '30'); toHaveAttribute('data-age', '30')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "live and when on same element do not interfere"
|
||||
:html "<div _=\"live set my @data-status to $status end
|
||||
when $status changes put 'Status: ' + it into me\"></div>"
|
||||
:action "await run(\"set $status to '; await run(\"set $status to '"
|
||||
:check "toHaveAttribute('data-status', 'online'); toHaveText('Status: online')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "bind and live on same element do not interfere"
|
||||
:html "<input type=\"text\" value=\"alice\"
|
||||
_=\"bind $username to me end
|
||||
live set my @data-mirror to $username\" /><span _=\"when $username changes put it into me\"></span>"
|
||||
:action "find('input').fill('bob'); await run(\"set $username to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reactive effects are stopped on cleanup"
|
||||
:html "<div id=\"d1\" _=\"live put $count into me\"></div>"
|
||||
:action "await run(\"set $count to 0\"; await run(\"set $count to 99\""
|
||||
:check "toHaveText('cleaned')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "append triggers live block"
|
||||
:html "<div _=\"live put $items.join(', ') into me\"></div>"
|
||||
:action "await run(\"set $items to ['; await run(\"append '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "push via pseudo-command triggers live block"
|
||||
:html "<div _=\"live put $items.join(', ') into me\"></div>"
|
||||
:action "await run(\"set $items to ['; await run(\"$items.push('"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "push via call triggers live block"
|
||||
:html "<div _=\"live put $items.join(', ') into me\"></div>"
|
||||
:action "await run(\"set $items to ['; await run(\"call $items.push('"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "array + still works with live"
|
||||
:html "<div _=\"live put $items.join(', ') into me\"></div>"
|
||||
:action "await run(\"set $items to ['; await run(\"set $items to $items + ['"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "set property still works with live"
|
||||
:html "<div _=\"live put $obj.name into me\"></div>"
|
||||
:action "await run(\"set $obj to {name: '; await run(\"set $obj.name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "property change on object in array triggers live re-render"
|
||||
:html "<template id=\"people-tmpl\">#for p in people\\n<span>\\${p.name}</span>\\n#end</template><div _=\"live render #people-tmpl with people: $people then put it into my.innerHTML end\"></div>"
|
||||
:action "await run(\"set $people to [{name: '; await run(\"set $people[0].name to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "push object then modify its property both trigger live"
|
||||
:html "<template id=\"items-tmpl\">#for item in items\\n<span>\\${item.label}</span>\\n#end</template><div _=\"live render #items-tmpl with items: $items then put it into my.innerHTML end\"></div>"
|
||||
:action "await run(\"set $items to [{label: '; await run(\"call $items.push({label: '; await run(\"set $items[1].label to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,122 @@
|
||||
;; 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: liveTemplate (10 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream liveTemplate tests. 0 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "renders static content after the template"
|
||||
:html "
|
||||
<template live>
|
||||
<span>Hello World</span>
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "renders template expressions"
|
||||
:html "
|
||||
<template live>
|
||||
<span>Hello ${\"\\x24\"}{$ltName}!</span>
|
||||
</template>
|
||||
"
|
||||
:action "await run(\"set $ltName to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "applies init script from _ attribute"
|
||||
:html "
|
||||
<template live _=\"init set ^msg to 'initialized'\">
|
||||
<span>${\"\\x24\"}{^msg}</span>
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reactively updates when dependencies change"
|
||||
:html "
|
||||
<template live _=\"init set ^count to 0\">
|
||||
<button _=\"on click increment ^count\">+</button>
|
||||
<span>Count: ${\"\\x24\"}{^count}</span>
|
||||
</template>
|
||||
"
|
||||
:action "find('[data-live-template] button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "processes hyperscript on inner elements"
|
||||
:html "
|
||||
<template live _=\"init set ^val to 0\">
|
||||
<button _=\"on click increment ^val then put ^val into the next <output/>\">+</button>
|
||||
<output>0</output>
|
||||
</template>
|
||||
"
|
||||
:action "find('[data-live-template] button').click()"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports #for loops"
|
||||
:html "
|
||||
<template live _=\"init set ^items to ['a', 'b', 'c']\">
|
||||
<ul>
|
||||
#for item in ^items
|
||||
<li>${\"\\x24\"}{item}</li>
|
||||
#end
|
||||
</ul>
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "supports #if conditionals"
|
||||
:html "
|
||||
<template live _=\"init set ^show to true\">
|
||||
#if ^show
|
||||
<span>visible</span>
|
||||
#end
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "reacts to global state without init script"
|
||||
:html "
|
||||
<template live>
|
||||
<p>Hello, ${\"\\x24\"}{$ltGlobal}!</p>
|
||||
</template>
|
||||
"
|
||||
:action "await run(\"set $ltGlobal to '; await run(\"set $ltGlobal to '"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "wrapper has display:contents"
|
||||
:html "
|
||||
<template live>
|
||||
<span>test</span>
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check "toBe('contents')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "multiple live templates are independent"
|
||||
:html "
|
||||
<template live _=\"init set ^x to 'first'\">
|
||||
<span class=\"a\">${\"\\x24\"}{^x}</span>
|
||||
</template>
|
||||
<template live _=\"init set ^x to 'second'\">
|
||||
<span class=\"b\">${\"\\x24\"}{^x}</span>
|
||||
</template>
|
||||
"
|
||||
:action ""
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,35 @@
|
||||
;; 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: reactive-properties (4 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream reactive-properties tests. 0 of 4 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "setting a property on a plain object triggers reactivity"
|
||||
:html "<output _=\"when ($obj's x + $obj's y) changes put it into me\"></output>"
|
||||
:action "await run(\"set $obj to {x: 1, y: 2}\"; await run(\"set $obj'"
|
||||
:check "toHaveText('3')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "nested property chain triggers on intermediate reassignment"
|
||||
:html "<output _=\"when $data's inner's val changes put it into me\"></output>"
|
||||
:action "await run(\"set $data to {inner: {val: '; await run(\"set $data'"
|
||||
:check "toHaveText('hello')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "property change on DOM element triggers reactivity via setProperty"
|
||||
:html "<input type=\"text\" id=\"prop-input\" value=\"start\" /><output _=\"when #prop-input's value changes put it into me\"></output>"
|
||||
:action "await run(\"set #prop-input'"
|
||||
:check "toHaveText('start')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "live block tracks property reads on plain objects"
|
||||
:html "<output _=\"live put $config's label into me\"></output>"
|
||||
:action "await run(\"set $config to {label: '; await run(\"set $config'"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,29 @@
|
||||
;; 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: resize (3 tests — 0 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream resize tests. 0 of 3 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "fires when element is resized"
|
||||
:html "<div id='box' style='width:100px; height:100px' _='on resize put detail.width into #out'></div><div id='out'></div>"
|
||||
:action ""
|
||||
:check "toHaveText(\"200\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "provides height in detail"
|
||||
:html "<div id='box' style='width:100px; height:100px' _='on resize put detail.height into #out'></div><div id='out'></div>"
|
||||
:action ""
|
||||
:check "toHaveText(\"300\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "works with from clause"
|
||||
:html "<div id='box' style='width:100px; height:100px'></div><div id='out' _='on resize from #box put detail.width into me'></div>"
|
||||
:action ""
|
||||
:check "toHaveText(\"150\")"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
@@ -0,0 +1,269 @@
|
||||
;; 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: transition (23 tests — 15 runnable)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem" "Live cards for the upstream transition tests. 15 of 23 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-reactivity))"
|
||||
:style "color:#7c3aed" "reactivity"))
|
||||
(div :style "display:flex;flex-direction:column"
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on current element"
|
||||
:html "<div _='on click transition width from 0px to 100px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition width from 0px to 100px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition with parameterized values"
|
||||
:html "<div _='on click set startWidth to 0 set endWidth to 100 transition width from (startWidth)px to (endWidth)px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click set startWidth to 0 then set endWidth to 100 transition width from (startWidth)px to (endWidth)px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on form"
|
||||
:html "<form _='on click transition width from 0px to 100px'></form>"
|
||||
:action "form.click()"
|
||||
:check "form.style.width.should.equal(\"\") && form.style.width.should.equal(\"0px\") && form.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")))
|
||||
(dom-set-attr _el-form \"_\" \"on click transition width from 0px to 100px\")
|
||||
(dom-append sandbox _el-form)
|
||||
(hs-activate! _el-form)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(assert= (dom-get-style _el-form \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on current element with the my prefix"
|
||||
:html "<div _='on click transition my width from 0px to 100px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition my width from 0px to 100px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition two properties on current element"
|
||||
:html "<div _='on click transition width from 0px to 100px height from 0px to 100px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.height.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.height.should.equal(\"0px\") && div.style.width.should.equal(\"100px\") && div.style.height.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition width from 0px to 100px height from 0px to 100px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
(assert= (dom-get-style _el-div \"height\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element"
|
||||
:html "<div _='on click transition element #foo width from 0px to 100px'></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element no element prefix"
|
||||
:html "<div _='on click transition #foo width from 0px to 100px'></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition #foo width from 0px to 100px\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element no element prefix + possessive"
|
||||
:html "<div _=\"on click transition #foo's width from 0px to 100px\"></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition #foo's width from 0px to 100px\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element no element prefix with it"
|
||||
:html "<div _='on click get #foo then transition its width from 0px to 100px'></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click get #foo then transition its width from 0px to 100px\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition with a custom transition time"
|
||||
:html "<div _='on click transition element #foo width from 0px to 100px using \"width 2s ease-in\"'></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px using \\\"width 2s ease-in\\\"\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition with a custom transition time via the over syntax"
|
||||
:html "<div _='on click transition element #foo width from 0px to 100px over 2s'></div> | <div id='foo'></div>"
|
||||
:action "div.click()"
|
||||
:check "div2.style.width.should.equal(\"\") && div2.style.width.should.equal(\"0px\") && div2.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")) (_el-foo (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition element #foo width from 0px to 100px over 2s\")
|
||||
(dom-set-attr _el-foo \"id\" \"foo\")
|
||||
(dom-append sandbox _el-div)
|
||||
(dom-append sandbox _el-foo)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-foo \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on current element using style ref"
|
||||
:html "<div _='on click transition *width from 0px to 100px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition *width from 0px to 100px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on form using style ref"
|
||||
:html "<form _='on click transition *width from 0px to 100px'></form>"
|
||||
:action "form.click()"
|
||||
:check "form.style.width.should.equal(\"\") && form.style.width.should.equal(\"0px\") && form.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-form (dom-create-element \"form\")))
|
||||
(dom-set-attr _el-form \"_\" \"on click transition *width from 0px to 100px\")
|
||||
(dom-append sandbox _el-form)
|
||||
(hs-activate! _el-form)
|
||||
(dom-dispatch _el-form \"click\" nil)
|
||||
(assert= (dom-get-style _el-form \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on current element with the my prefix using style ref"
|
||||
:html "<div _='on click transition my *width from 0px to 100px'></div>"
|
||||
:action "div.click()"
|
||||
:check "div.style.width.should.equal(\"\") && div.style.width.should.equal(\"0px\") && div.style.width.should.equal(\"100px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click transition my *width from 0px to 100px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"100px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can use initial to transition to original value"
|
||||
:html "<div style='width: 10px' _='on click 1 transition my *width to 100px on click 2 transition my *width to initial'></div>"
|
||||
:action "div.click(); div.click()"
|
||||
:check "div.style.width.should.equal(\"10px\") && div.style.width.should.equal(\"100px\") && div.style.width.should.equal(\"10px\")"
|
||||
:run-src "(fn (sandbox)
|
||||
(let ((_el-div (dom-create-element \"div\")))
|
||||
(dom-set-attr _el-div \"_\" \"on click 1 transition my *width to 100px on click 2 transition my *width to initial\")
|
||||
(dom-set-attr _el-div \"style\" \"width: 10px\")
|
||||
(dom-append sandbox _el-div)
|
||||
(hs-activate! _el-div)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(dom-dispatch _el-div \"click\" nil)
|
||||
(assert= (dom-get-style _el-div \"width\") \"10px\")
|
||||
))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element with of syntax"
|
||||
:html "<div _=\"on click transition *width of #foo from 0px to 100px\"></div><div id=\"foo\"></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element with possessive"
|
||||
:html "<div _=\"on click transition #foo\\'s *width from 0px to 100px\"></div><div id=\"foo\"></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on another element with it"
|
||||
:html "<div _='on click get #foo then transition its *width from 0px to 100px'></div><div id='foo'></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition with a custom transition string"
|
||||
:html "<div _=\"on click transition #foo\\'s *width from 0px to 100px using "width 2s ease-in"\"></div><div id=\"foo\"></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on form using style ref"
|
||||
:html "<form _='on click transition *width from 0px to 100px'></form>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px'); toBe('0px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition a single property on current element with the my prefix using style ref"
|
||||
:html "<div _='on click transition my *width from 0px to 100px'></div>"
|
||||
:action ""
|
||||
:check "toHaveCSS('width', '100px'); toBe('0px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on query ref with possessive"
|
||||
:html ""
|
||||
:action "evaluate({...})"
|
||||
:check ""
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))")
|
||||
(~hyperscript/hs-test-card
|
||||
:name "can transition on query ref with of syntax"
|
||||
:html "<div _=\\\"on click transition *width of the next <span/> from 0px to 100px\\\"></div><span></span>"
|
||||
:action "find('div').dispatchEvent('click')"
|
||||
:check "toHaveCSS('width', '100px')"
|
||||
:run-src "(fn (sandbox) (error \"not yet runnable in gallery — see test suite\"))"))))
|
||||
40
sx/sx/applications/hyperscript/gallery-reactivity/index.sx
Normal file
40
sx/sx/applications/hyperscript/gallery-reactivity/index.sx
Normal file
@@ -0,0 +1,40 @@
|
||||
;; 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 tests: reactivity (107 tests)"
|
||||
(p :style "color:#57534e;margin-bottom:1rem"
|
||||
"Pick a category to see its live test cards.")
|
||||
(ul :style "list-style:disc;padding-left:1.5rem"
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-transition))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"transition")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(23 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-bind))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"bind")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(44 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-live))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"live")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(23 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-reactive-properties))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"reactive-properties")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(4 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-resize))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"resize")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(3 tests)"))
|
||||
(li :style "margin-bottom:0.25rem"
|
||||
(a :href "/sx/(applications.(hyperscript.gallery-reactivity-liveTemplate))" :style "color:#7c3aed;text-decoration:underline"
|
||||
"liveTemplate")
|
||||
(span :style "color:#78716c;margin-left:0.5rem;font-size:0.875rem"
|
||||
"(10 tests)"))
|
||||
)))
|
||||
Reference in New Issue
Block a user