bitty - dynamic features for your static pages

NOTE: The tests on this page are done with live code. Each one has a little overhead that can slow down the page. Generally speaking, this isn't the way you'd want to build a production page. It's only done here to make the tests visible.

TEST: 0005-bitty-init-is-called

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0005-bitty-init-is-called/test.on.js">
  <div class="test">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("div").innerHTML = "PASSED";
  }
}

FAILED

TEST: 0007-listeneres-ready

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0007-listeneres-ready/test.on.js">
  <div class="test" data-receive="runTest0007">FAILED</div>
</bitty-7-0 >

export default class {
  bittyInit() {
    this.api.trigger("runTest0007");
  }

  runTest0007(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0010-basic-send-receive

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0010-basic-send-receive/test.on.js"
>
  <div class="test" data-receive="runTest0010">FAILED</div>
  <button data-send="runTest0010">Test Trigger</button>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }

  runTest0010(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0015-nested-send-and-receive

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0015-nested-send-and-receive/test.on.js"
>
  <div>
    <div>
      <div class="test" data-receive="runTest0015">FAILED</div>
    </div>
  </div>
  <div>
    <div>
      <button data-send="runTest0015">Test Target</button>
    </div>
  </div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }

  runTest0015(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0020-send-from-bitty-js

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0020-send-from-bitty-js/test.on.js" 
  class="test"
  data-init="runTest0020">FAILED
</bitty-7-0>

export default class {
  runTest0020(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0030-send-multiple-signals

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0030-send-multiple-signals/test.on.js"
>
  <div class="test" data-receive="runTestAlfa0030">FAILED</div>
  <div class="test" data-receive="runTestBravo0030">FAILED</div>
  <div class="test" data-receive="runTestCharlie0030">FAILED</div>

  <button
    data-send="runTestAlfa0030 runTestBravo0030 runTestCharlie0030"
  >
    Test Trigger
  </button>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTestAlfa0030(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestBravo0030(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestCharlie0030(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0035-check-newline-split

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0035-check-newline-split/test.on.js"
>
  <div class="test" data-receive="runTestAlfa0035">FAILED</div>
  <div class="test" data-receive="runTestBravo0035">FAILED</div>
  <div class="test" data-receive="runTestCharlie0035">FAILED</div>

  <button
    data-send="runTestAlfa0035
runTestBravo0035
runTestCharlie0035"
  >
    Test Trigger
  </button>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTestAlfa0035(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestBravo0035(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestCharlie0035(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0040-multiple-receivers

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0040-multiple-receivers/test.on.js">
  <button data-send="runTest0040">Test Trigger</button>
  <div class="test" data-receive="runTest0040">FAILED</div>
  <div class="test" data-receive="runTest0040">FAILED</div>
  <div class="test" data-receive="runTest0040">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTest0040(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0050-accessing-data-from-sending-element

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0050-accessing-data-from-sending-element/test.on.js">
  <button data-status="PASSED" data-send="runTest50">Test Trigger</button>
  <div class="test" data-receive="runTest50">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }

  runTest50(event, element) {
    element.innerHTML = event.target.dataset.status;
  }
}

FAILED

TEST: 0060-access-data-from-receiving-element

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0060-access-data-from-receiving-element/test.on.js">
  <button data-send="runTest0060">Test Trigger</button>
  <div class="test" data-status="PASSED" data-receive="runTest0060">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTest0060(_event, el) {
    el.innerHTML = el.dataset.status;
  }
}

FAILED

TEST: 0070-many-sends-to-many-receivers

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0070-many-sends-to-many-receivers/test.on.js">
  <button data-send="runTestAlfa0070 runTestBravo0070 runTestCharlie0070">Test Trigger</button>
  <div class="test" data-receive="runTestAlfa0070">FAILED</div>
  <div class="test" data-receive="runTestBravo0070">FAILED</div>
  <div class="test" data-receive="runTestCharlie0070">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTestAlfa0070(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestBravo0070(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTestCharlie0070(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0075-forward-inside-module

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0075-forward-inside-module/test.on.js">
  <div class="clickme" data-send="runTest0075"></div>
  <div class="test" data-receive="forwardEvent0075">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest0075(event, _el) {
    this.api.forward(event, "forwardEvent0075");
  }

  forwardEvent0075(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0077-multi-level-trigger

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0077-multi-level-trigger/test.on.js">
  <div class="test" data-receive="triggerEvent0077">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.trigger("runTest0077");
  }

  runTest0077(_event, _el) {
    this.api.trigger("triggerEvent0077");
  }

  triggerEvent0077(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0080-storing-state

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0080-storing-state/test.on.js">
  <button data-send="runTest0080">Test Trigger</button>
  <div class="test" data-receive="runTest0080">FAILED</div>
</bitty-7-0>

export default class {
  #count = 0;
  bittyInit() {
    this.api.querySelector("button").click();
    this.api.querySelector("button").click();
    this.api.querySelector("button").click();
  }

  runTest0080(_event, el) {
    this.#count += 1;
    if (this.#count === 3) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0090-updating-self-loopback-signal

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0090-updating-self-loopback-signal/test.on.js">
  <div class="test" data-send="runTest0090" data-receive="runTest0090">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    const button = this.api.querySelector("div").click();
  }
  runTest0090(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0100-get-event-type

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0100-get-event-type/test.on.js">
  <button data-send="runTest0100">Test Trigger</button>
  <div class="test" data-receive="runTest0100">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.querySelector("button").click();
  }
  runTest0100(event, el) {
    if (event.type === "click") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0110-verify-uuids-exist-on-senders

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0110-verify-uuids-exist-on-senders/test.on.js"
>
  <div data-send="stubSignal"></div>
  <div class="test" data-init="runTest0110">FAILED</div>
</bitty-7-0>

export default class {
  runTest0110(event, el) {
    const checkEl = this.api.querySelector("[data-send]");
    if (checkEl.dataset.bittyid !== undefined) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0120-verify-uuids-exist-on-receivers

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0120-verify-uuids-exist-on-receivers/test.on.js"
>
  <div class="test" data-receive="runTest0120">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0120")
  }
  runTest0120(_event, element) {
    if (element.dataset.bittyid !== undefined) {
      element.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0128-uuids-are-not-overwritten

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0128-uuids-are-not-overwritten/test.on.js">
  <div class="test" data-uuid="original-uuid">FAILED</div>
  <div class="test" data-receive="testStub" data-uuid="original-uuid">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    const els = this.api.querySelectorAll("[data-uuid]");
    [...els].forEach((el) => {
      if (el.dataset.uuid === "original-uuid") {
        el.innerHTML = "PASSED";
      }
    });
  }
}

FAILED

TEST: 0130-create-an-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0130-create-an-element/test.on.js"
>
<div class="test" data-init="prepTest0130">FAILED</div>

</bitty-7-0>

const template = `
  <div 
    class="test"
    data-receive="runTest0130">FAILED</div>
`;

export default class {
  prepTest0130(_event, el) {
    el.replaceChildren(
      this.api.makeElement(template),
    );
    this.api.trigger("runTest0130");
    el.classList.remove("test");
  }

  runTest0130(event, el) {
    if (el.dataset.bittyid !== undefined) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0160-init-function-works

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0160-init-function-works/test.on.js" class="test">FAILED</bitty-7-0>

export default class {
  bittyInit() {
    this.api.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0170-use-data-send-without-a-receiver

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0170-use-data-send-without-a-receiver/test.on.js"
  data-init="runTest0170"
>
  <div class="test">FAILED</div>
</bitty-7-0>

export default class {
  runTest0170(event, _el) {
    this.api.querySelector("div").innerHTML = "PASSED";
  }
}

FAILED

TEST: 0220-chain-forword-api-calls

<bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/0220-chain-forword-api-calls/test.on.js">
    <button data-send="runTest0220">Test Trigger</button>
    <div class="test" data-receive="runTest0220">FAILED</div>
    <div class="test" data-receive="secondSignal0220">FAILED</div>
    <div class="test" data-receive="thirdSignal0220">FAILED</div>
    <div class="test" data-receive="fourthSignal0220">FAILED</div>
</bitty-7-0>

// Ensure the `data-send` value of the
// event generating element doesn't
// get changed

export default class {
  #counterAlfa = 0;
  #counterBravo = 0;
  #counterCharlie = 0;
  #counterDelta = 0;

  bittyInit() {
    const button = this.api.querySelector("button");
    button.click();
    button.click();
    button.click();
    button.click();
  }

  runTest0220(event, element) {
    this.#counterAlfa += 1;
    event.target.dataset.counter = `${this.#counterAlfa}`;
    if (event.target.dataset.counter == "4") {
      element.innerHTML = "PASSED";
    }
    this.api.forward(event, "secondSignal0220");
  }

  secondSignal0220(event, element) {
    this.#counterBravo += 1;
    event.target.dataset.counter = `${this.#counterBravo}`;
    if (event.target.dataset.counter == "4") {
      element.innerHTML = "PASSED";
    }
    this.api.forward(event, "thirdSignal0220");
  }

  thirdSignal0220(event, element) {
    this.#counterCharlie += 1;
    event.target.dataset.counter = `${this.#counterCharlie}`;
    if (event.target.dataset.counter == "4") {
      element.innerHTML = "PASSED";
    }
    this.api.forward(event, "fourthSignal0220");
  }

  fourthSignal0220(event, element) {
    this.#counterDelta += 1;
    event.target.dataset.counter = `${this.#counterDelta}`;
    if (event.target.dataset.counter == "4") {
      element.innerHTML = "PASSED";
    }
  }

  //
}

FAILED

TEST: 0230-forward-multiple-signals

<bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/0230-forward-multiple-signals/test.on.js"
>
    <button data-send="runTest0230">Test Button</button>
    <div class="test" data-receive="runTest0230">FAILED</div>
    <div class="test" data-receive="secondSignal0230">FAILED</div>
    <div class="test" data-receive="thirdSignal0230">FAILED</div>
    <div class="test" data-receive="fourthSignal0230">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("button").click();
  }

  runTest0230(event, element) {
    element.innerHTML = "PASSED";
    this.api.forward(
      event,
      "secondSignal0230 thirdSignal0230 fourthSignal0230",
    );
  }

  secondSignal0230(_event, element) {
    element.innerHTML = "PASSED";
  }

  thirdSignal0230(_event, element) {
    element.innerHTML = "PASSED";
  }

  fourthSignal0230(_event, element) {
    element.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0250-async-bitty-init

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0250-async-bitty-init/test.on.js">
  <div class="test">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    const el = this.api.querySelector("div");
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0260-use-api-query-selector

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0260-use-api-query-selector/test.on.js">
  <div id="testApiQuerySelectorTarget" class="test">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    const el = this.api.querySelector("#testApiQuerySelectorTarget");
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0270-use-document-query-selector

<div id="testDocumentQuerySelectorTarget" class="test">FAILED</div>

<bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/0270-use-document-query-selector/test.on.js"
    data-init="runTest0270"
    >
</bitty-7-0>

export default class {
  runTest0270(_event, _element) {
    const el = document.querySelector("#testDocumentQuerySelectorTarget");
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0280-forward-without-event

<bitty-7-0 data-connect="/unit-tests/7/0/0/tests/0280-forward-without-event/test.on.js">
    <div class="test" data-receive="runTest0280">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0280");
  }

  runTest0280(_event, element) {
    element.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0290-check-init-order

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0290-check-init-order/test.on.js"
>
    <div class="test" data-receive="runTest0290">FAILED</div>
</bitty-7-0>

export default class {
  #textString = "FAILED";

  bittyReady() {
    this.api.trigger("runTest0290");
  }

  bittyInit() {
    this.#textString = "PASSED";
  }

  runTest0290(_event, el) {
    el.innerHTML = this.#textString;
  }
}

FAILED

TEST: 0300-load-new-nodes

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0300-load-new-nodes/test.on.js"
>
  <div class="test" data-receive="runTest0300">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default class {
  bittyInit() {
    const newTree = document.createElement("div");
    newTree.innerHTML = `<div>
    <div class="test" data-receive="runTest0300">FAILED</div>
    </div>`;
    this.api.appendChild(newTree);
    this.api.trigger("runTest0300");
  }

  runTest0300(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0330-load-default-page-class

<bitty-7-0>
  <div class="test" data-init="runTest0330">FAILED</div>
</bitty-7-0>

<script>
window.BittyClass = class {
  runTest0330(_, el) {
    el.innerHTML = "PASSED";
  }
}
</script>

// This test comes from `window.BittyClass`
// on the parent HTML page which is included
// directly in the test HTML.

FAILED

TEST: 0340-load-directly-from-page

<script>
window.TestClass0340 = class {
  bittyInit() {
    this.api.trigger("runTest0340");
  }

  runTest0340(_event, el) {
    el.innerHTML = "PASSED";
  }
}
</script>

<bitty-7-0 
  data-connect="TestClass0340"
>
  <div class="test" data-receive="runTest0340">FAILED</div>
</bitty-7-0>

// This test comes from `window.TestClass0340`
// on the parent HTML page.

FAILED

TEST: 0350-change-event-listeners

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0350-change-event-listeners/test.on.js"
  data-listeners="altevent"
>
  <div class="test" data-receive="runTest0350">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.addEventListener("altevent", () => {
      this.api.trigger("runTest0350");
    });
    const event = new Event("altevent");
    this.api.dispatchEvent(event);
  }

  runTest0350(_event, element) {
    element.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0390-get-json

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0390-get-json/test.on.js"
>
  <div class="test" data-receive="runTest0390">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0390");
  }

  async runTest0390(_event, el) {
    const url = "/unit-tests/7/0/0/payload.json";
    const response = await this.api.getJSON(url);
    if (response.value) {
      el.innerHTML = response.value.status;
    }
  }
}

FAILED

TEST: 0394-get-json-parse-error

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0394-get-json-parse-error/test.on.js"
>
  <div class="test" data-receive="runTest0394">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0394");
  }

  async runTest0394(_event, el) {
    const url = "/unit-tests/7/0/0/invalid-json.json";
    const response = await this.api.getJSON(url);
    if (response.error.type === "parsing") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0395-get-json-with-subs

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0395-get-json-with-subs/test.on.js"
>
  <div class="test" data-receive="runTest0395">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0395");
  }

  async runTest0395(_event, el) {
    const url = "/unit-tests/7/0/0/payload.json";
    const subs = [
      [/FAILED/g, "PASSED"],
    ];
    const response = await this.api.getJSON(url, subs);
    if (response.value) {
      el.innerHTML = response.value.status;
    }
  }
}

FAILED

TEST: 0397-get-json-with-options

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0397-get-json-with-options/test.on.js"
>
  <div class="test" data-receive="runTest0397">FAILED</div>

</bitty-7-0>

<!--


  <details>
    <summary>NOTE</summary>
    <p>NOTE: This tests uses `https://echo.hoppscotch.io/`
      to generate the response. If there's a failure
      that's the first place to look to make sure
      the service is operational
    </p>
    <p>NOTE: all the `.fetchThing()` methods use the same 
      underlying `fetchTxt(url, subs=[], options={})` call. 
      A passing test hear implies a passing test for
      `options = {}` on `.fetchTxt()`, `.fetchHTML()`, etc...
    </p>
  </details>

-->

export default class {
  bittyReady() {
    this.api.localTrigger("runTest0397");
  }

  async runTest0397(_event, el) {
    const url = "https://echo.hoppscotch.io/";
    const subs = [];
    const options = { method: "POST" };
    const response = await this.api.getJSON(url, subs, options);
    if (response.value && response.value.method === "POST") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0400-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0400-make-html/test.on.js"
  data-init="runTest0400"
>
  <div class="test" data-receive="runTest0400">FAILED</div>
</bitty-7-0>

export default class {
  runTest0400(_event, el) {
    el.classList.remove("test");
    const template = `<div class="test">FAILED</div>`;
    const subs = [[/FAILED/g, "PASSED"]];
    el.replaceChildren(this.api.makeHTML(
      template,
      subs,
    ));
  }
}

FAILED

TEST: 0410-get-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0410-get-html/test.on.js"
  data-init="runTest0410"
>
  <div class="test" data-receive="runTest0410">FAILED</div>
</bitty-7-0>

export default class {
  async runTest0410(_event, el) {
    const url = "/unit-tests/7/0/0/payload/";
    const response = await this.api.getHTML(url);
    if (response.value) {
      el.parentNode.replaceChildren(response.value);
    }
  }
}

FAILED

TEST: 0420-get-html-with-subs

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0420-get-html-with-subs/test.on.js"
  data-init="runTest0420"
>
  <div class="test" data-receive="runTest0420">FAILED</div>
</bitty-7-0>

export default class {
  async runTest0420(_event, el) {
    const url = "/unit-tests/7/0/0/payload/";
    const subs = [["FAILED", "PASSED"]];
    const response = await this.api.getHTML(url, subs);
    if (response.value) {
      el.parentNode.replaceChildren(response.value);
    }
  }
}

FAILED

TEST: 0430-get-html-with-regex

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0430-get-html-with-regex/test.on.js"
  data-init="runTest0430"
>
  <div class="test" data-receive="runTest0430">FAILED</div>
</bitty-7-0>

export default class {
  async runTest0430(_event, el) {
    const url = "/unit-tests/7/0/0/payload/";
    const subs = [[/FAILED/g, "PASSED"]];
    const response = await this.api.getHTML(url, subs);
    if (response.value) {
      el.parentNode.replaceChildren(response.value);
    }
  }
}

FAILED

TEST: 0440-get-svg

<style>
.svg-test-class {
  stroke: green;
  fill: green;
}
</style>
<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0440-get-svg/test.on.js"
>
  <div class="test" data-receive="runTest0440">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0440");
  }
  async runTest0440(_event, el) {
    const url = "/unit-tests/7/0/0/payload.svg";
    const subs = [[/FAILED/g, "PASSED"]];
    const response = await this.api.getSVG(url, subs);
    el.parentNode.replaceChildren(response.value);
  }
}

FAILED

TEST: 0480-allow-empty-space

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0480-allow-empty-space/test.on.js"
>
  <div class="test" data-receive="
    spacerCharlie


    runTest0480


    spacerDelta 

    ">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger(`
  spacerAlfa 

  runTest0480 


  spacerBravo

  `);
  }

  runTest0480(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0490-get-txt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0490-get-txt/test.on.js"
>
  <div class="test" data-receive="runTest0490">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0490");
  }
  async runTest0490(_event, el) {
    const url = "/unit-tests/7/0/0/payload.txt";
    const response = await this.api.getTXT(url);
    el.innerHTML = response.value;
  }
}

FAILED

TEST: 0493-get-txt-subs

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0493-get-txt-subs/test.on.js"
>
  <div class="test" data-receive="runTest0493">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0493");
  }
  async runTest0493(_event, el) {
    const url = "/unit-tests/7/0/0/payload.txt";
    const subs = [[/FAILED/g, "PASSED"]];
    const options = {};
    const response = await this.api.getTXT(url, subs, options);
    if (response.value) {
      el.innerHTML = response.value;
    }
  }
}

FAILED

TEST: 0540-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0540-make-element/test.on.js"
  data-init="runTest0540"
>
  <div data-receive="runTest0540">
    <div class="test">FAILED</div>
  </div>
</bitty-7-0>

const template = `<div class="test">FAILED</div>`;

export default class {
  runTest0540(_event, el) {
    const newChild = this.api.makeElement(template);
    newChild.innerHTML = "PASSED";
    el.replaceChildren(newChild);
  }
}

FAILED

TEST: 0550-make-element-trim

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0550-make-element-trim/test.on.js"
  data-init="runTest0550"
>
  <div data-receive="runTest0550">
    <div class="test">FAILED</div>
  </div>
</bitty-7-0>

const template = `

  <div class="test">FAILED</div>

`;

export default class {
  runTest0550(_event, el) {
    const newChild = this.api.makeElement(
      template,
    );
    newChild.innerHTML = "PASSED";
    el.replaceChildren(newChild);
  }
}

FAILED

TEST: 0560-get-element

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0560-get-element/test.on.js"
  data-init="runTest0560"
>
  <div class="test" data-receive="runTest0560">FAILED</div>
</bitty-7-0>

export default class {
  async runTest0560(_event, el) {
    const url = "/unit-tests/7/0/0/payload/";
    const response = await this.api.getElement(url);
    if (response.value) {
      const newEl = response.value;
      if (newEl.dataset.bittyid) {
        newEl.innerHTML = "PASSED";
        el.parentNode.replaceChildren(newEl);
      }
    }
  }
}

FAILED

TEST: 0570-get-element-subs

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0570-get-element-subs/test.on.js"
  data-init="runTest0570"
>
  <div class="test" data-receive="runTest0570">FAILED</div>
</bitty-7-0>

export default class {
  async runTest0570(_event, el) {
    const url = "/unit-tests/7/0/0/payload/";
    const subs = [[/FAILED/g, "PASSED"]];
    const response = await this.api.getElement(url, subs);
    if (response.value) {
      el.parentNode.replaceChildren(response.value);
    }
  }
}

FAILED

TEST: 0590-load-css

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0590-load-css/test.on.js"
>
  <div class="test" data-receive="runTest0590">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.trigger("runTest0590");
  }
  async runTest0590(_event, el) {
    const url = "/unit-tests/7/0/0/payload.css";
    const response = await this.api.loadCSS(url);
    const styles = getComputedStyle(document.documentElement);
    const checkValue = styles.getPropertyValue("--test-0590-value");
    if (checkValue === "green") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0600-set-prop

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0600-set-prop/test.on.js"
>
  <div class="test" data-receive="runTest0600">FAILED</div>
</bitty-7-0>

export default class {
  bittyInit() {
    this.api.setProp("--test0600", "1rem");
    this.api.trigger("runTest0600");
  }

  runTest0600(_event, el) {
    if (
      document.documentElement.style.getPropertyValue(`--test0600`) === "1rem"
    ) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0610-bitty-ready

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0610-bitty-ready/test.on.js"
>
  <button data-send="runTest0610">Test Target</button>
  <div class="test" data-receive="runTest0610">FAILED</div>
</bitty-7-0>

export default class {
  #updated = false;

  bittyReady() {
    this.#updated = true;
    this.api.querySelector("button").click();
  }

  runTest0610(_event, el) {
    if (this.#updated === true) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0620-bitty-ready-async

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0620-bitty-ready-async/test.on.js"
>
  <button data-send="runTest0620">Test Target</button>
  <div class="test" data-receive="runTest0620">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default class {
  #updated = false;

  async bittyReady() {
    this.#updated = true;
    await sleep(100);
    this.api.querySelector("button").click();
  }

  runTest0620(_event, el) {
    if (this.#updated === true) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0630-await-send-signal

<bitty-7-0
  data-connect="/unit-tests/7/0/0/tests/0630-await-send-signal/test.on.js"
>
  <button data-send="await:runTest0630 checkTest0630">Test Target</button>
  <div class="test" data-receive="checkTest0630">FAILED</div>
</bitty-7-0>

export default class {
  #updated = false;

  bittyReady() {
    this.api.querySelector("button").click();
  }

  checkTest0630(_event, el) {
    if (this.#updated === true) {
      el.innerHTML = "PASSED";
    }
  }

  async runTest0630(_event, _el) {
    await new Promise((resolve) => setTimeout(resolve, 300));
    this.#updated = true;
  }
}

FAILED

TEST: 0650-make-txt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0650-make-txt/test.on.js"
>
  <div class="test" data-receive="runTest0650">FAILED</div>
</bitty-7-0>

const tmpl = "FAILED";

export default class {
  bittyInit() {
    this.api.trigger("runTest0650");
  }
  runTest0650(_event, el) {
    const subs = [
      ["FAILED", "PASSED"],
    ];
    el.innerHTML = this.api.makeTXT(tmpl, subs);
  }
}

FAILED

TEST: 0670-data-init

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0670-data-init/test.on.js"
>
  <div class="test"
  data-init="runTest0670">FAILED</div>
</bitty-7-0>

export default class {
  runTest0670(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0680-add-element-to-maketxt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0680-add-element-to-maketxt/test.on.js"
>
  <div class="test" data-init="runTest0680">FAILED</div>
</bitty-7-0>

const template = `<div>TARGET</div>`;
const finalTarget = `<div><div>RESULT</div></div>`;

export default class {
  runTest0680(_event, el) {
    const newEl = document.createElement('div');
    newEl.innerHTML = "RESULT";
    const subs = [
      ["TARGET", newEl]
    ];
    const txt = this.api.makeTXT(template, subs);
    if (txt === finalTarget) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0690-add-document-fragment-to-maketxt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0690-add-document-fragment-to-maketxt/test.on.js"
>
  <div class="test"
    data-init="runTest0690">FAILED</div>
</bitty-7-0>

const elTemplate = `<div>TARGET</div>`;

export default class {
  runTest0690(_event, el) {
    const fragmentTemplate = document.createElement("template");
    fragmentTemplate.innerHTML = "<div>F1</div><div>F2</div>"; 
     const fragment = fragmentTemplate.content.cloneNode(true);
     const subs = [
       ["TARGET", fragment]
     ];
    const newTXT = this.api.makeTXT(elTemplate, subs);
    if (newTXT === '<div><div>F1</div><div>F2</div></div>') {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0700-add-array-of-element-to-maketxt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0700-add-array-of-element-to-maketxt/test.on.js"
>
  <div class="test" data-init="runTest0700">FAILED</div>
</bitty-7-0>

export default class {
  runTest0700(_event, el) {
    const initialTXT = `TARGET`;
    const template = `<div>ALFA</div>`;
    const newEls = [
      this.api.makeElement(template),
      this.api.makeElement(template),
      this.api.makeElement(template),
    ];
    const subs = [
      ["TARGET", newEls],
    ];
    const newTXT = this.api.makeTXT(initialTXT, subs);
    if (newTXT.substring(0, 10) === "<div data-") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0710-add-array-of-doc-fragments-to-maketxt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0710-add-array-of-doc-fragments-to-maketxt/test.on.js"
>
  <div class="test" data-init="runTest0710">FAILED</div>
</bitty-7-0>

export default class {
  runTest0710(_event, el) {
    const initialTXT = `TARGET`;
    const fragmentTemplate = `<div>ALFA</div><div>BRAVO</div>`;
    const newFragments = [
      this.api.makeHTML(fragmentTemplate),
      this.api.makeHTML(fragmentTemplate),
    ];
    const subs = [
      ["TARGET", newFragments],
    ];
    const newTXT = this.api.makeTXT(initialTXT, subs);
    if (newTXT.substring(0, 10) === "<div data-") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0720-add-array-of-strings-to-maketxt

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0720-add-array-of-strings-to-maketxt/test.on.js"
>
  <div class="test"
    data-init="runTest0720">FAILED</div>
</bitty-7-0>

export default class {
  runTest0720(_event, el) {
    const initialTemplate = `<div>TARGET</div>`;
    const items = [
      'ALFA', 'BRAVO', 'CHARLIE'
    ];
    const subs = [
      ["TARGET", items] 
    ];
    const newTXT = this.api.makeTXT(initialTemplate, subs);
    const targetTXT = "<div>ALFABRAVOCHARLIE</div>";
    if (newTXT === targetTXT) {
      el.innerHTML = "PASSED";
    }
  } 
}

FAILED

TEST: 0730-add-element-to-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0730-add-element-to-make-element/test.on.js"
>
  <div class="test" data-init="runTest0730">FAILED</div>
</bitty-7-0>

export default class {
  runTest0730(_event, el) {
    const t1 = `<div></div><div>TARGET</div>`;
    const t2 = `<div class="test">PASSED</div>`;
    const subs = [
      ["TARGET", this.api.makeElement(t2)],
    ];
    const newFragment = this.api.makeHTML(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0740-add-doc-fragment-to-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0740-add-doc-fragment-to-make-html/test.on.js"
>
  <div class="test" data-init="runTest0740">FAILED</div>
</bitty-7-0>

export default class {
  runTest0740(_event, el) {
    const t1 = `<div></div><div>TARGET</div>`;
    const t2 = `<div></div><div class="test">PASSED</div>`;
    const subs = [
      ["TARGET", this.api.makeHTML(t2)],
    ];
    const newFragment = this.api.makeHTML(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0750-add-array-of-elements-to-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0750-add-array-of-elements-to-make-html/test.on.js"
>
  <div class="test" data-init="runTest0750">FAILED</div>
</bitty-7-0>

export default class {
  runTest0750(_event, el) {
    const t1 = `<div></div><div>TARGET</div>`;
    const t2 = `<div class="test">PASSED</div>`;
    const items = [
      this.api.makeElement(t2),
      this.api.makeElement(t2),
      this.api.makeElement(t2),
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeHTML(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0760-add-array-of-doc-fragments-to-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0760-add-array-of-doc-fragments-to-make-html/test.on.js"
>
  <div class="test" data-init="runTest0760">FAILED</div>
</bitty-7-0>

export default class {
  runTest0760(_event, el) {
    const t1 =
      `<div data-send="stub0760" class="test">FAILED</div><div>TARGET</div>`;
    const t2 = `<div></div><div class="test">PASSED</div>`;
    const items = [
      this.api.makeHTML(t2),
      this.api.makeHTML(t2),
      this.api.makeHTML(t2),
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeHTML(t1, subs);
    if (newFragment.firstChild.dataset.bittyid) {
      newFragment.firstChild.innerHTML = "PASSED";
    }
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0770-add-array-of-strings-to-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0770-add-array-of-strings-to-make-html/test.on.js"
>
  <div class="test" data-init="runTest0770">FAILED</div>
</bitty-7-0>

export default class {
  runTest0770(_event, el) {
    const t1 = `<div></div><div class="test">TARGET</div>`;
    const items = [
      "PA",
      "SS",
      "ED",
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeHTML(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0780-add-element-to-make-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0780-add-element-to-make-html/test.on.js"
>
  <div class="test" data-init="runTest0780">FAILED</div>
</bitty-7-0>

export default class {
  runTest0780(_event, el) {
    const t1 = `<div>TARGET</div>`;
    const t2 = `<div class="test">PASSED</div>`;
    const subs = [
      ["TARGET", this.api.makeElement(t2)],
    ];
    const newFragment = this.api.makeElement(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0790-add-doc-fragment-to-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0790-add-doc-fragment-to-make-element/test.on.js"
>
  <div class="test" data-init="runTest0790">FAILED</div>
</bitty-7-0>

export default class {
  runTest0790(_event, el) {
    const t1 = `<div>TARGET</div>`;
    const t2 = `<div></div><div class="test">PASSED</div>`;
    const subs = [
      ["TARGET", this.api.makeHTML(t2)],
    ];
    const newFragment = this.api.makeElement(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0800-add-array-of-elements-to-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0800-add-array-of-elements-to-make-element/test.on.js"
>
  <div class="test" data-init="runTest0800">FAILED</div>
</bitty-7-0>

export default class {
  runTest0800(_event, el) {
    const t1 = `<div>TARGET</div>`;
    const t2 = `<div class="test">PASSED</div>`;
    const items = [
      this.api.makeElement(t2),
      this.api.makeElement(t2),
      this.api.makeElement(t2),
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeElement(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0810-add-array-of-doc-fragments-to-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0810-add-array-of-doc-fragments-to-make-element/test.on.js"
>
  <div class="test" data-init="runTest0810">FAILED</div>
</bitty-7-0>

export default class {
  runTest0810(_event, el) {
    const t1 = `<div>TARGET</div>`;
    const t2 = `<div></div><div class="test">PASSED</div>`;
    const items = [
      this.api.makeHTML(t2),
      this.api.makeHTML(t2),
      this.api.makeHTML(t2),
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeElement(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0820-add-array-of-strings-to-make-element

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0820-add-array-of-strings-to-make-element/test.on.js"
>
  <div class="test" data-init="runTest0820">FAILED</div>
</bitty-7-0>

export default class {
  runTest0820(_event, el) {
    const t1 = `<div class="test">TARGET</div>`;
    const items = [
      "PA",
      "SS",
      "ED",
    ];
    const subs = [
      ["TARGET", items],
    ];
    const newFragment = this.api.makeElement(t1, subs);
    el.replaceChildren(newFragment);
    el.classList.remove("test");
  }
}

FAILED

TEST: 0840-data-send-works-on-new-elements

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0840-data-send-works-on-new-elements/test.on.js"
>
  <div class="test" data-init="runTest0840" data-receive="update0840">FAILED</div>
  <div data-receive="incoming0840"></div>
</bitty-7-0>

const template = `<button data-send="update0840">Click</button>`;

export default class {
  incoming0840(_event, el) {
    const newButton = this.api.makeElement(template);
    el.appendChild(newButton);
    newButton.click();
  }
  runTest0840(_event, el) {
    this.api.trigger("incoming0840");
  }
  update0840(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0850-make-sure-signals-are-syncronous

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0850-make-sure-signals-are-syncronous/test.on.js"
>
  <div class="testTarget0850">a</div>
  <div class="test" data-receive="runTest0850Alfa">FAILED</div>
  <div class="test" data-receive="runTest0850Bravo">FAILED</div>
</bitty-7-0>

function findLargePrimes(limit) {
  const primes = [];
  function isPrime(num) {
    // Intentionally inefficient primality test with O(n) complexity
    if (num <= 1) return false;
    for (let i = 2; i < num; i++) {
      // Deliberately slow checking process
      for (let j = 0; j < 1000; j++) {
        Math.sqrt(j); // Add some extra computational overhead
      }
      if (num % i === 0) {
        return false;
      }
    }
    return true;
  }
  // Nested loops to make the function extremely time-consuming
  for (let num = 2; num < limit; num++) {
    if (isPrime(num)) {
      primes.push(num);
    }
  }
  return primes;
}

export default class {
  // NOTE: The display might/probably wont'
  // refresh until the full event set of
  //
  // signals has been processed.

  #counter = 0;

  bittyInit() {
    this.api.trigger("runTest0850Alfa runTest0850Bravo");
  }

  runTest0850Alfa(_event, el) {
    this.#counter += 1;
    const checkEl = this.api.querySelector(".testTarget0850");
    if (checkEl.innerHTML === "a" && this.#counter === 1) {
      el.innerHTML = "PASSED";
    }
    checkEl.innerHTML = "b";
    findLargePrimes(8000);
  }
  runTest0850Bravo(_event, el) {
    this.#counter += 1;
    const checkEl = this.api.querySelector(".testTarget0850");
    if (checkEl.innerHTML === "b" && this.#counter === 2) {
      el.innerHTML = "PASSED";
    }
    checkEl.innerHTML = "";
  }
}

FAILED

TEST: 0860-make-sure-async-functions-are-async

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0860-make-sure-async-functions-are-async/test.on.js"
>
  <div class="test" data-receive="runTest0860Alfa runTest0860Bravo">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default class {
  bittyInit() {
    this.api.trigger("runTest0860Alfa runTest0860Bravo");
  }
  async runTest0860Alfa(_event, el) {
    await sleep(300);
    el.innerHTML = "PASSED";
  }
  runTest0860Bravo(_event, el) {
    el.innerHTML = "FAILED_BRAVO";
  }
}

FAILED

TEST: 0870-await-on-data-receive

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0870-await-on-data-receive/test.on.js"
>
  <div class="test" data-receive="await:runTest0870Alfa runTest0870Bravo">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export default class {
  bittyReady() {
    this.api.trigger("await:runTest0870Alfa runTest0870Bravo");
  }

  async runTest0870Alfa(_event, el) {
    await sleep(300);
    el.innerHTML = "FAILED_ALFA";
  }

  runTest0870Bravo(_event, el) {
    if (el.innerHTML === "FAILED_ALFA") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0880-foward-bubbles

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0880-foward-bubbles/test.on.js AlfaWidget">
  <button data-send="runTest0880">Test Target</button>
</bitty-7-0>

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0880-foward-bubbles/test.on.js BravoWidget"
>
  <div class="test" data-receive="update0880">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

export class AlfaWidget {
  async bittyReady() {
    await sleep(100);
    this.api.querySelector("button").click();
  }

  runTest0880(event, el) {
    this.api.forward(event, "update0880");
  }
}

export class BravoWidget {
  update0880(_event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0890-make-html-subs-with-html

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0890-make-html-subs-with-html/test.on.js"
>
  <div class="test" data-init="runTest0890">FAILED</div>
</bitty-7-0>

const template1 = `FAILED`;
const template2 = `<div class="test">STATUS</div>`;

export default class {
  runTest0890(_, el) {
    const content = this.api.makeHTML(template1, [
      ["FAILED", "PASSED"],
    ]);
    const post = this.api.makeHTML(template2, [
      ["STATUS", content],
    ]);
    el.classList.remove("test");
    el.replaceChildren(post);
  }
}

FAILED

TEST: 0900-make-html-text-and-elements

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0900-make-html-text-and-elements/test.on.js"
>
  <div class="test" data-init="runTest0900">FAILED</div>
</bitty-7-0>

const template1 = `REMOVE<div class="test">FAILED</div>`;
const template2 = `<div>STATUS</div>`;

export default class {
  runTest0900(_, el) {
    const content = this.api.makeHTML(template1, [
      ["REMOVE", ""],
      ["FAILED", "PASSED"],
    ]);
    const post = this.api.makeHTML(template2, [
      ["STATUS", content],
    ]);
    el.classList.remove("test");
    el.replaceChildren(post);
  }
}

FAILED

TEST: 0910-make-html-with-array-of-text-nodes

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0910-make-html-with-array-of-text-nodes/test.on.js"
>
  <div class="test" data-init="runTest0910">FAILED</div>
</bitty-7-0>

const template1 = `FA`;
const template2 = `IL`;
const template3 = `ED`;
const template4 = `<div class="test">STATUS</div>`;

export default class {
  runTest0910(_, el) {
    const subs = [
      ["STATUS", [
        this.api.makeHTML(template1, [["FA", "PA"]]),
        this.api.makeHTML(template2, [["IL", "SS"]]),
        this.api.makeHTML(template3),
      ]],
    ];
    const result = this.api.makeHTML(template4, subs);
    el.classList.remove("test");
    el.replaceChildren(result);
  }
}

FAILED

TEST: 0930-initial-elements-get-bittyid-attrs

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0930-initial-elements-get-bittyid-attrs/test.on.js"
>
<div class="add-id"></div>
  <div class="test" data-receive="runTest0930">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.trigger("runTest0930");
  }
  runTest0930(event, el) {
    const checkEl = this.api.querySelector(".add-id");
    if (checkEl.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0940-new-elements-get-bittyid-attrs

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0940-new-elements-get-bittyid-attrs/test.on.js"
>
  <div class="test" data-receive="runTest0940">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.trigger("runTest0940");
  }

  runTest0940(_event, el) {
    const template = `<div>FAILED</div>`;
    const newEl = this.api.makeElement(template);
    if (newEl.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 0950-capture-events-from-child-elements

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0950-capture-events-from-child-elements/test.on.js"
>
  <div data-send="runTest0950">
    <div class="test" data-receive="runTest0950">FAILED</div>
  </div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("[data-receive]").click();
  }

  runTest0950(event, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 0970-local-trigger

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0970-local-trigger/test.on.js AlfaClass"
>
  <div class="test" data-receive="runTest0970">PASSED</div>
  <bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/0970-local-trigger/test.on.js BravoClass"
  >
    <div class="test" data-receive="runTest0970">FAILED</div>
      <bitty-7-0 
        data-connect="/unit-tests/7/0/0/tests/0970-local-trigger/test.on.js CharlieClass"
      >
      <div class="test" data-receive="runTest0970">PASSED</div>
    </bitty-7-0>
  </bitty-7-0>
</bitty-7-0>

export class AlfaClass {
  runTest0970(event, el) {
    el.innerHTML = "FAILED";
  }
}

export class BravoClass {
  bittyReady() {
    this.api.localTrigger("runTest0970");
  }

  runTest0970(event, el) {
    el.innerHTML = "PASSED";
  }
}

export class CharlieClass {
  runTest0970(event, el) {
    el.innerHTML = "FAILED";
  }
}

PASSED

FAILED

PASSED

TEST: 0980-local-trigger-without-receiver

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0980-local-trigger-without-receiver/test.on.js AlfaClass"
>
  <div class="test" data-receive="runTest0980AlfaBounce">PASSED</div>
  <bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/0980-local-trigger-without-receiver/test.on.js BravoClass"
  >
    <div class="test clickme0980" data-send="testTrigger0980" data-receive="runTest0980BravoBounce">FAILED</div>
      <bitty-7-0 
        data-connect="/unit-tests/7/0/0/tests/0980-local-trigger-without-receiver/test.on.js CharlieClass"
      >
      <div class="test" data-receive="runTest0980CharlieBounce">PASSED</div>
    </bitty-7-0>
  </bitty-7-0>
</bitty-7-0>

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export class AlfaClass {
  runTest0980(event, el) {
    this.api.localTrigger("runTest0980AlfaBounce");
  }
  runTest0980AlfaBounce(event, el) {
    el.innerHTML = "FAILED";
  }
}

export class BravoClass {
  async bittyReady() {  
    await sleep(300);
    this.api.querySelector(".clickme0980").click();
  }

  testTrigger0980() {
    this.api.localTrigger("runTest0980");
  }

  runTest0980(event, el) {
    this.api.localTrigger("runTest0980BravoBounce");
  }
  runTest0980BravoBounce(event, el) {
    el.innerHTML = "PASSED";
  }
}

export class CharlieClass {
  runTest0980(event, el) {
    this.api.localTrigger("runTest0980CharlieBounce");
  }
  runTest0980CharlieBounce(event, el) {
    el.innerHTML = "FAILED";
  }
}

PASSED

FAILED

PASSED

TEST: 0990-el-is-sender

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/0990-el-is-sender/test.on.js"
>
  <div class="clickme test" data-send="runTest0990Alfa" data-receive="runTest0990Alfa">FAILED</div>

  <div data-send="runTest0990Bravo">
    <div class="clickme test" data-receive="runTest0990Bravo">FAILED</div>
  </div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest0990Alfa(_event, el) {
    if (el.isSender) {
      el.innerHTML = "PASSED";
    }
  }

  runTest0990Bravo(_event, el) {
    if (!el.isSender) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1000-el-is-target

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1000-el-is-target/test.on.js"
>
  <div class="clickme test" data-send="runTest1000Alfa" data-receive="runTest1000Alfa">FAILED</div>

  <div data-send="runTest1000Bravo">
    <div class="clickme test" data-receive="runTest1000Bravo">FAILED</div>
  </div>

  <div class="clickme" data-send="runTest1000Charlie">
    <div class="test" data-receive="runTest1000Charlie">FAILED</div>
  </div>


</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1000Alfa(_event, el) {
    if (el.isTarget) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1000Bravo(_event, el) {
    if (el.isTarget) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1000Charlie(_event, el) {
    if (!el.isTarget) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1020-el-prop

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1020-el-prop/test.on.js"
>
  <div class="test" data-key="alfa" data-receive="runTest1020Alfa">FAILED</div>
  <div data-key="bravo">
    <div class="test" data-receive="runTest1020Bravo">FAILED</div>
  </div>

  <div class="test" data-key="charlie" data-receive="runTest1020Charlie">FAILED</div>
  <div data-key="delta">
    <div class="test" data-receive="runTest1020Delta">FAILED</div>
  </div>

<div class="test" data-key="" data-receive="runTest1020Echo">FAILED</div>


</bitty-7-0>

export default class {
  bittyReady() {
    this.api.localTrigger("runTest1020Alfa runTest1020Bravo");
    this.api.trigger("runTest1020Charlie runTest1020Delta runTest1020Echo");
  }

  runTest1020Alfa(_event, el) {
    if (el.prop("key") === "alfa") {
      el.innerHTML = "PASSED";
    }
  }

  runTest1020Bravo(_event, el) {
    if (el.prop("key") === "bravo") {
      el.innerHTML = "PASSED";
    }
  }

  runTest1020Charlie(_event, el) {
    if (el.prop("key") === "charlie") {
      el.innerHTML = "PASSED";
    }
  }

  runTest1020Delta(_event, el) {
    if (el.prop("key") === "delta") {
      el.innerHTML = "PASSED";
    }
  }

  runTest1020Echo(_event, el) {
    if (el.prop("key") === "") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1030-el-prop-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1030-el-prop-to-int/test.on.js"
>
  <div class="test" data-key="10" data-receive="runTest1030Alfa">FAILED</div>
  <div data-key="20">
    <div class="test" data-receive="runTest1030Bravo">FAILED</div>
  </div>
  <div class="test" data-key="30" data-receive="runTest1030Charlie">FAILED</div>
  <div data-key="40">
    <div class="test" data-receive="runTest1030Delta">FAILED</div>
  </div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.localTrigger("runTest1030Alfa runTest1030Bravo");
    this.api.trigger("runTest1030Charlie runTest1030Delta");
  }

  runTest1030Alfa(_event, el) {
    if (el.propToInt("key") === 10) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1030Bravo(_event, el) {
    if (el.propToInt("key") === 20) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1030Charlie(_event, el) {
    if (el.propToInt("key") === 30) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1030Delta(_event, el) {
    if (el.propToInt("key") === 40) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1040-el-prop-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1040-el-prop-to-float/test.on.js"
>
  <div class="test" data-key="1.1" data-receive="runTest1040Alfa">FAILED</div>
  <div data-key="2.2">
    <div class="test" data-receive="runTest1040Bravo">FAILED</div>
  </div>
  <div class="test" data-key="3.3" data-receive="runTest1040Charlie">FAILED</div>
  <div data-key="4.4">
    <div class="test" data-receive="runTest1040Delta">FAILED</div>
  </div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.localTrigger("runTest1040Alfa runTest1040Bravo");
    this.api.trigger("runTest1040Charlie runTest1040Delta");
  }
  runTest1040Alfa(_event, el) {
    if (el.propToFloat("key") === 1.1) {
      el.innerHTML = "PASSED";
    }
  }
  runTest1040Bravo(_event, el) {
    if (el.propToFloat("key") === 2.2) {
      el.innerHTML = "PASSED";
    }
  }
  runTest1040Charlie(_event, el) {
    if (el.propToFloat("key") === 3.3) {
      el.innerHTML = "PASSED";
    }
  }
  runTest1040Delta(_event, el) {
    if (el.propToFloat("key") === 4.4) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1042-el-value-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1042-el-value-to-int/test.on.js"
>
  <input 
    type="submit" 
    value="7878" 
    data-send="runTest1035" 
    data-receive="runTest1035"
/>
  <div class="test" data-receive="markPassed1035">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  runTest1035(ev, el) {
    if (el.valueToInt === 7878) {
      this.api.localTrigger("markPassed1035");
      el.hidden = true;
    }
  }

  markPassed1035(_, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 1045-el-value-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1045-el-value-to-float/test.on.js"
>
  <input 
    type="submit" 
    value="123.456" 
    data-send="runTest1045" 
    data-receive="runTest1045"
/>
  <div class="test" data-receive="markPassed1045">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  runTest1045(ev, el) {
    if (el.valueToFloat === 123.456) {
      this.api.localTrigger("markPassed1045");
      el.hidden = true;
    }
  }

  markPassed1045(_, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

TEST: 1050-cancle-event-at-frist-data-send

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1050-cancle-event-at-frist-data-send/test.on.js"
>

<div data-send="runTest1050Charlie">
  <div data-send="runTest1050Bravo">
    <div class="clickme" data-send="runTest1050Alfa"></div>
  </div>
</div>

<div data-send="runTest1050Echo">
  <div data-send="runTest1050Delta">
    <div class="clickme"></div>
  </div>
</div>

<div class="test" data-receive="runTest1050Alfa">FAILED</div>
<div class="test" data-receive="runTest1050Bravo">PASSED</div>
<div class="test" data-receive="runTest1050Charlie">PASSED</div>
<div class="test" data-receive="runTest1050Delta">FAILED</div>
<div class="test" data-receive="runTest1050Echo">PASSED</div>


</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }
  runTest1050Alfa(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTest1050Bravo(_event, el) {
    el.innerHTML = "FAILED";
  }
  runTest1050Charlie(_event, el) {
    el.innerHTML = "FAILED";
  }
  runTest1050Delta(_event, el) {
    el.innerHTML = "PASSED";
  }
  runTest1050Echo(_event, el) {
    el.innerHTML = "FAILED";
  }
}

FAILED

PASSED

FAILED

PASSED

TEST: 1060-bitty-data-send

<!-- NOTE: If you click to open this test after
it has passed, it will change the status to FAILED.
That's expected, because the test clicks the
inside element and not the outside element
which is what you have to click to open
the test. So, it's all good as long
as there is an initial PASSED status -->

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1060-bitty-data-send/test.on.js AlfaClass"
  data-send="runTest1060Alfa"
>
  <bitty-7-0 
    data-connect="/unit-tests/7/0/0/tests/1060-bitty-data-send/test.on.js BravoClass"
    data-send="runTest1060Bravo"
  >
    <div class="test" data-receive="runTest1060Bravo">FAILED</div>
  </bitty-7-0>

<div class="test" data-receive="runTest1060Alfa">PASSED</div>
</bitty-7-0>

export class AlfaClass {
  runTest1060Alfa(_, el) {
    el.innerHTML = "FAILED";
  }
}

export class BravoClass {
  bittyReady() {
    this.api.click();
  }
  runTest1060Bravo(_, el) {
    el.innerHTML = "PASSED";
  }
}

FAILED

PASSED

TEST: 1070-check-bitty-parent

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1070-check-bitty-parent/test.on.js"
>
  <div class="test clickme" data-send="runTest1070Alfa" data-receive="runTest1070Alfa">FAILED</div>
  <div class="test clickme" data-send="runTest1070Bravo" data-receive="runTest1070Bravo">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }
  runTest1070Alfa(_event, el) {
    if (el.bittyParent.bittyId === this.api.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
  runTest1070Bravo(_event, el) {
    if (el.bittyParent.dataset.bittyid === this.api.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1080-data-init-fires-once

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1080-data-init-fires-once/test.on.js"
>
<!-- NOTE: there has to be a `data-init` in each 
bitty_tag to ensure eventual consistency instead
of ending up in a race condition if there was
only one `data-init` involved -->
<div class="test" data-init="runTest1080">PASSED</div>
</bitty-7-0>

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1080-data-init-fires-once/test.on.js"
>
<div class="test" data-init="runTest1080">PASSED</div>
</bitty-7-0>

export default class {
  #counter = 0;

  runTest1080(_event, el) {
    this.#counter += 1;
    if (this.#counter === 2) {
      el.innerHTML = "FAILED";
    }
  }
}

PASSED

TEST: 1120-ev-sender-value

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1120-ev-sender-value/test.on.js"
>
  <input type="submit" value="target string" data-send="runTest1120" />
  <div class="test" data-receive="runTest1120">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  runTest1120(ev, el) {
    if (ev.sender.value === "target string") {
      ev.target.hidden = true;
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1130-ev-sender-value-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1130-ev-sender-value-to-int/test.on.js"
>
  <input type="submit" value="9000" data-send="runTest1130" />
  <div class="test" data-receive="runTest1130">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  runTest1130(ev, el) {
    if (ev.sender.valueToInt === 9000) {
      ev.target.hidden = true;
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1140-ev-sender-value-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1140-ev-sender-value-to-float/test.on.js"
>
  <input type="submit" value="1.1" data-send="runTest1140" />
  <div class="test" data-receive="runTest1140">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  runTest1140(ev, el) {
    if (ev.sender.valueToFloat === 1.1) {
      ev.target.hidden = true;
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1180-ev-sender-prop

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1180-ev-sender-prop/test.on.js"
>


<div data-send="runTest1180Alfa" data-key="echo">
  <div class="test clickme" data-receive="runTest1180Alfa">FAILED</div>
</div>

  <div data-key="foxtrot">
    <div data-send="runTest1180Bravo">
      <div class="test clickme" data-receive="runTest1180Bravo">FAILED</div>
    </div>
  </div>
  
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1180Alfa(ev, el) {
    if (ev.sender.prop("key") === "echo") {
      el.innerHTML = "PASSED";
    }
  }

  runTest1180Bravo(ev, el) {
    if (ev.sender.prop("key") === "foxtrot") {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1190-ev-sender-prop-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1190-ev-sender-prop-to-int/test.on.js"
>
  <div data-key="6767" data-send="runTest1190Alfa">
    <div class="test clickme" data-receive="runTest1190Alfa">FAILED</div>
  </div>

  <div data-key="3434">
    <div data-send="runTest1190Bravo">
      <div class="test clickme" data-receive="runTest1190Bravo">FAILED</div>
    </div>
  </div>
  
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1190Alfa(ev, el) {
    if (ev.sender.propToInt("key") === 6767) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1190Bravo(ev, el) {
    if (ev.sender.propToInt("key") === 3434) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1200-ev-sender-prop-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1200-ev-sender-prop-to-float/test.on.js"
>

  <div data-key="99.7" data-send="runTest1200Alfa">
    <div class="test clickme" data-receive="runTest1200Alfa">FAILED</div>
  </div>

  <div data-key="77.9">
    <div data-send="runTest1200Bravo">
      <div class="test clickme" data-receive="runTest1200Bravo">FAILED</div>
    </div>
  </div>
  
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1200Alfa(ev, el) {
    if (ev.sender.propToFloat("key") === 99.7) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1200Bravo(ev, el) {
    if (ev.sender.propToFloat("key") === 77.9) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1210-el-prop-matches-target

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1210-el-prop-matches-target/test.on.js"
>
    <div class="clickme" data-key="example1" data-send="runTest1210Alfa"></div>
    <div class="test" data-key="example1" data-receive="runTest1210Alfa">FAILED</div>

    <div class="clickme" data-key="example2" data-send="runTest1210Bravo"></div>
    <div class="test" data-key="example3" data-receive="runTest1210Bravo">FAILED</div>

    <div class="clickme" data-msg="No matching key" data-send="runTest1210Charlie"></div>
    <div class="test" data-key="example4" data-receive="runTest1210Charlie">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1210Alfa(ev, el) {
    if (el.propMatchesTarget("key")) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1210Bravo(ev, el) {
    if (!el.propMatchesTarget("key")) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1210Charlie(ev, el) {
    if (!el.propMatchesTarget("key")) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1240-el-prop-matches-sender

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1240-el-prop-matches-sender/test.on.js"
>
    <div class="clickme" data-key="example1" data-send="runTest1240Alfa"></div>
    <div class="test" data-key="example1" data-receive="runTest1240Alfa">FAILED</div>

    <div class="clickme" data-key="example2" data-send="runTest1240Bravo"></div>
    <div class="test" data-key="example3" data-receive="runTest1240Bravo">FAILED</div>

    <div 
      class="test clickme"  
      data-key="example1" 
      data-send="runTest1240Charlie" 
      data-receive="runTest1240Charlie" 
    >FAILED</div>


</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1240Alfa(ev, el) {
    if (el.propMatchesSender("key")) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1240Bravo(ev, el) {
    if (!el.propMatchesSender("key")) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1240Charlie(ev, el) {
    if (el.propMatchesSender("key")) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1260-el-target-bitty-id

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1260-el-target-bitty-id/test.on.js"
>
    <div 
      class="test clickme" 
      data-send="runTest1260" 
      data-receive="runTest1260">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }
  runTest1260(ev, el) {
    if (ev.bittyId === el.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1270-el-sender-bitty-id

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1270-el-sender-bitty-id/test.on.js"
>
    <div 
      class="test clickme" 
      data-send="runTest1270" 
      data-receive="runTest1270">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1270(ev, el) {
    if (el.senderBittyId = el.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1280-data-init-does-not-collide

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1280-data-init-does-not-collide/test.on.js"
>
<div class="test" data-init="runTest1280">FAILED</div>
<div class="test" data-init="runTest1280">FAILED</div>
<div class="test" data-init="runTest1280">FAILED</div>

</bitty-7-0>



<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1280-data-init-does-not-collide/test.on.js"
>

<div class="test" data-init="runTest1280">FAILED</div>
<div class="test" data-init="runTest1280">FAILED</div>
<div class="test" data-init="runTest1280">FAILED</div>
</bitty-7-0>

export default class {
  #counter = 0;

  runTest1280(ev, el) {
    this.#counter += 1;
    if (this.#counter <= 3) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1290-ev-value

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1290-ev-value/test.on.js"
>
<input data-send="runTest1290" value="test1290" />
<div class="test" data-receive="passTest1290">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  passTest1290(_ev, el) {
    el.innerHTML = "PASSED";
  }

  runTest1290(ev, el) {
    ev.target.hidden = true;
    if (ev.value === "test1290") {
      this.api.trigger("passTest1290");
    }
  }
}

FAILED

TEST: 1300-ev-value-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1300-ev-value-to-int/test.on.js"
>

<input data-send="runTest1300" value="1300" />
<div class="test" data-receive="passTest1300">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  passTest1300(_ev, el) {
    el.innerHTML = "PASSED";
  }

  runTest1300(ev, el) {
    ev.target.hidden = true;
    if (ev.valueToInt === 1300) {
      this.api.trigger("passTest1300");
    }
  }
}

FAILED

TEST: 1310-ev-value-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1310-ev-value-to-float/test.on.js"
>

<input data-send="runTest1310" value="13.10" />
<div class="test" data-receive="passTest1310">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("input").click();
  }

  passTest1310(_ev, el) {
    el.innerHTML = "PASSED";
  }

  runTest1310(ev, el) {
    ev.target.hidden = true;
    if (ev.valueToFloat === 13.10) {
      this.api.trigger("passTest1310");
    }
  }
}

FAILED

TEST: 1320-ev-prop

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1320-ev-prop/test.on.js"
>

  <div class="test" data-key="test1320" data-send="runTest1320">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("div").click();
  }

  runTest1320(ev, _el) {
    if (ev.prop("key") === "test1320") {
      ev.target.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1330-ev-prop-to-int

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1330-ev-prop-to-int/test.on.js"
>

  <div class="test" data-key="1330" data-send="runTest1330">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("div").click();
  }

  runTest1330(ev, _el) {
    if (ev.propToInt("key") === 1330) {
      ev.target.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1340-ev-prop-to-float

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1340-ev-prop-to-float/test.on.js"
>

  <div class="test" data-key="13.40" data-send="runTest1340">FAILED</div>

</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("div").click();
  }

  runTest1340(ev, _el) {
    if (ev.propToFloat("key") === 13.40) {
      ev.target.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1350-data-use-basic-test

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1350-data-use-basic-test/test.on.js"
>

  <div class="test" data-use="runTest1350">FAILED</div>
  <div class="test" data-use="runTest1350">FAILED</div>
  <div class="test" data-use="runTest1350">FAILED</div>

</bitty-7-0>

export default class {
  #updates = 0;

  bittyReady() {
    this.api.querySelectorAll("div").forEach((el) => {
      el.click();
    });
  }

  runTest1350(ev, el) {
    this.#updates += 1;
    if (this.#updates <= 3) {
      el.innerHTML = "PASSED";
    } else {
      el.innerHTML = "FAILED";
    }
  }
}

FAILED

TEST: 1360-ev-sender-bitty-id

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1360-ev-sender-bitty-id/test.on.js"
>

  <div class="test clickme" data-use="runTest1360Alfa">FAILED</div>

  <div data-send="runTest1360Bravo">
    <div class="test clickme" data-receive="runTest1360Bravo">FAILED</div>
  </div>

</bitty-7-0>

export default class {
  #updates = 0;

  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1360Alfa(ev, el) {
    if (ev.sender.bittyId !== undefined) {
      el.innerHTML = "PASSED";
    }
  }

  runTest1360Bravo(ev, el) {
    if (ev.sender.bittyId === el.parentNode.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1370-data-use-bubbles

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1370-data-use-bubbles/test.on.js"
>

  <div data-use="runTest1370">
    <div>
      <div class="test clickme">FAILED</div>
    </div>
  </div>

</bitty-7-0>

export default class {
  #updates = 0;

  bittyReady() {
    this.api.querySelectorAll(".clickme").forEach((el) => {
      el.click();
    });
  }

  runTest1370(ev, el) {
    el.replaceChildren(
      this.api.makeElement(`<div class="test">PASSED</div>`),
    );
  }
}

FAILED

TEST: 1380-make-svg

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1380-make-svg/test.on.js"
>

  <div class="test" data-init="runTest1380">FAILED</div>

</bitty-7-0>

const svgString = `
<svg viewBox="0 0 240 30" xmlns="http://www.w3.org/2000/svg">
  <text x="4" y="20" class="svg-test-class">FAILED</text>
</svg>`;

export default class {
  runTest1380(_, el) {
    const subs = [
      ["FAILED", "PASSED"],
    ];
    const svg = this.api.makeSVG(svgString, subs);
    el.replaceChildren(svg);
    el.classList.remove("test");
  }
}

FAILED

TEST: 1390-forward-does-not-require-a-reciever

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1390-forward-does-not-require-a-reciever/test.on.js"
>
  <button data-send="runTest1390">Test Button</button>
  <div class="test">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("button").click();
  }

  runTest1390(ev, el) {
    this.api.forward(ev, "catchTest1390");
  }

  catchTest1390(ev, _) {
    const div = this.api.querySelector("div");
    div.innerHTML = "PASSED";
  }
}

FAILED

TEST: 1400-trigger-does-not-require-receiver

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1400-trigger-does-not-require-receiver/test.on.js"
>
  <button data-send="runTest1400">Test Button</button>
  <div class="test">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("button").click();
  }

  runTest1400(ev, el) {
    this.api.localTrigger("catchTest1400");
  }

  catchTest1400(ev, _) {
    const div = this.api.querySelector("div");
    div.innerHTML = "PASSED";
  }
}

FAILED

TEST: 1410-bitty-is-trigger-sender

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1410-bitty-is-trigger-sender/test.on.js"
>
  <div class="test" data-receive="runTest1410">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.trigger("runTest1410");
  }

  runTest1410(ev, el) {
    if (ev.sender.dataset.bittyid === this.api.dataset.bittyid) {
      el.innerHTML = "PASSED";
    }
  }
}

FAILED

TEST: 1420-multiple-data-use-signals

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1420-multiple-data-use-signals/test.on.js"
>
  <div class="test clickme1420" data-use="runTest1420Alfa runTest1420Bravo">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector(".clickme1420").click();
  }

  runTest1420Alfa(ev, el) {
    el.innerHTML = "WORKING";
  }

  runTest1420Bravo(ev, el) {
    el.innerHTML = "PASSED";
  }

}

FAILED

TEST: 1430-data-use-async

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1430-data-use-async/test.on.js"
>
  <div class="test clickme1430" data-use="await:runTest1430Alfa runTest1430Bravo">FAILED</div>
</bitty-7-0>

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

export default class {
  #status = "FAILED";

  bittyReady() {
    this.api.querySelector(".clickme1430").click();
  }

  async runTest1430Alfa(ev, el) {
    await sleep(300);
    this.#status = "PASSED";
  }

  runTest1430Bravo(ev, el) {
    el.innerHTML = this.#status;
  }

}

FAILED

TEST: 1440-localtrigger-ev-sender-exists

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1440-localtrigger-ev-sender-exists/test.on.js"
>
  <button data-send="runTest1440">Test Button</button>
  <div class="test" data-receive="checkTest1440">FAILED</div>
</bitty-7-0>

export default class {
  bittyReady() {
    this.api.querySelector("button").click();
  }

  runTest1440(ev, el) {
    this.api.localTrigger("checkTest1440");
  }

  checkTest1440(ev, el) {
    if (ev.bittyId !== undefined) {
      el.innerHTML = "PASSED";
    }
  }

}

FAILED

TEST: 1450-bitty-element-has-bittyid

<bitty-7-0 
  data-connect="/unit-tests/7/0/0/tests/1450-bitty-element-has-bittyid/test.on.js"
>
</bitty-7-0>

const template = `<div class="test">FAILED</div>`;
export default class {
  bittyInit() {
    const div = this.api.makeElement(template);
    if (this.api.bittyId !== undefined) {
      div.innerHTML = "PASSED";
    }
    this.api.appendChild(div);
  }
}

Testing file: https://unpkg.com/@alanwsmith/bitty@7.0.0/bitty-7.0.0.js

Gather results...