snabbdom/test/unit/jsx.tsx

import { assert } from "chai";
// workaround linter issue
// eslint-disable-next-line @typescript-eslint/no-unused-vars
import { jsx } from "../../package/jsx";
import "../../package/jsx-global";

describe("snabbdom", function () {
  describe("jsx", function () {
    it("can be used as a jsxFactory method", function () {
      const vnode = <div title="Hello World">Hello World</div>;

      assert.deepStrictEqual(vnode, {
        sel: "div",
        data: { title: "Hello World" },
        children: undefined,
        elm: undefined,
        text: "Hello World",
        key: undefined,
      });
    });

    it("creates text property for text only child", function () {
      const vnode = <div>foo bar</div>;

      assert.deepStrictEqual(vnode, {
        sel: "div",
        data: {},
        children: undefined,
        elm: undefined,
        text: "foo bar",
        key: undefined,
      });
    });

    it("creates an array of children for multiple children", function () {
      const vnode = (
        <div>
          {"foo"}
          {"bar"}
        </div>
      );

      assert.deepStrictEqual(vnode, {
        sel: "div",
        data: {},
        children: [
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "foo",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "bar",
            key: undefined,
          },
        ],
        elm: undefined,
        text: undefined,
        key: undefined,
      });
    });

    it("flattens children", function () {
      const vnode = (
        <section>
          <h1>A Heading</h1>
          some description
          {["part1", "part2"].map((part) => (
            <span>{part}</span>
          ))}
        </section>
      );

      assert.deepStrictEqual(vnode, {
        sel: "section",
        data: {},
        children: [
          {
            sel: "h1",
            data: {},
            children: undefined,
            elm: undefined,
            text: "A Heading",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "some description",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "part1",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "part2",
            key: undefined,
          },
        ],
        elm: undefined,
        text: undefined,
        key: undefined,
      });
    });

    it("removes falsey children", function () {
      const showLogin = false;
      const showCaptcha = false;
      const loginAttempts = 0;
      const userName = "";
      const profilePic = undefined;
      const isLoggedIn = true;
      const vnode = (
        <div>
          Login Form
          {showLogin && <login-form />}
          {showCaptcha ? <captcha-form /> : null}
          {userName}
          {profilePic}
          Login Attempts: {loginAttempts}
          Logged In: {isLoggedIn}
        </div>
      );

      assert.deepStrictEqual(vnode, {
        sel: "div",
        data: {},
        children: [
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "Login Form",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "Login Attempts: ",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "0",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "Logged In: ",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "true",
            key: undefined,
          },
        ],
        elm: undefined,
        text: undefined,
        key: undefined,
      });
    });

    it("works with a function component", function () {
      // workaround linter issue
      // eslint-disable-next-line @typescript-eslint/no-unused-vars
      const Part = ({ part }: { part: string }) => <span>{part}</span>;
      const vnode = (
        <div>
          <a attrs={{ href: "https://github.com/snabbdom/snabbdom" }}>
            Snabbdom
          </a>
          and tsx
          {["work", "like", "a", "charm!"].map((part) => (
            <Part part={part}></Part>
          ))}
          {"💃🕺🎉"}
        </div>
      );

      assert.deepStrictEqual(vnode, {
        sel: "div",
        data: {},
        children: [
          {
            sel: "a",
            data: { attrs: { href: "https://github.com/snabbdom/snabbdom" } },
            children: undefined,
            elm: undefined,
            text: "Snabbdom",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "and tsx",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "work",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "like",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "a",
            key: undefined,
          },
          {
            sel: "span",
            data: {},
            children: undefined,
            elm: undefined,
            text: "charm!",
            key: undefined,
          },
          {
            sel: undefined,
            data: undefined,
            children: undefined,
            elm: undefined,
            text: "💃🕺🎉",
            key: undefined,
          },
        ],
        elm: undefined,
        text: undefined,
        key: undefined,
      });
    });
  });
});