// Auto-generated from _hyperscript upstream test suite
// Source: spec/tests/hyperscript-upstream-tests.json
// 256 tests (90 skipped)
//
// DO NOT EDIT — regenerate with: python3 tests/playwright/generate-hs-tests.py

module.exports = [
  {
    "category": "add",
    "name": "can add class ref on a single div",
    "html": "<div id=\"el\" _='on click add .foo'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add class ref w/ double dash on a single div",
    "html": "<div id=\"el\" _='on click add .foo--bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo--bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add class ref on a single form",
    "html": "<form id=\"el\" _='on click add .foo'></form>",
    "action": "qs(\"form\").click()",
    "checks": [
      {
        "expr": "qs(\"form\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can target another div for class ref",
    "html": "<div id='bar'></div><div _='on click add .foo to #bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add to query in me",
    "html": "<div _='on click add .foo to <p/> in me'><p id='p1'></p></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"p1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add to children",
    "html": "<div _='on click add .foo to my children'><p id='p1'></p></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"p1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add multiple class refs",
    "html": "<div id=\"el\" _='on click add .foo .bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can add class refs w/ colons and dashes",
    "html": "<div id=\"el\" _='on click add .foo:bar-doh'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo:bar-doh\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can filter class addition via the when clause",
    "html": "<div id=\"el\" _='on click add .rey to .bar when it matches .doh'></div><div class='bar'></div><div class='bar doh'></div>",
    "action": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div2\").classList.contains(\"rey\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div3\").classList.contains(\"rey\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "name": "can filter property addition via the when clause",
    "html": "<div id=\"el\" _='on click add @rey to .bar when it matches .doh'></div><div class='bar'></div><div class='bar doh'></div>",
    "action": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div2\").hasAttribute(\"rey\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div3\").hasAttribute(\"rey\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "add",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"c1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"c2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove class ref on a single div",
    "html": "<div id=\"el\" class='foo' _='on click remove .foo'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove class ref on a single form",
    "html": "<form id=\"el\" class='foo' _='on click remove .foo'></form>",
    "action": "qs(\"form\").click()",
    "checks": [
      {
        "expr": "qs(\"form\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can target another div for class ref",
    "html": "<div class='foo' id='bar'></div><div _='on click remove .foo from #bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove elements",
    "html": "<div id=\"el\" _='on click remove me'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").parentElement",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove other elements",
    "html": "<div _='on click remove #that'></div><div id='that'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"div2\").parentElement",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove parent element",
    "html": "<div id='p1'><button  id='b1' _=\"on click remove my.parentElement\"></button></div> ",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "qs(\"div\").parentElement",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "name": "can remove multiple class refs",
    "html": "<div id=\"el\" class='foo bar doh' _='on click remove .foo .bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"doh\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "remove",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML.includes(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").innerHTML.includes(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").innerHTML.includes(\"doh\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle class ref on a single div",
    "html": "<div id=\"el\" _='on click toggle .foo'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle class ref on a single form",
    "html": "<form id=\"el\" _='on click toggle .foo'></form>",
    "action": "qs(\"form\").click(); qs(\"form\").click()",
    "checks": [
      {
        "expr": "qs(\"form\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can target another div for class ref toggle",
    "html": "<div id='bar'></div><div _='on click toggle .foo on #bar'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle for a fixed amount of time",
    "html": "<div id=\"el\" _='on click toggle .foo for 10ms'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": true
  },
  {
    "category": "toggle",
    "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": "qs(\"div\").click(); byId(\"d1\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": true
  },
  {
    "category": "toggle",
    "name": "can toggle between two classes",
    "html": "<div id=\"el\" class='foo' _='on click toggle between .foo and .bar'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle multiple class refs",
    "html": "<div id=\"el\" class='bar' _='on click toggle .foo .bar'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display",
    "html": "<div id=\"el\" _='on click toggle *display'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"block\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle opacity",
    "html": "<div id=\"el\" _='on click toggle *opacity'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).opacity",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle opacity",
    "html": "<div id=\"el\" _='on click toggle *visibility'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).visibility",
        "op": "==",
        "expected": "\"visible\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display w/ my",
    "html": "<div id=\"el\" _='on click toggle my *display'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"block\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display w/ my",
    "html": "<div id=\"el\" _='on click toggle my *opacity'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).opacity",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display w/ my",
    "html": "<div id=\"el\" _='on click toggle my *visibility'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).visibility",
        "op": "==",
        "expected": "\"visible\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display on other elt",
    "html": "<div _='on click toggle the *display of #d2'></div><div id='d2'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(div2).display",
        "op": "==",
        "expected": "\"block\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display on other elt",
    "html": "<div _='on click toggle the *opacity of #d2'></div><div id='d2'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(div2).opacity",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "toggle",
    "name": "can toggle display on other elt",
    "html": "<div _='on click toggle the *visibility of #d2'></div><div id='d2'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(div2).visibility",
        "op": "==",
        "expected": "\"visible\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set properties",
    "html": "<div id='d1' _='on click set #d1.innerHTML to \"foo\"'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set indirect properties",
    "html": "<div id='d1' _='on click set innerHTML of #d1 to \"foo\"'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set complex indirect properties lhs",
    "html": "<div _='on click set parentNode.innerHTML of #d1 to \"foo\"'><div id='d1'></div></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set complex indirect properties rhs",
    "html": "<div _='on click set innerHTML of #d1.parentNode to \"foo\"'><div id='d1'></div></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set styles",
    "html": "<div id=\"el\" _='on click set my.style.color to \"red\"'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set javascript globals",
    "html": "<div id=\"el\" _='on click set window.temp to \"red\"'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "window[\"temp\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set local variables",
    "html": "<div id='d1' _='on click set newVar to \"foo\" then                                    put newVar into #d1.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set into id ref",
    "html": "<div id='d1' _='on click set #d1.innerHTML to \"foo\"'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set into class ref",
    "html": "<div id=\"el\" class='divs' _='on click set .divs.innerHTML to \"foo\"'></div><div class='divs''></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      },
      {
        "expr": "byId(\"d2\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set into attribute ref",
    "html": "<div id=\"el\" class='divs' _='on click set @bar to \"foo\"'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set into style ref",
    "html": "<div id=\"el\" class='divs' _='on click set *color to \"red\"'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set many properties at once with object literal",
    "html": "<div id=\"el\" _='on click set {bar: 2, baz: 3} on obj'></div>",
    "action": "",
    "checks": [
      {
        "expr": "obj",
        "op": "deep==",
        "expected": "{ foo: 1, bar: 2, baz: 3 }"
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set props w/ array access syntax",
    "html": "<div id=\"el\" _='on click set my style[\"color\"] to \"red\"'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set props w/ array access syntax and var",
    "html": "<div id=\"el\" _='on click set foo to \"color\" then set my style[foo] to \"red\"'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set arrays w/ array access syntax",
    "html": "<div id=\"el\" _='on click set arr to [1, 2, 3] set arr[0] to \"red\" set my *color to arr[0]'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "set",
    "name": "can set arrays w/ array access syntax and var",
    "html": "<div id=\"el\" _='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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set properties",
    "html": "<div id='d1' _='on click put \"foo\" into #d1.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put directly into nodes",
    "html": "<div id='d1' _='on click put \"foo\" into #d1'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").textContent",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put nodes into nodes",
    "html": "<div id='d1'></div><div id='d2' _='on click put #d1 into #d2'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").firstChild",
        "op": "==",
        "expected": "d1"
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put directly into symbols",
    "html": "<div id=\"el\" _='on click put \"foo\" into me'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "me symbol doesn't get stomped on direct write",
    "html": "<div id=\"el\" _='on click put \"foo\" into me then put \"bar\" into me'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set styles",
    "html": "<div id=\"el\" _='on click put \"red\" into my.style.color'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set javascript globals",
    "html": "<div id=\"el\" _='on click put \"red\" into window.temp'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "window[\"temp\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").textContent",
        "op": "==",
        "expected": "\"foo\""
      },
      {
        "expr": "byId(\"d2\").textContent",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").textContent",
        "op": "==",
        "expected": "\"foo\""
      },
      {
        "expr": "byId(\"d2\").textContent",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set local variables",
    "html": "<div id='d1' _='on click put \"foo\" into newVar then                                    put newVar into #d1.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set into id ref",
    "html": "<div id='d1' _='on click put \"foo\" into #d1.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can insert before",
    "html": "<div id='d2' _='on click put #d1 before #d2'></div><div id='d1'>foo</div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").byId(\"previousSibling\").textContent",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can insert after",
    "html": "<div id='d1'>foo</div><div id='d2' _='on click put #d1 after #d2'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").byId(\"nextSibling\").textContent",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can insert after beginning",
    "html": "<div id='d1' _='on click put \"foo\" at start of #d1'>*</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").textContent",
        "op": "==",
        "expected": "\"foo*\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can insert before end",
    "html": "<div id='d1' _='on click put \"foo\" at end of #d1'>*</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").textContent",
        "op": "==",
        "expected": "\"*foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set into attribute ref",
    "html": "<div id=\"el\" class='divs' _='on click put \"foo\" into @bar'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set into indirect attribute ref",
    "html": "<div id=\"el\" class='divs' _='on click put \"foo\" into my @bar'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").getAttribute(\"bar\")",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set into style ref",
    "html": "<div id=\"el\" class='divs' _='on click put \"red\" into *color'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can set into indirect style ref",
    "html": "<div id=\"el\" class='divs' _='on click put \"red\" into my *color'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d2\").style[\"color\"]",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put properties w/ array access syntax",
    "html": "<div id=\"el\" _='on click put \"red\" into my style[\"color\"]'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put properties w/ array access syntax and var",
    "html": "<div id=\"el\" _='on click set foo to \"color\" then put \"red\" into my style[foo]'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put array vals w/ array access syntax",
    "html": "<div id=\"el\" _='on click set arr to [1, 2, 3] put \"red\" into arr[0] put arr[0] into my *color'>lolwat</div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "can put array vals w/ array access syntax and var",
    "html": "<div id=\"el\" _='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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").style.color",
        "op": "==",
        "expected": "\"red\""
      }
    ],
    "async": false
  },
  {
    "category": "put",
    "name": "is null tolerant",
    "html": "<div id=\"el\" class='divs' _='on click put \"red\" into #a-bad-id-that-does-not-exist'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with no target",
    "html": "<div id=\"el\" _='on click hide'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "hide element then show element retains original display",
    "html": "<div id=\"el\" _='on click 1 hide                          on click 2 show'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").style.display",
        "op": "==",
        "expected": "\"\""
      },
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"block\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with no target followed by command",
    "html": "<div id=\"el\" _='on click hide add .foo'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with no target followed by then",
    "html": "<div id=\"el\" _='on click hide then add .foo'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with no target with a with",
    "html": "<div id=\"el\" _='on click hide with display then add .foo'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      },
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element, with display:none by default",
    "html": "<div id=\"el\" _='on click hide me'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with display:none explicitly",
    "html": "<div id=\"el\" _='on click hide me with display'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).display",
        "op": "==",
        "expected": "\"none\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with opacity:0",
    "html": "<div id=\"el\" _='on click hide me with opacity'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).opacity",
        "op": "==",
        "expected": "\"0\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element with opacity style literal",
    "html": "<div id=\"el\" _='on click hide me with *opacity'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).opacity",
        "op": "==",
        "expected": "\"0\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide element, with visibility:hidden",
    "html": "<div id=\"el\" _='on click hide me with visibility'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(qs(\"div\")).visibility",
        "op": "==",
        "expected": "\"hidden\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide other elements",
    "html": "<div id=\"el\" class=hideme></div><div _='on click hide .hideme'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "getComputedStyle(hideme).display",
        "op": "==",
        "expected": "\"none\""
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can hide with custom strategy",
    "html": "<div id=\"el\" _='on click hide with myHide'></div>",
    "action": "classList.remove(\"foo\"); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "hide",
    "name": "can set default to custom strategy",
    "html": "<div id=\"el\" _='on click hide'></div>",
    "action": "classList.remove(\"foo\"); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic true branch works",
    "html": "<div id=\"el\" _='on click if true put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic true branch works with multiple commands",
    "html": "<div id=\"el\" _='on click if true log me then                                   put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic true branch works with end",
    "html": "<div id=\"el\" _='on click if true put \"foo\" into me.innerHTML end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic true branch works with naked else",
    "html": "<div id=\"el\" _='on click if true put \"foo\" into me.innerHTML else'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic true branch works with naked else end",
    "html": "<div id=\"el\" _='on click if true put \"foo\" into me.innerHTML else end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic else branch works",
    "html": "<div id=\"el\" _='on click if false else put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic else branch works with end",
    "html": "<div id=\"el\" _='on click if false else put \"foo\" into me.innerHTML end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic else if branch works",
    "html": "<div id=\"el\" _='on click if false else if true put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic else if branch works with end",
    "html": "<div id=\"el\" _='on click if false                                   else if true put \"foo\" into me.innerHTML end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "otherwise alias works",
    "html": "<div id=\"el\" _='on click if false otherwise put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "triple else if branch works",
    "html": "<div id=\"el\" _='on click if false else if false else put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "triple else if branch works with end",
    "html": "<div id=\"el\" _='on click if false                                   else if false                                  else put \"foo\" into me.innerHTML end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "basic else branch works with multiple commands",
    "html": "<div id=\"el\" _='on click if false put \"bar\" into me.innerHTML                                  else log me then                                       put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "true branch with a wait works",
    "html": "<div id=\"el\" _='on click if true wait 10 ms then put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": true
  },
  {
    "category": "if",
    "name": "false branch with a wait works",
    "html": "<div id=\"el\" _='on click if false else wait 10 ms then put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": true
  },
  {
    "category": "if",
    "name": "if properly passes execution along if child is not executed",
    "html": "<div id=\"el\" _='on click if false end put \"foo\" into me.innerHTML'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "if properly supports nested if statements and end block",
    "html": "<div id=\"el\" _='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": "byId(\"d1\").click(); byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "if",
    "name": "if on new line does not join w/ else",
    "html": "<div id=\"el\" _='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": "byId(\"d1\").click(); byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "basic for loop works",
    "html": "<div id=\"el\" _='on click repeat for x in [1, 2, 3]                                    put x at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"123\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "basic for loop with null works",
    "html": "<div id=\"el\" _='on click repeat for x in null                                    put x at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "waiting in for loop works",
    "html": "<div id=\"el\" _='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": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"123\""
      }
    ],
    "async": true
  },
  {
    "category": "repeat",
    "name": "basic raw for loop works",
    "html": "<div id=\"el\" _='on click for x in [1, 2, 3]                                    put x at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"123\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "basic raw for loop works",
    "html": "<div id=\"el\" _='on click for x in null                                    put x at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "waiting in raw for loop works",
    "html": "<div id=\"el\" _='on click for x in [1, 2, 3]\\n                                    put x at end of me\\n                                    wait 1ms\\n                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"123\""
      }
    ],
    "async": true
  },
  {
    "category": "repeat",
    "name": "basic in loop works",
    "html": "<div id=\"el\" _='on click repeat in [1, 2, 3]                                    put it at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"123\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "index syntax works",
    "html": "<div id=\"el\" _='on click repeat for x in [\"a\", \"ab\", \"abc\"] index i                                    put x + i at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"a0ab1abc2\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "indexed by syntax works",
    "html": "<div id=\"el\" _='on click repeat for x in [\"a\", \"ab\", \"abc\"] indexed by i                                    put x + i at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"a0ab1abc2\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "basic times loop works",
    "html": "<div id=\"el\" _='on click repeat 3 times                                    put \"a\" at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"aaa\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "times loop with expression works",
    "html": "<div id=\"el\" _='on click repeat 3 + 3 times                                    put \"a\" at end of me                                  end'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"aaaaaa\""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "loop continue works",
    "html": "<div id=\"el\" _=\"on click\n\t\t\t\trepeat 2 times\n\t\t\t\t\tfor x in ['A', 'B', 'C', 'D']\n\t\t\t\t\t\tif (x != 'D') then\n\t\t\t\t\t\t\tput 'success ' + x  + '. ' at end of me\n\t\t\t\t\t\t\tcontinue\n\t\t\t\t\t\t\tput 'FAIL!!. ' at end of me\n\t\t\t\t\t\tend\n\t\t\t\t\t\tput 'expected D. ' at end of me\n\t\t\t\t\tend\n\t\t\t\tend\n\t\t\t\"></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"success A. success B. success C. expected D. success A. success B. success C. expected D. \""
      }
    ],
    "async": false
  },
  {
    "category": "repeat",
    "name": "loop break works",
    "html": "<div id=\"el\" _=\"on click\n\t\t\t\trepeat 2 times\n\t\t\t\t\tfor x in ['A', 'B', 'C', 'D']\n\t\t\t\t\t\tif x is 'C'\n\t\t\t\t\t\t  break\n\t\t\t\t\t\tend\n\t\t\t\t\t\tput x at end of me\n\t\t\t\t\tend\n\t\t\t\tend\n\t\t\t\"></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerHTML",
        "op": "==",
        "expected": "\"ABAB\""
      }
    ],
    "async": false
  },
  {
    "category": "wait",
    "name": "can wait on time",
    "html": "<div id=\"el\" _='on click                              add .foo then                              wait 20ms then                              add .bar'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "name": "can wait on event",
    "html": "<div id=\"el\" _='on click                              add .foo then                              wait for foo then                              add .bar'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "name": "waiting on an event sets 'it' to the event",
    "html": "<div id=\"el\" _='on click wait for foo         then put its.detail into me'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\", { detail: \"hyperscript is hyper cool\" })",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"hyperscript is hyper cool\""
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "name": "can destructure properties in a wait",
    "html": "<div id=\"el\" _='on click wait for foo(bar)         then put bar into me'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: \"bar\" } })",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "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": "qs(\"div\").click(); byId(\"div2\") && byId(\"div2\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "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": "qs(\"div\").click(); byId(\"div2\") && byId(\"div2\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": true
  },
  {
    "category": "wait",
    "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": "qs(\"div\").click(); byId(\"div2\") && byId(\"div2\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "qs(\"div\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": true
  },
  {
    "category": "send",
    "name": "can send events",
    "html": "<div _='on click send foo to #bar'></div><div id='bar' _='on foo add .foo-sent'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"bar\").innerHTML",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"bar\").innerHTML",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"bar\").innerHTML",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  },
  {
    "category": "send",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"bar\").classList.contains(\"foo-sent\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take a class from other elements",
    "html": "<div id=\"el\" class='div foo'></div><div class='div' _='on click take .foo from .div'></div><div class='div'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take a class from other forms",
    "html": "<form id=\"el\" class='div foo'></form><form class='div' _='on click take .foo from .div'></form><form class='div'></form>",
    "action": "byId(\"f2\").click()",
    "checks": [
      {
        "expr": "byId(\"f1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"f2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"f3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take an attribute from other elements",
    "html": "<div id=\"el\" class='div' data-foo='bar'></div><div class='div' _='on click take @data-foo from .div'></div><div class='div'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"bar\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take an attribute with specific value from other elements",
    "html": "<div id=\"el\" class='div' data-foo='bar'></div><div class='div' _='on click take @data-foo=baz from .div'></div><div class='div'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"bar\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"baz\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take an attribute value from other elements and set specific values instead",
    "html": "<div id=\"el\" 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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"qux\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"baz\""
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"qux\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take an attribute value from other elements and set value from an expression instead",
    "html": "<div id=\"el\" 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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"qux\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"baz\""
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"qux\""
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"bar\""
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "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": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"bar\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\")",
        "op": "==",
        "expected": "\"\""
      },
      {
        "expr": "byId(\"d2\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d3\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      },
      {
        "expr": "byId(\"d1\").getAttribute(\"data-foo\"",
        "op": "==",
        "expected": "null"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take multiple classes from other elements",
    "html": "<div id=\"el\" class='div foo'></div><div class='div' _='on click take .foo .bar'></div><div class='div bar'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "take",
    "name": "can take multiple classes from specific element",
    "html": "<div id=\"el\" class='div1 foo bar'></div><div class='div' _='on click take .foo .bar from .div1'></div><div class='div bar'></div>",
    "action": "byId(\"d2\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"d2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"d3\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "log",
    "name": "can log single item",
    "html": "<div id=\"el\" _='on click log me'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [],
    "async": false
  },
  {
    "category": "log",
    "name": "can log multiple items",
    "html": "<div id=\"el\" _='on click log me, my'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [],
    "async": false
  },
  {
    "category": "log",
    "name": "can log multiple items with debug",
    "html": "<div id=\"el\" _='on click log me, my with console.debug'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [],
    "async": false
  },
  {
    "category": "log",
    "name": "can log multiple items with error",
    "html": "<div id=\"el\" _='on click log me, my with console.error'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [],
    "async": false
  },
  {
    "category": "call",
    "name": "can call javascript instance functions",
    "html": "<div id='d1' _='on click call document.getElementById(\"d1\") then                                          put it into window.results'></div>",
    "action": "byId(\"d1\").click()",
    "checks": [
      {
        "expr": "value",
        "op": "==",
        "expected": "d1"
      }
    ],
    "async": false
  },
  {
    "category": "call",
    "name": "can call global javascript functions",
    "html": "<div id=\"el\" _='on click call globalFunction(\"foo\")'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "\"foo\"",
        "op": "==",
        "expected": "calledWith"
      }
    ],
    "async": false
  },
  {
    "category": "call",
    "name": "can call no argument functions",
    "html": "<div id=\"el\" _='on click call globalFunction()'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "called",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "call",
    "name": "can call functions w/ underscores",
    "html": "<div id=\"el\" _='on click call global_function()'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "called",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "call",
    "name": "can call functions w/ dollar signs",
    "html": "<div id=\"el\" _='on click call $()'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "called",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment an empty variable",
    "html": "<div id=\"el\" _=\"on click increment value then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment a variable",
    "html": "<div id=\"el\" _=\"on click set value to 20 then increment value by 2 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"22\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment refer to result",
    "html": "<div id=\"el\" _=\"on click increment value by 2 then put it into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"2\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment an attribute",
    "html": "<div id=\"el\" value=\"5\" _=\"on click increment @value then put @value into me\"></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"8\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment an floating point numbers",
    "html": "<div id=\"el\" value=\"5\" _=\"on click set value to 5.2 then increment value by 6.1 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"11.3\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment a property",
    "html": "<div id=\"el\" _=\"on click increment my.innerHTML\">3</div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"6\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment by zero",
    "html": "<div id=\"el\" _=\"on click set value to 20 then increment value by 0 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"20\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can increment a value multiple times",
    "html": "<div id=\"el\" _=\"on click increment my.innerHTML\"></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"5\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement an empty variable",
    "html": "<div id=\"el\" _=\"on click decrement value then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"-1\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement a variable",
    "html": "<div id=\"el\" _=\"on click set value to 20 then decrement value by 2 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"18\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement an attribute",
    "html": "<div id=\"el\" value=\"5\" _=\"on click decrement @value then put @value into me\"></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"2\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement an floating point numbers",
    "html": "<div id=\"el\" value=\"5\" _=\"on click set value to 6.1 then decrement value by 5.1 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement a property",
    "html": "<div id=\"el\" _=\"on click decrement my.innerHTML\">3</div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"0\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement a value multiple times",
    "html": "<div id=\"el\" _=\"on click decrement my.innerHTML\"></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"-5\""
      }
    ],
    "async": false
  },
  {
    "category": "increment",
    "name": "can decrement by zero",
    "html": "<div id=\"el\" _=\"on click set value to 20 then decrement value by 0 then put value into me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"20\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "can append a string to another string",
    "html": "<div id=\"el\" _=\"on click\n                            set value to 'Hello there.' then\n                            append ' General Kenobi.' to value then\n                            set my.innerHTML to value\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Hello there. General Kenobi.\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "can append a value to a DOM node",
    "html": "<div id=\"el\" _=\"on click\n                            append '<span>This is my inner HTML</span>' to me\n                            append '<b>With Tags</b>' to me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"<span>This is my inner HTML</span><b>With Tags</b>\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "can append a value to a DOM element",
    "html": "<div id=\"content\" _=\"on click\n                            append 'Content' to #content\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Content\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "can append a value to I",
    "html": "<div id=\"el\" _=\"on click \n                            append 'Content' to I\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Content\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "can append a value to an object property",
    "html": "<div id=\"id\" _=\"on click append '_new' to my id\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").id",
        "op": "==",
        "expected": "\"id_new\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "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": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"foobardoh\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "name": "append to undefined ignores the undefined",
    "html": "<div id=\"id\" _=\"on click append 'bar' then append it to me\"></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "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(); qs(\"div\").click(); btn.click()",
    "checks": [
      {
        "expr": "clicks",
        "op": "==",
        "expected": "1"
      },
      {
        "expr": "btn.parentNode",
        "op": "==",
        "expected": "div"
      }
    ],
    "async": false
  },
  {
    "category": "append",
    "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": "qs(\"div\").click(); btn.click()",
    "checks": [
      {
        "expr": "window.temp",
        "op": "==",
        "expected": "1"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "name": "establishes a proper beingTold symbol",
    "html": "<div id='d1' _='on click                           add .foo                           tell #d2                            add .bar'></div><div id='d2'></div>",
    "action": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"p1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"p1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"p2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"p2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "name": "ignores null",
    "html": "<div id='d1' _='on click                           tell null                            add .bar                          end                          add .foo'></div><div id='d2'></div>",
    "action": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div1\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "true"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"foo\")",
        "op": "==",
        "expected": "false"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "false"
      },
      {
        "expr": "byId(\"div2\").classList.contains(\"bar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").innerText",
        "op": "==",
        "expected": "\"foo\""
      },
      {
        "expr": "byId(\"div2\").innerText",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").innerText",
        "op": "==",
        "expected": "\"bar\""
      },
      {
        "expr": "byId(\"div2\").innerText",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "name": "yourself attribute also works",
    "html": "<div id=\"d1\" _=\"on click tell #d2 remove yourself\"><div id=\"d2\"></div></div>",
    "action": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "tell",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "byId(\"div1\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"called\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"called\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"called\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can respond to events on other elements",
    "html": "<div id='bar'></div><div _='on click from #bar add .clicked'></div>",
    "action": "bar.click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"clicked\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "byId(\"bar\").innerHTML",
        "op": "==",
        "expected": "\"a\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "listeners on self are not removed when the element is removed",
    "html": "<div id=\"el\" _='on someCustomEvent put 1 into me'></div>",
    "action": "qs(\"div\").remove(); qs(\"div\").dispatchEvent(new Event(\"someCustomEvent\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"1\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "supports \"elsewhere\" modifier",
    "html": "<div id=\"el\" _='on click elsewhere add .clicked'></div>",
    "action": "qs(\"div\").click(); body.click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"clicked\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "supports \"from elsewhere\" modifier",
    "html": "<div id=\"el\" _='on click from elsewhere add .clicked'></div>",
    "action": "qs(\"div\").click(); body.click()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"clicked\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"fromBar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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()",
    "checks": [
      {
        "expr": "qs(\"div\").classList.contains(\"fromBar\")",
        "op": "==",
        "expected": "true"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can fire an event on load",
    "html": "<div id='d1' _='on load put \"Loaded\" into my.innerHTML'></div>",
    "action": "",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"Loaded\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can have a simple event filter",
    "html": "<div id='d1' _='on click[false] log event then put \"Clicked\" into my.innerHTML'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "byId(\"d1\").innerText",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can refer to event properties directly in filter",
    "html": "<div id=\"el\" _='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": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can refer to event detail properties directly in filter",
    "html": "<div id=\"el\" _='on example[foo] increment @count then put it into me'></div>",
    "action": "qs(\"div\").dispatchEvent(event); qs(\"div\").dispatchEvent(event); qs(\"div\").dispatchEvent(event)",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"2\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can click after a positive event filter",
    "html": "<div id=\"el\" _='on foo(bar)[bar] put \"triggered\" into my.innerHTML'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: false } }); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\", { detail: { bar: true } })",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"triggered\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "multiple event handlers at a time are allowed to execute with the every keyword",
    "html": "<div id=\"el\" _='on every click put increment() into my.innerHTML then wait for a customEvent'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"3\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can have multiple event handlers",
    "html": "<div id=\"el\" _='on foo put increment() into my.innerHTML end                          on bar put increment() into my.innerHTML'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"3\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can have multiple event handlers, no end",
    "html": "<div id=\"el\" _='on foo put increment() into my.innerHTML                          on bar put increment() into my.innerHTML'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"3\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can queue events",
    "html": "<div id=\"el\" _='on foo wait for bar then call increment()'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\")",
    "checks": [
      {
        "expr": "i",
        "op": "==",
        "expected": "2"
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can queue first event",
    "html": "<div id=\"el\" _='on foo queue first wait for bar then call increment()'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\")",
    "checks": [
      {
        "expr": "i",
        "op": "==",
        "expected": "2"
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can queue last event",
    "html": "<div id=\"el\" _='on foo queue last wait for bar then call increment()'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\")",
    "checks": [
      {
        "expr": "i",
        "op": "==",
        "expected": "2"
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can queue all events",
    "html": "<div id=\"el\" _='on foo queue all wait for bar then call increment()'></div>",
    "action": "qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\"); qs(\"div\").dispatchEvent(new CustomEvent(\"bar\")",
    "checks": [
      {
        "expr": "i",
        "op": "==",
        "expected": "3"
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "queue none does not allow future queued events",
    "html": "<div id=\"el\" _='on click queue none put increment() into my.innerHTML then wait for a customEvent'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").dispatchEvent(new CustomEvent(\"customEvent\"); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"2\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can invoke on multiple events",
    "html": "<div id=\"el\" _='on click or foo call increment()'></div>",
    "action": "qs(\"div\").click(); qs(\"div\").dispatchEvent(new CustomEvent(\"foo\")",
    "checks": [
      {
        "expr": "i",
        "op": "==",
        "expected": "2"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "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": "byId(\"div1\") && byId(\"div1\").click()",
    "checks": [
      {
        "expr": "div1",
        "op": "==",
        "expected": "window.tmp"
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can mix ranges",
    "html": "<div id=\"el\" _='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": "qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click(); qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"three\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can listen for general mutations",
    "html": "<div id=\"el\" _='on mutation put \"Mutated\" into me then wait for hyperscript:mutation'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for attribute mutations",
    "html": "<div id=\"el\" _='on mutation of attributes put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for specific attribute mutations",
    "html": "<div id=\"el\" _='on mutation of @foo put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for specific attribute mutations and filter out other attribute mutations",
    "html": "<div id=\"el\" _='on mutation of @bar put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for childList mutations",
    "html": "<div id=\"el\" _='on mutation of childList put \"Mutated\" into me then wait for hyperscript:mutation'></div>",
    "action": "qs(\"div\").appendChild(document.createElement(\"P\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for childList mutation filter out other mutations",
    "html": "<div id=\"el\" _='on mutation of childList put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for characterData mutation filter out other mutations",
    "html": "<div id=\"el\" _='on mutation of characterData put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for multiple mutations",
    "html": "<div id=\"el\" _='on mutation of @foo or @bar put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can listen for multiple mutations 2",
    "html": "<div id=\"el\" _='on mutation of @foo or @bar put \"Mutated\" into me'></div>",
    "action": "qs(\"div\").setAttribute(\"bar\", \"bar\")",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "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": "byId(\"div1\") && byId(\"div1\").setAttribute(\"foo\", \"bar\")",
    "checks": [
      {
        "expr": "byId(\"div2\").innerHTML",
        "op": "==",
        "expected": "\"Mutated\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "can catch exceptions thrown in js functions",
    "html": "<button id=\"el\" _='on click throwBar() catch e put e into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can catch top-level exceptions",
    "html": "<button id=\"el\" _='on click throw \"bar\" catch e put e into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can catch async top-level exceptions",
    "html": "<button id=\"el\" _='on click wait 1ms then throw \"bar\" catch e put e into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "async exceptions don't kill the event queue",
    "html": "<button id=\"el\" _='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()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"success\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "exceptions in catch block don't kill the event queue",
    "html": "<button id=\"el\" _='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()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"success\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "uncaught exceptions trigger 'exception' event",
    "html": "<button id=\"el\" _='on click put \"foo\" into me then throw \"bar\"                  on exception(error) put error into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "caught exceptions do not trigger 'exception'  event",
    "html": "<button id=\"el\" _='on click put \"foo\" into me then throw \"bar\"                     catch e log e                  on exception(error) put error into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"foo\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "rethrown exceptions trigger 'exception'  event",
    "html": "<button id=\"el\" _='on click put \"foo\" into me then throw \"bar\"                     catch e throw e                  on exception(error) put error into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "basic finally blocks work",
    "html": "<button id=\"el\" _='on click throw \"bar\"             finally put \"bar\" into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "finally blocks work when exception thrown in catch",
    "html": "<button id=\"el\" _='on click throw \"bar\"            catch e throw e            finally put \"bar\" into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "async basic finally blocks work",
    "html": "<button id=\"el\" _='on click wait a tick then throw \"bar\"             finally put \"bar\" into me'></button>",
    "action": "btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"bar\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "async finally blocks work when exception thrown in catch",
    "html": "<button id=\"el\" _='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()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"foobar\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "async exceptions in finally block don't kill the event queue",
    "html": "<button id=\"el\" _='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()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"success\""
      }
    ],
    "async": true
  },
  {
    "category": "on",
    "name": "exceptions in finally block don't kill the event queue",
    "html": "<button id=\"el\" _='on click                     increment :x                    finally                      if :x is 1                       throw \"bar\"                     otherwise                       put \"success\" into me                    end                   '></button>",
    "action": "btn.click(); btn.click()",
    "checks": [
      {
        "expr": "byId(\"btn\").innerHTML",
        "op": "==",
        "expected": "\"success\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can ignore when target doesn't exist",
    "html": "<div id='#d1' _=' \ton click from #doesntExist \t\tthrow \"bar\" \ton click \t\tput \"clicked\" into me\t'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"clicked\""
      }
    ],
    "async": false
  },
  {
    "category": "on",
    "name": "can handle an or after a from clause",
    "html": "<div id='d1'></div><div id='d2'></div><div _=' \ton click from #d1 or click from #d2 \t\t increment @count then put @count into me\t'></div>",
    "action": "byId(\"d1\").click(); byId(\"d2\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"2\""
      }
    ],
    "async": false
  },
  {
    "category": "init",
    "name": "can define an init block inline",
    "html": "<div id=\"el\" _='init                  set my.foo to 42                end               on click put my.foo into my.innerHTML'></div>",
    "action": "qs(\"div\").click()",
    "checks": [
      {
        "expr": "qs(\"div\").innerHTML",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": true
  },
  {
    "category": "def",
    "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": "",
    "checks": [
      {
        "expr": "byId(\"d3\").innerText",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  },
  {
    "category": "def",
    "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": "",
    "checks": [
      {
        "expr": "byId(\"d1\").innerText",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  },
  {
    "category": "def",
    "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": "",
    "checks": [
      {
        "expr": "qs(\"div\").innerText",
        "op": "==",
        "expected": "\"42\""
      }
    ],
    "async": false
  }
];