index.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
  </head>
  <body>
    <script type="module">
      import Template from "./template.js";
      class Test {
        constructor(name, fn) {
          this.name = name;
          this.fn = fn;
        }
        async run() {
          await this.fn();
        }
      }
      const html = Template.createElement("<div><h2>Hello Template</h2></div>");
      const css = Template.createStyle("<style></style>");
      const tests = [
        new Test("mounts to page", async () => {
          class Mountable extends Template {
            constructor() {
              super(html, css);
            }
          }
          const instance = new Mountable();
          instance.mount(document.body);
          if (
            document.body.shadowRoot.querySelector("h2") !==
            instance.getElement("h2")
          ) {
            throw new Error("Unable to find mounted component");
          }
          instance.unmount();
        }),
        new Test("emitters work", async () => {
          const t = new Template();
          const one = new Promise((resolve, reject) => {
            t.on("foo", resolve);
            setTimeout(reject, 100);
          });
          const two = new Promise((resolve, reject) => {
            t.on("foo", resolve);
            setTimeout(reject, 100);
          });
          const three = new Promise((resolve, reject) => {
            t.on("bar", resolve);
            setTimeout(reject, 100);
          });
          t.emit("foo");
          t.emit("bar");
          await Promise.all([one, two, three]);
        }),
        new Test("setState emits change on change", async () => {
          const t = new Template();
          await new Promise((resolve, reject) => {
            t.on("change", resolve);
            setTimeout(reject, 100);
            t.setState({ foo: "bar" });
          });
        }),
        new Test("setState does not emit change on same", async () => {
          const t = new Template();
          t.setState({ foo: "bar" });
          await new Promise((resolve) => setTimeout(resolve, 0));
          await new Promise((resolve, reject) => {
            t.on("change", reject);
            t.setState({ foo: "bar" });
            setTimeout(resolve, 100);
          });
        }),
      ];
      tests.forEach((test) =>
        (async function runTest() {
          try {
            await test.run();
            console.log(`PASS: ${test.name}`);
          } catch (e) {
            console.error(`FAIL: ${test.name}`, e);
          }
        })()
      );
    </script>
  </body>
</html>