Skip to content

Commit

Permalink
test(hiccup): refactor all tests
Browse files Browse the repository at this point in the history
  • Loading branch information
@postspectacular
postspectacular committed Jan 28, 2018
1 parent c677539 commit 13f0bd1
Showing 1 changed file with 178 additions and 102 deletions.
280 changes: 178 additions & 102 deletions packages/hiccup/test/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,101 +1,177 @@
import * as assert from "assert";

import * as h from "../src/index";
import { serialize } from "../src/index";

function _check(a, b) {
assert.equal(serialize(a), b);
}

function check(id, a, b) {
it(id, () => _check(a, b));
}

describe("serialize", () => {
it("single", () => {
assert.equal(h.serialize(
["div", "foo"]),
`<div>foo</div>`);
assert.equal(h.serialize(
["div#foo", "foo"]),
`<div id="foo">foo</div>`);
assert.equal(h.serialize(
["div#foo.bar.baz", "foo"]),
`<div id="foo" class="bar baz">foo</div>`);
assert.equal(h.serialize(
["div#foo.bar.baz", { extra: 23 }, "foo"]),
`<div id="foo" class="bar baz" extra="23">foo</div>`);
});
it("self-closing", () => {
assert.equal(h.serialize(["br"]), `<br/>`);
assert.throws(() => h.serialize(["br", "x"]), "no body");
assert.equal(h.serialize(["link", { href: "#" }]), `<link href="#"/>`);
assert.equal(h.serialize(["div"]), `<div></div>`);
});
it("attribs", () => {
assert.equal(h.serialize(
["div", { bool: true }]),
`<div bool></div>`
);
assert.equal(h.serialize(
["div", { bool: false }]),
`<div></div>`
);
assert.equal(h.serialize(
["div", { foo: "" }]),
`<div></div>`
);
assert.equal(h.serialize(
["div", { foo: 0 }]),
`<div foo="0"></div>`
);
assert.equal(h.serialize(
["div", { foo: {} }]),
`<div foo="[object Object]"></div>`
);
assert.equal(h.serialize(
["div", { foo: () => 23 }]),
`<div foo="23"></div>`
);
assert.equal(h.serialize(
["div", { foo: () => null }]),
`<div></div>`
);
assert.equal(h.serialize(
["div", { foo: { toString: () => "23" } }]),
`<div foo="23"></div>`
);
});
it("style", () => {
assert.equal(h.serialize(
["div", { style: { a: "red" } }, "foo"]),
`<div style="a:red;">foo</div>`);
assert.equal(h.serialize(
["div", { style: { a: "red", b: "blue" } }, "foo"]),
`<div style="a:red;b:blue;">foo</div>`);
assert.equal(h.serialize(
["div", { style: "a:red;" }, "foo"]),
`<div style="a:red;">foo</div>`);
assert.equal(h.serialize(
["div", { style: {} }, "foo"]),
`<div>foo</div>`);
});
it("simple nested", () => {
assert.equal(h.serialize(
["div", ["h1.title", "foo"], ["p", ["span.small", "hello"], ["br"], "bye"]]),
`<div><h1 class="title">foo</h1><p><span class="small">hello</span><br/>bye</p></div>`);
});
it("components", () => {
assert.equal(h.serialize(
[() => ["div#foo", "bar"]]),
`<div id="foo">bar</div>`);
assert.equal(h.serialize(
[(id, body) => ["div#" + id, body], "foo", "bar"]),
`<div id="foo">bar</div>`);
assert.equal(h.serialize(
["div", () => ["div#foo", "bar"]]),
`<div><div id="foo">bar</div></div>`);
assert.equal(h.serialize(
["div", [(id, body) => ["div#" + id, body], "foo", "bar"], "bar2"]),
`<div><div id="foo">bar</div>bar2</div>`);
assert.equal(h.serialize(
["div", [([id, body]) => ["div#" + id, body], ["foo", "bar"]], "bar2"]),
`<div><div id="foo">bar</div>bar2</div>`);
assert.equal(h.serialize(
["div", "foo", () => ["div#foo2", "bar2"], "bar"]),
`<div>foo<div id="foo2">bar2</div>bar</div>`);

check(
"simple div",
["div", "foo"],
`<div>foo</div>`
);

check(
"div w/ id",
["div#foo", "foo"],
`<div id="foo">foo</div>`
);

check(
"div w/ id + classes",
["div#foo.bar.baz", "foo"],
`<div id="foo" class="bar baz">foo</div>`
);

check(
"div w/ id, class & attrib",
["div#foo.bar.baz", { extra: 23 }, "foo"],
`<div id="foo" class="bar baz" extra="23">foo</div>`
);

check(
"voidtag (br)",
["br"],
`<br/>`
);

check(
"voidtag (link)",
["link", { href: "#" }],
`<link href="#"/>`
);

check(
"empty div",
["div"],
`<div></div>`
);

it("<br> w/ body", () => {
assert.throws(() => serialize(["br", "x"]), "no body");
});

check(
"div w/ bool attr (true)",
["div", { bool: true }],
`<div bool></div>`
);

check(
"div w/ bool attr (false)",
["div", { bool: false }],
`<div></div>`
);

check(
"empty attr",
["div", { foo: "" }],
`<div></div>`
);

check(
"zero attr",
["div", { foo: 0 }],
`<div foo="0"></div>`
);

check(
"attr toString",
["div", { foo: {} }],
`<div foo="[object Object]"></div>`
);

check(
"attr fn",
["div", { foo: () => 23 }],
`<div foo="23"></div>`
);

check(
"attr fn (null)",
["div", { foo: () => null }],
`<div></div>`
);

check(
"attr obj w/ toString()",
["div", { foo: { toString: () => "23" } }],
`<div foo="23"></div>`
);

check(
"style obj",
["div", { style: { a: "red" } }, "foo"],
`<div style="a:red;">foo</div>`
);

check(
"style obj 2",
["div", { style: { a: "red", b: "blue" } }, "foo"],
`<div style="a:red;b:blue;">foo</div>`
);

check(
"style css",
["div", { style: "a:red;" }, "foo"],
`<div style="a:red;">foo</div>`
);

check(
"style empty",
["div", { style: {} }, "foo"],
`<div>foo</div>`
);

check(
"nested",
["div", ["h1.title", "foo"], ["p", ["span.small", "hello"], ["br"], "bye"]],
`<div><h1 class="title">foo</h1><p><span class="small">hello</span><br/>bye</p></div>`
);

check(
"simple component",
[() => ["div#foo", "bar"]],
`<div id="foo">bar</div>`
);

check(
"comp fn args",
[(id, body) => ["div#" + id, body], "foo", "bar"],
`<div id="foo">bar</div>`
);

check(
"comp fn in body",
["div", () => ["div#foo", "bar"]],
`<div><div id="foo">bar</div></div>`
);

check(
"comp fn in body w/ args",
["div", [(id, body) => ["div#" + id, body], "foo", "bar"], "bar2"],
`<div><div id="foo">bar</div>bar2</div>`
);

check(
"comp fn in body apply",
["div", [([id, body]) => ["div#" + id, body], ["foo", "bar"]], "bar2"],
`<div><div id="foo">bar</div>bar2</div>`
);

check(
"comp fn body 2",
["div", "foo", () => ["div#foo2", "bar2"], "bar"],
`<div>foo<div id="foo2">bar2</div>bar</div>`
);

it("components nested", () => {
const dlItem = ([def, desc]) => [["dt", def], ["dd", desc]];
const ulItem = (i) => ["li", i];
Expand All @@ -108,14 +184,14 @@ describe("serialize", () => {
const widget1 = [dlList, { id: "foo" }, items];
const widget2 = [ulList, { id: "foo" }, items.map((i) => i[1])];

assert.equal(h.serialize(widget1),
`<dl id="foo"><dt>a</dt><dd>foo</dd><dt>b</dt><dd>bar</dd></dl>`);
assert.equal(h.serialize(widget2),
`<ul id="foo"><li>foo</li><li>bar</li></ul>`);
});
it("iterators", () => {
assert.equal(h.serialize(
["ul", [(items) => items.map((i) => ["li", i]), ["a", "b"]]]),
`<ul><li>a</li><li>b</li></ul>`);
_check(widget1, `<dl id="foo"><dt>a</dt><dd>foo</dd><dt>b</dt><dd>bar</dd></dl>`);
_check(widget2, `<ul id="foo"><li>foo</li><li>bar</li></ul>`);
});

check(
"iterators",
["ul", [(items) => items.map((i) => ["li", i]), ["a", "b"]]],
`<ul><li>a</li><li>b</li></ul>`
);

});

0 comments on commit 13f0bd1

Please sign in to comment.