mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[REF] initial prototype of owl 2
This commit is contained in:
Géry Debongnie
committed by
Aaron Bohy
Aaron Bohy
parent
c06049076a
commit
e746574a1d
@@ -0,0 +1,265 @@
|
||||
import { createBlock, mount, patch, remove, text } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("adding/patching blocks", () => {
|
||||
test("simple block", async () => {
|
||||
const block = createBlock("<div>foo</div>");
|
||||
const tree = block();
|
||||
expect(tree.el).toBe(undefined);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(tree.el).not.toBe(undefined);
|
||||
expect(fixture.innerHTML).toBe("<div>foo</div>");
|
||||
});
|
||||
|
||||
test("block with dynamic content", async () => {
|
||||
const block = createBlock("<div><p><block-text-0/></p></div>");
|
||||
const tree = block(["foo"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
|
||||
patch(tree, block(["bar"]));
|
||||
expect(fixture.innerHTML).toBe("<div><p>bar</p></div>");
|
||||
|
||||
patch(tree, block(["foo"]));
|
||||
expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
|
||||
});
|
||||
|
||||
test("block with 2 dynamic text nodes", async () => {
|
||||
const block = createBlock("<div><p><block-text-0/></p><span><block-text-1/></span></div>");
|
||||
const tree = block(["foo", "bar"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>foo</p><span>bar</span></div>");
|
||||
patch(tree, block(["appa", "yip yip"]));
|
||||
expect(fixture.innerHTML).toBe("<div><p>appa</p><span>yip yip</span></div>");
|
||||
});
|
||||
|
||||
test("block with multiple references", async () => {
|
||||
const block1 = createBlock(
|
||||
"<div><block-text-0/><p><block-text-1/><block-text-2/></p><block-text-3/></div>"
|
||||
);
|
||||
const tree = block1(["1", "2", "3", "4"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>1<p>23</p>4</div>");
|
||||
});
|
||||
|
||||
test("falsy values in block nodes", () => {
|
||||
const cases = [
|
||||
[false, "false"],
|
||||
[undefined, ""],
|
||||
[null, ""],
|
||||
[0, "0"],
|
||||
["", ""],
|
||||
];
|
||||
const block = createBlock("<p><block-text-0/></p>");
|
||||
|
||||
for (let [value, result] of cases) {
|
||||
const fixture = makeTestFixture();
|
||||
mount(block([value as any]), fixture);
|
||||
expect(fixture.innerHTML).toBe(`<p>${result}</p>`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe("sub blocks", () => {
|
||||
test("block with subblock (only child)", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<p>yip yip</p>");
|
||||
const tree = block1([], [block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p>yip yip</p></div>");
|
||||
});
|
||||
|
||||
test("block with subblock (first child with sibling)", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/><span>something</span></div>");
|
||||
const block2 = createBlock("<p>yip yip</p>");
|
||||
const tree = block1([], [block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p>yip yip</p><span>something</span></div>");
|
||||
});
|
||||
|
||||
test("block with subblock (last child with sibling)", async () => {
|
||||
const block1 = createBlock("<div><span>something</span><block-child-0/></div>");
|
||||
const block2 = createBlock("<p>yip yip</p>");
|
||||
const tree = block1([], [block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>something</span><p>yip yip</p></div>");
|
||||
});
|
||||
|
||||
test("block with 2 subblocks", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/><block-child-1/></div>");
|
||||
const block2 = createBlock("<p>yip yip</p>");
|
||||
const tree = block1([], [block2(), text("appa")]);
|
||||
|
||||
mount(tree, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p>yip yip</p>appa</div>");
|
||||
});
|
||||
|
||||
test("block with subblock with siblings", async () => {
|
||||
const block1 = createBlock("<div><p>1</p><block-child-0/><p>2</p></div>");
|
||||
const block2 = createBlock("<p>yip yip</p>");
|
||||
|
||||
const tree = block1([], [block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>1</p><p>yip yip</p><p>2</p></div>");
|
||||
});
|
||||
|
||||
test("block with text, subblock and siblings", async () => {
|
||||
let block1 = createBlock(`<div><p>before<block-child-0/>after</p><block-child-1/></div>`);
|
||||
|
||||
let tree = block1([], [text("water"), text("fire")]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>beforewaterafter</p>fire</div>");
|
||||
});
|
||||
|
||||
test("block with conditional child", async () => {
|
||||
const block1 = createBlock("<div><p><block-child-0/></p></div>");
|
||||
const block2 = createBlock("<span>foo</span>");
|
||||
|
||||
const tree = block1();
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p></p></div>");
|
||||
|
||||
patch(tree, block1([], [block2()]));
|
||||
expect(fixture.innerHTML).toBe("<div><p><span>foo</span></p></div>");
|
||||
|
||||
patch(tree, block1());
|
||||
expect(fixture.innerHTML).toBe("<div><p></p></div>");
|
||||
});
|
||||
|
||||
test("block with subblock with dynamic content", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<p><block-text-0/></p>");
|
||||
const tree = block1([], [block2(["yip yip"])]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>yip yip</p></div>");
|
||||
|
||||
patch(tree, block1([], [block2(["foo"])]));
|
||||
expect(fixture.innerHTML).toBe("<div><p>foo</p></div>");
|
||||
});
|
||||
|
||||
test("block with dynamic content and subblock", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/><p><block-text-0/></p></div>");
|
||||
const block2 = createBlock("<p>sub block</p>");
|
||||
const tree = block1(["yip yip"], [block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>sub block</p><p>yip yip</p></div>");
|
||||
|
||||
patch(tree, block1(["foo"], [block2()]));
|
||||
expect(fixture.innerHTML).toBe("<div><p>sub block</p><p>foo</p></div>");
|
||||
});
|
||||
});
|
||||
|
||||
describe("remove elem blocks", () => {
|
||||
test("elem block can be removed", async () => {
|
||||
const block = createBlock("<div>foo</div>");
|
||||
const tree = block();
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>foo</div>");
|
||||
remove(tree);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
});
|
||||
});
|
||||
|
||||
describe("misc", () => {
|
||||
test("constructed block as correct number of refs", () => {
|
||||
const block = createBlock("<p><p><block-text-0/></p><block-text-1/></p>");
|
||||
const tree = block(["a", "b"]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p><p>a</p>b</p>");
|
||||
expect((tree as any).refs.length).toBe(2);
|
||||
});
|
||||
|
||||
test("block vnode can be used as text", () => {
|
||||
const block = createBlock("<p>a</p>");
|
||||
mount(text(block() as any), fixture);
|
||||
expect(fixture.textContent).toBe("<p>a</p>");
|
||||
});
|
||||
|
||||
test("block vnode can be used to represent a <tr>", () => {
|
||||
const block = createBlock("<tr><td>tomato</td></tr>");
|
||||
const tree = block();
|
||||
const fixture = document.createElement("table");
|
||||
mount(tree, fixture);
|
||||
expect(fixture.outerHTML).toBe("<table><tr><td>tomato</td></tr></table>");
|
||||
});
|
||||
|
||||
test("block vnode with <tr> can be used as text ", () => {
|
||||
const block = createBlock("<tr><td>tomato</td></tr>");
|
||||
mount(text(block() as any), fixture);
|
||||
expect(fixture.textContent).toBe("<tr><td>tomato</td></tr>");
|
||||
});
|
||||
|
||||
test("call toString for function/objects if used as inline text in block", () => {
|
||||
const block = createBlock("<p><block-text-0/><block-text-1/></p>");
|
||||
const f = () => 3;
|
||||
const g = () => 4;
|
||||
g.toString = () => "tostring";
|
||||
mount(block([f, g]), fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>() => 3tostring</p>");
|
||||
});
|
||||
|
||||
// test.skip("reusing a block skips patching process", async () => {
|
||||
// const block = createBlock('<div><block-text-0/></div>');
|
||||
// const foo = block(["foo"]);
|
||||
// const bar = block(["bar"]);
|
||||
// let fooCounter = 0;
|
||||
// let barCounter = 0;
|
||||
// let fooValue = "foo";
|
||||
// let barValue = "bar";
|
||||
// Object.defineProperty(foo.data, 0, {
|
||||
// get() {
|
||||
// fooCounter++;
|
||||
// return fooValue;
|
||||
// },
|
||||
// });
|
||||
// Object.defineProperty(bar.data, 0, {
|
||||
// get() {
|
||||
// barCounter++;
|
||||
// return barValue;
|
||||
// },
|
||||
// set(val) {
|
||||
// barValue = val;
|
||||
// },
|
||||
// });
|
||||
|
||||
// const bdom = multi([foo, bar]);
|
||||
// mount(bdom, fixture);
|
||||
// expect(fooCounter).toBe(1);
|
||||
// expect(barCounter).toBe(1);
|
||||
// expect(fixture.innerHTML).toBe("<div>foo</div><div>bar</div>");
|
||||
|
||||
// patch(bdom, multi([foo, block(["otherbar"])]));
|
||||
// expect(fixture.innerHTML).toBe("foootherbar");
|
||||
// expect(fooCounter).toBe(1);
|
||||
// expect(barCounter).toBe(2);
|
||||
// });
|
||||
});
|
||||
@@ -0,0 +1,123 @@
|
||||
import { mount, patch, createBlock } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
test("simple attribute", async () => {
|
||||
const block = createBlock('<div block-attribute-0="hello"></div>');
|
||||
const tree = block(["world"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
|
||||
|
||||
patch(tree, block(["owl"]));
|
||||
expect(fixture.innerHTML).toBe(`<div hello="owl"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic attribute (pair)", async () => {
|
||||
const block = createBlock('<div block-attributes="0"></div>');
|
||||
const tree = block([["hello", "world"]]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
|
||||
|
||||
patch(tree, block([["ola", "mundo"]]));
|
||||
expect(fixture.innerHTML).toBe(`<div ola="mundo"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic attribute (object)", async () => {
|
||||
const block = createBlock('<div block-attributes="0"></div>');
|
||||
const tree = block([{ hello: "world" }]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div hello="world"></div>`);
|
||||
|
||||
patch(tree, block([{ ola: "mundo" }]));
|
||||
expect(fixture.innerHTML).toBe(`<div ola="mundo"></div>`);
|
||||
});
|
||||
|
||||
test("class attribute", async () => {
|
||||
const block = createBlock('<div block-attribute-0="class"></div>');
|
||||
const tree = block(["fire"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="fire"></div>`);
|
||||
|
||||
patch(tree, block(["water"]));
|
||||
expect(fixture.innerHTML).toBe(`<div class="water"></div>`);
|
||||
|
||||
patch(tree, block([""]));
|
||||
expect(fixture.innerHTML).toBe(`<div class=""></div>`);
|
||||
|
||||
patch(tree, block([0]));
|
||||
expect(fixture.innerHTML).toBe(`<div class="0"></div>`);
|
||||
});
|
||||
|
||||
test("class attribute with undefined value", async () => {
|
||||
const block = createBlock('<div block-attribute-0="class"></div>');
|
||||
const tree = block([undefined]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div></div>`);
|
||||
});
|
||||
|
||||
test("class attribute (with a preexisting value", async () => {
|
||||
const block = createBlock('<div class="tomato" block-attribute-0="class"></div>');
|
||||
const tree = block(["potato"]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="tomato potato"></div>`);
|
||||
|
||||
patch(tree, block(["squash"]));
|
||||
expect(fixture.innerHTML).toBe(`<div class="tomato squash"></div>`);
|
||||
|
||||
patch(tree, block([""]));
|
||||
expect(fixture.innerHTML).toBe(`<div class="tomato"></div>`);
|
||||
});
|
||||
|
||||
describe("properties", () => {
|
||||
test("input with value attribute", () => {
|
||||
// render input with initial value
|
||||
const block = createBlock(`<input block-attribute-0="value"/>`);
|
||||
|
||||
const tree = block(["zucchini"]);
|
||||
mount(tree, fixture);
|
||||
// const bnode1 = renderToBdom(template, { v: "zucchini" });
|
||||
// const fixture = makeTestFixture();
|
||||
// mount(bnode1, fixture);
|
||||
const input = fixture.querySelector("input")!;
|
||||
expect(input.value).toBe("zucchini");
|
||||
|
||||
// change value manually in input, to simulate user input
|
||||
input.value = "tomato";
|
||||
expect(input.value).toBe("tomato");
|
||||
|
||||
// rerender with a different value, and patch actual dom, to check that
|
||||
// input value was properly reset by owl
|
||||
patch(tree, block(["potato"]));
|
||||
expect(input.value).toBe("potato");
|
||||
});
|
||||
|
||||
test("input type=checkbox with checked attribute", () => {
|
||||
// render input with initial value
|
||||
const block = createBlock(`<input type="checkbox" block-attribute-0="checked"/>`);
|
||||
|
||||
const tree = block([true]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<input type="checkbox">`);
|
||||
const input = fixture.querySelector("input")!;
|
||||
expect(input.checked).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,108 @@
|
||||
import { mount, createBlock, multi, config, patch } from "../../src/blockdom";
|
||||
// import { defaultHandler, setupMainHandler } from "../../src/bdom/block";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let initialHandler = config.mainEventHandler;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
config.mainEventHandler = initialHandler;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
test("simple event handling, with function", async () => {
|
||||
const block = createBlock('<div block-handler-0="click"></div>');
|
||||
let n = 0;
|
||||
const tree = block([() => n++]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
|
||||
expect(n).toBe(0);
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
|
||||
test("simple event handling, with function and argument", async () => {
|
||||
const block = createBlock('<div block-handler-0="click"></div>');
|
||||
let n = 0;
|
||||
const onClick = (arg: number) => {
|
||||
n += arg;
|
||||
};
|
||||
const tree = block([[onClick, 3]]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
|
||||
expect(n).toBe(0);
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
expect(n).toBe(3);
|
||||
|
||||
patch(tree, block([[onClick, 5]]));
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
expect(n).toBe(8);
|
||||
});
|
||||
|
||||
test("simple event handling ", async () => {
|
||||
config.mainEventHandler = (data, ev) => {
|
||||
if (typeof data === "function") {
|
||||
data();
|
||||
} else {
|
||||
const [owner, method] = data;
|
||||
owner[method]();
|
||||
}
|
||||
};
|
||||
|
||||
const block = createBlock('<div block-handler-0="click"></div>');
|
||||
let n = 0;
|
||||
const obj = { f: () => n++ };
|
||||
const tree = block([[obj, "f"]]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
expect(fixture.firstChild).toBeInstanceOf(HTMLDivElement);
|
||||
expect(n).toBe(0);
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
|
||||
test("can bind two handlers on same node", async () => {
|
||||
const block = createBlock('<div block-handler-0="click" block-handler-1="dblclick"></div>');
|
||||
let steps: string[] = [];
|
||||
let handleClick = () => steps.push("click");
|
||||
let handleDblClick = () => steps.push("dblclick");
|
||||
const tree = block([handleClick, handleDblClick]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
(fixture.firstChild as HTMLDivElement).dispatchEvent(new Event("dblclick", { bubbles: true }));
|
||||
expect(steps).toEqual(["click", "dblclick"]);
|
||||
});
|
||||
|
||||
test("two same block nodes with different handlers", async () => {
|
||||
const block = createBlock('<div block-handler-0="click"></div>');
|
||||
let steps: string[] = [];
|
||||
let handler1 = () => steps.push("1");
|
||||
let handler2 = () => steps.push("2");
|
||||
const tree = multi([block([handler1]), block([handler2])]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div><div></div>");
|
||||
|
||||
(fixture.firstChild as HTMLDivElement).click();
|
||||
(fixture.firstChild!.nextSibling as HTMLDivElement).click();
|
||||
expect(steps).toEqual(["1", "2"]);
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import { createBlock, mount, patch, remove } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
test("simple callback ref", async () => {
|
||||
const block = createBlock('<div><span block-ref="0">hey</span></div>');
|
||||
let arg: any = undefined;
|
||||
let n = 0;
|
||||
const refFn = (_arg: any) => {
|
||||
n++;
|
||||
arg = _arg;
|
||||
};
|
||||
|
||||
const tree = block([refFn]);
|
||||
|
||||
expect(arg).toBeUndefined();
|
||||
expect(n).toBe(0);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
expect(n).toBe(1);
|
||||
|
||||
expect(arg).toBeInstanceOf(HTMLSpanElement);
|
||||
expect(arg!.innerHTML).toBe("hey");
|
||||
|
||||
patch(tree, block([refFn]));
|
||||
expect(n).toBe(1);
|
||||
|
||||
remove(tree);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(arg).toBeNull();
|
||||
expect(n).toBe(2);
|
||||
});
|
||||
|
||||
test("is in dom when callback is called", async () => {
|
||||
expect.assertions(1);
|
||||
const block = createBlock('<div><span block-ref="0">hey</span></div>');
|
||||
const refFn = (span: any) => {
|
||||
expect(document.body.contains(span)).toBeTruthy();
|
||||
};
|
||||
|
||||
const tree = block([refFn]);
|
||||
|
||||
mount(tree, fixture);
|
||||
});
|
||||
@@ -0,0 +1,11 @@
|
||||
let lastFixture: any = null;
|
||||
|
||||
export function makeTestFixture() {
|
||||
let fixture = document.createElement("div");
|
||||
document.body.appendChild(fixture);
|
||||
if (lastFixture) {
|
||||
lastFixture.remove();
|
||||
}
|
||||
lastFixture = fixture;
|
||||
return fixture;
|
||||
}
|
||||
@@ -0,0 +1,48 @@
|
||||
import { html, mount, patch, text } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("html block", () => {
|
||||
test("can be mounted and patched", async () => {
|
||||
const tree = html("<span>1</span><span>2</span>");
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>1</span><span>2</span>");
|
||||
|
||||
patch(tree, html("<div>coucou</div>"));
|
||||
expect(fixture.innerHTML).toBe("<div>coucou</div>");
|
||||
});
|
||||
|
||||
test("html vnode can be used as text", () => {
|
||||
mount(text(html("<p>a</p>") as any), fixture);
|
||||
expect(fixture.textContent).toBe("<p>a</p>");
|
||||
});
|
||||
|
||||
test("html vnode can represent <tr>", () => {
|
||||
const fixture = document.createElement("table");
|
||||
// const block = createBlock('<table><block-child-0/></table>');
|
||||
// const tree = block([], [html(`<tr><td>tomato</td></tr>`)]);
|
||||
const tree = html(`<tr><td>tomato</td></tr>`);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<tr><td>tomato</td></tr>");
|
||||
|
||||
patch(tree, html(`<tr><td>potato</td></tr>`));
|
||||
expect(fixture.innerHTML).toBe("<tr><td>potato</td></tr>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,458 @@
|
||||
import { list, mount, multi, patch, text, createBlock, VNode, withKey } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
function kText(str: string, key: any): VNode {
|
||||
return withKey(text(str), key);
|
||||
}
|
||||
|
||||
function n(n: number) {
|
||||
return kText(String(n), n);
|
||||
}
|
||||
|
||||
const span = createBlock("<span><block-text-0/></span>");
|
||||
const p = createBlock("<p><block-text-0/></p>");
|
||||
|
||||
function kSpan(str: string, key: any): VNode {
|
||||
return withKey(span([str]), key);
|
||||
}
|
||||
|
||||
function kPair(n: number): VNode {
|
||||
const bnodes = [p([String(n)]), p([String(n)])];
|
||||
return withKey(multi(bnodes), n);
|
||||
}
|
||||
|
||||
describe("list node: misc", () => {
|
||||
test("list node", async () => {
|
||||
const bnodes = [1, 2, 3].map((key) => kText(`text${key}`, key));
|
||||
|
||||
const tree = list(bnodes);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("text1text2text3");
|
||||
});
|
||||
|
||||
test("list vnode can be used as text", () => {
|
||||
mount(text(list([text("a"), text("b")]) as any), fixture);
|
||||
expect(fixture.innerHTML).toBe("ab");
|
||||
});
|
||||
|
||||
test("a list block can be removed and leaves nothing", async () => {
|
||||
const bnodes = [
|
||||
{ id: 1, name: "sheep" },
|
||||
{ id: 2, name: "cow" },
|
||||
].map((elem) => kText(elem.name, elem.id));
|
||||
|
||||
const tree = list(bnodes);
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.childNodes.length).toBe(3);
|
||||
expect(fixture.innerHTML).toBe("sheepcow");
|
||||
|
||||
tree.remove();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test("patching a list block inside an elem block", async () => {
|
||||
const block = createBlock("<div><block-child-0/></div>");
|
||||
const tree = block();
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
patch(tree, block([], [list([1, 2, 3].map(n))]));
|
||||
expect(fixture.innerHTML).toBe("<div>123</div>");
|
||||
|
||||
patch(tree, block([], [list([])]));
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
patch(tree, block([], [list([1, 2, 3].map(n))]));
|
||||
expect(fixture.innerHTML).toBe("<div>123</div>");
|
||||
});
|
||||
|
||||
test("list of lists", async () => {
|
||||
const tree = list([
|
||||
withKey(list([kText("a1", "1"), kText("a2", "2")]), "a"),
|
||||
withKey(list([kText("b1", "1"), kText("b2", "2")]), "b"),
|
||||
]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("a1a2b1b2");
|
||||
|
||||
patch(
|
||||
tree,
|
||||
list([
|
||||
withKey(list([kText("b1", "1"), kText("b2", "2")]), "b"),
|
||||
withKey(list([kText("a1", "1"), kText("a2", "2")]), "a"),
|
||||
])
|
||||
);
|
||||
|
||||
expect(fixture.innerHTML).toBe("b1b2a1a2");
|
||||
|
||||
patch(
|
||||
tree,
|
||||
list([
|
||||
withKey(list([kText("a2", "2"), kText("a1", "1")]), "a"),
|
||||
withKey(list([kText("b2", "2"), kText("b1", "1")]), "b"),
|
||||
])
|
||||
);
|
||||
|
||||
expect(fixture.innerHTML).toBe("a2a1b2b1");
|
||||
});
|
||||
});
|
||||
|
||||
describe("adding/removing elements", () => {
|
||||
test("removing elements", () => {
|
||||
const tree = list([kText("a", "a")]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("a");
|
||||
|
||||
patch(tree, list([]));
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("removing 1 elements from 2", () => {
|
||||
const tree = list([kText("a", "a"), kText("b", "b")]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("ab");
|
||||
|
||||
patch(tree, list([kText("a", "a")]));
|
||||
expect(fixture.innerHTML).toBe("a");
|
||||
});
|
||||
|
||||
test("removing elements", () => {
|
||||
const tree = list([kSpan("a", "a")]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>a</span>");
|
||||
|
||||
patch(tree, list([]));
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("removing elements, variation", () => {
|
||||
const f = (i: number) => {
|
||||
const b = multi([span([`a${i}`]), span([`b${i}`])]);
|
||||
b.key = i;
|
||||
return b;
|
||||
};
|
||||
const tree = list([f(1), f(2)]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>a1</span><span>b1</span><span>a2</span><span>b2</span>");
|
||||
|
||||
patch(tree, list([]));
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("adding one element at the end", () => {
|
||||
const tree = list([n(1), n(2)]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12");
|
||||
|
||||
patch(tree, list([n(1), n(2), n(3)]));
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
});
|
||||
|
||||
test("adding one element at the end", () => {
|
||||
const tree = list([n(1)]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("1");
|
||||
|
||||
patch(tree, list([n(1), n(2), n(3)]));
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
});
|
||||
|
||||
test("prepend elements: 4,5 => 1,2,3,4,5", () => {
|
||||
const tree = list([n(4), n(5)]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("45");
|
||||
|
||||
patch(tree, list([n(1), n(2), n(3), n(4), n(5)]));
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
});
|
||||
|
||||
test("prepend elements: 4,5 => 1,2,3,4,5 (with multi)", () => {
|
||||
const tree = list([kPair(4), kPair(5)]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>4</p><p>4</p><p>5</p><p>5</p>");
|
||||
|
||||
patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
});
|
||||
|
||||
test("add element in middle: 1,2,4,5 => 1,2,3,4,5", () => {
|
||||
const tree = list([1, 2, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("1245");
|
||||
|
||||
patch(tree, list([1, 2, 3, 4, 5].map(n)));
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
});
|
||||
|
||||
test("add element in middle: 1,2,4,5 => 1,2,3,4,5 (multi)", () => {
|
||||
const tree = list([1, 2, 4, 5].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
|
||||
patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
});
|
||||
|
||||
test("add element at beginning and end: 2,3,4 => 1,2,3,4,5", () => {
|
||||
const tree = list([2, 3, 4].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("234");
|
||||
|
||||
patch(tree, list([1, 2, 3, 4, 5].map(n)));
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
});
|
||||
|
||||
test("add element at beginning and end: 2,3,4 => 1,2,3,4,5 (multi)", () => {
|
||||
const tree = list([2, 3, 4].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p>");
|
||||
|
||||
patch(tree, list([1, 2, 3, 4, 5].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
});
|
||||
|
||||
test("adds children: [] => [1,2,3]", () => {
|
||||
const tree = list([].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
patch(tree, list([1, 2, 3].map(n)));
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
});
|
||||
|
||||
test("adds children: [] => [1,2,3] (multi)", () => {
|
||||
const tree = list([].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
patch(tree, list([1, 2, 3].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
|
||||
});
|
||||
|
||||
test("adds children: [] => [1,2,3] (inside elem)", () => {
|
||||
const block = createBlock("<p><block-child-0/></p>");
|
||||
const tree = block([], []);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p></p>");
|
||||
|
||||
patch(tree, block([], [list([1, 2, 3].map(n))]));
|
||||
expect(fixture.innerHTML).toBe("<p>123</p>");
|
||||
});
|
||||
|
||||
test("adds children: [] => [1,2,3] (inside elem, multi)", () => {
|
||||
const block = createBlock("<p><block-child-0/></p>");
|
||||
const tree = block([], []);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p></p>");
|
||||
|
||||
patch(tree, block([], [list([1, 2, 3].map(kPair))]));
|
||||
expect(fixture.innerHTML).toBe("<p><p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p></p>");
|
||||
});
|
||||
|
||||
test("remove children: [1,2,3] => []", () => {
|
||||
const tree = list([1, 2, 3].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
|
||||
patch(tree, list([].map(n)));
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("remove children: [1,2,3] => [] (multi)", () => {
|
||||
const tree = list([1, 2, 3].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
|
||||
|
||||
patch(tree, list([].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("remove children: [1,2,3] => [] (inside elem)", () => {
|
||||
const block = createBlock("<p><block-child-0/></p>");
|
||||
const tree = block([], [list([1, 2, 3].map(n))]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>123</p>");
|
||||
|
||||
patch(tree, block([], [list([])]));
|
||||
expect(fixture.innerHTML).toBe("<p></p>");
|
||||
});
|
||||
|
||||
test("remove children from the beginning: [1,2,3,4,5] => [3,4,5]", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
|
||||
patch(tree, list([3, 4, 5].map(n)));
|
||||
expect(fixture.innerHTML).toBe("345");
|
||||
});
|
||||
|
||||
test("remove children from the beginning: [1,2,3,4,5] => [3,4,5] (multi)", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
patch(tree, list([3, 4, 5].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe("<p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>");
|
||||
});
|
||||
|
||||
test("remove children from the end: [1,2,3,4,5] => [1,2,3]", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
|
||||
patch(tree, list([1, 2, 3].map(n)));
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
});
|
||||
|
||||
test("remove children from the middle: [1,2,3,4,5] => [1,2,4,5]", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
|
||||
patch(tree, list([1, 2, 4, 5].map(n)));
|
||||
expect(fixture.innerHTML).toBe("1245");
|
||||
});
|
||||
});
|
||||
|
||||
describe("element reordering", () => {
|
||||
test("move element forward: [1,2,3,4] => [2,3,1,4]", () => {
|
||||
const tree = list([1, 2, 3, 4].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("1234");
|
||||
|
||||
patch(tree, list([2, 3, 1, 4].map(n)));
|
||||
expect(fixture.innerHTML).toBe("2314");
|
||||
});
|
||||
|
||||
test("move element forward: [1,2,3,4] => [2,3,1,4] (multi)", () => {
|
||||
const tree = list([1, 2, 3, 4].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p>"
|
||||
);
|
||||
patch(tree, list([2, 3, 1, 4].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>2</p><p>2</p><p>3</p><p>3</p><p>1</p><p>1</p><p>4</p><p>4</p>"
|
||||
);
|
||||
});
|
||||
|
||||
test("move element to end: [1,2,3] => [2,3,1]", () => {
|
||||
const tree = list([1, 2, 3].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("123");
|
||||
|
||||
patch(tree, list([2, 3, 1].map(n)));
|
||||
expect(fixture.innerHTML).toBe("231");
|
||||
});
|
||||
|
||||
test("move element to end: [1,2,3] => [2,3,1] (multi)", () => {
|
||||
const tree = list([1, 2, 3].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p>");
|
||||
|
||||
patch(tree, list([2, 3, 1].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe("<p>2</p><p>2</p><p>3</p><p>3</p><p>1</p><p>1</p>");
|
||||
});
|
||||
|
||||
test("move element backward: [1,2,3,4] => [1,4,2,3]", () => {
|
||||
const tree = list([1, 2, 3, 4].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("1234");
|
||||
|
||||
patch(tree, list([1, 4, 2, 3].map(n)));
|
||||
expect(fixture.innerHTML).toBe("1423");
|
||||
});
|
||||
|
||||
test("swaps first and last: [1,2,3,4] => [4,3,2,1]", () => {
|
||||
const tree = list([1, 2, 3, 4].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("1234");
|
||||
|
||||
patch(tree, list([4, 3, 2, 1].map(n)));
|
||||
expect(fixture.innerHTML).toBe("4321");
|
||||
});
|
||||
});
|
||||
|
||||
describe("miscellaneous operations", () => {
|
||||
test("move to left and replace: [1,2,3,4,5] => [4,1,2,3,6]", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12345");
|
||||
|
||||
patch(tree, list([4, 1, 2, 3, 6].map(n)));
|
||||
expect(fixture.innerHTML).toBe("41236");
|
||||
});
|
||||
|
||||
test("move to left and replace: [1,2,3,4,5] => [4,1,2,3,6] (multi)", () => {
|
||||
const tree = list([1, 2, 3, 4, 5].map(kPair));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>4</p><p>4</p><p>5</p><p>5</p>"
|
||||
);
|
||||
|
||||
patch(tree, list([4, 1, 2, 3, 6].map(kPair)));
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<p>4</p><p>4</p><p>1</p><p>1</p><p>2</p><p>2</p><p>3</p><p>3</p><p>6</p><p>6</p>"
|
||||
);
|
||||
});
|
||||
|
||||
test("move to left and leave hole: [1,4,5] => [4,6]", () => {
|
||||
const tree = list([1, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("145");
|
||||
|
||||
patch(tree, list([4, 6].map(n)));
|
||||
expect(fixture.innerHTML).toBe("46");
|
||||
});
|
||||
|
||||
test("[2,4,5] => [4,5,3]", () => {
|
||||
const tree = list([2, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("245");
|
||||
|
||||
patch(tree, list([4, 5, 3].map(n)));
|
||||
expect(fixture.innerHTML).toBe("453");
|
||||
});
|
||||
|
||||
test("reverse elements [1,2,3,4,5,6,7,8] => [8,7,6,5,4,3,2,1]", () => {
|
||||
const tree = list([1, 2, 3, 4, 5, 6, 7, 8].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("12345678");
|
||||
|
||||
patch(tree, list([8, 7, 6, 5, 4, 3, 2, 1].map(n)));
|
||||
expect(fixture.innerHTML).toBe("87654321");
|
||||
});
|
||||
|
||||
test("some permutation [0,1,2,3,4,5] => [4,3,2,1,5,0]", () => {
|
||||
const tree = list([0, 1, 2, 3, 4, 5].map(n));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("012345");
|
||||
|
||||
patch(tree, list([4, 3, 2, 1, 5, 0].map(n)));
|
||||
expect(fixture.innerHTML).toBe("432150");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,79 @@
|
||||
import { mount, multi, patch, text, createBlock } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("multi blocks", () => {
|
||||
test("multiblock with 2 text blocks", async () => {
|
||||
const tree = multi([text("foo"), text("bar")]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foobar");
|
||||
});
|
||||
|
||||
test("a multiblock can be removed and leaves no extra text nodes", async () => {
|
||||
const block1 = createBlock("<div>foo</div>");
|
||||
const block2 = createBlock("<span>bar</span>");
|
||||
|
||||
const tree = multi([block1(), block2()]);
|
||||
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.childNodes.length).toBe(2);
|
||||
tree.remove();
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
});
|
||||
|
||||
test("multiblock with an empty children", async () => {
|
||||
const block = createBlock("<div>foo</div>");
|
||||
const tree = multi([block(), undefined]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>foo</div>");
|
||||
});
|
||||
|
||||
test("multi block in a regular block", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<span>yip yip</span>");
|
||||
|
||||
const tree = block1([], [multi([block2()])]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>yip yip</span></div>");
|
||||
});
|
||||
|
||||
test("patching a multiblock ", async () => {
|
||||
const tree = multi([text("foo"), text("bar")]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foobar");
|
||||
|
||||
patch(tree, multi([text("blip"), text("bar")]));
|
||||
expect(fixture.innerHTML).toBe("blipbar");
|
||||
});
|
||||
|
||||
test("simple multi with multiple roots", async () => {
|
||||
const block1 = createBlock("<div>foo</div>");
|
||||
const block2 = createBlock("<span>bar</span>");
|
||||
|
||||
const tree = multi([block1(), block2()]);
|
||||
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>foo</div><span>bar</span>");
|
||||
});
|
||||
|
||||
test("multi vnode can be used as text", () => {
|
||||
mount(text(multi([text("a"), text("b")]) as any), fixture);
|
||||
expect(fixture.innerHTML).toBe("ab");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,84 @@
|
||||
import { createBlock, mount, multi, patch } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("before remove is called", () => {
|
||||
test("simple removal", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<p>coucou</p>");
|
||||
|
||||
const child = block2();
|
||||
const tree = block1([], [child]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>coucou</p></div>");
|
||||
|
||||
let n = 1;
|
||||
child.beforeRemove = () => n++;
|
||||
patch(tree, block1([], []), true);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(n).toBe(2);
|
||||
});
|
||||
|
||||
test("removal, variation with grandchild", async () => {
|
||||
const block1 = createBlock("<p><block-child-0/></p>");
|
||||
const block2 = createBlock("<span>coucou</span>");
|
||||
|
||||
const child = block2();
|
||||
const tree = block1([], [block1([], [child])]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<p><p><span>coucou</span></p></p>");
|
||||
|
||||
let n = 1;
|
||||
child.beforeRemove = () => n++;
|
||||
patch(tree, block1([], []), true);
|
||||
expect(fixture.innerHTML).toBe("<p></p>");
|
||||
expect(n).toBe(2);
|
||||
});
|
||||
|
||||
test("remove a child of a multi", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<p>coucou</p>");
|
||||
|
||||
const child1 = block2();
|
||||
const child2 = block2();
|
||||
const tree = block1([], [multi([child1, child2])]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>coucou</p><p>coucou</p></div>");
|
||||
|
||||
let n = 1;
|
||||
child1.beforeRemove = () => n++;
|
||||
patch(tree, block1([], [multi([])]), true);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(n).toBe(2);
|
||||
});
|
||||
|
||||
test("remove a multi", async () => {
|
||||
const block1 = createBlock("<div><block-child-0/></div>");
|
||||
const block2 = createBlock("<p>coucou</p>");
|
||||
|
||||
const child1 = block2();
|
||||
const child2 = block2();
|
||||
const tree = block1([], [multi([child1, child2])]);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>coucou</p><p>coucou</p></div>");
|
||||
|
||||
let n = 1;
|
||||
child1.beforeRemove = () => n++;
|
||||
patch(tree, block1([], []), true);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(n).toBe(2);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,69 @@
|
||||
import { mount, patch, remove, text } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("adding/patching text", () => {
|
||||
test("simple text node", async () => {
|
||||
const tree = text("foo");
|
||||
expect(tree.el).toBe(undefined);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
expect(tree.el).not.toBe(undefined);
|
||||
});
|
||||
|
||||
test("patching a simple text node", async () => {
|
||||
const tree = text("foo");
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
|
||||
patch(tree, text("bar"));
|
||||
expect(fixture.innerHTML).toBe("bar");
|
||||
});
|
||||
|
||||
test("falsy values in text nodes", () => {
|
||||
const cases = [
|
||||
[false, "false"],
|
||||
[undefined, ""],
|
||||
[null, ""],
|
||||
[0, "0"],
|
||||
["", ""],
|
||||
];
|
||||
for (let [value, result] of cases) {
|
||||
const fixture = makeTestFixture();
|
||||
mount(text(value as any), fixture);
|
||||
expect(fixture.innerHTML).toBe(result);
|
||||
}
|
||||
});
|
||||
|
||||
test("vtext node can be used as text", () => {
|
||||
const t = text("foo") as any;
|
||||
mount(text(t), fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
});
|
||||
});
|
||||
|
||||
describe("remove text blocks", () => {
|
||||
test("a text block can be removed", async () => {
|
||||
const tree = text("cat");
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("cat");
|
||||
expect(fixture.childNodes.length).toBe(1);
|
||||
remove(tree);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(fixture.childNodes.length).toBe(0);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,57 @@
|
||||
import { createBlock, mount, patch, text, toggler } from "../../src/blockdom";
|
||||
import { makeTestFixture } from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("togglers", () => {
|
||||
test("can mount and update text nodes", async () => {
|
||||
const tree = toggler("key", text("foo"));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
const textnode = fixture.firstChild!;
|
||||
expect(textnode.textContent).toBe("foo");
|
||||
patch(tree, toggler("key", text("bar")));
|
||||
expect(fixture.innerHTML).toBe("bar");
|
||||
expect(fixture.firstChild).toBe(textnode);
|
||||
});
|
||||
|
||||
test("can toggle between two text nodes (different key)", async () => {
|
||||
const tree = toggler("key1", text("foo"));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
const textnode = fixture.firstChild!;
|
||||
expect(textnode.textContent).toBe("foo");
|
||||
patch(tree, toggler("key2", text("bar")));
|
||||
expect(fixture.innerHTML).toBe("bar");
|
||||
expect(fixture.firstChild).not.toBe(textnode);
|
||||
|
||||
// we check here that the key was properly reset
|
||||
const other = fixture.firstChild;
|
||||
patch(tree, toggler("key1", text("foo")));
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
expect(fixture.firstChild).not.toBe(other);
|
||||
});
|
||||
|
||||
test("can toggle between text node and block", async () => {
|
||||
const block = createBlock("<p>hey</p>");
|
||||
const tree = toggler("key1", text("foo"));
|
||||
mount(tree, fixture);
|
||||
expect(fixture.innerHTML).toBe("foo");
|
||||
const textnode = fixture.firstChild!;
|
||||
patch(tree, toggler("key2", block()));
|
||||
expect(fixture.innerHTML).toBe("<p>hey</p>");
|
||||
expect(fixture.firstChild).not.toBe(textnode);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user