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
@@ -1,200 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`animations t-transition combined with component 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Parent\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Child'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
const __patch2 = w2.__patch;
|
||||
w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
|
||||
w2.destroy();
|
||||
};
|
||||
delete w2.__owl__.transitionInserted;
|
||||
utils.transitionRemove(vn, 'chimay', finalize);}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`animations t-transition combined with t-component and t-if 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Parent\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
if (scope['state'].display) {
|
||||
// Component 'Child'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
const __patch2 = w2.__patch;
|
||||
w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
|
||||
w2.destroy();
|
||||
};
|
||||
delete w2.__owl__.transitionInserted;
|
||||
utils.transitionRemove(vn, 'chimay', finalize);}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`animations t-transition combined with t-component, remove and re-add before transitionend 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__2\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
if (scope['state'].flag) {
|
||||
// Component 'Child'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
const __patch2 = w2.__patch;
|
||||
w2.__patch = (t, vn) => {__patch2.call(w2, t, vn); if(!w2.__owl__.transitionInserted){w2.__owl__.transitionInserted = true;utils.transitionInsert(w2.__owl__.vnode, 'chimay');}};
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {let finalize = () => {
|
||||
w2.destroy();
|
||||
};
|
||||
delete w2.__owl__.transitionInserted;
|
||||
utils.transitionRemove(vn, 'chimay', finalize);}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`animations t-transition with no delay/duration 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('span', p1, c1);
|
||||
p1.hook = {
|
||||
insert: vn => {
|
||||
utils.transitionInsert(vn, 'jupiler');
|
||||
},
|
||||
remove: (vn, rm) => {
|
||||
utils.transitionRemove(vn, 'jupiler', rm);
|
||||
},
|
||||
};
|
||||
c1.push({text: \`blue\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`animations t-transition, on a simple node (insert) 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('span', p1, c1);
|
||||
p1.hook = {
|
||||
insert: vn => {
|
||||
utils.transitionInsert(vn, 'chimay');
|
||||
},
|
||||
remove: (vn, rm) => {
|
||||
utils.transitionRemove(vn, 'chimay', rm);
|
||||
},
|
||||
};
|
||||
c1.push({text: \`blue\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`animations t-transition, on a simple node, not in the DOM 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('span', p1, c1);
|
||||
p1.hook = {
|
||||
insert: vn => {
|
||||
utils.transitionInsert(vn, 'chimay');
|
||||
},
|
||||
remove: (vn, rm) => {
|
||||
utils.transitionRemove(vn, 'chimay', rm);
|
||||
},
|
||||
};
|
||||
c1.push({text: \`blue\`});
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -1,5 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`various scenarios scenarios with async store updates and some components events 1`] = `"<div><button>Do stuff</button><div><span>Attachment 100</span><span>Name: text.txt</span></div></div>"`;
|
||||
|
||||
exports[`various scenarios scenarios with async store updates and some components events 2`] = `"<div><button>Do stuff</button></div>"`;
|
||||
@@ -1,452 +0,0 @@
|
||||
import { Component, Env } from "../src/component/component";
|
||||
import { useRef, useState } from "../src/hooks";
|
||||
import { QWeb } from "../src/qweb/index";
|
||||
import { xml } from "../src/tags";
|
||||
import {
|
||||
makeDeferred,
|
||||
makeTestEnv,
|
||||
makeTestFixture,
|
||||
nextFrame,
|
||||
patchNextFrame,
|
||||
renderToDOM,
|
||||
unpatchNextFrame,
|
||||
} from "./helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - qweb: a new QWeb instance
|
||||
// - env: a WEnv, necessary to create new components
|
||||
// - cssEl: a stylesheet injected into the dom
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let qweb: QWeb;
|
||||
let env: Env;
|
||||
let cssEl: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
qweb = new QWeb();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
class Widget extends Component<any, any> {}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("animations", () => {
|
||||
beforeEach(() => {
|
||||
cssEl = document.createElement("style");
|
||||
let css = `
|
||||
.chimay-enter-active, .chimay-leave-active {
|
||||
transition-property: opacity;
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
.chimay-enter, .chimay-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
`;
|
||||
cssEl.textContent = css.trim();
|
||||
document.head.appendChild(cssEl);
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
document.head.removeChild(cssEl);
|
||||
unpatchNextFrame();
|
||||
});
|
||||
|
||||
test("t-transition, on a simple node (insert)", async () => {
|
||||
expect.assertions(5);
|
||||
qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
|
||||
|
||||
let def = makeDeferred();
|
||||
patchNextFrame((cb) => {
|
||||
expect(node.className).toBe("chimay-enter chimay-enter-active");
|
||||
cb();
|
||||
expect(node.className).toBe("chimay-enter-active chimay-enter-to");
|
||||
def.resolve();
|
||||
});
|
||||
let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
|
||||
fixture.appendChild(node);
|
||||
|
||||
expect(node.className).toBe("chimay-enter chimay-enter-active");
|
||||
await def; // wait for the mocked repaint to be done
|
||||
node.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(node.className).toBe("");
|
||||
});
|
||||
|
||||
test("t-transition, on a simple node, not in the DOM", async () => {
|
||||
expect.assertions(5);
|
||||
qweb.addTemplate("test", `<span t-transition="chimay">blue</span>`);
|
||||
|
||||
let def = makeDeferred();
|
||||
patchNextFrame((cb) => {
|
||||
expect(node.className).toBe("chimay-enter chimay-enter-active");
|
||||
cb();
|
||||
expect(node.className).toBe("chimay-enter-active chimay-enter-to");
|
||||
def.resolve();
|
||||
});
|
||||
let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
|
||||
|
||||
expect(node.className).toBe("chimay-enter chimay-enter-active");
|
||||
await def; // wait for the mocked repaint to be done
|
||||
node.dispatchEvent(new Event("transitionend"));
|
||||
// we check here that the css classes have not been removed, since the
|
||||
// element is not in the dom, we actually do not want to do anything.
|
||||
expect(node.className).toBe("chimay-enter-active chimay-enter-to");
|
||||
});
|
||||
|
||||
test("t-transition with no delay/duration", async () => {
|
||||
expect.assertions(4);
|
||||
qweb.addTemplate("test", `<span t-transition="jupiler">blue</span>`);
|
||||
|
||||
let def = makeDeferred();
|
||||
patchNextFrame((cb) => {
|
||||
expect(node.className).toBe("jupiler-enter jupiler-enter-active");
|
||||
cb();
|
||||
expect(node.className).toBe("");
|
||||
def.resolve();
|
||||
});
|
||||
let node: HTMLElement = <HTMLElement>renderToDOM(qweb, "test");
|
||||
fixture.appendChild(node);
|
||||
expect(node.className).toBe("jupiler-enter jupiler-enter-active");
|
||||
await def;
|
||||
});
|
||||
|
||||
test("t-transition on a conditional node", async () => {
|
||||
expect.assertions(7);
|
||||
|
||||
env.qweb.addTemplate(
|
||||
"TestWidget",
|
||||
`<div><span t-if="!state.hide" t-transition="chimay">blue</span></div>`
|
||||
);
|
||||
class TestWidget extends Widget {
|
||||
state = useState({ hide: false });
|
||||
}
|
||||
const widget = new TestWidget();
|
||||
|
||||
// insert widget into the DOM
|
||||
let def = makeDeferred();
|
||||
var spanNode;
|
||||
patchNextFrame((cb) => {
|
||||
expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
|
||||
cb();
|
||||
expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
|
||||
def.resolve();
|
||||
});
|
||||
await widget.mount(fixture);
|
||||
spanNode = widget.el!.children[0];
|
||||
expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(spanNode.className).toBe("");
|
||||
|
||||
// remove span from the DOM
|
||||
def = makeDeferred();
|
||||
widget.state.hide = true;
|
||||
patchNextFrame((cb) => {
|
||||
expect(spanNode.className).toBe("chimay-leave chimay-leave-active");
|
||||
cb();
|
||||
expect(spanNode.className).toBe("chimay-leave-active chimay-leave-to");
|
||||
def.resolve();
|
||||
});
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(spanNode.className).toBe("");
|
||||
});
|
||||
|
||||
test("t-transition combined with t-ref", async () => {
|
||||
expect.assertions(5);
|
||||
|
||||
env.qweb.addTemplate(
|
||||
"TestWidget",
|
||||
`<div><span t-ref="span" t-transition="chimay">blue</span></div>`
|
||||
);
|
||||
class TestWidget extends Widget {
|
||||
state = useState({ hide: false });
|
||||
span = useRef("span");
|
||||
}
|
||||
const widget = new TestWidget();
|
||||
|
||||
// insert widget into the DOM
|
||||
let def = makeDeferred();
|
||||
var spanNode;
|
||||
patchNextFrame((cb) => {
|
||||
expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
|
||||
cb();
|
||||
expect(spanNode.className).toBe("chimay-enter-active chimay-enter-to");
|
||||
def.resolve();
|
||||
});
|
||||
await widget.mount(fixture);
|
||||
spanNode = widget.el!.children[0];
|
||||
expect(widget.span.el).toBe(spanNode);
|
||||
expect(spanNode.className).toBe("chimay-enter chimay-enter-active");
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(spanNode.className).toBe("");
|
||||
});
|
||||
|
||||
test("t-transition combined with component", async () => {
|
||||
expect.assertions(5);
|
||||
|
||||
env.qweb.addTemplate("Parent", `<div><Child t-transition="chimay"/></div>`);
|
||||
env.qweb.addTemplate("Child", `<span>blue</span>`);
|
||||
class Child extends Widget {}
|
||||
class Parent extends Widget {
|
||||
static components = { Child: Child };
|
||||
}
|
||||
const widget = new Parent();
|
||||
|
||||
let def = makeDeferred();
|
||||
var spanNode;
|
||||
patchNextFrame((cb) => {
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
|
||||
);
|
||||
cb();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
|
||||
);
|
||||
def.resolve();
|
||||
});
|
||||
await widget.mount(fixture);
|
||||
spanNode = widget.el!.children[0];
|
||||
|
||||
expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
|
||||
);
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
|
||||
});
|
||||
|
||||
test("t-transition combined with t-component and t-if", async () => {
|
||||
expect.assertions(8);
|
||||
|
||||
env.qweb.addTemplate(
|
||||
"Parent",
|
||||
`<div><t t-if="state.display" t-component="Child" t-transition="chimay"/></div>`
|
||||
);
|
||||
env.qweb.addTemplate("Child", `<span>blue</span>`);
|
||||
class Child extends Widget {}
|
||||
class Parent extends Widget {
|
||||
static components = { Child: Child };
|
||||
state = useState({ display: true });
|
||||
}
|
||||
const widget = new Parent();
|
||||
|
||||
let def = makeDeferred();
|
||||
var spanNode;
|
||||
patchNextFrame((cb) => {
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
|
||||
);
|
||||
cb();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter-active chimay-enter-to">blue</span></div>'
|
||||
);
|
||||
def.resolve();
|
||||
});
|
||||
await widget.mount(fixture);
|
||||
spanNode = widget.el!.children[0];
|
||||
|
||||
expect(env.qweb.templates.Parent.fn.toString()).toMatchSnapshot();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter chimay-enter-active">blue</span></div>'
|
||||
);
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
|
||||
|
||||
// remove span from the DOM
|
||||
def = makeDeferred();
|
||||
widget.state.display = false;
|
||||
patchNextFrame((cb) => {
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-leave chimay-leave-active" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
cb();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
def.resolve();
|
||||
});
|
||||
await def; // wait for the mocked repaint to be done
|
||||
spanNode.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
});
|
||||
|
||||
test("t-transition, remove and re-add before transitionend", async () => {
|
||||
expect.assertions(11);
|
||||
|
||||
env.qweb.addTemplates(
|
||||
`<templates>
|
||||
<div t-name="Parent">
|
||||
<button t-on-click="toggle">Toggle</button>
|
||||
<span t-if="state.flag" t-transition="chimay">blue</span>
|
||||
</div>
|
||||
</templates>`
|
||||
);
|
||||
class Parent extends Widget {
|
||||
state = useState({ flag: false });
|
||||
|
||||
toggle() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
const widget = new Parent();
|
||||
await widget.mount(fixture);
|
||||
let button = widget.el!.querySelector("button");
|
||||
|
||||
let def = makeDeferred();
|
||||
let phase = "enter";
|
||||
patchNextFrame((cb) => {
|
||||
let spans = fixture.querySelectorAll("span");
|
||||
expect(spans.length).toBe(1);
|
||||
expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
|
||||
cb();
|
||||
expect(spans[0].className).toBe(`chimay-${phase}-active chimay-${phase}-to`);
|
||||
def.resolve();
|
||||
});
|
||||
|
||||
// click display the span
|
||||
button!.click();
|
||||
await def; // wait for the mocked repaint to be done
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
|
||||
|
||||
// click to remove the span, and click again to re-add it before transitionend
|
||||
def = makeDeferred();
|
||||
phase = "leave";
|
||||
button!.click();
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
def = makeDeferred();
|
||||
phase = "enter";
|
||||
button!.click();
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><button>Toggle</button><span class="">blue</span></div>');
|
||||
});
|
||||
|
||||
test("t-transition combined with t-component, remove and re-add before transitionend", async () => {
|
||||
expect.assertions(12);
|
||||
|
||||
class Child extends Widget {
|
||||
static template = xml`<span>blue</span>`;
|
||||
}
|
||||
class Parent extends Widget {
|
||||
static template = xml`
|
||||
<div t-name="Parent">
|
||||
<t t-if="state.flag" t-component="Child" t-transition="chimay"/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: false });
|
||||
}
|
||||
|
||||
const widget = new Parent();
|
||||
await widget.mount(fixture);
|
||||
expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
|
||||
|
||||
let def = makeDeferred();
|
||||
let phase = "enter";
|
||||
patchNextFrame((cb) => {
|
||||
let spans = fixture.querySelectorAll("span");
|
||||
expect(spans.length).toBe(1);
|
||||
expect(spans[0].className).toBe(`chimay-${phase} chimay-${phase}-active`);
|
||||
cb();
|
||||
expect(spans[0].className).toBe(`chimay-${phase}-active chimay-${phase}-to`);
|
||||
def.resolve();
|
||||
});
|
||||
|
||||
// display the span
|
||||
widget.state.flag = true;
|
||||
await def; // wait for the mocked repaint to be done
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
|
||||
|
||||
// click to remove the span, and click again to re-add it before transitionend
|
||||
def = makeDeferred();
|
||||
phase = "leave";
|
||||
|
||||
widget.state.flag = false;
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
def = makeDeferred();
|
||||
phase = "enter";
|
||||
widget.state.flag = true;
|
||||
|
||||
await def; // wait for the mocked repaint to be done
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend")); // mock end of css transition
|
||||
expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__3__">blue</span></div>');
|
||||
});
|
||||
|
||||
test("transitionInsert is called the correct amount of times", async () => {
|
||||
const oldTransitionInsert = QWeb.utils.transitionInsert;
|
||||
QWeb.utils.transitionInsert = jest.fn(oldTransitionInsert);
|
||||
|
||||
class Child extends Widget {
|
||||
static template = xml`<span>blue</span>`;
|
||||
}
|
||||
class Parent extends Widget {
|
||||
static template = xml`
|
||||
<div t-name="Parent">
|
||||
<Child t-if="state.flag" t-transition="chimay"/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: false });
|
||||
}
|
||||
|
||||
patchNextFrame((cb) => cb());
|
||||
|
||||
const widget = new Parent();
|
||||
await widget.mount(fixture);
|
||||
|
||||
widget.state.flag = true;
|
||||
|
||||
await nextFrame();
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
|
||||
expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
|
||||
|
||||
widget.state.flag = false;
|
||||
await nextFrame();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
|
||||
|
||||
widget.state.flag = true;
|
||||
await nextFrame();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__3__">blue</span></div>'
|
||||
);
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
|
||||
|
||||
widget.state.flag = false;
|
||||
await nextFrame();
|
||||
widget.state.flag = true;
|
||||
await nextFrame();
|
||||
|
||||
expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
|
||||
widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
|
||||
expect(fixture.innerHTML).toBe('<div><span class="" data-owl-key="__3__">blue</span></div>');
|
||||
QWeb.utils.transitionInsert = oldTransitionInsert;
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
@@ -1,156 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`class and style attributes with t-component dynamic t-att-style is properly added and updated on widget root el 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"ParentWidget\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'child'
|
||||
const _4 = scope['state'].style;
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined).then(()=>{if (w2.__owl__.status === 5) {return};w2.el.style=_4;});;
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`child\`;
|
||||
let W2 = scope['child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){vn.elm.style = _4;}});});
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"ParentWidget\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
context.__owl__.refs = context.__owl__.refs || {};
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Child'
|
||||
const ref4 = \`child\`;
|
||||
let _5 = {'a':true};
|
||||
Object.assign(_5, {b:scope['state'].b})
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){}});});
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.classObj=_5;
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v2) 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Child\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _7 = {'c':true};
|
||||
Object.assign(_7, utils.toClassObj({d:scope['state'].d}))
|
||||
let c8 = [], p8 = {key:8,class:_7};
|
||||
let vn8 = h('span', p8, c8);
|
||||
return vn8;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"ParentWidget\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
context.__owl__.refs = context.__owl__.refs || {};
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Child'
|
||||
const ref4 = \`child\`;
|
||||
let _5 = {'a':true};
|
||||
Object.assign(_5, utils.toClassObj(scope['state'].b?'b':''))
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; utils.assignHooks(vnode.data, {create(_, vn){}});});
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {insert(vn) {context.__owl__.refs[ref4] = w2;},remove() {},destroy(vn) {w2.destroy();delete context.__owl__.refs[ref4];}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.classObj=_5;
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`class and style attributes with t-component t-att-class is properly added/removed on widget root el (v3) 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Child\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _7 = {'c':true};
|
||||
Object.assign(_7, utils.toClassObj(scope['state'].d?'d':''))
|
||||
let c8 = [], p8 = {key:8,class:_7};
|
||||
let vn8 = h('span', p8, c8);
|
||||
return vn8;
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,39 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`props validation props are validated in dev mode (code snapshot) 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"App\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Child'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {message:1};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, undefined);
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Child\`;
|
||||
let W2 = scope['Child'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
let fiber = w2.__prepare(extra.fiber, undefined, () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -1,758 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-slot directive can define and call slots 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Parent\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Dialog'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Dialog\`;
|
||||
let W2 = scope['Dialog'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
w2.__owl__.slotId = 1;
|
||||
let fiber = w2.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Dialog\\"
|
||||
let h = this.h;
|
||||
let c8 = [], p8 = {key:8};
|
||||
let vn8 = h('div', p8, c8);
|
||||
let c9 = [], p9 = {key:9};
|
||||
let vn9 = h('div', p9, c9);
|
||||
c8.push(vn9);
|
||||
const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot10) {
|
||||
slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
|
||||
}
|
||||
let c11 = [], p11 = {key:11};
|
||||
let vn11 = h('div', p11, c11);
|
||||
c8.push(vn11);
|
||||
const slot12 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot12) {
|
||||
slot12.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c11, parent: extra.parent || context}));
|
||||
}
|
||||
return vn8;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots 3`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_header_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`header\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots 4`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c6 = extra.parentNode;
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('span', p7, c7);
|
||||
c6.push(vn7);
|
||||
c7.push({text: \`footer\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots using old t-set keyword 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__2\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Dialog'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Dialog\`;
|
||||
let W2 = scope['Dialog'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
w2.__owl__.slotId = 1;
|
||||
let fiber = w2.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots using old t-set keyword 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c8 = [], p8 = {key:8};
|
||||
let vn8 = h('div', p8, c8);
|
||||
let c9 = [], p9 = {key:9};
|
||||
let vn9 = h('div', p9, c9);
|
||||
c8.push(vn9);
|
||||
const slot10 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot10) {
|
||||
slot10.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
|
||||
}
|
||||
let c11 = [], p11 = {key:11};
|
||||
let vn11 = h('div', p11, c11);
|
||||
c8.push(vn11);
|
||||
const slot12 = this.constructor.slots[context.__owl__.slotId + '_' + 'footer'];
|
||||
if (slot12) {
|
||||
slot12.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c11, parent: extra.parent || context}));
|
||||
}
|
||||
return vn8;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots using old t-set keyword 3`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_header_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`header\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive can define and call slots using old t-set keyword 4`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c6 = extra.parentNode;
|
||||
let c7 = [], p7 = {key:7};
|
||||
let vn7 = h('span', p7, c7);
|
||||
c6.push(vn7);
|
||||
c7.push({text: \`footer\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive content is the default slot 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive dafault slots can define a default content 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot5) {
|
||||
slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
|
||||
} else {
|
||||
c4.push({text: \`default content\`});
|
||||
}
|
||||
return vn4;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive default slot next to named slot, with default content 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__2\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
// Component 'Dialog'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Dialog\`;
|
||||
let W2 = scope['Dialog'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
w2.__owl__.slotId = 1;
|
||||
let fiber = w2.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive default slot work with text nodes 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
c4.push({text: \`sts rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive dynamic t-slot call 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c9 = [], p9 = {key:9,on:{}};
|
||||
let vn9 = h('button', p9, c9);
|
||||
extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (context.__owl__.status === 5){return}utils.getComponent(context)['toggle'](e);};
|
||||
p9.on['click'] = extra.handlers['click__10__'];
|
||||
const slot11 = this.constructor.slots[context.__owl__.slotId + '_' + (scope['current'].slot)];
|
||||
if (slot11) {
|
||||
slot11.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c9, parent: extra.parent || context}));
|
||||
}
|
||||
return vn9;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts\`});
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('span', p6, c6);
|
||||
c4.push(vn6);
|
||||
c6.push({text: \`rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_content_template\\"
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
c4.push(vn5);
|
||||
c5.push({text: \`sts\`});
|
||||
let c6 = [], p6 = {key:6};
|
||||
let vn6 = h('span', p6, c6);
|
||||
c4.push(vn6);
|
||||
c6.push({text: \`rocks\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive named slots can define a default content 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c4 = [], p4 = {key:4};
|
||||
let vn4 = h('span', p4, c4);
|
||||
const slot5 = this.constructor.slots[context.__owl__.slotId + '_' + 'header'];
|
||||
if (slot5) {
|
||||
slot5.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c4, parent: extra.parent || context}));
|
||||
} else {
|
||||
c4.push({text: \`default content\`});
|
||||
}
|
||||
return vn4;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive refs are properly bound in slots 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let utils = this.constructor.utils;
|
||||
let parent = extra.parent;
|
||||
context.__owl__.refs = context.__owl__.refs || {};
|
||||
let h = this.h;
|
||||
let c8 = extra.parentNode;
|
||||
let c9 = [], p9 = {key:9,on:{}};
|
||||
let vn9 = h('button', p9, c9);
|
||||
c8.push(vn9);
|
||||
extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (context.__owl__.status === 5){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p9.on['click'] = extra.handlers['click__10__'];
|
||||
const ref11 = \`myButton\`;
|
||||
p9.hook = {
|
||||
create: (_, n) => {
|
||||
context.__owl__.refs[ref11] = n.elm;
|
||||
},
|
||||
destroy: () => {
|
||||
delete context.__owl__.refs[ref11];
|
||||
},
|
||||
};
|
||||
c9.push({text: \`do something\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_footer_template\\"
|
||||
let utils = this.constructor.utils;
|
||||
let parent = extra.parent;
|
||||
let h = this.h;
|
||||
let c8 = extra.parentNode;
|
||||
let c9 = [], p9 = {key:9,on:{}};
|
||||
let vn9 = h('button', p9, c9);
|
||||
c8.push(vn9);
|
||||
extra.handlers['click__10__'] = extra.handlers['click__10__'] || function (e) {if (context.__owl__.status === 5){return}utils.getComponent(context)['doSomething'](e);};
|
||||
p9.on['click'] = extra.handlers['click__10__'];
|
||||
c9.push({text: \`do something\`});
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 2 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Link\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _12 = scope['props'].to;
|
||||
let c13 = [], p13 = {key:13,attrs:{href: _12}};
|
||||
let vn13 = h('a', p13, c13);
|
||||
const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot14) {
|
||||
slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
|
||||
}
|
||||
return vn13;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 2 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"App\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2};
|
||||
let vn2 = h('u', p2, c2);
|
||||
c1.push(vn2);
|
||||
let _3 = scope['state'].users;
|
||||
if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
|
||||
let _4 = _3;
|
||||
let _5 = _3;
|
||||
if (!(_3 instanceof Array)) {
|
||||
_4 = Object.keys(_3);
|
||||
_5 = Object.values(_3);
|
||||
}
|
||||
let _length4 = _4.length;
|
||||
let _origScope6 = scope;
|
||||
scope = Object.create(scope);
|
||||
for (let i1 = 0; i1 < _length4; i1++) {
|
||||
scope.user_first = i1 === 0
|
||||
scope.user_last = i1 === _length4 - 1
|
||||
scope.user_index = i1
|
||||
scope.user = _4[i1]
|
||||
scope.user_value = _5[i1]
|
||||
let key1 = scope['user'].id;
|
||||
let c7 = [], p7 = {key:\`\${key1}_7\`};
|
||||
let vn7 = h('li', p7, c7);
|
||||
c2.push(vn7);
|
||||
// Component 'Link'
|
||||
let k9 = \`__9__\${key1}__\`;
|
||||
let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
|
||||
let props8 = {to:'/user/'+scope['user'].id};
|
||||
if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
|
||||
w8.destroy();
|
||||
w8 = false;
|
||||
}
|
||||
if (w8) {
|
||||
w8.__updateProps(props8, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w8.__owl__.pvnode;
|
||||
c7.push(pvnode);
|
||||
} else {
|
||||
let componentKey8 = \`Link\`;
|
||||
let W8 = scope['Link'] || context.constructor.components[componentKey8] || QWeb.components[componentKey8];
|
||||
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
|
||||
w8 = new W8(parent, props8);
|
||||
parent.__owl__.cmap[k9] = w8.__owl__.id;
|
||||
w8.__owl__.slotId = 1;
|
||||
let fiber = w8.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
|
||||
c7.push(pvnode);
|
||||
w8.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w8.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}
|
||||
scope = _origScope6;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c10 = extra.parentNode;
|
||||
c10.push({text: \`User \`});
|
||||
let _11 = scope['user'].name;
|
||||
if (_11 != null) {
|
||||
c10.push({text: _11});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 3 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"Link\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _12 = scope['props'].to;
|
||||
let c13 = [], p13 = {key:13,attrs:{href: _12}};
|
||||
let vn13 = h('a', p13, c13);
|
||||
const slot14 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot14) {
|
||||
slot14.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c13, parent: extra.parent || context}));
|
||||
}
|
||||
return vn13;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 3 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"App\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
let c2 = [], p2 = {key:2};
|
||||
let vn2 = h('u', p2, c2);
|
||||
c1.push(vn2);
|
||||
let _3 = scope['state'].users;
|
||||
if (!_3) { throw new Error('QWeb error: Invalid loop expression')}
|
||||
let _4 = _3;
|
||||
let _5 = _3;
|
||||
if (!(_3 instanceof Array)) {
|
||||
_4 = Object.keys(_3);
|
||||
_5 = Object.values(_3);
|
||||
}
|
||||
let _length4 = _4.length;
|
||||
let _origScope6 = scope;
|
||||
scope = Object.create(scope);
|
||||
for (let i1 = 0; i1 < _length4; i1++) {
|
||||
scope.user_first = i1 === 0
|
||||
scope.user_last = i1 === _length4 - 1
|
||||
scope.user_index = i1
|
||||
scope.user = _4[i1]
|
||||
scope.user_value = _5[i1]
|
||||
let key1 = scope['user'].id;
|
||||
let c7 = [], p7 = {key:\`\${key1}_7\`};
|
||||
let vn7 = h('li', p7, c7);
|
||||
c2.push(vn7);
|
||||
utils.getScope(scope, 'userdescr').userdescr = 'User '+scope['user'].name;
|
||||
// Component 'Link'
|
||||
let k9 = \`__9__\${key1}__\`;
|
||||
let w8 = k9 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k9]] : false;
|
||||
let props8 = {to:'/user/'+scope['user'].id};
|
||||
if (w8 && w8.__owl__.currentFiber && !w8.__owl__.vnode) {
|
||||
w8.destroy();
|
||||
w8 = false;
|
||||
}
|
||||
if (w8) {
|
||||
w8.__updateProps(props8, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w8.__owl__.pvnode;
|
||||
c7.push(pvnode);
|
||||
} else {
|
||||
let componentKey8 = \`Link\`;
|
||||
let W8 = scope['Link'] || context.constructor.components[componentKey8] || QWeb.components[componentKey8];
|
||||
if (!W8) {throw new Error('Cannot find the definition of component \\"' + componentKey8 + '\\"')}
|
||||
w8 = new W8(parent, props8);
|
||||
parent.__owl__.cmap[k9] = w8.__owl__.id;
|
||||
w8.__owl__.slotId = 1;
|
||||
let fiber = w8.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: k9, hook: {remove() {},destroy(vn) {w8.destroy();}}});
|
||||
c7.push(pvnode);
|
||||
w8.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w8.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}
|
||||
scope = _origScope6;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 3 3`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c10 = extra.parentNode;
|
||||
let _11 = scope['userdescr'];
|
||||
if (_11 != null) {
|
||||
c10.push({text: _11});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 4 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"App\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
scope.userdescr = 'User '+scope['state'].user.name;
|
||||
// Component 'Link'
|
||||
let w2 = '__3__' in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap['__3__']] : false;
|
||||
let props2 = {to:'/user/'+scope['state'].user.id};
|
||||
if (w2 && w2.__owl__.currentFiber && !w2.__owl__.vnode) {
|
||||
w2.destroy();
|
||||
w2 = false;
|
||||
}
|
||||
if (w2) {
|
||||
w2.__updateProps(props2, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w2.__owl__.pvnode;
|
||||
c1.push(pvnode);
|
||||
} else {
|
||||
let componentKey2 = \`Link\`;
|
||||
let W2 = scope['Link'] || context.constructor.components[componentKey2] || QWeb.components[componentKey2];
|
||||
if (!W2) {throw new Error('Cannot find the definition of component \\"' + componentKey2 + '\\"')}
|
||||
w2 = new W2(parent, props2);
|
||||
parent.__owl__.cmap['__3__'] = w2.__owl__.id;
|
||||
w2.__owl__.slotId = 1;
|
||||
let fiber = w2.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: '__3__', hook: {remove() {},destroy(vn) {w2.destroy();}}});
|
||||
c1.push(pvnode);
|
||||
w2.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w2.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots are rendered with proper context, part 4 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"slot_default_template\\"
|
||||
let parent = extra.parent;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c4 = extra.parentNode;
|
||||
let _5 = scope['userdescr'];
|
||||
if (_5 != null) {
|
||||
c4.push({text: _5});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive slots in t-foreach in t-foreach 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__2\\"
|
||||
let utils = this.constructor.utils;
|
||||
let QWeb = this.constructor;
|
||||
let parent = context;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('div', p1, c1);
|
||||
let _2 = scope['tree'];
|
||||
if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
|
||||
let _3 = _2;
|
||||
let _4 = _2;
|
||||
if (!(_2 instanceof Array)) {
|
||||
_3 = Object.keys(_2);
|
||||
_4 = Object.values(_2);
|
||||
}
|
||||
let _length3 = _3.length;
|
||||
let _origScope5 = scope;
|
||||
scope = Object.create(scope);
|
||||
for (let i1 = 0; i1 < _length3; i1++) {
|
||||
scope.node1_first = i1 === 0
|
||||
scope.node1_last = i1 === _length3 - 1
|
||||
scope.node1_index = i1
|
||||
scope.node1 = _3[i1]
|
||||
scope.node1_value = _4[i1]
|
||||
let key1 = scope['node1'].key;
|
||||
let c6 = [], p6 = {key:\`\${key1}_6\`};
|
||||
let vn6 = h('div', p6, c6);
|
||||
c1.push(vn6);
|
||||
let _7 = scope['node1'].value;
|
||||
if (_7 != null) {
|
||||
c6.push({text: _7});
|
||||
}
|
||||
let c8 = [], p8 = {key:\`\${key1}_8\`};
|
||||
let vn8 = h('ul', p8, c8);
|
||||
c1.push(vn8);
|
||||
let _9 = scope['node1'].nodes;
|
||||
if (!_9) { throw new Error('QWeb error: Invalid loop expression')}
|
||||
let _10 = _9;
|
||||
let _11 = _9;
|
||||
if (!(_9 instanceof Array)) {
|
||||
_10 = Object.keys(_9);
|
||||
_11 = Object.values(_9);
|
||||
}
|
||||
let _length10 = _10.length;
|
||||
let _origScope12 = scope;
|
||||
scope = Object.create(scope);
|
||||
for (let i2 = 0; i2 < _length10; i2++) {
|
||||
scope.node2_first = i2 === 0
|
||||
scope.node2_last = i2 === _length10 - 1
|
||||
scope.node2_index = i2
|
||||
scope.node2 = _10[i2]
|
||||
scope.node2_value = _11[i2]
|
||||
let key2 = scope['node2'].key;
|
||||
// Component 'Child'
|
||||
let k14 = \`__14__\${key1}__\${key2}__\`;
|
||||
let w13 = k14 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[k14]] : false;
|
||||
let props13 = {};
|
||||
if (w13 && w13.__owl__.currentFiber && !w13.__owl__.vnode) {
|
||||
w13.destroy();
|
||||
w13 = false;
|
||||
}
|
||||
if (w13) {
|
||||
w13.__updateProps(props13, extra.fiber, utils.combine(context, scope));
|
||||
let pvnode = w13.__owl__.pvnode;
|
||||
c8.push(pvnode);
|
||||
} else {
|
||||
let componentKey13 = \`Child\`;
|
||||
let W13 = scope['Child'] || context.constructor.components[componentKey13] || QWeb.components[componentKey13];
|
||||
if (!W13) {throw new Error('Cannot find the definition of component \\"' + componentKey13 + '\\"')}
|
||||
w13 = new W13(parent, props13);
|
||||
parent.__owl__.cmap[k14] = w13.__owl__.id;
|
||||
w13.__owl__.slotId = 1;
|
||||
let fiber = w13.__prepare(extra.fiber, utils.combine(context, scope), () => { const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
|
||||
let pvnode = h('dummy', {key: k14, hook: {remove() {},destroy(vn) {w13.destroy();}}});
|
||||
c8.push(pvnode);
|
||||
w13.__owl__.pvnode = pvnode;
|
||||
}
|
||||
w13.__owl__.parentLastFiberId = extra.fiber.id;
|
||||
}
|
||||
scope = _origScope12;
|
||||
}
|
||||
scope = _origScope5;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive t-set t-value in a slot 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__1\\"
|
||||
let h = this.h;
|
||||
let c5 = [], p5 = {key:5};
|
||||
let vn5 = h('span', p5, c5);
|
||||
const slot6 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot6) {
|
||||
slot6.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: c5, parent: extra.parent || context}));
|
||||
}
|
||||
return vn5;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-slot directive template can just return a slot 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"__template__2\\"
|
||||
let utils = this.constructor.utils;
|
||||
let result;
|
||||
let h = this.h;
|
||||
const slot7 = this.constructor.slots[context.__owl__.slotId + '_' + 'default'];
|
||||
if (slot7) {
|
||||
let children8= []
|
||||
result = {}
|
||||
slot7.call(this, context.__owl__.scope, Object.assign({}, extra, {parentNode: children8, parent: extra.parent || context}));
|
||||
utils.defineProxy(result, children8[0]);
|
||||
}
|
||||
return result;
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,272 +0,0 @@
|
||||
import { Component, Env } from "../../src/component/component";
|
||||
import { QWeb } from "../../src/qweb/qweb";
|
||||
import { xml } from "../../src/tags";
|
||||
import { useState, useRef } from "../../src/hooks";
|
||||
import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - env: a WEnv, necessary to create new components
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("class and style attributes with t-component", () => {
|
||||
test("class is properly added on widget root el", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div class="c"/>`;
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`<div><Child class="a b"/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><div class="c a b"></div></div>`);
|
||||
});
|
||||
|
||||
test("empty class attribute is not added on widget root el", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child class=""/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const widget = new Parent();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div class="c"/>`;
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`<div><Child t-att-class="{a:state.a, b:state.b}"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ a: true, b: false });
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><div class="c a"></div></div>`);
|
||||
expect(QWeb.TEMPLATES[ParentWidget.template].fn.toString());
|
||||
|
||||
widget.state.a = false;
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<div><div class="c b"></div></div>`);
|
||||
});
|
||||
|
||||
test("class with extra whitespaces", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
`<div>
|
||||
<Child class="a b c d"/>
|
||||
</div>`
|
||||
);
|
||||
class Child extends Component {}
|
||||
class ParentWidget extends Component {
|
||||
static components = { Child };
|
||||
}
|
||||
env.qweb.addTemplate("Child", `<div/>`);
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><div class="a b c d"></div></div>`);
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el (v2)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<Child class="a" t-att-class="{ b: state.b }" t-ref="child"/>
|
||||
</div>
|
||||
<span t-name="Child" class="c" t-att-class="{ d: state.d }"/>
|
||||
</templates>`);
|
||||
|
||||
class Child extends Component {
|
||||
state = useState({ d: true });
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static components = { Child };
|
||||
state = useState({ b: true });
|
||||
child = useRef("child");
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
|
||||
const span = fixture.querySelector("span")!;
|
||||
expect(span.className).toBe("c d a b");
|
||||
|
||||
widget.state.b = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c d a");
|
||||
|
||||
(widget.child.comp as Child).state.d = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a");
|
||||
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b");
|
||||
|
||||
(widget.child.comp as Child).state.d = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b d");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el (v3)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ParentWidget">
|
||||
<Child class="a" t-att-class="state.b ? 'b' : ''" t-ref="child"/>
|
||||
</div>
|
||||
<span t-name="Child" class="c" t-att-class="state.d ? 'd' : ''"/>
|
||||
</templates>`);
|
||||
|
||||
class Child extends Component {
|
||||
state = useState({ d: true });
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static components = { Child };
|
||||
state = useState({ b: true });
|
||||
child = useRef("child");
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
|
||||
const span = fixture.querySelector("span")!;
|
||||
expect(span.className).toBe("c d a b");
|
||||
|
||||
widget.state.b = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c d a");
|
||||
|
||||
(widget.child.comp as Child).state.d = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a");
|
||||
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b");
|
||||
|
||||
(widget.child.comp as Child).state.d = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c a b d");
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
expect(env.qweb.templates.Child.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("class on components do not interfere with user defined classes", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="App" t-att-class="{ c: state.c }" />
|
||||
</templates>`);
|
||||
|
||||
class App extends Component {
|
||||
state = useState({ c: true });
|
||||
mounted() {
|
||||
this.el!.classList.add("user");
|
||||
}
|
||||
}
|
||||
|
||||
const widget = new App();
|
||||
await widget.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="c user"></div>');
|
||||
|
||||
widget.state.c = false;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="user"></div>');
|
||||
});
|
||||
|
||||
test("style is properly added on widget root el", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
`
|
||||
<div>
|
||||
<t t-component="child" style="font-weight: bold;"/>
|
||||
</div>`
|
||||
);
|
||||
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
|
||||
class ParentWidget extends Component {
|
||||
static components = { child: SomeComponent };
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><div style="font-weight: bold;"></div></div>`);
|
||||
});
|
||||
|
||||
test("dynamic t-att-style is properly added and updated on widget root el", async () => {
|
||||
env.qweb.addTemplate(
|
||||
"ParentWidget",
|
||||
`
|
||||
<div>
|
||||
<t t-component="child" t-att-style="state.style"/>
|
||||
</div>`
|
||||
);
|
||||
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
|
||||
class ParentWidget extends Component {
|
||||
static components = { child: SomeComponent };
|
||||
state = useState({ style: "font-size: 20px" });
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
await widget.mount(fixture);
|
||||
|
||||
expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
|
||||
|
||||
expect(fixture.innerHTML).toBe(`<div><div style="font-size: 20px;"></div></div>`);
|
||||
|
||||
widget.state.style = "font-size: 30px";
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe(`<div><div style="font-size: 30px;"></div></div>`);
|
||||
});
|
||||
|
||||
test("error in subcomponent with class", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-esc="this.will.crash"/>`;
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`<div><Child class="a"/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const widget = new ParentWidget();
|
||||
let error;
|
||||
try {
|
||||
await widget.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,616 +0,0 @@
|
||||
import { Component, Env, mount, STATUS } from "../../src/component/component";
|
||||
import { useState } from "../../src/hooks";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestEnv, makeTestFixture, nextTick } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - env: a WEnv, necessary to create new components
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("component error handling (catchError)", () => {
|
||||
/**
|
||||
* This test suite requires often to wait for 3 ticks. Here is why:
|
||||
* - First tick is to let the app render and crash.
|
||||
* - When we crash, we call the catchError handler in a setTimeout (because we
|
||||
* need to wait for the previous rendering to be completely stopped). So, we
|
||||
* need to wait for the second tick.
|
||||
* - Then, when the handler changes the state, we need to wait for the interface
|
||||
* to be rerendered.
|
||||
* */
|
||||
|
||||
test("can catch an error in a component render function", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
const handler = jest.fn();
|
||||
env.qweb.on("error", null, handler);
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>`;
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<ErrorBoundary><ErrorComponent flag="state.flag"/></ErrorBoundary>
|
||||
</div>`;
|
||||
state = useState({ flag: false });
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div><div>heyfalse</div></div></div>");
|
||||
app.state.flag = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
expect(handler).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("no component catching error lead to full app destruction", async () => {
|
||||
expect.assertions(6);
|
||||
const handler = jest.fn();
|
||||
env.qweb.on("error", null, handler);
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
|
||||
}
|
||||
|
||||
class App extends Component {
|
||||
static template = xml`<div><ErrorComponent flag="state.flag"/></div>`;
|
||||
static components = { ErrorComponent };
|
||||
state = useState({ flag: false });
|
||||
async render() {
|
||||
try {
|
||||
await super.render();
|
||||
} catch (e) {
|
||||
expect(e.message).toMatch(
|
||||
/Cannot read properties of undefined \(reading 'this'\)|Cannot read property 'this' of undefined/
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
|
||||
app.state.flag = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
expect(app.__owl__.status).toBe(STATUS.DESTROYED);
|
||||
expect(handler).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("can catch an error in the initial call of a component render function (parent mounted)", async () => {
|
||||
const handler = jest.fn();
|
||||
env.qweb.on("error", null, handler);
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>`;
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
|
||||
</div>`;
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
expect(handler).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("can catch an error in the initial call of a component render function (parent updated)", async () => {
|
||||
const handler = jest.fn();
|
||||
env.qweb.on("error", null, handler);
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="state.this.will.crash"/></div>`;
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>`;
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<ErrorBoundary t-if="state.flag"><ErrorComponent /></ErrorBoundary>
|
||||
</div>`;
|
||||
state = useState({ flag: false });
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
app.state.flag = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
expect(handler).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("can catch an error in the constructor call of a component render function", async () => {
|
||||
const handler = jest.fn();
|
||||
env.qweb.on("error", null, handler);
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ErrorBoundary">
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>
|
||||
<div t-name="ErrorComponent">Some text</div>
|
||||
<div t-name="App">
|
||||
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
|
||||
</div>
|
||||
</templates>`);
|
||||
class ErrorComponent extends Component {
|
||||
constructor(parent) {
|
||||
super(parent);
|
||||
throw new Error("NOOOOO");
|
||||
}
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
expect(handler).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("can catch an error in the willStart call", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div t-name="ErrorComponent">Some text</div>`;
|
||||
async willStart() {
|
||||
// we wait a little bit to be in a different stack frame
|
||||
await nextTick();
|
||||
throw new Error("NOOOOO");
|
||||
}
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>`;
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`<div><ErrorBoundary><ErrorComponent /></ErrorBoundary></div>`;
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test.skip("can catch an error in the mounted call", async () => {
|
||||
// we do not catch error in mounted anymore
|
||||
console.error = jest.fn();
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="ErrorBoundary">
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>
|
||||
<div t-name="ErrorComponent">Some text</div>
|
||||
<div t-name="App">
|
||||
<ErrorBoundary><ErrorComponent /></ErrorBoundary>
|
||||
</div>
|
||||
</templates>`);
|
||||
class ErrorComponent extends Component {
|
||||
mounted() {
|
||||
throw new Error("NOOOOO");
|
||||
}
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>Error handled</div></div>");
|
||||
});
|
||||
|
||||
test.skip("can catch an error in the willPatch call", async () => {
|
||||
// we do not catch error in willPatch anymore
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn();
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div><t t-esc="props.message"/></div>`;
|
||||
willPatch() {
|
||||
throw new Error("NOOOOO");
|
||||
}
|
||||
}
|
||||
class ErrorBoundary extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.error">Error handled</t>
|
||||
<t t-else=""><t t-slot="default" /></t>
|
||||
</div>`;
|
||||
state = useState({ error: false });
|
||||
|
||||
catchError() {
|
||||
this.state.error = true;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<span><t t-esc="state.message"/></span>
|
||||
<ErrorBoundary><ErrorComponent message="state.message" /></ErrorBoundary>
|
||||
</div>`;
|
||||
state = useState({ message: "abc" });
|
||||
static components = { ErrorBoundary, ErrorComponent };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>abc</span><div><div>abc</div></div></div>");
|
||||
app.state.message = "def";
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>def</span><div>Error handled</div></div>");
|
||||
expect(console.error).toHaveBeenCalledTimes(1);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("a rendering error will reject the mount promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
// we do not catch error in willPatch anymore
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="this.will.crash"/></div>`;
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
let error;
|
||||
try {
|
||||
await app.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("an error in mounted call will reject the mount promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
|
||||
class App extends Component {
|
||||
static template = xml`<div>abc</div>`;
|
||||
mounted() {
|
||||
throw new Error("boom");
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
let error;
|
||||
try {
|
||||
await app.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("boom");
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("an error in willPatch call will reject the render promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="val"/></div>`;
|
||||
val = 3;
|
||||
willPatch() {
|
||||
throw new Error("boom");
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
app.val = 4;
|
||||
let error;
|
||||
try {
|
||||
await app.render();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("boom");
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("an error in patched call will reject the render promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="val"/></div>`;
|
||||
val = 3;
|
||||
patched() {
|
||||
throw new Error("boom");
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
app.val = 4;
|
||||
let error;
|
||||
try {
|
||||
await app.render();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("boom");
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("a rendering error in a sub component will reject the mount promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
// we do not catch error in willPatch anymore
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="this.will.crash"/></div>`;
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`<div><Child/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
let error;
|
||||
try {
|
||||
await app.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("a rendering error will reject the render promise", async () => {
|
||||
const consoleError = console.error;
|
||||
console.error = jest.fn(() => {});
|
||||
// we do not catch error in willPatch anymore
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-if="flag" t-esc="this.will.crash"/></div>`;
|
||||
flag = false;
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
app.flag = true;
|
||||
let error;
|
||||
try {
|
||||
await app.render();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
|
||||
expect(console.error).toBeCalledTimes(0);
|
||||
console.error = consoleError;
|
||||
});
|
||||
|
||||
test("a rendering error will reject the render promise (with sub components)", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span></span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child/><t t-esc="x.y"/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
let error;
|
||||
try {
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
const regexp = /Cannot read properties of undefined \(reading 'y'\)|Cannot read property 'y' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
});
|
||||
|
||||
test("simple catchError", async () => {
|
||||
class Boom extends Component {
|
||||
static template = xml`<div t-esc="a.b.c"/>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="error">Error</t>
|
||||
<t t-else="">
|
||||
<Boom />
|
||||
</t>
|
||||
</div>`;
|
||||
static components = { Boom };
|
||||
|
||||
error = false;
|
||||
|
||||
catchError(error) {
|
||||
this.error = error;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, { target: fixture });
|
||||
expect(fixture.innerHTML).toBe("<div>Error</div>");
|
||||
});
|
||||
|
||||
test("catchError in catchError", async () => {
|
||||
class Boom extends Component {
|
||||
static template = xml`<div t-esc="a.b.c"/>`;
|
||||
}
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Boom />
|
||||
</div>`;
|
||||
static components = { Boom };
|
||||
|
||||
catchError(error) {
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="error">Error</t>
|
||||
<t t-else="">
|
||||
<Child />
|
||||
</t>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
|
||||
error = false;
|
||||
|
||||
catchError(error) {
|
||||
this.error = error;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, { target: fixture });
|
||||
expect(fixture.innerHTML).toBe("<div>Error</div>");
|
||||
});
|
||||
|
||||
test("errors in mounted and in willUnmount", async () => {
|
||||
expect.assertions(1);
|
||||
class Example extends Component {
|
||||
static template = xml`<div/>`;
|
||||
val;
|
||||
mounted() {
|
||||
throw new Error("Error in mounted");
|
||||
this.val = { foo: "bar" };
|
||||
}
|
||||
willUnmount() {
|
||||
console.log(this.val.foo);
|
||||
}
|
||||
}
|
||||
|
||||
try {
|
||||
await mount(Example, { target: fixture });
|
||||
} catch (e) {
|
||||
expect(e.message).toBe("Error in mounted");
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,868 +0,0 @@
|
||||
import { Component, Env } from "../../src/component/component";
|
||||
import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
|
||||
import { useState } from "../../src/hooks";
|
||||
import { QWeb } from "../../src/qweb";
|
||||
import { xml } from "../../src/tags";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
let dev: boolean = false;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
dev = QWeb.dev;
|
||||
QWeb.dev = true;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
QWeb.dev = dev;
|
||||
});
|
||||
|
||||
class Widget extends Component {}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
describe("props validation", () => {
|
||||
test("validation is only done in dev mode", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["message"];
|
||||
static template = xml`<div>hey</div>`;
|
||||
}
|
||||
class Parent extends Widget {
|
||||
static components = { TestWidget };
|
||||
static template = xml`<div><TestWidget /></div>`;
|
||||
}
|
||||
|
||||
let error;
|
||||
QWeb.dev = true;
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(`Missing props 'message' (component 'TestWidget')`);
|
||||
|
||||
error = undefined;
|
||||
|
||||
QWeb.dev = false;
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
});
|
||||
|
||||
test("props: list of strings", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["message"];
|
||||
static template = xml`<div>hey</div>`;
|
||||
}
|
||||
class Parent extends Widget {
|
||||
static components = { TestWidget };
|
||||
static template = xml`<div><TestWidget /></div>`;
|
||||
}
|
||||
|
||||
let error;
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(`Missing props 'message' (component 'TestWidget')`);
|
||||
});
|
||||
|
||||
test("validate simple types", async () => {
|
||||
const Tests = [
|
||||
{ type: Number, ok: 1, ko: "1" },
|
||||
{ type: Boolean, ok: true, ko: "1" },
|
||||
{ type: String, ok: "1", ko: 1 },
|
||||
{ type: Object, ok: {}, ko: "1" },
|
||||
{ type: Date, ok: new Date(), ko: "1" },
|
||||
{ type: Function, ok: () => {}, ko: "1" },
|
||||
];
|
||||
|
||||
let props;
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
for (let test of Tests) {
|
||||
let TestWidget = class extends Widget {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = { p: test.type };
|
||||
};
|
||||
Parent.components = { TestWidget };
|
||||
|
||||
let error;
|
||||
props = {};
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(`Missing props 'p' (component '_a')`);
|
||||
|
||||
error = undefined;
|
||||
props = { p: test.ok };
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
props = { p: test.ko };
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
|
||||
}
|
||||
});
|
||||
|
||||
test("validate simple types, alternate form", async () => {
|
||||
const Tests = [
|
||||
{ type: Number, ok: 1, ko: "1" },
|
||||
{ type: Boolean, ok: true, ko: "1" },
|
||||
{ type: String, ok: "1", ko: 1 },
|
||||
{ type: Object, ok: {}, ko: "1" },
|
||||
{ type: Date, ok: new Date(), ko: "1" },
|
||||
{ type: Function, ok: () => {}, ko: "1" },
|
||||
];
|
||||
|
||||
let props;
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
for (let test of Tests) {
|
||||
let TestWidget = class extends Component {
|
||||
static props = { p: { type: test.type } };
|
||||
static template = xml`<div>hey</div>`;
|
||||
};
|
||||
Parent.components = { TestWidget };
|
||||
|
||||
let error;
|
||||
props = {};
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(`Missing props 'p' (component '_a')`);
|
||||
|
||||
error = undefined;
|
||||
props = { p: test.ok };
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
props = { p: test.ko };
|
||||
try {
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
|
||||
}
|
||||
});
|
||||
|
||||
test("can validate a prop with multiple types", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = { p: [String, Boolean] };
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: "string" };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: true };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: 1 };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
});
|
||||
|
||||
test("can validate an optional props", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = { p: { type: String, optional: true } };
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: "key" };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = {};
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: 1 };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
});
|
||||
|
||||
test("can validate an array with given primitive type", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = { p: { type: Array, element: String } };
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: [] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: ["string"] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: [1] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
|
||||
error = undefined;
|
||||
try {
|
||||
props = { p: ["string", 1] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
});
|
||||
|
||||
test("can validate an array with multiple sub element types", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = { p: { type: Array, element: [String, Boolean] } };
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: [] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: ["string"] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: [false, true, "string"] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: [true, 1] };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
});
|
||||
|
||||
test("can validate an object with simple shape", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = {
|
||||
p: { type: Object, shape: { id: Number, url: String } },
|
||||
};
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: { id: 1, url: "url" } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: { id: 1, url: "url", extra: true } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid prop 'p' in component TestWidget (unknown prop 'extra')");
|
||||
|
||||
try {
|
||||
props = { p: { id: "1", url: "url" } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
|
||||
error = undefined;
|
||||
try {
|
||||
props = { p: { id: 1 } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
});
|
||||
|
||||
test("can validate recursively complicated prop def", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
static props = {
|
||||
p: {
|
||||
type: Object,
|
||||
shape: {
|
||||
id: Number,
|
||||
url: [Boolean, { type: Array, element: Number }],
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
get p() {
|
||||
return props.p;
|
||||
}
|
||||
}
|
||||
|
||||
let error;
|
||||
let props;
|
||||
try {
|
||||
props = { p: { id: 1, url: true } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: { id: 1, url: [12] } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
props = { p: { id: 1, url: [12, true] } };
|
||||
const p = new Parent();
|
||||
await p.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
|
||||
});
|
||||
|
||||
test("can validate optional attributes in nested sub props", () => {
|
||||
class TestComponent extends Component {
|
||||
static props = {
|
||||
myprop: {
|
||||
type: Array,
|
||||
element: {
|
||||
type: Object,
|
||||
shape: {
|
||||
num: { type: Number, optional: true },
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { myprop: [{}] });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { myprop: [{ a: 1 }] });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(
|
||||
"Invalid prop 'myprop' in component TestComponent (unknown prop 'a')"
|
||||
);
|
||||
});
|
||||
|
||||
test("can validate with a custom validator", () => {
|
||||
class TestComponent extends Component {
|
||||
static props = {
|
||||
size: {
|
||||
validate: (e) => ["small", "medium", "large"].includes(e),
|
||||
},
|
||||
};
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { size: "small" });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { size: "abcdef" });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'size' in component 'TestComponent'");
|
||||
});
|
||||
|
||||
test("can validate with a custom validator, and a type", () => {
|
||||
const validator = jest.fn((n) => 0 <= n && n <= 10);
|
||||
class TestComponent extends Component {
|
||||
static props = {
|
||||
n: {
|
||||
type: Number,
|
||||
validate: validator,
|
||||
},
|
||||
};
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { n: 3 });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeUndefined();
|
||||
expect(validator).toBeCalledTimes(1);
|
||||
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { n: "str" });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
|
||||
expect(validator).toBeCalledTimes(1);
|
||||
|
||||
error = null;
|
||||
try {
|
||||
QWeb.utils.validateProps(TestComponent, { n: 100 });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
|
||||
expect(validator).toBeCalledTimes(2);
|
||||
});
|
||||
|
||||
test("props are validated in dev mode (code snapshot)", async () => {
|
||||
env.qweb.addTemplates(`
|
||||
<templates>
|
||||
<div t-name="App">
|
||||
<Child message="1"/>
|
||||
</div>
|
||||
<div t-name="Child"><t t-esc="props.message"/></div>
|
||||
</templates>`);
|
||||
|
||||
class Child extends Widget {
|
||||
static props = ["message"];
|
||||
}
|
||||
class App extends Widget {
|
||||
static components = { Child };
|
||||
}
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
|
||||
// need to make sure there are 2 call to update props. one at component
|
||||
// creation, and one at update time.
|
||||
expect(env.qweb.templates.App.fn.toString()).toMatchSnapshot();
|
||||
});
|
||||
|
||||
test("props: list of strings with optional props", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["message", "someProp?"];
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { someProp: 1 });
|
||||
}).toThrow();
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: 1 });
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("props: can be defined with a boolean", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = { message: true };
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, {});
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
test("props with type array, and no element", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = { myprop: { type: Array } };
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { myprop: [1] });
|
||||
}).not.toThrow();
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { myprop: 1 });
|
||||
}).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
|
||||
});
|
||||
|
||||
test("props with type object, and no shape", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = { myprop: { type: Object } };
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { myprop: { a: 3 } });
|
||||
}).not.toThrow();
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { myprop: false });
|
||||
}).toThrow(`Invalid Prop 'myprop' in component 'TestWidget'`);
|
||||
});
|
||||
|
||||
test("props: extra props cause an error", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["message"];
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
test("props: extra props cause an error, part 2", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = { message: true };
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: 1, flag: true });
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
test("props: optional prop do not cause an error", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["message?"];
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: 1 });
|
||||
}).not.toThrow();
|
||||
});
|
||||
|
||||
test("optional prop do not cause an error if value is undefined", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = { message: { type: String, optional: true } };
|
||||
}
|
||||
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: undefined });
|
||||
}).not.toThrow();
|
||||
expect(() => {
|
||||
QWeb.utils.validateProps(TestWidget, { message: null });
|
||||
}).toThrow();
|
||||
});
|
||||
|
||||
test("missing required boolean prop causes an error", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["p"];
|
||||
static template = xml`<span><t t-if="props.p">hey</t></span>`;
|
||||
}
|
||||
|
||||
class App extends Widget {
|
||||
static template = xml`<div><TestWidget/></div>`;
|
||||
static components = { TestWidget };
|
||||
}
|
||||
|
||||
const w = new App(undefined, {});
|
||||
let error;
|
||||
try {
|
||||
await w.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
|
||||
});
|
||||
|
||||
test("props are validated whenever component is updated", async () => {
|
||||
let error;
|
||||
class TestWidget extends Component {
|
||||
static props = { p: { type: Number } };
|
||||
static template = xml`<div><t t-esc="props.p"/></div>`;
|
||||
|
||||
async __updateProps() {
|
||||
try {
|
||||
await Component.prototype.__updateProps.apply(this, arguments);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="state.p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
state: any = useState({ p: 1 });
|
||||
}
|
||||
|
||||
const w = new Parent();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
|
||||
|
||||
w.state.p = undefined;
|
||||
await nextTick();
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
|
||||
});
|
||||
|
||||
test("default values are applied before validating props at update", async () => {
|
||||
class TestWidget extends Component {
|
||||
static props = { p: { type: Number } };
|
||||
static template = xml`<div><t t-esc="props.p"/></div>`;
|
||||
static defaultProps = { p: 4 };
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget p="state.p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
state: any = useState({ p: 1 });
|
||||
}
|
||||
|
||||
const w = new Parent();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
|
||||
|
||||
w.state.p = undefined;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
|
||||
});
|
||||
|
||||
test("mix of optional and mandatory", async () => {
|
||||
class Child extends Component {
|
||||
static props = {
|
||||
optional: { type: String, optional: true },
|
||||
mandatory: Number,
|
||||
};
|
||||
static template = xml` <div><t t-esc="props.mandatory"/></div>`;
|
||||
}
|
||||
|
||||
class App extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<div><Child/></div>`;
|
||||
}
|
||||
|
||||
const w = new App(undefined, {});
|
||||
let error;
|
||||
try {
|
||||
await w.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Missing props 'mandatory' (component 'Child')");
|
||||
});
|
||||
});
|
||||
|
||||
describe("default props", () => {
|
||||
test("can set default values", async () => {
|
||||
class TestWidget extends Component {
|
||||
static defaultProps = { p: 4 };
|
||||
static template = xml`<div><t t-esc="props.p"/></div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><TestWidget /></div>`;
|
||||
static components = { TestWidget };
|
||||
}
|
||||
|
||||
const w = new Parent();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
|
||||
});
|
||||
|
||||
test("default values are also set whenever component is updated", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static template = xml`<div><t t-esc="props.p"/></div>`;
|
||||
static defaultProps = { p: 4 };
|
||||
}
|
||||
class Parent extends Widget {
|
||||
static template = xml`<div><TestWidget p="state.p"/></div>`;
|
||||
static components = { TestWidget };
|
||||
state: any = useState({ p: 1 });
|
||||
}
|
||||
|
||||
const w = new Parent();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
|
||||
|
||||
w.state.p = undefined;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
|
||||
});
|
||||
|
||||
test("can set default required boolean values", async () => {
|
||||
class TestWidget extends Widget {
|
||||
static props = ["p", "q"];
|
||||
static defaultProps = { p: true, q: false };
|
||||
static template = xml`<span><t t-if="props.p">hey</t><t t-if="!props.q">hey</t></span>`;
|
||||
}
|
||||
|
||||
class App extends Widget {
|
||||
static template = xml`<div><TestWidget/></div>`;
|
||||
static components = { TestWidget };
|
||||
}
|
||||
|
||||
const w = new App(undefined, {});
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>heyhey</span></div>");
|
||||
});
|
||||
});
|
||||
@@ -1,170 +0,0 @@
|
||||
import { Component, Env } from "../../src/component/component";
|
||||
import { processSheet } from "../../src/component/styles";
|
||||
import { xml, css } from "../../src/tags";
|
||||
import { makeTestFixture, makeTestEnv } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - env: an Env, necessary to create new components
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
document.head.innerHTML = "";
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("styles and component", () => {
|
||||
test("can define an inline stylesheet", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div class="app">text</div>`;
|
||||
static style = css`
|
||||
.app {
|
||||
color: red;
|
||||
}
|
||||
`;
|
||||
}
|
||||
expect(document.head.innerHTML).toBe("");
|
||||
const app = new App();
|
||||
|
||||
expect(document.head.innerHTML).toBe(`<style component=\"App\">.app {
|
||||
color: red;
|
||||
}</style>`);
|
||||
|
||||
await app.mount(fixture);
|
||||
const style = getComputedStyle(app.el!);
|
||||
expect(style.color).toBe("red");
|
||||
expect(fixture.innerHTML).toBe('<div class="app">text</div>');
|
||||
});
|
||||
|
||||
test("inherited components properly apply css", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div class="app">text</div>`;
|
||||
static style = css`
|
||||
.app {
|
||||
color: red;
|
||||
}
|
||||
`;
|
||||
}
|
||||
class SubApp extends App {
|
||||
static style = css`
|
||||
.app {
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
}
|
||||
expect(document.head.innerHTML).toBe("");
|
||||
const app = new SubApp();
|
||||
|
||||
expect(document.head.innerHTML).toBe(`<style component=\"SubApp\">.app {
|
||||
font-weight: bold;
|
||||
}</style><style component=\"App\">.app {
|
||||
color: red;
|
||||
}</style>`);
|
||||
|
||||
await app.mount(fixture);
|
||||
const style = getComputedStyle(app.el!);
|
||||
expect(style.color).toBe("red");
|
||||
expect(style.fontWeight).toBe("bold");
|
||||
expect(fixture.innerHTML).toBe('<div class="app">text</div>');
|
||||
});
|
||||
|
||||
test("get a meaningful error message if css helper is missing", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div class="app">text</div>`;
|
||||
static style = `.app {color: red;}`;
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
new App();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe(
|
||||
"Invalid css stylesheet for component 'App'. Did you forget to use the 'css' tag helper?"
|
||||
);
|
||||
});
|
||||
|
||||
test("inline stylesheets are processed", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div class="app">text</div>`;
|
||||
static style = css`
|
||||
.app {
|
||||
color: red;
|
||||
.some-class {
|
||||
font-weight: bold;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
display: block;
|
||||
}
|
||||
`;
|
||||
}
|
||||
new App();
|
||||
|
||||
expect(document.head.querySelector("style")!.innerHTML).toBe(`.app {
|
||||
color: red;
|
||||
}
|
||||
.app .some-class {
|
||||
font-weight: bold;
|
||||
width: 40px;
|
||||
}
|
||||
.app {
|
||||
display: block;
|
||||
}`);
|
||||
});
|
||||
|
||||
test("properly handle rules with commas", async () => {
|
||||
const sheet = processSheet(`.parent-a, .parent-b {
|
||||
.child-a, .child-b {
|
||||
color: red;
|
||||
}
|
||||
}`);
|
||||
|
||||
expect(sheet)
|
||||
.toBe(`.parent-a .child-a, .parent-a .child-b, .parent-b .child-a, .parent-b .child-b {
|
||||
color: red;
|
||||
}`);
|
||||
});
|
||||
|
||||
test("handle & selector", async () => {
|
||||
let sheet = processSheet(`.btn {
|
||||
&.danger {
|
||||
color: red;
|
||||
}
|
||||
}`);
|
||||
|
||||
expect(sheet).toBe(`.btn.danger {
|
||||
color: red;
|
||||
}`);
|
||||
|
||||
sheet = processSheet(`.some-class {
|
||||
&.btn {
|
||||
.other-class ~ & {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
}`);
|
||||
|
||||
expect(sheet).toBe(`.other-class ~ .some-class.btn {
|
||||
color: red;
|
||||
}`);
|
||||
});
|
||||
});
|
||||
@@ -1,732 +0,0 @@
|
||||
import { Component, Env, mount } from "../../src/component/component";
|
||||
import { useState } from "../../src/hooks";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeDeferred, makeTestEnv, makeTestFixture, nextTick, nextMicroTick } from "../helpers";
|
||||
import { scheduler } from "../../src/component/scheduler";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - env: a WEnv, necessary to create new components
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("mount targets", () => {
|
||||
test("can attach a component to an existing node (if same tagname)", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div t-att-class="state.customClass">app<p>another tag</p></div>`;
|
||||
state = useState({ customClass: "custom" });
|
||||
}
|
||||
const div = document.createElement("div");
|
||||
div.classList.add("arbitrary");
|
||||
div.innerHTML = `<p>pre-existing</p>`;
|
||||
fixture.appendChild(div);
|
||||
|
||||
const app = await mount(App, { target: div, position: "self" });
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
`<div class="arbitrary custom"><p>pre-existing</p>app<p>another tag</p></div>`
|
||||
);
|
||||
expect(div).toBe(app.el);
|
||||
|
||||
app.state.customClass = "custom2";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
`<div class="arbitrary custom2"><p>pre-existing</p>app<p>another tag</p></div>`
|
||||
);
|
||||
expect(div).toBe(app.el);
|
||||
|
||||
app.unmount();
|
||||
// This assert is a best guess
|
||||
// The use case it covers was not really thought through
|
||||
// and may change in the future
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("cannot attach a component to an existing node (if not same tagname)", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<span>app</span>`;
|
||||
}
|
||||
const div = document.createElement("div");
|
||||
fixture.appendChild(div);
|
||||
|
||||
let error;
|
||||
try {
|
||||
await mount(App, { target: div, position: "self" });
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Cannot attach 'App' to target node (not same tag name)");
|
||||
});
|
||||
|
||||
test("can mount a component (with position='first-child')", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div>app</div>`;
|
||||
}
|
||||
const span = document.createElement("span");
|
||||
fixture.appendChild(span);
|
||||
|
||||
await mount(App, { target: fixture, position: "first-child" });
|
||||
expect(fixture.innerHTML).toBe("<div>app</div><span></span>");
|
||||
});
|
||||
|
||||
test("can mount a component (with position='last-child')", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div>app</div>`;
|
||||
}
|
||||
const span = document.createElement("span");
|
||||
fixture.appendChild(span);
|
||||
|
||||
await mount(App, { target: fixture, position: "last-child" });
|
||||
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
|
||||
});
|
||||
|
||||
test("default mount option is 'last-child'", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div>app</div>`;
|
||||
}
|
||||
const span = document.createElement("span");
|
||||
fixture.appendChild(span);
|
||||
|
||||
await mount(App, { target: fixture });
|
||||
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
|
||||
});
|
||||
});
|
||||
|
||||
describe("unmounting and remounting", () => {
|
||||
test("widget can be unmounted and remounted", async () => {
|
||||
const steps: string[] = [];
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
async willStart() {
|
||||
steps.push("willstart");
|
||||
}
|
||||
mounted() {
|
||||
steps.push("mounted");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("willunmount");
|
||||
}
|
||||
patched() {
|
||||
throw new Error("patched should not be called");
|
||||
}
|
||||
}
|
||||
|
||||
const w = await mount(MyWidget, { target: fixture });
|
||||
expect(fixture.innerHTML).toBe("<div>Hey</div>");
|
||||
expect(steps).toEqual(["willstart", "mounted"]);
|
||||
|
||||
w.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(steps).toEqual(["willstart", "mounted", "willunmount"]);
|
||||
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>Hey</div>");
|
||||
expect(steps).toEqual(["willstart", "mounted", "willunmount", "mounted"]);
|
||||
});
|
||||
|
||||
test("widget can be mounted twice without ill effect", async () => {
|
||||
const steps: string[] = [];
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
async willStart() {
|
||||
steps.push("willstart");
|
||||
}
|
||||
mounted() {
|
||||
steps.push("mounted");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("willunmount");
|
||||
}
|
||||
}
|
||||
|
||||
const w = await mount(MyWidget, { target: fixture });
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>Hey</div>");
|
||||
expect(steps).toEqual(["willstart", "mounted"]);
|
||||
});
|
||||
|
||||
test("state changes in willUnmount do not trigger rerender", async () => {
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<span><t t-esc="props.val"/><t t-esc="state.n"/></span>
|
||||
`;
|
||||
state = useState({ n: 2 });
|
||||
__render(f) {
|
||||
steps.push("render");
|
||||
return super.__render(f);
|
||||
}
|
||||
willPatch() {
|
||||
steps.push("willPatch");
|
||||
}
|
||||
patched() {
|
||||
steps.push("patched");
|
||||
}
|
||||
|
||||
willUnmount() {
|
||||
steps.push("willUnmount");
|
||||
this.state.n = 3;
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child t-if="state.flag" val="state.val"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1, flag: true });
|
||||
}
|
||||
|
||||
const widget = await mount(Parent, { target: fixture });
|
||||
expect(steps).toEqual(["render"]);
|
||||
expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
|
||||
widget.state.flag = false;
|
||||
await nextTick();
|
||||
// we make sure here that no call to __render is done
|
||||
expect(steps).toEqual(["render", "willUnmount"]);
|
||||
});
|
||||
|
||||
test("state changes in willUnmount will be applied on remount", async () => {
|
||||
class TestWidget extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.val"/></div>
|
||||
`;
|
||||
state = useState({ val: 1 });
|
||||
willUnmount() {
|
||||
this.state.val = 3;
|
||||
}
|
||||
}
|
||||
|
||||
const widget = new TestWidget();
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>1</div>");
|
||||
widget.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
await nextTick(); // wait for changes to be detected before remounting
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
// we want to make sure that there are no remaining tasks left at this point.
|
||||
expect(Component.scheduler.tasks.length).toBe(0);
|
||||
});
|
||||
|
||||
test("sub component is still active after being unmounted and remounted", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<p t-on-click="state.value++">
|
||||
<t t-esc="state.value"/>
|
||||
</p>`;
|
||||
|
||||
state = useState({ value: 1 });
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<div><Child/></div>`;
|
||||
}
|
||||
|
||||
const w = new Parent();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
|
||||
|
||||
fixture.querySelector("p")!.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><p>2</p></div>");
|
||||
w.unmount();
|
||||
await nextTick();
|
||||
await w.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><p>2</p></div>");
|
||||
fixture.querySelector("p")!.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><p>3</p></div>");
|
||||
});
|
||||
|
||||
test("change state just before mounting component", async () => {
|
||||
const steps: number[] = [];
|
||||
class TestWidget extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.val"/></div>
|
||||
`;
|
||||
state = useState({ val: 1 });
|
||||
__render(f) {
|
||||
steps.push(this.state.val);
|
||||
return super.__render(f);
|
||||
}
|
||||
}
|
||||
TestWidget.prototype.__render = jest.fn(TestWidget.prototype.__render);
|
||||
|
||||
const widget = new TestWidget();
|
||||
widget.state.val = 2;
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(1);
|
||||
|
||||
// unmount and re-mount, as in this case, willStart won't be called, so it's
|
||||
// slightly different
|
||||
widget.unmount();
|
||||
widget.state.val = 3;
|
||||
await widget.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(2);
|
||||
expect(steps).toEqual([2, 3]);
|
||||
});
|
||||
|
||||
test("change state while mounting component", async () => {
|
||||
const steps: number[] = [];
|
||||
class TestWidget extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.val"/></div>
|
||||
`;
|
||||
state = useState({ val: 1 });
|
||||
__render(f) {
|
||||
steps.push(this.state.val);
|
||||
return super.__render(f);
|
||||
}
|
||||
}
|
||||
TestWidget.prototype.__render = jest.fn(TestWidget.prototype.__render);
|
||||
TestWidget.prototype.__patch = jest.fn(TestWidget.prototype.__patch);
|
||||
|
||||
const widget = new TestWidget();
|
||||
let prom = widget.mount(fixture);
|
||||
widget.state.val = 2;
|
||||
await prom;
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(1);
|
||||
|
||||
// unmount and re-mount, as in this case, willStart won't be called, so it's
|
||||
// slightly different
|
||||
widget.unmount();
|
||||
prom = widget.mount(fixture);
|
||||
widget.state.val = 3;
|
||||
await prom;
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(3);
|
||||
expect(TestWidget.prototype.__patch).toHaveBeenCalledTimes(2);
|
||||
expect(steps).toEqual([2, 2, 3]);
|
||||
});
|
||||
|
||||
test("change state and render while mounted in detached dom", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="state.val"/></div>`;
|
||||
state = useState({ val: 1 });
|
||||
}
|
||||
|
||||
const detachedDiv = document.createElement("div");
|
||||
const app = await mount(App, { target: detachedDiv });
|
||||
|
||||
expect(detachedDiv.innerHTML).toBe("<div>1</div>");
|
||||
app.state.val = 2;
|
||||
await nextTick();
|
||||
expect(detachedDiv.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
|
||||
test("change state and render while not mounted ", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="state.val"/></div>`;
|
||||
state = useState({ val: 1 });
|
||||
}
|
||||
|
||||
const app = new App(null);
|
||||
|
||||
app.state.val = 2; // will call the render method (before being mounted)
|
||||
await nextTick();
|
||||
|
||||
await app.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
|
||||
test("destroy and change state after mounted in detached dom", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`<div><t t-esc="state.val"/></div>`;
|
||||
state = useState({ val: 1 });
|
||||
}
|
||||
|
||||
const detachedDiv = document.createElement("div");
|
||||
const app = await mount(App, { target: detachedDiv });
|
||||
|
||||
expect(detachedDiv.innerHTML).toBe("<div>1</div>");
|
||||
|
||||
app.destroy();
|
||||
app.state.val = 2;
|
||||
await nextTick();
|
||||
expect(detachedDiv.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("change state while component is unmounted", async () => {
|
||||
let child;
|
||||
class Child extends Component {
|
||||
static template = xml`<span t-esc="state.val"/>`;
|
||||
state = useState({
|
||||
val: "C1",
|
||||
});
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
child = this;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<div><t t-esc="state.val"/><Child/></div>`;
|
||||
state = useState({ val: "P1" });
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>P1<span>C1</span></div>");
|
||||
|
||||
parent.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
parent.state.val = "P2";
|
||||
child.state.val = "C2";
|
||||
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>P2<span>C2</span></div>");
|
||||
});
|
||||
|
||||
test("change state while component is mounted in a fragment", async () => {
|
||||
class Child1 extends Component {
|
||||
static template = xml`<span>C1</span>`;
|
||||
}
|
||||
|
||||
class Child2 extends Component {
|
||||
static template = xml`<span>C2</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static components = { Child1, Child2 };
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child1 t-if="child == 'c1'"/>
|
||||
<Child2 t-if="child == 'c2'"/>
|
||||
</div>`;
|
||||
child: string | false = false;
|
||||
}
|
||||
|
||||
const fragment = document.createDocumentFragment();
|
||||
const parent = new Parent();
|
||||
await parent.mount(fragment);
|
||||
expect(parent.el.outerHTML).toBe("<div></div>");
|
||||
|
||||
parent.child = "c1";
|
||||
parent.render();
|
||||
await Promise.resolve();
|
||||
|
||||
parent.child = "c2";
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>C2</span></div>");
|
||||
});
|
||||
|
||||
test("unmount component during a re-rendering", async () => {
|
||||
const def = makeDeferred();
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
Child.prototype.__render = jest.fn(Child.prototype.__render);
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child val="state.val"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1 });
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
|
||||
expect(Child.prototype.__render).toBeCalledTimes(1);
|
||||
|
||||
parent.state.val = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
|
||||
|
||||
parent.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(Child.prototype.__render).toBeCalledTimes(1);
|
||||
});
|
||||
|
||||
test("widget can be mounted on different target", async () => {
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
patched() {
|
||||
throw new Error("patched should not be called");
|
||||
}
|
||||
}
|
||||
const div = document.createElement("div");
|
||||
const span = document.createElement("span");
|
||||
fixture.appendChild(div);
|
||||
fixture.appendChild(span);
|
||||
const w = new MyWidget();
|
||||
await w.mount(div);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div>Hey</div></div><span></span>");
|
||||
|
||||
await w.mount(span);
|
||||
expect(fixture.innerHTML).toBe("<div></div><span><div>Hey</div></span>");
|
||||
});
|
||||
|
||||
test("widget can be mounted on different target, another situation", async () => {
|
||||
const def = makeDeferred();
|
||||
const steps: string[] = [];
|
||||
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
async willStart() {
|
||||
return def;
|
||||
}
|
||||
patched() {
|
||||
throw new Error("patched should not be called");
|
||||
}
|
||||
}
|
||||
const div = document.createElement("div");
|
||||
const span = document.createElement("span");
|
||||
fixture.appendChild(div);
|
||||
fixture.appendChild(span);
|
||||
const w = new MyWidget();
|
||||
|
||||
w.mount(div).catch(() => steps.push("1 catch"));
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div><span></span>");
|
||||
|
||||
w.mount(span).then(() => steps.push("2 resolved"));
|
||||
|
||||
// we wait two microticks because this is the number of internal promises
|
||||
// that need to be resolved/rejected, and because we want to prove here
|
||||
// that the first mount operation is cancelled immediately, and not after
|
||||
// one full tick.
|
||||
await nextMicroTick();
|
||||
await nextMicroTick();
|
||||
expect(steps).toEqual([]);
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div><span></span>");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["2 resolved"]);
|
||||
expect(fixture.innerHTML).toBe("<div></div><span><div>Hey</div></span>");
|
||||
});
|
||||
|
||||
test("component can be mounted on same target, another situation", async () => {
|
||||
const def = makeDeferred();
|
||||
const steps: string[] = [];
|
||||
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
async willStart() {
|
||||
return def;
|
||||
}
|
||||
patched() {
|
||||
throw new Error("patched should not be called");
|
||||
}
|
||||
}
|
||||
const w = new MyWidget();
|
||||
|
||||
w.mount(fixture).then(() => steps.push("1 resolved"));
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
w.mount(fixture).then(() => steps.push("2 resolved"));
|
||||
|
||||
await nextTick();
|
||||
expect(steps).toEqual([]);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>Hey</div>");
|
||||
expect(steps).toEqual(["1 resolved", "2 resolved"]);
|
||||
});
|
||||
|
||||
test("mounting a destroyed widget", async () => {
|
||||
class MyWidget extends Component {
|
||||
static template = xml`<div>Hey</div>`;
|
||||
}
|
||||
const w = new MyWidget();
|
||||
w.destroy(); // because, why not
|
||||
|
||||
let error;
|
||||
try {
|
||||
await w.mount(fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(scheduler.tasks.length).toBe(0);
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Cannot mount a destroyed component");
|
||||
});
|
||||
|
||||
test("destroying a sub-component cleans itself from parent's vnode", async () => {
|
||||
class C1 extends Component {
|
||||
static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
|
||||
}
|
||||
class P extends Component {
|
||||
static components = { C1 };
|
||||
static template = xml`<div><div><C1 t-props="state" t-if="state.a"/></div></div>`;
|
||||
state = {
|
||||
a: "first",
|
||||
};
|
||||
}
|
||||
const parent = new P();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.textContent).toBe("first");
|
||||
parent.unmount();
|
||||
parent.state.a = "";
|
||||
parent.mount(fixture);
|
||||
parent.state.a = "fixed";
|
||||
await parent.render();
|
||||
expect(fixture.textContent).toBe("fixed");
|
||||
});
|
||||
|
||||
test("destroying a sub-component cleans itself from parent's vnode, part 2", async () => {
|
||||
class C1 extends Component {
|
||||
static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
|
||||
}
|
||||
class P extends Component {
|
||||
static components = { C1 };
|
||||
static template = xml`<div><div><C1 t-props="state" t-if="state.a"/>some text</div></div>`;
|
||||
state = {
|
||||
a: "first",
|
||||
};
|
||||
}
|
||||
const parent = new P();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.textContent).toBe("firstsome text");
|
||||
parent.unmount();
|
||||
parent.state.a = "";
|
||||
parent.mount(fixture);
|
||||
parent.state.a = "fixed";
|
||||
await parent.render();
|
||||
expect(fixture.textContent).toBe("fixedsome text");
|
||||
});
|
||||
|
||||
test("destroying a sub-component cleans itself from parent's vnode, part 3", async () => {
|
||||
class C1 extends Component {
|
||||
static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
|
||||
}
|
||||
|
||||
class C2 extends Component {
|
||||
static template = xml`<C1 a="props.a"/>`;
|
||||
static components = { C1 };
|
||||
}
|
||||
|
||||
class P extends Component {
|
||||
static components = { C2 };
|
||||
static template = xml`<div><div><C2 t-props="state" t-if="state.a"/></div></div>`;
|
||||
state = {
|
||||
a: "first",
|
||||
};
|
||||
}
|
||||
const parent = new P();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.textContent).toBe("first");
|
||||
parent.unmount();
|
||||
parent.state.a = "";
|
||||
parent.mount(fixture);
|
||||
parent.state.a = "fixed";
|
||||
await parent.render();
|
||||
expect(fixture.textContent).toBe("fixed");
|
||||
});
|
||||
|
||||
test("destroying a sub-component cleans itself from parent's vnode, part 4", async () => {
|
||||
class C1 extends Component {
|
||||
static template = xml`<div><div><t t-esc="props.a"/></div></div>`;
|
||||
}
|
||||
|
||||
class C2 extends Component {
|
||||
static template = xml`<C1 a="props.a"/>`;
|
||||
static components = { C1 };
|
||||
}
|
||||
class P extends Component {
|
||||
static components = { C2 };
|
||||
static template = xml`<div><div><C2 t-props="state" t-if="state.a"/>some text</div></div>`;
|
||||
state = {
|
||||
a: "first",
|
||||
};
|
||||
}
|
||||
const parent = new P();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.textContent).toBe("firstsome text");
|
||||
parent.unmount();
|
||||
parent.state.a = "";
|
||||
parent.mount(fixture);
|
||||
parent.state.a = "fixed";
|
||||
await parent.render();
|
||||
expect(fixture.textContent).toBe("fixedsome text");
|
||||
});
|
||||
|
||||
test("remounting component tree where a component implement shouldupdate", async () => {
|
||||
let state: any;
|
||||
const steps = [];
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="state.word"/><t t-esc="props.name"/></div>`;
|
||||
|
||||
state = useState({ word: "hello" });
|
||||
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
state = this.state;
|
||||
}
|
||||
patched() {
|
||||
steps.push("patched");
|
||||
}
|
||||
mounted() {
|
||||
steps.push("mounted");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("willUnmount");
|
||||
}
|
||||
shouldUpdate() {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child name="state.name"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ name: "World" });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, { target: fixture });
|
||||
expect(fixture.innerHTML).toBe("<div><div>helloWorld</div></div>");
|
||||
|
||||
parent.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>helloWorld</div></div>");
|
||||
|
||||
state.word = "test";
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>testWorld</div></div>");
|
||||
expect(steps).toEqual(["mounted", "willUnmount", "mounted", "patched"]);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,15 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`app destroy remove the widget from the DOM 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,929 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`basics Multi root component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<span>1</span>\`);
|
||||
let block4 = createBlock(\`<span>2</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = block2();
|
||||
let b3 = text(\`text\`);
|
||||
let b4 = block4();
|
||||
return multi([b2, b3, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics a class component inside a class component, no external dom 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics a class component inside a class component, no external dom 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics a component cannot be mounted in a detached node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics a component inside a component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics a component inside a component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can be clicked on and updated 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].counter;
|
||||
const v1 = ctx['state'];
|
||||
let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can handle empty props 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can handle empty props 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {val: undefined}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can mount a component with just some text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`just text\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can mount a component with no text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can mount a simple component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can mount a simple component with multiple roots 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<span/>\`);
|
||||
let block3 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = block2();
|
||||
let b3 = block3();
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can mount a simple component with props 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].value;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics cannot mount on a documentFragment 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>content</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics child can be updated 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(ctx['props'].value);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics child can be updated 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {value: ctx['state'].counter}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics class component with dynamic text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>My value: <block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics class parent, class child component with props 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].value;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics class parent, class child component with props 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {value: 42}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics component with dynamic content can be updated 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics do not remove previously rendered dom if not necessary 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics do not remove previously rendered dom if not necessary, variation 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><h1>h1</h1><span><block-text-0/></span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].value;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics has no el after creation 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics higher order components parent and child 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>a</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics higher order components parent and child 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics higher order components parent and child 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['props'].child==='a') {
|
||||
b2 = component(\`ChildA\`, {}, key + \`__1\`, node, ctx);
|
||||
} else {
|
||||
b3 = component(\`ChildB\`, {}, key + \`__2\`, node, ctx);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics higher order components parent and child 4`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {child: ctx['state'].child}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics parent, child and grandchild 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>hey</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics parent, child and grandchild 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics parent, child and grandchild 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics props is set on root component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics reconciliation alg is not confused in some specific situation 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics reconciliation alg is not confused in some specific situation 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics same t-keys in two different places 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].blip;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics same t-keys in two different places 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><div><block-child-0/></div><div><block-child-1/></div></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {blip: '1'}, key + \`__1\`, node, ctx);
|
||||
let b3 = component(\`Child\`, {blip: '2'}, key + \`__2\`, node, ctx);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics simple component with a dynamic text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics simple component, useState 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].value;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics some simple sanity checks (el/status) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-elif works with t-component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-elif works with t-component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = block2();
|
||||
} else if (!ctx['state'].flag) {
|
||||
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-else with empty string works with t-component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-else with empty string works with t-component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = block2();
|
||||
} else {
|
||||
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-else works with t-component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-else works with t-component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<div>somediv</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = block2();
|
||||
} else {
|
||||
b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-if works with t-component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-if works with t-component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-key on a component with t-if, and a sibling component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-key on a component with t-if, and a sibling component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (false) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics text after a conditional component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p>simple vnode</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics text after a conditional component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><span><block-text-0/></span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
let d1 = ctx['state'].text;
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics three level of components with collapsing root nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics three level of components with collapsing root nodes 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics three level of components with collapsing root nodes 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics throws if mounting on target=null 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics two child components 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics two child components 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
let b3 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics updating a component with t-foreach as root 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList(ctx['items']);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`item\`] = v1[i1];
|
||||
let key1 = ctx['item'];
|
||||
c1[i1] = withKey(text(ctx['item']), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics widget after a t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics widget after a t-foreach 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(Array(2));
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`elem\`] = v2[i1];
|
||||
ctx[\`elem_index\`] = i1;
|
||||
let key1 = ctx['elem_index'];
|
||||
c2[i1] = withKey(text(\`txt\`), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b2 = list(c2);
|
||||
let b4 = component(\`SomeComponent\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics zero or one child components 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics zero or one child components 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,31 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`basics no component catching error lead to full app destruction 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>hey<block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].flag&&ctx['state'].this.will.crash;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics no component catching error lead to full app destruction 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ErrorComponent\`, {flag: ctx['state'].flag}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,78 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`event handling can set handler on sub component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`event handling can set handler on sub component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let h2 = [\`click\`, ctx, 'inc'];
|
||||
let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
|
||||
let b3 = text(ctx['state'].value);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`event handling handler receive the event as argument 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>simple vnode</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`event handling handler receive the event as argument 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let h2 = [\`click\`, ctx, 'inc'];
|
||||
let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
|
||||
let b3 = text(ctx['state'].value);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`event handling support for callable expression in event handler 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><input type=\\"text\\" block-handler-1=\\"input\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].value;
|
||||
const v1 = ctx['obj'];
|
||||
let d2 = (e) => {const res = (() => { return v1.onInput })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,191 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`basics basic use 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child<block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].p;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics basic use 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>CHILD 1</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>CHILD 2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['env'].flag) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
if (!ctx['env'].flag) {
|
||||
b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>CHILD 1</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget, part 2 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>CHILD 2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics can select a sub widget, part 2 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
if (!ctx['state'].flag) {
|
||||
b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics sub widget is interactive 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><button block-handler-0=\\"click\\">click</button>child<block-text-1/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'inc'];
|
||||
let d2 = ctx['state'].val;
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics sub widget is interactive 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {p: 1}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics top level sub widget with a parent 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>Hello</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics top level sub widget with a parent 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`ComponentC\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics top level sub widget with a parent 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ComponentB\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,641 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`lifecycle hooks basic checks for a component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>test</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].ok) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].n;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks components are unmounted and destroyed if no longer in DOM, even after updateprops 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].flag) {
|
||||
let b3 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
|
||||
b2 = block2([], [b3]);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks hooks are called in proper order in widget creation/destruction 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 2 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 2 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 3 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 3 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 4 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 4 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`GrandChild\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 4 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 5 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 5 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].hasChild) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 6 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks lifecycle semantics, part 6 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called if mounted in DOM 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called on subcomponents, in proper order 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ChildChild\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks mounted hook is called on subsubcomponents, in proper order 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks onRender 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\"><block-text-1/></button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'increment'];
|
||||
let d2 = ctx['state'].value;
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks onRender 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks patched hook is called after updateProps 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks patched hook is called after updateProps 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {a: ctx['state'].a}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks patched hook is called after updating State 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].n;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ChildChild\`, {n: ctx['props'].n}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willPatch, patched hook are called on subsubcomponents, in proper order 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart hook is called on sub component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart hook is called on sub component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart is called 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart is called with component as this 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>simple vnode</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willStart, mounted on subwidget rendered after main is mounted in some other position 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block3 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].ok) {
|
||||
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
} else {
|
||||
b3 = block3();
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willUpdateProps hook is called 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].n;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`lifecycle hooks willUpdateProps hook is called 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {n: ctx['state'].n}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,160 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`basics accept ES6-like syntax for props (with getters) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].greetings;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics accept ES6-like syntax for props (with getters) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {greetings: ctx['greetings']}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics explicit object prop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].someval;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics explicit object prop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {value: ctx['state'].val}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set with a body expression can be passed in props, and then t-raw 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
let b2 = html(ctx['props'].val);
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set with a body expression can be passed in props, and then t-raw 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>43</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = block2();
|
||||
ctx[\`abc\`] = b2;
|
||||
let b3 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set with a body expression can be used as textual prop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set with a body expression can be used as textual prop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`abc\`] = \`42\`;
|
||||
let b2 = component(\`Child\`, {val: ctx['abc']}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set works 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`basics t-set works 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`val\`] = 42;
|
||||
let b2 = component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,43 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`refs refs are properly bound in slots 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callSlot(ctx, node, key, 'footer');
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`refs refs are properly bound in slots 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><span class=\\"counter\\"><block-text-0/></span><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\" block-ref=\\"1\\">do something</button>\`);
|
||||
|
||||
const slot3 = ctx => node => {
|
||||
const refs = ctx.__owl__.refs
|
||||
let d2 = [ctx, 'doSomething'];
|
||||
let d3 = (el) => refs[\`myButton\`] = el;
|
||||
return block2([d2, d3]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let d1 = ctx['state'].val;
|
||||
const ctx2 = capture(ctx);
|
||||
let b3 = assign(component(\`Dialog\`, {}, key + \`__1\`, node, ctx), {slots: {'footer': slot3(ctx2)}});
|
||||
return block1([d1], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,395 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`style and class handling can set class on multi root component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div>a</div>\`);
|
||||
let block3 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = block2();
|
||||
let d1 = ctx['props'].class;
|
||||
let b3 = block3([d1]);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on multi root component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on sub component, as prop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on sub component, as prop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'some-class'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on sub sub component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">childchild</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on sub sub component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`ChildChild\`, {class: (ctx['props'].class||'')+' fromchild'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set class on sub sub component 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'fromparent'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set more than one class on sub component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set more than one class on sub component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'a b'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling can set style and class inside component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div style=\\"font-weight:bold;\\" class=\\"some-class\\">world</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class on sub component, which is switched to another 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">a</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class on sub component, which is switched to another 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span block-attribute-0=\\"class\\">b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class on sub component, which is switched to another 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['props'].child==='a') {
|
||||
b2 = component(\`ChildA\`, {class: ctx['props'].class}, key + \`__1\`, node, ctx);
|
||||
} else {
|
||||
b3 = component(\`ChildB\`, {class: ctx['props'].class}, key + \`__2\`, node, ctx);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class on sub component, which is switched to another 4`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'someclass',child: ctx['state'].child}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class with extra whitespaces (variation) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class with extra whitespaces (variation) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {class: 'a b c d'}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class with extra whitespaces 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling class with extra whitespaces 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'a b c d'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling component class and parent class combine together 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"child\\" block-attribute-0=\\"class\\">child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling component class and parent class combine together 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'from parent'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling empty class attribute is not added on widget root el 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling empty class attribute is not added on widget root el 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {class: undefined}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling no class is set is child ignores it 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling no class is set is child ignores it 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {class: 'hey'}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling no class is set is parent does not give it as prop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\">child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].class;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling no class is set is parent does not give it as prop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span class=\\"c\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {d:ctx['state'].d,...ctx['props'].class};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`style and class handling t-att-class is properly added/removed on widget root el (v2) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {class: {b:ctx['state'].b}}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,292 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-call dynamic t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b1 = text(\` owl \`);
|
||||
ctx[zero] = b1;
|
||||
const template2 = (ctx['current'].template);
|
||||
return call(template2, ctx, node, key + \`__1\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call dynamic t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>foo</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call dynamic t-call 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`bar\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call handlers are properly bound through a t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'update'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call handlers are properly bound through a t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`__template__9\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
let d1 = ctx['counter'];
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call handlers with arguments are properly bound through a t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [ctx['a']];
|
||||
let d1 = [ctx, 'update', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call handlers with arguments are properly bound through a t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`__template__9\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>lucas</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`__template__9\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call with no parentNode 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call with no parentNode 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>lucas</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call parent is set within t-call with no parentNode 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`__template__9\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return callTemplate_2(ctx, node, key + \`__1\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call sub components in two t-calls 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call sub components in two t-calls 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
const callTemplate_4 = getTemplate(\`sub\`);
|
||||
|
||||
let block3 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['state'].val===1) {
|
||||
b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
} else {
|
||||
let b4 = callTemplate_4(ctx, node, key + \`__3\`);
|
||||
b3 = block3([], [b4]);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call sub components in two t-calls 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {val: ctx['state'].val}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call t-call in t-foreach and children component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return component(\`Child\`, {val: ctx['val']}, key + \`__1\`, node, ctx);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call t-call in t-foreach and children component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-call t-call in t-foreach and children component 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`__template__9\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(['a','b','c']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`val\`] = v2[i1];
|
||||
ctx[\`val_first\`] = i1 === 0;
|
||||
ctx[\`val_last\`] = i1 === v2.length - 1;
|
||||
ctx[\`val_index\`] = i1;
|
||||
ctx[\`val_value\`] = k2[i1];
|
||||
let key1 = ctx['val'];
|
||||
c2[i1] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}\`), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,16 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-call-block simple t-call-block with static text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = ctx['myBlock']();
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,226 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-component can switch between dynamic components without the need for a t-key 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child a</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can switch between dynamic components without the need for a t-key 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can switch between dynamic components without the need for a t-key 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['constructor'].components[ctx['state'].child];
|
||||
let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child a</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>child b</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given (with different root tagname) 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['myComponent'];
|
||||
return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child a</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span>child b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component can use dynamic components (the class) if given 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['myComponent'];
|
||||
return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component modifying a sub widget 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><button block-handler-1=\\"click\\">Inc</button></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].counter;
|
||||
const v1 = ctx['state'];
|
||||
let d2 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component modifying a sub widget 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['Counter'];
|
||||
let b2 = toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component switching dynamic component 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>child a</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component switching dynamic component 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`child b\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component switching dynamic component 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['Child'];
|
||||
return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component t-component works in simple case 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>child</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-component t-component works in simple case 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let Comp2 = ctx['Child'];
|
||||
return toggler(Comp2, component(Comp2, {}, key + \`__1\`, node, ctx));
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,244 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`list of components components in a node in a t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].item;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components components in a node in a t-foreach 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><ul><block-child-0/></ul></div>\`);
|
||||
let block3 = createBlock(\`<li><block-child-0/></li>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['items']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = 'li_'+ctx['item'];
|
||||
let b4 = component(\`Child\`, {item: ctx['item']}, key + \`__1__\${key1}\`, node, ctx);
|
||||
c2[i1] = withKey(block3([], [b4]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-foreach in t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].blip;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-foreach in t-foreach 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['state'].s);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`section\`] = v2[i1];
|
||||
ctx[\`section_index\`] = i1;
|
||||
let key1 = ctx['section_index'];
|
||||
ctx = Object.create(ctx);
|
||||
const [k3, v3, l3, c3] = prepareList(ctx['section'].blips);
|
||||
for (let i2 = 0; i2 < l3; i2++) {
|
||||
ctx[\`blip\`] = v3[i2];
|
||||
ctx[\`blip_index\`] = i2;
|
||||
let key2 = ctx['blip_index'];
|
||||
c3[i2] = withKey(component(\`Child\`, {blip: ctx['blip']}, key + \`__1__\${key1}__\${key2}\`, node, ctx), key2);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
c2[i1] = withKey(list(c3), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].row+'_'+ctx['props'].col;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components reconciliation alg works for t-foreach in t-foreach, 2 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
let block5 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['state'].rows);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`row\`] = v2[i1];
|
||||
let key1 = ctx['row'];
|
||||
ctx = Object.create(ctx);
|
||||
const [k4, v4, l4, c4] = prepareList(ctx['state'].cols);
|
||||
for (let i2 = 0; i2 < l4; i2++) {
|
||||
ctx[\`col\`] = v4[i2];
|
||||
let key2 = ctx['col'];
|
||||
let b6 = component(\`Child\`, {row: ctx['row'],col: ctx['col']}, key + \`__1__\${key1}__\${key2}\`, node, ctx);
|
||||
c4[i2] = withKey(block5([], [b6]), key2);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b4 = list(c4);
|
||||
c2[i1] = withKey(block3([], [b4]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components simple list 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].value;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components simple list 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList(ctx['state'].elems);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`elem\`] = v1[i1];
|
||||
let key1 = ctx['elem'].id;
|
||||
c1[i1] = withKey(component(\`Child\`, {value: ctx['elem'].value}, key + \`__1__\${key1}\`, node, ctx), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components rendered in a loop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].n;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components rendered in a loop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['state'].numbers);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`number\`] = v2[i1];
|
||||
let key1 = ctx['number'];
|
||||
c2[i1] = withKey(component(\`Child\`, {n: ctx['number']}, key + \`__1__\${key1}\`, node, ctx), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components with some state rendered in a loop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['state'].n;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`list of components sub components with some state rendered in a loop 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['state'].numbers);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`number\`] = v2[i1];
|
||||
let key1 = ctx['number'];
|
||||
c2[i1] = withKey(component(\`Child\`, {}, key + \`__1__\${key1}\`, node, ctx), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,28 @@
|
||||
import { App, Component } from "../../src";
|
||||
import { status } from "../../src/component/status";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("app", () => {
|
||||
test("destroy remove the widget from the DOM", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
|
||||
const app = new App(SomeComponent);
|
||||
const comp = await app.mount(fixture);
|
||||
const el = comp.el!;
|
||||
expect(document.contains(el)).toBe(true);
|
||||
app.destroy();
|
||||
expect(document.contains(el)).toBe(false);
|
||||
expect(status(comp)).toBe("destroyed");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,657 @@
|
||||
import { App, Component, mount, status, useState } from "../../src";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("basics", () => {
|
||||
test("can mount a simple component", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>simple vnode</span>");
|
||||
expect(component.el).toEqual(fixture.querySelector("span"));
|
||||
});
|
||||
|
||||
test("has no el after creation", async () => {
|
||||
let el: any = null;
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple</span>`;
|
||||
setup() {
|
||||
el = this.el;
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(el).toBeUndefined();
|
||||
});
|
||||
|
||||
test("cannot mount on a documentFragment", async () => {
|
||||
class SomeWidget extends Component {
|
||||
static template = xml`<div>content</div>`;
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
await mount(SomeWidget, document.createDocumentFragment() as any);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Cannot mount component: the target is not a valid DOM element");
|
||||
});
|
||||
|
||||
test("can mount a simple component with props", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span><t t-esc="props.value"/></span>`;
|
||||
}
|
||||
|
||||
const app = new App(Test, { value: 3 });
|
||||
const component = await app.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>3</span>");
|
||||
expect(component.el).toEqual(fixture.querySelector("span"));
|
||||
});
|
||||
|
||||
test("can mount a component with just some text", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`just text`;
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("just text");
|
||||
expect(component.el).toBeInstanceOf(Text);
|
||||
});
|
||||
|
||||
test("can mount a component with no text", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<t></t>`;
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(component.el).toBeInstanceOf(Text);
|
||||
});
|
||||
|
||||
test("can mount a simple component with multiple roots", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span></span><div></div>`;
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span></span><div></div>");
|
||||
expect((component.el as any).tagName).toBe("SPAN");
|
||||
});
|
||||
|
||||
test("component with dynamic content can be updated", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span><t t-esc="value"/></span>`;
|
||||
value = 1;
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>1</span>");
|
||||
|
||||
component.value = 2;
|
||||
await component.render();
|
||||
expect(fixture.innerHTML).toBe("<span>2</span>");
|
||||
});
|
||||
|
||||
test("updating a component with t-foreach as root", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<t t-foreach="items" t-as="item" t-key="item">
|
||||
<t t-esc="item"/>
|
||||
</t>`;
|
||||
items = ["one", "two", "three"];
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("onetwothree");
|
||||
component.items = ["two", "three", "one"];
|
||||
await component.render();
|
||||
expect(fixture.innerHTML).toBe("twothreeone");
|
||||
});
|
||||
|
||||
test("props is set on root component", async () => {
|
||||
expect.assertions(2);
|
||||
const p = {};
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
setup() {
|
||||
expect(this.props).toBe(p);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Test, p);
|
||||
await app.mount(fixture);
|
||||
});
|
||||
|
||||
test("some simple sanity checks (el/status)", async () => {
|
||||
expect.assertions(4);
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
setup() {
|
||||
expect(this.el).toBe(undefined);
|
||||
expect(status(this)).toBe("new");
|
||||
}
|
||||
}
|
||||
|
||||
const test = await mount(Test, fixture);
|
||||
expect(status(test)).toBe("mounted");
|
||||
});
|
||||
|
||||
test("throws if mounting on target=null", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
}
|
||||
|
||||
let error;
|
||||
try {
|
||||
await mount(Test, null as any);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Cannot mount component: the target is not a valid DOM element");
|
||||
});
|
||||
|
||||
test("a component cannot be mounted in a detached node", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
let error;
|
||||
try {
|
||||
await mount(Test, document.createElement("div"));
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe("Cannot mount a component on a detached dom node");
|
||||
});
|
||||
|
||||
test("crashes if it cannot find a template", async () => {
|
||||
class Test extends Component {
|
||||
static template = "wrongtemplate";
|
||||
}
|
||||
|
||||
let error;
|
||||
try {
|
||||
await mount(Test, fixture);
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(error).toBeDefined();
|
||||
expect(error.message).toBe('Missing template: "wrongtemplate"');
|
||||
});
|
||||
|
||||
test("class component with dynamic text", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span>My value: <t t-esc="value"/></span>`;
|
||||
|
||||
value = 42;
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>My value: 42</span>");
|
||||
});
|
||||
|
||||
test("Multi root component", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<span>1</span>text<span>2</span>`;
|
||||
|
||||
value = 42;
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<span>1</span>text<span>2</span>`);
|
||||
});
|
||||
|
||||
test("a component inside a component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<span><Child/></span>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span><div>simple vnode</div></span>");
|
||||
});
|
||||
|
||||
test("a class component inside a class component, no external dom", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>");
|
||||
});
|
||||
|
||||
test("simple component with a dynamic text", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-esc="value" /></div>`;
|
||||
value = 3;
|
||||
}
|
||||
|
||||
const test = await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
test.value = 5;
|
||||
await test.render();
|
||||
expect(fixture.innerHTML).toBe("<div>5</div>");
|
||||
});
|
||||
|
||||
test("simple component, useState", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-esc="state.value" /></div>`;
|
||||
state = useState({ value: 3 });
|
||||
}
|
||||
|
||||
const test = await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
test.state.value = 5;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>5</div>");
|
||||
});
|
||||
|
||||
test("two child components", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child/><Child/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div><div>simple vnode</div>");
|
||||
});
|
||||
|
||||
test("class parent, class child component with props", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="props.value" /></div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child value="42" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>42</div>");
|
||||
});
|
||||
|
||||
test("parent, child and grandchild", async () => {
|
||||
class GrandChild extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
}
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<GrandChild />`;
|
||||
static components = { GrandChild };
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
});
|
||||
|
||||
test("zero or one child components", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.hasChild"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: false });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
parent.state.hasChild = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>");
|
||||
});
|
||||
|
||||
test("text after a conditional component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<p>simple vnode</p>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child t-if="state.hasChild"/>
|
||||
<span t-esc="state.text"/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: false, text: "1" });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
|
||||
|
||||
parent.state.hasChild = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><p>simple vnode</p><span>1</span></div>");
|
||||
|
||||
parent.state.hasChild = false;
|
||||
parent.state.text = "2";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
|
||||
});
|
||||
|
||||
test("can be clicked on and updated", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.counter"/><button t-on-click="state.counter++">Inc</button></div>`;
|
||||
state = useState({
|
||||
counter: 0,
|
||||
});
|
||||
}
|
||||
|
||||
const counter = await mount(Counter, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>0<button>Inc</button></div>");
|
||||
const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
|
||||
button.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>1<button>Inc</button></div>");
|
||||
});
|
||||
|
||||
test("can handle empty props", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child val=""/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span></span></div>");
|
||||
});
|
||||
|
||||
test("child can be updated", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.value"/>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child value="state.counter"/>`;
|
||||
static components = { Child };
|
||||
state = useState({
|
||||
counter: 0,
|
||||
});
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("0");
|
||||
|
||||
parent.state.counter = 1;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("1");
|
||||
});
|
||||
|
||||
test("higher order components parent and child", async () => {
|
||||
class ChildA extends Component {
|
||||
static template = xml`<div>a</div>`;
|
||||
}
|
||||
class ChildB extends Component {
|
||||
static template = xml`<span>b</span>`;
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<ChildA t-if="props.child==='a'"/><ChildB t-else=""/>`;
|
||||
static components = { ChildA, ChildB };
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child child="state.child" />`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({ child: "a" });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div>a</div>`);
|
||||
parent.state.child = "b";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<span>b</span>`);
|
||||
});
|
||||
|
||||
test("three level of components with collapsing root nodes", async () => {
|
||||
class GrandChild extends Component {
|
||||
static template = xml`<div>2</div>`;
|
||||
}
|
||||
class Child extends Component {
|
||||
static components = { GrandChild };
|
||||
static template = xml`<GrandChild/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<Child></Child>`;
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
|
||||
test("do not remove previously rendered dom if not necessary", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
const widget = await mount(SomeComponent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div></div>`);
|
||||
widget.el!.appendChild(document.createElement("span"));
|
||||
expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
|
||||
await widget.render();
|
||||
expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
|
||||
});
|
||||
|
||||
test("do not remove previously rendered dom if not necessary, variation", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div><h1>h1</h1><span><t t-esc="state.value"/></span></div>`;
|
||||
state = useState({ value: 1 });
|
||||
}
|
||||
const comp = await mount(SomeComponent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><h1>h1</h1><span>1</span></div>`);
|
||||
(comp.el! as any).querySelector("h1")!.appendChild(document.createElement("p"));
|
||||
expect(fixture.innerHTML).toBe("<div><h1>h1<p></p></h1><span>1</span></div>");
|
||||
|
||||
comp.state.value++;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><h1>h1<p></p></h1><span>2</span></div>");
|
||||
});
|
||||
|
||||
test("reconciliation alg is not confused in some specific situation", async () => {
|
||||
// in this test, we set t-key to 4 because it was in conflict with the
|
||||
// template id corresponding to the first child.
|
||||
class Child extends Component {
|
||||
static template = xml`<span>child</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child />
|
||||
<Child t-key="4"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>child</span><span>child</span></div>");
|
||||
});
|
||||
|
||||
test("same t-keys in two different places", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.blip"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<div><Child t-key="1" blip="'1'"/></div>
|
||||
<div><Child t-key="1" blip="'2'"/></div>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div><span>1</span></div><div><span>2</span></div></div>");
|
||||
});
|
||||
|
||||
test("t-key on a component with t-if, and a sibling component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>child</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child t-if="false" t-key="'str'"/>
|
||||
<Child/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>child</span></div>");
|
||||
});
|
||||
|
||||
test("widget after a t-foreach", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-foreach="Array(2)" t-as="elem" t-key="elem_index">txt</t><SomeComponent/></div>`;
|
||||
static components = { SomeComponent };
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>txttxt<div></div></div>");
|
||||
});
|
||||
|
||||
test("t-if works with t-component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>hey</span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child t-if="state.flag"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
parent.state.flag = true;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
});
|
||||
|
||||
test("t-else works with t-component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>hey</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<div t-if="state.flag">somediv</div>
|
||||
<Child t-else=""/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
});
|
||||
|
||||
test("t-elif works with t-component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>hey</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<div t-if="state.flag">somediv</div>
|
||||
<Child t-elif="!state.flag" />
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
});
|
||||
|
||||
test("t-else with empty string works with t-component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>hey</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<div t-if="state.flag">somediv</div>
|
||||
<Child t-else="" />
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><div>somediv</div></div>");
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>hey</span></div>");
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,51 @@
|
||||
import { App, Component, mount, xml } from "../../src";
|
||||
import { makeTestFixture } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("env handling", () => {
|
||||
test("keeps a reference to env", async () => {
|
||||
const env = {};
|
||||
class Test extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
const app = new App(Test);
|
||||
app.configure({ env });
|
||||
const component = await app.mount(fixture);
|
||||
expect(component.env).toBe(env);
|
||||
});
|
||||
|
||||
test("has an env by default", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<div/>`;
|
||||
}
|
||||
const component = await mount(Test, fixture);
|
||||
expect(component.env).toEqual({});
|
||||
});
|
||||
|
||||
test("parent env is propagated to child components", async () => {
|
||||
const env = {};
|
||||
let child: any = null;
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
child = this;
|
||||
}
|
||||
}
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<Child/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
const app = new App(Test);
|
||||
app.configure({ env });
|
||||
await app.mount(fixture);
|
||||
expect(child.env).toBe(env);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,42 @@
|
||||
import { Component, mount } from "../../src";
|
||||
import { status } from "../../src/component/status";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("basics", () => {
|
||||
test("no component catching error lead to full app destruction", async () => {
|
||||
class ErrorComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="props.flag and state.this.will.crash"/></div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><ErrorComponent flag="state.flag"/></div>`;
|
||||
static components = { ErrorComponent };
|
||||
state = { flag: false };
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>heyfalse</div></div>");
|
||||
parent.state.flag = true;
|
||||
|
||||
let error;
|
||||
try {
|
||||
await parent.render();
|
||||
} catch (e) {
|
||||
error = e;
|
||||
}
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(status(parent)).toBe("destroyed");
|
||||
expect(error).toBeDefined();
|
||||
const regexp =
|
||||
/Cannot read properties of undefined \(reading 'this'\)|Cannot read property 'this' of undefined/g;
|
||||
expect(error.message).toMatch(regexp);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,75 @@
|
||||
import { makeTestFixture, snapshotEverything, nextTick } from "../helpers";
|
||||
import { mount, Component, useState, xml } from "../../src/index";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("event handling", () => {
|
||||
test("can set handler on sub component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ value: 1 });
|
||||
inc() {
|
||||
this.state.value++;
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
|
||||
|
||||
fixture.querySelector("div")!.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
|
||||
});
|
||||
|
||||
test("handler receive the event as argument", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>simple vnode</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ value: 1 });
|
||||
inc(ev: any) {
|
||||
this.state.value++;
|
||||
expect(ev.type).toBe("click");
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
|
||||
|
||||
fixture.querySelector("div")!.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
|
||||
});
|
||||
|
||||
test("support for callable expression in event handler", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.value"/><input type="text" t-on-input="obj.onInput"/></div>`;
|
||||
state = useState({ value: "" });
|
||||
obj = { onInput: (ev: any) => (this.state.value = ev.target.value) };
|
||||
}
|
||||
|
||||
const counter = await mount(Counter, fixture);
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<div><input type="text"></div>`);
|
||||
const input = (<HTMLElement>counter.el).getElementsByTagName("input")[0];
|
||||
input.value = "test";
|
||||
input.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<div>test<input type="text"></div>`);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,119 @@
|
||||
import { App, Component, mount, useState } from "../../src";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("basics", () => {
|
||||
test("basic use", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>child<t t-esc="props.p"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child p="1"/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>child1</span>");
|
||||
});
|
||||
|
||||
test("sub widget is interactive", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<span>
|
||||
<button t-on-click="inc">click</button>child<t t-esc="state.val"/>
|
||||
</span>`;
|
||||
state = useState({ val: 1 });
|
||||
inc() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child p="1"/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span><button>click</button>child1</span>");
|
||||
const button = fixture.querySelector("button")!;
|
||||
button.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span><button>click</button>child2</span>");
|
||||
});
|
||||
|
||||
test("can select a sub widget ", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>CHILD 1</span>`;
|
||||
}
|
||||
class OtherChild extends Component {
|
||||
static template = xml`<div>CHILD 2</div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t>
|
||||
<t t-if="env.flag"><Child /></t>
|
||||
<t t-if="!env.flag"><OtherChild /></t>
|
||||
</t>
|
||||
`;
|
||||
static components = { Child, OtherChild };
|
||||
}
|
||||
const env = { flag: true };
|
||||
const app = new App(Parent);
|
||||
app.configure({ env });
|
||||
const parent = await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
|
||||
|
||||
env.flag = false;
|
||||
await parent.render();
|
||||
expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
|
||||
});
|
||||
|
||||
test("can select a sub widget, part 2", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span>CHILD 1</span>`;
|
||||
}
|
||||
class OtherChild extends Component {
|
||||
static template = xml`<div>CHILD 2</div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t>
|
||||
<t t-if="state.flag"><Child /></t>
|
||||
<t t-if="!state.flag"><OtherChild /></t>
|
||||
</t>
|
||||
`;
|
||||
state = useState({ flag: true });
|
||||
static components = { Child, OtherChild };
|
||||
}
|
||||
let parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
|
||||
});
|
||||
|
||||
test("top level sub widget with a parent", async () => {
|
||||
class ComponentC extends Component {
|
||||
static template = xml`<span>Hello</span>`;
|
||||
}
|
||||
class ComponentB extends Component {
|
||||
static template = xml`<ComponentC />`;
|
||||
static components = { ComponentC };
|
||||
}
|
||||
class ComponentA extends Component {
|
||||
static template = xml`<div><ComponentB/></div>`;
|
||||
static components = { ComponentB };
|
||||
}
|
||||
|
||||
await mount(ComponentA, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>Hello</span></div>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,912 @@
|
||||
import { App, Component, mount, onMounted, onWillStart, useState } from "../../src";
|
||||
import {
|
||||
onWillPatch,
|
||||
onWillUnmount,
|
||||
onPatched,
|
||||
onWillUpdateProps,
|
||||
onRender,
|
||||
} from "../../src/lifecycle_hooks";
|
||||
import { status } from "../../src/component/status";
|
||||
import { xml } from "../../src/tags";
|
||||
import {
|
||||
makeDeferred,
|
||||
makeTestFixture,
|
||||
nextTick,
|
||||
snapshotEverything,
|
||||
useLogLifecycle,
|
||||
} from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("lifecycle hooks", () => {
|
||||
test("basic checks for a component", async () => {
|
||||
expect.assertions(6); // 1 for snapshots
|
||||
class Test extends Component {
|
||||
static template = xml`<span>test</span>`;
|
||||
|
||||
setup() {
|
||||
expect(status(this)).toBe("new");
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Test);
|
||||
|
||||
const component = await app.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>test</span>");
|
||||
expect(status(component)).toBe("mounted");
|
||||
|
||||
app.destroy();
|
||||
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(status(component)).toBe("destroyed");
|
||||
});
|
||||
|
||||
test("willStart is called", async () => {
|
||||
let willstart = false;
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
setup() {
|
||||
onWillStart(() => {
|
||||
willstart = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(willstart).toBe(true);
|
||||
});
|
||||
|
||||
test("willStart hook is called on sub component", async () => {
|
||||
let ok = false;
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
onWillStart(() => {
|
||||
ok = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(ok).toBe(true);
|
||||
});
|
||||
|
||||
test("willStart is called with component as this", async () => {
|
||||
expect.assertions(3);
|
||||
let comp: any;
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<span>simple vnode</span>`;
|
||||
setup() {
|
||||
comp = this;
|
||||
onWillStart(this.willStart);
|
||||
}
|
||||
|
||||
willStart() {
|
||||
expect(this).toBeInstanceOf(Test);
|
||||
expect(this).toBe(comp);
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
});
|
||||
|
||||
test("mounted hook is called if mounted in DOM", async () => {
|
||||
let mounted = false;
|
||||
class Test extends Component {
|
||||
static template = xml`<div/>`;
|
||||
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
mounted = true;
|
||||
});
|
||||
}
|
||||
}
|
||||
await mount(Test, fixture);
|
||||
expect(mounted).toBe(true);
|
||||
});
|
||||
|
||||
test("mounted hook is called on subcomponents, in proper order", async () => {
|
||||
const steps: any[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
expect(document.body.contains(this.el!)).toBe(true);
|
||||
steps.push("child:mounted");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /></div>`;
|
||||
static components = { Child };
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
steps.push("parent:mounted");
|
||||
});
|
||||
}
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(steps).toEqual(["child:mounted", "parent:mounted"]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("mounted hook is called on subsubcomponents, in proper order", async () => {
|
||||
const steps: any[] = [];
|
||||
|
||||
class ChildChild extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
steps.push("childchild:mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("childchild:willUnmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div><ChildChild /></div>`;
|
||||
static components = { ChildChild };
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
steps.push("child:mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("child:willUnmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><t t-if="state.flag"><Child/></t></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: false });
|
||||
setup() {
|
||||
onMounted(() => {
|
||||
steps.push("parent:mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("parent:willUnmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
const widget = await app.mount(fixture);
|
||||
expect(steps).toEqual(["parent:mounted"]);
|
||||
widget.state.flag = true;
|
||||
await nextTick();
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"parent:mounted",
|
||||
"childchild:mounted",
|
||||
"child:mounted",
|
||||
"parent:willUnmount",
|
||||
"child:willUnmount",
|
||||
"childchild:willUnmount",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("willPatch, patched hook are called on subsubcomponents, in proper order", async () => {
|
||||
const steps: any[] = [];
|
||||
|
||||
class ChildChild extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="props.n"/></div>
|
||||
`;
|
||||
|
||||
setup() {
|
||||
onWillPatch(() => {
|
||||
steps.push("childchild:willPatch");
|
||||
});
|
||||
onPatched(() => {
|
||||
steps.push("childchild:patched");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<div><ChildChild n="props.n"/></div>
|
||||
`;
|
||||
static components = { ChildChild };
|
||||
|
||||
setup() {
|
||||
onWillPatch(() => {
|
||||
steps.push("child:willPatch");
|
||||
});
|
||||
onPatched(() => {
|
||||
steps.push("child:patched");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div><Child n="state.n"/></div>
|
||||
`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({ n: 1 });
|
||||
|
||||
setup() {
|
||||
onWillPatch(() => {
|
||||
steps.push("parent:willPatch");
|
||||
});
|
||||
onPatched(() => {
|
||||
steps.push("parent:patched");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
const parent = await app.mount(fixture);
|
||||
expect(steps).toEqual([]);
|
||||
parent.state.n = 2;
|
||||
await nextTick();
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"parent:willPatch",
|
||||
"child:willPatch",
|
||||
"childchild:willPatch",
|
||||
"childchild:patched",
|
||||
"child:patched",
|
||||
"parent:patched",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
|
||||
setup() {
|
||||
onWillStart(() => {
|
||||
steps.push("child:willStart");
|
||||
});
|
||||
onMounted(() => {
|
||||
steps.push("child:mounted");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
// the t-else part in the template is important. This is
|
||||
// necessary to have a situation that could confuse the vdom
|
||||
// patching algorithm
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.ok">
|
||||
<Child />
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
static components = { Child };
|
||||
state = useState({ ok: false });
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(steps).toEqual([]);
|
||||
parent.state.ok = true;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["child:willStart", "child:mounted"]);
|
||||
Object.freeze(steps);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("components are unmounted and destroyed if no longer in DOM", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
steps.push("setup");
|
||||
onWillStart(() => {
|
||||
steps.push("willstart");
|
||||
});
|
||||
onMounted(() => {
|
||||
steps.push("mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("willunmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-if="state.ok"><Child /></t>`;
|
||||
static components = { Child };
|
||||
state = useState({ ok: true });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(steps).toEqual(["setup", "willstart", "mounted"]);
|
||||
parent.state.ok = false;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["setup", "willstart", "mounted", "willunmount"]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("components are unmounted and destroyed if no longer in DOM, even after updateprops", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.n"/></span>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div t-if="state.flag">
|
||||
<Child n="state.n"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { Child };
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
state = useState({ n: 0, flag: true });
|
||||
increment() {
|
||||
this.state.n += 1;
|
||||
}
|
||||
toggleSubWidget() {
|
||||
this.state.flag = !this.state.flag;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
|
||||
parent.increment();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
|
||||
parent.toggleSubWidget();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
"Parent:render",
|
||||
"Child:willUpdateProps",
|
||||
"Child:render",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
"Parent:patched",
|
||||
"Parent:render",
|
||||
"Parent:willPatch",
|
||||
"Child:willUnmount",
|
||||
"Child:destroyed",
|
||||
"Parent:patched",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("hooks are called in proper order in widget creation/destruction", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
steps.push("c init");
|
||||
onWillStart(() => {
|
||||
steps.push("c willstart");
|
||||
});
|
||||
onMounted(() => {
|
||||
steps.push("c mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("c willunmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child/></div>`;
|
||||
static components = { Child };
|
||||
setup() {
|
||||
steps.push("p init");
|
||||
onWillStart(() => {
|
||||
steps.push("p willstart");
|
||||
});
|
||||
onMounted(() => {
|
||||
steps.push("p mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("p willunmount");
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
await app.mount(fixture);
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"p init",
|
||||
"p willstart",
|
||||
"c init",
|
||||
"c willstart",
|
||||
"c mounted",
|
||||
"p mounted",
|
||||
"p willunmount",
|
||||
"c willunmount",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("willUpdateProps hook is called", async () => {
|
||||
let def = makeDeferred();
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.n"/></span>`;
|
||||
|
||||
setup() {
|
||||
onWillUpdateProps((nextProps) => {
|
||||
expect(nextProps.n).toBe(2);
|
||||
return def;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child n="state.n"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ n: 1 });
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>1</span>");
|
||||
parent.state.n = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>1</span>");
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>2</span>");
|
||||
});
|
||||
|
||||
test("patched hook is called after updating State", async () => {
|
||||
let n = 0;
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<div/>`;
|
||||
state = useState({ a: 1 });
|
||||
|
||||
setup() {
|
||||
onPatched(() => n++);
|
||||
}
|
||||
}
|
||||
const widget = await mount(Test, fixture);
|
||||
expect(n).toBe(0);
|
||||
|
||||
widget.state.a = 1; // empty update, should do nothing
|
||||
await nextTick();
|
||||
expect(n).toBe(0);
|
||||
|
||||
widget.state.a = 3;
|
||||
await nextTick();
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
|
||||
test("patched hook is called after updateProps", async () => {
|
||||
let n = 0;
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
onWillUpdateProps(() => {
|
||||
n++;
|
||||
});
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child a="state.a"/></div>`;
|
||||
state = useState({ a: 1 });
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
const widget = await mount(Parent, fixture);
|
||||
expect(n).toBe(0);
|
||||
|
||||
widget.state.a = 2;
|
||||
await nextTick();
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
|
||||
test("lifecycle semantics", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child a="state.a"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ a: 1 });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
await app.mount(fixture);
|
||||
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]);
|
||||
|
||||
steps.splice(0);
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"Parent:willUnmount",
|
||||
"Child:willUnmount",
|
||||
"Child:destroyed",
|
||||
"Parent:destroyed",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("lifecycle semantics, part 2", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class GrandChild extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<GrandChild/>`;
|
||||
static components = { GrandChild };
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.hasChild"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: false });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
const parent = await app.mount(fixture);
|
||||
|
||||
expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
parent.state.hasChild = true;
|
||||
await nextTick();
|
||||
expect(steps).toEqual([
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"GrandChild:setup",
|
||||
"GrandChild:willStart",
|
||||
"GrandChild:render",
|
||||
"Parent:willPatch",
|
||||
"GrandChild:mounted",
|
||||
"Child:mounted",
|
||||
"Parent:patched",
|
||||
]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"Parent:willUnmount",
|
||||
"Child:willUnmount",
|
||||
"GrandChild:willUnmount",
|
||||
"GrandChild:destroyed",
|
||||
"Child:destroyed",
|
||||
"Parent:destroyed",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("lifecycle semantics, part 3", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class GrandChild extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<GrandChild/>`;
|
||||
static components = { GrandChild };
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.hasChild"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: false });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
const parent = await app.mount(fixture);
|
||||
|
||||
expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
parent.state.hasChild = true;
|
||||
|
||||
// immediately destroy everything
|
||||
app.destroy();
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["Parent:willUnmount", "Parent:destroyed"]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("lifecycle semantics, part 4", async () => {
|
||||
let def = makeDeferred();
|
||||
|
||||
let steps: string[] = [];
|
||||
|
||||
class GrandChild extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
onWillStart(() => def);
|
||||
}
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<GrandChild/>`;
|
||||
static components = { GrandChild };
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.hasChild"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: false });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const app = new App(Parent);
|
||||
const parent = await app.mount(fixture);
|
||||
|
||||
expect(steps).toEqual(["Parent:setup", "Parent:willStart", "Parent:render", "Parent:mounted"]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
parent.state.hasChild = true;
|
||||
|
||||
await nextTick();
|
||||
expect(steps).toEqual([
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"GrandChild:setup",
|
||||
"GrandChild:willStart",
|
||||
]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
app.destroy();
|
||||
expect(steps).toEqual([
|
||||
"Parent:willUnmount",
|
||||
"GrandChild:destroyed",
|
||||
"Child:destroyed",
|
||||
"Parent:destroyed",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("lifecycle semantics, part 5", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.hasChild"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ hasChild: true });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
parent.state.hasChild = false;
|
||||
|
||||
await nextTick();
|
||||
expect(steps).toEqual([
|
||||
"Parent:render",
|
||||
"Parent:willPatch",
|
||||
"Child:willUnmount",
|
||||
"Child:destroyed",
|
||||
"Parent:patched",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("lifecycle semantics, part 6", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div/>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child value="state.value" />`;
|
||||
static components = { Child };
|
||||
state = useState({ value: 1 });
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]);
|
||||
|
||||
steps.splice(0);
|
||||
|
||||
parent.state.value = 2;
|
||||
|
||||
await nextTick();
|
||||
expect(steps).toEqual([
|
||||
"Parent:render",
|
||||
"Child:willUpdateProps",
|
||||
"Child:render",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
"Parent:patched",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
|
||||
test("onRender", async () => {
|
||||
let steps: string[] = [];
|
||||
const def = makeDeferred();
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<button t-on-click="increment"><t t-esc="state.value"/></button>`;
|
||||
state = useState({ value: 1 });
|
||||
visibleState = this.state.value;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
onWillUpdateProps(() => def);
|
||||
onRender(() => (this.visibleState = this.state.value));
|
||||
}
|
||||
increment() {
|
||||
this.state.value++;
|
||||
steps.push(`inc:${this.visibleState}`);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<Child />`;
|
||||
static components = { Child };
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<button>1</button>");
|
||||
|
||||
parent.render(); // to block child render
|
||||
await nextTick();
|
||||
|
||||
fixture.querySelector("button")!.click();
|
||||
|
||||
await nextTick();
|
||||
fixture.querySelector("button")!.click();
|
||||
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<button>1</button>");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<button>3</button>");
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
"Parent:render",
|
||||
"Child:willUpdateProps",
|
||||
"inc:1",
|
||||
"inc:1",
|
||||
"Child:render",
|
||||
"Parent:willPatch",
|
||||
"Child:willPatch",
|
||||
"Child:patched",
|
||||
"Parent:patched",
|
||||
]);
|
||||
Object.freeze(steps);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,105 @@
|
||||
import { Component, mount, useState } from "../../src";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("basics", () => {
|
||||
test("explicit object prop", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="state.someval"/></span>`;
|
||||
state: any;
|
||||
setup() {
|
||||
this.state = useState({ someval: this.props.value });
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child value="state.val"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 42 });
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
|
||||
});
|
||||
|
||||
test("accept ES6-like syntax for props (with getters)", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.greetings"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child greetings="greetings"/></div>`;
|
||||
static components = { Child };
|
||||
get greetings() {
|
||||
const name = "aaron";
|
||||
return `hello ${name}`;
|
||||
}
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>hello aaron</span></div>");
|
||||
});
|
||||
|
||||
test("t-set works ", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-set="val" t-value="42"/>
|
||||
<Child val="val"/>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
|
||||
});
|
||||
|
||||
test("t-set with a body expression can be used as textual prop", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span t-esc="props.val"/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-set="abc">42</t>
|
||||
<Child val="abc"/>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
|
||||
});
|
||||
|
||||
test("t-set with a body expression can be passed in props, and then t-raw", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<span>
|
||||
<t t-esc="props.val"/>
|
||||
<t t-raw="props.val"/>
|
||||
</span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-set="abc"><p>43</p></t>
|
||||
<Child val="abc"/>
|
||||
</div>`;
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span><p>43</p><p>43</p></span></div>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,47 @@
|
||||
import { Component, mount, useRef, useState } from "../../src/index";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
import { xml } from "../../src/index";
|
||||
|
||||
snapshotEverything();
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("refs", () => {
|
||||
test("refs are properly bound in slots", async () => {
|
||||
class Dialog extends Component {
|
||||
static template = xml`<span><t t-slot="footer"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<span class="counter"><t t-esc="state.val"/></span>
|
||||
<Dialog>
|
||||
<t t-set-slot="footer"><button t-ref="myButton" t-on-click="doSomething">do something</button></t>
|
||||
</Dialog>
|
||||
</div>
|
||||
`;
|
||||
static components = { Dialog };
|
||||
state = useState({ val: 0 });
|
||||
button = useRef("myButton");
|
||||
doSomething() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="counter">0</span><span><button>do something</button></span></div>'
|
||||
);
|
||||
|
||||
parent.button.el!.click();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe(
|
||||
'<div><span class="counter">1</span><span><button>do something</button></span></div>'
|
||||
);
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,237 @@
|
||||
import { Component, mount, useState, xml } from "../../src";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("style and class handling", () => {
|
||||
test("can set style and class inside component", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<div style="font-weight:bold;" class="some-class">world</div>
|
||||
`;
|
||||
}
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div style="font-weight:bold;" class="some-class">world</div>`);
|
||||
});
|
||||
|
||||
test("can set class on sub component, as prop", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-att-class="props.class">child</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'some-class'" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="some-class">child</div>`);
|
||||
});
|
||||
|
||||
test("no class is set is parent does not give it as prop", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-att-class="props.class">child</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div>child</div>`);
|
||||
});
|
||||
|
||||
test("no class is set is child ignores it", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>child</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'hey'"/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div>child</div>`);
|
||||
});
|
||||
|
||||
test("empty class attribute is not added on widget root el", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span t-att-class="props.class"/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child class=""/></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div><span></span></div>`);
|
||||
});
|
||||
|
||||
test("can set more than one class on sub component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-att-class="props.class">child</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'a b'" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="a b">child</div>`);
|
||||
});
|
||||
|
||||
test("component class and parent class combine together", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div class="child" t-att-class="props.class">child</div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'from parent'" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="child from parent">child</div>`);
|
||||
});
|
||||
|
||||
test("can set class on sub sub component", async () => {
|
||||
class ChildChild extends Component {
|
||||
static template = xml`<div t-att-class="props.class">childchild</div>`;
|
||||
}
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<ChildChild class="(props.class || '') + ' fromchild'" />`;
|
||||
static components = { ChildChild };
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'fromparent'" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="fromparent fromchild">childchild</div>`);
|
||||
});
|
||||
|
||||
test("can set class on multi root component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div>a</div><span t-att-class="props.class">b</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'fromparent'" />`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div>a</div><span class="fromparent">b</span>`);
|
||||
});
|
||||
|
||||
test("class on sub component, which is switched to another", async () => {
|
||||
class ChildA extends Component {
|
||||
static template = xml`<div t-att-class="props.class">a</div>`;
|
||||
}
|
||||
class ChildB extends Component {
|
||||
static template = xml`<span t-att-class="props.class">b</span>`;
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<ChildA class="props.class" t-if="props.child==='a'"/><ChildB class="props.class" t-else=""/>`;
|
||||
static components = { ChildA, ChildB };
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'someclass'" child="state.child" />`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({ child: "a" });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="someclass">a</div>`);
|
||||
parent.state.child = "b";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<span class="someclass">b</span>`);
|
||||
});
|
||||
|
||||
// test("t-att-class is properly added/removed on widget root el", async () => {
|
||||
// class Child extends Component {
|
||||
// static template = xml`<div class="c"/>`;
|
||||
// }
|
||||
// class Parent extends Component {
|
||||
// static template = xml`<div><Child t-att-class="{a:state.a, b:state.b}"/></div>`;
|
||||
// static components = { Child };
|
||||
// state = useState({ a: true, b: false });
|
||||
// }
|
||||
// const widget = await mount(Parent, fixture);
|
||||
// expect(fixture.innerHTML).toBe(`<div><div class="c a"></div></div>`);
|
||||
|
||||
// widget.state.a = false;
|
||||
// widget.state.b = true;
|
||||
// await nextTick();
|
||||
// expect(fixture.innerHTML).toBe(`<div><div class="c b"></div></div>`);
|
||||
// });
|
||||
|
||||
test("class with extra whitespaces", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-att-class="props.class"/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child class="'a b c d'"/>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<div class="a b c d"></div>`);
|
||||
});
|
||||
|
||||
test("class with extra whitespaces (variation)", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div t-att-class="props.class"/>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<p><Child class="'a b c d'"/></p>`;
|
||||
static components = { Child };
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(`<p><div class="a b c d"></div></p>`);
|
||||
});
|
||||
|
||||
test("t-att-class is properly added/removed on widget root el (v2)", async () => {
|
||||
let child: any = null;
|
||||
class Child extends Component {
|
||||
static template = xml`<span class="c" t-att-class="{ d: state.d, ...props.class }"/>`;
|
||||
state = useState({ d: true });
|
||||
setup() {
|
||||
child = this;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child class="{ b: state.b }" />
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ b: true });
|
||||
}
|
||||
const widget = await mount(Parent, fixture);
|
||||
|
||||
const span = fixture.querySelector("span")!;
|
||||
expect(span.className).toBe("c d b");
|
||||
|
||||
widget.state.b = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c d");
|
||||
|
||||
child.state.d = false;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c");
|
||||
|
||||
widget.state.b = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c b");
|
||||
|
||||
child.state.d = true;
|
||||
await nextTick();
|
||||
expect(span.className).toBe("c b d");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,165 @@
|
||||
import { App, Component, mount, useState, xml } from "../../src/index";
|
||||
import {
|
||||
addTemplate,
|
||||
isDirectChildOf,
|
||||
makeTestFixture,
|
||||
nextTick,
|
||||
snapshotEverything,
|
||||
} from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("t-call", () => {
|
||||
test("dynamic t-call", async () => {
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<t t-call="{{current.template}}">
|
||||
owl
|
||||
</t>`;
|
||||
current = useState({ template: "foo" });
|
||||
}
|
||||
addTemplate("foo", "<div>foo</div>");
|
||||
addTemplate("bar", "bar");
|
||||
|
||||
const app = await mount(App, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>foo</div>");
|
||||
|
||||
app.current.template = "bar";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("bar");
|
||||
});
|
||||
|
||||
test("sub components in two t-calls", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t t-if="state.val===1">
|
||||
<t t-call="sub"/>
|
||||
</t>
|
||||
<div t-else=""><t t-call="sub"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1 });
|
||||
}
|
||||
const app = new App(Parent);
|
||||
app.addTemplate("sub", `<Child val="state.val"/>`);
|
||||
|
||||
const parent = await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>1</span>");
|
||||
parent.state.val = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
|
||||
});
|
||||
|
||||
test("handlers are properly bound through a t-call", async () => {
|
||||
let parent: any;
|
||||
|
||||
const subTemplate = xml`<p t-on-click="update">lucas</p>`;
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div><t t-call="${subTemplate}"/><t t-esc="counter"/></div>`;
|
||||
counter = 0;
|
||||
|
||||
update() {
|
||||
expect(this).toBe(parent);
|
||||
this.counter++;
|
||||
this.render();
|
||||
}
|
||||
}
|
||||
parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p>lucas</p>0</div>");
|
||||
fixture.querySelector("p")!.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><p>lucas</p>1</div>");
|
||||
});
|
||||
|
||||
test("parent is set within t-call", async () => {
|
||||
const sub = xml`<Child/>`;
|
||||
let child: any = null;
|
||||
class Child extends Component {
|
||||
static template = xml`<span>lucas</span>`;
|
||||
setup() {
|
||||
child = this;
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<div><t t-call="${sub}"/></div>`;
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>lucas</span></div>");
|
||||
expect(isDirectChildOf(child, parent)).toBeTruthy();
|
||||
});
|
||||
|
||||
test("t-call in t-foreach and children component", async () => {
|
||||
const sub = xml`<Child val="val"/>`;
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-foreach="['a', 'b', 'c']" t-as="val" t-key="val">
|
||||
<t t-call="${sub}"/>
|
||||
</t>
|
||||
</div>`;
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><span>a</span><span>b</span><span>c</span></div>");
|
||||
});
|
||||
|
||||
test("parent is set within t-call with no parentNode", async () => {
|
||||
const sub = xml`<Child />`;
|
||||
|
||||
let child: any = null;
|
||||
|
||||
class Child extends Component {
|
||||
setup() {
|
||||
child = this;
|
||||
}
|
||||
static template = xml`<span>lucas</span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static components = { Child };
|
||||
static template = xml`<t t-call="${sub}"/>`;
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<span>lucas</span>");
|
||||
expect(isDirectChildOf(child, parent)).toBe(true);
|
||||
});
|
||||
|
||||
test("handlers with arguments are properly bound through a t-call", async () => {
|
||||
const sub = xml`<p t-on-click="update(a)">lucas</p>`;
|
||||
|
||||
let value: any = null;
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><t t-call="${sub}"/></div>`;
|
||||
update(a: any) {
|
||||
expect(this).toBe(parent);
|
||||
value = a;
|
||||
}
|
||||
a = 3;
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
fixture.querySelector("p")!.click();
|
||||
expect(value).toBe(3);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,25 @@
|
||||
import { text } from "../../src/blockdom";
|
||||
import { Component, mount, xml } from "../../src/index";
|
||||
import { makeTestFixture, snapshotEverything } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("t-call-block", () => {
|
||||
test("simple t-call-block with static text", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-call-block="myBlock()"/></div>`;
|
||||
myBlock() {
|
||||
return text("hello");
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Test, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hello</div>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,193 @@
|
||||
import { Component, mount, useState } from "../../src";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("t-component", () => {
|
||||
test("t-component works in simple case", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div>child</div>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-component="Child"/>`;
|
||||
Child = Child;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>child</div>");
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]);
|
||||
});
|
||||
|
||||
test("switching dynamic component", async () => {
|
||||
let steps: string[] = [];
|
||||
|
||||
class ChildA extends Component {
|
||||
static template = xml`<div>child a</div>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class ChildB extends Component {
|
||||
static template = xml`child b`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-component="Child"/>`;
|
||||
Child = ChildA;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>child a</div>");
|
||||
|
||||
parent.Child = ChildB;
|
||||
parent.render();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("child b");
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"ChildA:setup",
|
||||
"ChildA:willStart",
|
||||
"ChildA:render",
|
||||
"ChildA:mounted",
|
||||
"Parent:mounted",
|
||||
"Parent:render",
|
||||
"ChildB:setup",
|
||||
"ChildB:willStart",
|
||||
"ChildB:render",
|
||||
"Parent:willPatch",
|
||||
"ChildA:willUnmount",
|
||||
"ChildA:destroyed",
|
||||
"ChildB:mounted",
|
||||
"Parent:patched",
|
||||
]);
|
||||
});
|
||||
|
||||
test("can switch between dynamic components without the need for a t-key", async () => {
|
||||
class A extends Component {
|
||||
static template = xml`<span>child a</span>`;
|
||||
}
|
||||
class B extends Component {
|
||||
static template = xml`<span>child b</span>`;
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-component="constructor.components[state.child]"/>
|
||||
</div>`;
|
||||
static components = { A, B };
|
||||
|
||||
state = useState({ child: "A" });
|
||||
}
|
||||
const app = await mount(App, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>child a</span></div>");
|
||||
app.state.child = "B";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>child b</span></div>");
|
||||
});
|
||||
|
||||
test("can use dynamic components (the class) if given", async () => {
|
||||
class A extends Component {
|
||||
static template = xml`<span>child a</span>`;
|
||||
}
|
||||
class B extends Component {
|
||||
static template = xml`<span>child b</span>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
|
||||
state = useState({
|
||||
child: "a",
|
||||
});
|
||||
get myComponent() {
|
||||
return this.state.child === "a" ? A : B;
|
||||
}
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>child a</span>");
|
||||
parent.state.child = "b";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>child b</span>");
|
||||
});
|
||||
|
||||
test("can use dynamic components (the class) if given (with different root tagname)", async () => {
|
||||
class A extends Component {
|
||||
static template = xml`<span>child a</span>`;
|
||||
}
|
||||
class B extends Component {
|
||||
static template = xml`<div>child b</div>`;
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-component="myComponent" t-key="state.child"/>`;
|
||||
state = useState({
|
||||
child: "a",
|
||||
});
|
||||
get myComponent() {
|
||||
return this.state.child === "a" ? A : B;
|
||||
}
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>child a</span>");
|
||||
parent.state.child = "b";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>child b</div>");
|
||||
});
|
||||
|
||||
test("modifying a sub widget", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.counter"/><button t-on-click="state.counter++">Inc</button></div>`;
|
||||
state = useState({
|
||||
counter: 0,
|
||||
});
|
||||
}
|
||||
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`<div><t t-component="Counter"/></div>`;
|
||||
|
||||
get Counter() {
|
||||
return Counter;
|
||||
}
|
||||
}
|
||||
await mount(ParentWidget, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>0<button>Inc</button></div></div>");
|
||||
const button = fixture.getElementsByTagName("button")[0];
|
||||
await button.click();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><div>1<button>Inc</button></div></div>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,200 @@
|
||||
import { Component, mount, useState, xml } from "../../src/index";
|
||||
import { makeTestFixture, nextTick, snapshotEverything, useLogLifecycle } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("list of components", () => {
|
||||
test("simple list", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.value"/></span>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<t t-foreach="state.elems" t-as="elem" t-key="elem.id">
|
||||
<Child value="elem.value"/>
|
||||
</t>`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({
|
||||
elems: [
|
||||
{ id: 1, value: "a" },
|
||||
{ id: 2, value: "b" },
|
||||
],
|
||||
});
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
|
||||
parent.state.elems.push({ id: 4, value: "d" });
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>a</span><span>b</span><span>d</span>");
|
||||
|
||||
parent.state.elems.pop();
|
||||
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
|
||||
});
|
||||
|
||||
test("components in a node in a t-foreach ", async () => {
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="props.item"/></div>`;
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<ul>
|
||||
<t t-foreach="items" t-as="item" t-key="'li_'+item">
|
||||
<li>
|
||||
<Child item="item"/>
|
||||
</li>
|
||||
</t>
|
||||
</ul>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
|
||||
setup() {
|
||||
useLogLifecycle(steps);
|
||||
}
|
||||
|
||||
get items() {
|
||||
return [1, 2];
|
||||
}
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><ul><li><div>1</div></li><li><div>2</div></li></ul></div>"
|
||||
);
|
||||
expect(steps).toEqual([
|
||||
"Parent:setup",
|
||||
"Parent:willStart",
|
||||
"Parent:render",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:setup",
|
||||
"Child:willStart",
|
||||
"Child:render",
|
||||
"Child:render",
|
||||
"Child:mounted",
|
||||
"Child:mounted",
|
||||
"Parent:mounted",
|
||||
]);
|
||||
});
|
||||
|
||||
test("reconciliation alg works for t-foreach in t-foreach", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="props.blip"/></div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-foreach="state.s" t-as="section" t-key="section_index">
|
||||
<t t-foreach="section.blips" t-as="blip" t-key="blip_index">
|
||||
<Child blip="blip"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = { s: [{ blips: ["a1", "a2"] }, { blips: ["b1"] }] };
|
||||
}
|
||||
|
||||
await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>a1</div><div>a2</div><div>b1</div></div>");
|
||||
});
|
||||
|
||||
test("reconciliation alg works for t-foreach in t-foreach, 2", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="props.row + '_' + props.col"/></div>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<p t-foreach="state.rows" t-as="row" t-key="row">
|
||||
<p t-foreach="state.cols" t-as="col" t-key="col">
|
||||
<Child row="row" col="col"/>
|
||||
</p>
|
||||
</p>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
state = useState({ rows: [1, 2], cols: ["a", "b"] });
|
||||
}
|
||||
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><p><p><div>1_a</div></p><p><div>1_b</div></p></p><p><p><div>2_a</div></p><p><div>2_b</div></p></p></div>"
|
||||
);
|
||||
parent.state.rows = [2, 1];
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><p><p><div>2_a</div></p><p><div>2_b</div></p></p><p><p><div>1_a</div></p><p><div>1_b</div></p></p></div>"
|
||||
);
|
||||
});
|
||||
|
||||
test("sub components rendered in a loop", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<p><t t-esc="props.n"/></p>`;
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-foreach="state.numbers" t-as="number" t-key="number" >
|
||||
<Child n="number"/>
|
||||
</t>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({ numbers: [1, 2, 3] });
|
||||
}
|
||||
await mount(Parent, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe(`<div><p>1</p><p>2</p><p>3</p></div>`);
|
||||
});
|
||||
|
||||
test("sub components with some state rendered in a loop", async () => {
|
||||
let n = 1;
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<p><t t-esc="state.n"/></p>`;
|
||||
state: any;
|
||||
setup() {
|
||||
this.state = useState({ n });
|
||||
n++;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-foreach="state.numbers" t-as="number" t-key="number">
|
||||
<Child/>
|
||||
</t>
|
||||
</div>`;
|
||||
static components = { Child };
|
||||
|
||||
state = useState({
|
||||
numbers: [1, 2, 3],
|
||||
});
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
|
||||
parent.state.numbers = [1, 3];
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe(`<div><p>1</p><p>3</p></div>`);
|
||||
});
|
||||
});
|
||||
@@ -1,358 +0,0 @@
|
||||
import { makeDeferred, makeTestEnv, makeTestFixture, nextTick } from "./helpers";
|
||||
import { Component } from "../src/component/component";
|
||||
import { Context, useContext } from "../src/context";
|
||||
import { xml } from "../src/tags";
|
||||
import { useState } from "../src/hooks";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - a test env, necessary to create components, that is set as env
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
Component.env = makeTestEnv();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("Context", () => {
|
||||
test("very simple use, with initial value", async () => {
|
||||
const testContext = new Context({ value: 123 });
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-esc="contextObj.value"/></div>`;
|
||||
contextObj = useContext(testContext);
|
||||
}
|
||||
const test = new Test();
|
||||
await test.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>123</div>");
|
||||
});
|
||||
|
||||
test("useContext hook is reactive, for one component", async () => {
|
||||
const testContext = new Context({ value: 123 });
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`<div><t t-esc="contextObj.value"/></div>`;
|
||||
contextObj = useContext(testContext);
|
||||
}
|
||||
const test = new Test();
|
||||
await test.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>123</div>");
|
||||
test.contextObj.value = 321;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>321</div>");
|
||||
});
|
||||
|
||||
test("two components can subscribe to same context", async () => {
|
||||
const testContext = new Context({ value: 123 });
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj.value"/></span>`;
|
||||
contextObj = useContext(testContext);
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /><Child /></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
|
||||
testContext.state.value = 321;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>321</span><span>321</span></div>");
|
||||
});
|
||||
|
||||
test("two async components are updated in parallel", async () => {
|
||||
const testContext = new Context({ value: 123 });
|
||||
const def = makeDeferred();
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj.value"/></span>`;
|
||||
contextObj = useContext(testContext);
|
||||
async render() {
|
||||
steps.push("render");
|
||||
await def;
|
||||
return super.render();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /><Child /></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
|
||||
testContext.state.value = 321;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["render", "render"]);
|
||||
expect(fixture.innerHTML).toBe("<div><span>123</span><span>123</span></div>");
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>321</span><span>321</span></div>");
|
||||
});
|
||||
|
||||
test("two async components on two levels are updated (mostly) in parallel", async () => {
|
||||
const testContext = new Context({ value: 123 });
|
||||
const def = makeDeferred();
|
||||
const steps: string[] = [];
|
||||
|
||||
class SlowComp extends Component {
|
||||
static template = xml`<p><t t-esc="props.value"/></p>`;
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
class Child extends Component {
|
||||
static template = xml`<span><SlowComp value="contextObj.value"/></span>`;
|
||||
static components = { SlowComp };
|
||||
contextObj = useContext(testContext);
|
||||
|
||||
render() {
|
||||
steps.push("render");
|
||||
return super.render();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /><Child /></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
|
||||
class App extends Component {
|
||||
static template = xml`<div><Child /><Parent /></div>`;
|
||||
static components = { Child, Parent };
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><span><p>123</p></span><div><span><p>123</p></span><span><p>123</p></span></div></div>"
|
||||
);
|
||||
testContext.state.value = 321;
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["render"]);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><span><p>123</p></span><div><span><p>123</p></span><span><p>123</p></span></div></div>"
|
||||
);
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
// we need to wait for an extra tick because it could happen (even though it
|
||||
// is rare) that the second batch of renderings is not done yet, because
|
||||
// the initial promise has been given to the macrotask queue, so a small
|
||||
// delay happens.
|
||||
await nextTick();
|
||||
expect(steps).toEqual(["render", "render", "render"]);
|
||||
expect(fixture.innerHTML).toBe(
|
||||
"<div><span><p>321</p></span><div><span><p>321</p></span><span><p>321</p></span></div></div>"
|
||||
);
|
||||
});
|
||||
|
||||
test("one components can subscribe twice to same context", async () => {
|
||||
const testContext = new Context({ a: 1, b: 2 });
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj1.a"/><t t-esc="contextObj2.b"/></span>`;
|
||||
contextObj1 = useContext(testContext);
|
||||
contextObj2 = useContext(testContext);
|
||||
__render(fiber) {
|
||||
steps.push("child");
|
||||
return super.__render(fiber);
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /></div>`;
|
||||
static components = { Child };
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
|
||||
expect(steps).toEqual(["child"]);
|
||||
testContext.state.a = 3;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>32</span></div>");
|
||||
expect(steps).toEqual(["child", "child"]);
|
||||
});
|
||||
|
||||
test("parent and children subscribed to same context", async () => {
|
||||
const testContext = new Context({ a: 123, b: 321 });
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
|
||||
contextObj = useContext(testContext);
|
||||
__render(fiber) {
|
||||
steps.push("child");
|
||||
return super.__render(fiber);
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child /><t t-esc="contextObj.b"/></div>`;
|
||||
static components = { Child };
|
||||
contextObj = useContext(testContext);
|
||||
__render(fiber) {
|
||||
steps.push("parent");
|
||||
return super.__render(fiber);
|
||||
}
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>123</span>321</div>");
|
||||
expect(steps).toEqual(["parent", "child"]);
|
||||
|
||||
parent.contextObj.a = 124;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>124</span>321</div>");
|
||||
|
||||
// we only want one render from the child here, not two
|
||||
expect(steps).toEqual(["parent", "child", "parent", "child"]);
|
||||
});
|
||||
|
||||
test("destroyed component is inactive", async () => {
|
||||
const testContext = new Context({ a: 123 });
|
||||
const steps: string[] = [];
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
|
||||
contextObj = useContext(testContext);
|
||||
__render(fiber) {
|
||||
steps.push("child");
|
||||
return super.__render(fiber);
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child t-if="state.flag"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
__render(fiber) {
|
||||
steps.push("parent");
|
||||
return super.__render(fiber);
|
||||
}
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>123</span></div>");
|
||||
expect(steps).toEqual(["parent", "child"]);
|
||||
expect(testContext.subscriptions.update.length).toBe(1);
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(steps).toEqual(["parent", "child", "parent"]);
|
||||
// kind of whitebox...
|
||||
// we make sure we do not have any pending subscriptions to the 'update'
|
||||
// event
|
||||
expect(testContext.subscriptions.update.length).toBe(0);
|
||||
});
|
||||
|
||||
test("destroyed component before being mounted is inactive", async () => {
|
||||
const testContext = new Context({ a: 123 });
|
||||
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="contextObj.a"/></span>`;
|
||||
contextObj = useContext(testContext);
|
||||
willStart() {
|
||||
return makeDeferred();
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><Child t-if="state.flag"/></div>`;
|
||||
static components = { Child };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
const prom = parent.mount(fixture);
|
||||
await nextTick(); // wait for Child to be instantiated
|
||||
expect(testContext.subscriptions.update.length).toBe(1);
|
||||
parent.state.flag = false;
|
||||
await prom;
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
// kind of whitebox...
|
||||
// we make sure we do not have any pending subscriptions to the 'update'
|
||||
// event
|
||||
expect(testContext.subscriptions.update.length).toBe(0);
|
||||
});
|
||||
|
||||
test.skip("concurrent renderings", async () => {
|
||||
/**
|
||||
* Note: this test is interesting, but sadly just an incomplete attempt at
|
||||
* protecting users against themselves. With the context API, it is not
|
||||
* possible for the framework to protect completely against crashes. Maybe
|
||||
* like in this case, when a component is in a simple hierarchy where all
|
||||
* renderings come from the context changes, but in a real case, where some
|
||||
* code can trigger a rendering independently, it is insufficient.
|
||||
*
|
||||
* The main problem is that the sub component depends on some external state,
|
||||
* which may be modified, and then incompatible with the component actual
|
||||
* state (for example, if the sub component has an id key related to some
|
||||
* object that has been removed from the context).
|
||||
*
|
||||
* For now, sadly, the only solution is that components that depends on external
|
||||
* state should guarantee their own integrity themselves. Then maybe this
|
||||
* could be solved at the level of a state management solution that has a
|
||||
* more advanced API, to let components determine if they should be updated
|
||||
* or not (so, something slightly more advanced that the useStore hook).
|
||||
*/
|
||||
const testContext = new Context({ x: { n: 1 }, key: "x" });
|
||||
const def = makeDeferred();
|
||||
let stateC;
|
||||
class ComponentC extends Component {
|
||||
static template = xml`<span><t t-esc="context[props.key].n"/><t t-esc="state.x"/></span>`;
|
||||
context = useContext(testContext);
|
||||
state = useState({ x: "a" });
|
||||
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
stateC = this.state;
|
||||
}
|
||||
}
|
||||
class ComponentB extends Component {
|
||||
static components = { ComponentC };
|
||||
static template = xml`<p><ComponentC key="props.key"/></p>`;
|
||||
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
class ComponentA extends Component {
|
||||
static components = { ComponentB };
|
||||
static template = xml`<div><ComponentB key="context.key"/></div>`;
|
||||
context = useContext(testContext);
|
||||
}
|
||||
|
||||
const component = new ComponentA();
|
||||
await component.mount(fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p><span>1a</span></p></div>");
|
||||
testContext.state.key = "y";
|
||||
testContext.state.y = { n: 2 };
|
||||
delete testContext.state.x;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p><span>1a</span></p></div>");
|
||||
stateC.x = "b";
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p><span>1a</span></p></div>");
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div><p><span>2b</span></p></div>");
|
||||
});
|
||||
});
|
||||
@@ -1,45 +0,0 @@
|
||||
import { EventBus } from "../../src/core/event_bus";
|
||||
|
||||
describe("event bus behaviour", () => {
|
||||
test("can subscribe and be notified", () => {
|
||||
const bus = new EventBus();
|
||||
let notified = false;
|
||||
bus.on("event", {}, () => (notified = true));
|
||||
expect(notified).toBe(false);
|
||||
bus.trigger("event");
|
||||
expect(notified).toBe(true);
|
||||
});
|
||||
|
||||
test("callbacks are called with proper 'this'", () => {
|
||||
expect.assertions(1);
|
||||
const bus = new EventBus();
|
||||
const owner = {};
|
||||
bus.on("event", owner, function (this: any) {
|
||||
expect(this).toBe(owner);
|
||||
});
|
||||
bus.trigger("event");
|
||||
});
|
||||
|
||||
test("throw error if callback is undefined", () => {
|
||||
expect.assertions(1);
|
||||
const bus = new EventBus();
|
||||
expect(() => bus.on("event", {}, <any>undefined)).toThrow(`Missing callback`);
|
||||
});
|
||||
|
||||
test("can unsubscribe", () => {
|
||||
const bus = new EventBus();
|
||||
let notified = false;
|
||||
let owner = {};
|
||||
bus.on("event", owner, () => (notified = true));
|
||||
bus.off("event", owner);
|
||||
bus.trigger("event");
|
||||
expect(notified).toBe(false);
|
||||
});
|
||||
|
||||
test("arguments are properly propagated", () => {
|
||||
expect.assertions(1);
|
||||
const bus = new EventBus();
|
||||
bus.on("event", {}, (arg: any) => expect(arg).toBe("hello world"));
|
||||
bus.trigger("event", "hello world");
|
||||
});
|
||||
});
|
||||
@@ -1,449 +0,0 @@
|
||||
import { Observer } from "../../src/core/observer";
|
||||
import { nextMicroTick } from "../helpers";
|
||||
|
||||
describe("observer", () => {
|
||||
test("properly observe objects", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({});
|
||||
|
||||
expect(typeof obj).toBe("object");
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
const obj2: any = observer.observe({ a: 1 });
|
||||
expect(observer.revNumber(obj2)).toBe(1);
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
obj2.a = 2;
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.revNumber(obj2)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
expect(obj2).toEqual({
|
||||
a: 2,
|
||||
});
|
||||
});
|
||||
|
||||
test("properly handle null or undefined", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ a: null, b: undefined });
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
obj.a = 3;
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
obj.b = 5;
|
||||
expect(observer.revNumber(obj)).toBe(3);
|
||||
expect(observer.rev).toBe(3);
|
||||
|
||||
obj.a = null;
|
||||
obj.b = undefined;
|
||||
expect(observer.revNumber(obj)).toBe(5);
|
||||
expect(observer.rev).toBe(5);
|
||||
expect(obj).toEqual({
|
||||
a: null,
|
||||
b: undefined,
|
||||
});
|
||||
});
|
||||
|
||||
test("properly handle dates", () => {
|
||||
const observer = new Observer();
|
||||
const date = new Date();
|
||||
const obj: any = observer.observe({ date });
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(typeof obj.date.getFullYear()).toBe("number");
|
||||
expect(obj.date).toBe(date);
|
||||
|
||||
obj.date = new Date();
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(obj.date).not.toBe(date);
|
||||
});
|
||||
|
||||
test("properly handle promises (i.e.: treat them like primitive values", async () => {
|
||||
const observer = new Observer();
|
||||
let resolved = false;
|
||||
const prom = new Promise((r) => r());
|
||||
const obj: any = observer.observe({ prom });
|
||||
expect(obj.prom).toBeInstanceOf(Promise);
|
||||
|
||||
obj.prom.then(() => (resolved = true));
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
|
||||
expect(resolved).toBe(false);
|
||||
await Promise.resolve();
|
||||
expect(resolved).toBe(true);
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
});
|
||||
|
||||
test("can change values in array", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ arr: [1, 2] });
|
||||
|
||||
expect(Array.isArray(obj.arr)).toBe(true);
|
||||
expect(observer.revNumber(obj.arr)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
obj.arr[0] = "nope";
|
||||
expect(observer.revNumber(obj.arr)).toBe(2);
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
});
|
||||
|
||||
test("various object property changes", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ a: 1 });
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
obj.a = 2;
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
// same value again
|
||||
obj.a = 2;
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
obj.a = 3;
|
||||
expect(observer.revNumber(obj)).toBe(3);
|
||||
expect(observer.rev).toBe(3);
|
||||
});
|
||||
|
||||
test("properly observe arrays", () => {
|
||||
const observer = new Observer();
|
||||
const arr: any = observer.observe([]);
|
||||
|
||||
expect(Array.isArray(arr)).toBe(true);
|
||||
expect(arr.length).toBe(0);
|
||||
expect(observer.revNumber(arr)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
arr.push(1);
|
||||
expect(observer.revNumber(arr)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(arr.length).toBe(1);
|
||||
expect(arr).toEqual([1]);
|
||||
|
||||
arr.splice(1, 0, "hey");
|
||||
expect(observer.revNumber(arr)).toBe(3);
|
||||
expect(observer.rev).toBe(3);
|
||||
expect(arr).toEqual([1, "hey"]);
|
||||
expect(arr.length).toBe(2);
|
||||
|
||||
arr.unshift("lindemans");
|
||||
//it generates 3 primitive operations
|
||||
expect(observer.revNumber(arr)).toBe(6);
|
||||
expect(observer.rev).toBe(6);
|
||||
expect(arr).toEqual(["lindemans", 1, "hey"]);
|
||||
expect(arr.length).toBe(3);
|
||||
|
||||
arr.reverse();
|
||||
//it generates 2 primitive operations
|
||||
expect(observer.revNumber(arr)).toBe(8);
|
||||
expect(observer.rev).toBe(8);
|
||||
expect(arr).toEqual(["hey", 1, "lindemans"]);
|
||||
expect(arr.length).toBe(3);
|
||||
|
||||
arr.pop(); // one set, one delete
|
||||
expect(observer.revNumber(arr)).toBe(10);
|
||||
expect(observer.rev).toBe(10);
|
||||
expect(arr).toEqual(["hey", 1]);
|
||||
expect(arr.length).toBe(2);
|
||||
|
||||
arr.shift(); // 2 sets, 1 delete
|
||||
expect(observer.revNumber(arr)).toBe(13);
|
||||
expect(observer.rev).toBe(13);
|
||||
expect(arr).toEqual([1]);
|
||||
expect(arr.length).toBe(1);
|
||||
});
|
||||
|
||||
test("object pushed into arrays are observed", () => {
|
||||
const observer = new Observer();
|
||||
const arr: any = observer.observe([]);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
arr.push({ kriek: 5 });
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(arr)).toBe(2);
|
||||
expect(observer.revNumber(arr[0])).toBe(2);
|
||||
|
||||
arr[0].kriek = 6;
|
||||
|
||||
expect(observer.rev).toBe(3);
|
||||
expect(observer.revNumber(arr)).toBe(3);
|
||||
expect(observer.revNumber(arr[0])).toBe(3);
|
||||
});
|
||||
|
||||
test("set new property on observed object", async () => {
|
||||
const observer = new Observer();
|
||||
observer.notifyCB = jest.fn();
|
||||
const state: any = observer.observe({ a: 1 });
|
||||
expect(observer.notifyCB).toBeCalledTimes(0);
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state)).toBe(1);
|
||||
|
||||
state.b = 8;
|
||||
|
||||
await nextMicroTick();
|
||||
|
||||
expect(observer.notifyCB).toBeCalledTimes(1);
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state)).toBe(2);
|
||||
|
||||
expect(state.b).toBe(8);
|
||||
});
|
||||
|
||||
test("delete property from observed object", async () => {
|
||||
const observer = new Observer();
|
||||
observer.notifyCB = jest.fn();
|
||||
const state: any = observer.observe({ a: 1, b: 8 });
|
||||
observer.observe(state);
|
||||
|
||||
expect(observer.notifyCB).toBeCalledTimes(0);
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state)).toBe(1);
|
||||
|
||||
delete state.b;
|
||||
await nextMicroTick();
|
||||
|
||||
expect(observer.notifyCB).toBeCalledTimes(1);
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state)).toBe(2);
|
||||
|
||||
expect(state).toEqual({ a: 1 });
|
||||
});
|
||||
|
||||
test("set element in observed array", async () => {
|
||||
const observer = new Observer();
|
||||
observer.notifyCB = jest.fn();
|
||||
const state: any = observer.observe(["a"]);
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state)).toBe(1);
|
||||
expect(observer.notifyCB).toBeCalledTimes(0);
|
||||
|
||||
state[1] = "b";
|
||||
|
||||
await nextMicroTick();
|
||||
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state)).toBe(2);
|
||||
expect(observer.notifyCB).toBeCalledTimes(1);
|
||||
|
||||
expect(state).toEqual(["a", "b"]);
|
||||
});
|
||||
|
||||
test("properly observe arrays in object", () => {
|
||||
const observer = new Observer();
|
||||
const state: any = observer.observe({ arr: [] });
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state.arr)).toBe(1);
|
||||
expect(state.arr.length).toBe(0);
|
||||
|
||||
state.arr.push(1);
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state.arr)).toBe(2);
|
||||
expect(state.arr.length).toBe(1);
|
||||
});
|
||||
|
||||
test("properly observe objects in array", () => {
|
||||
const observer = new Observer();
|
||||
const state: any = observer.observe({ arr: [{ something: 1 }] });
|
||||
observer.observe(state);
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state.arr)).toBe(1);
|
||||
expect(observer.revNumber(state.arr[0])).toBe(1);
|
||||
|
||||
state.arr[0].something = 2;
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state.arr)).toBe(2);
|
||||
expect(observer.revNumber(state.arr[0])).toBe(2);
|
||||
});
|
||||
|
||||
test("properly observe objects in object", () => {
|
||||
const observer = new Observer();
|
||||
const state: any = observer.observe({ a: { b: 1 } });
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(state)).toBe(1);
|
||||
expect(observer.revNumber(state.a)).toBe(1);
|
||||
|
||||
state.a.b = 2;
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state)).toBe(2);
|
||||
expect(observer.revNumber(state.a)).toBe(2);
|
||||
});
|
||||
|
||||
test("reobserve new object values", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ a: 1 });
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
|
||||
obj.a = { b: 2 };
|
||||
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.revNumber(obj.a)).toBe(2);
|
||||
obj.a.b = 3;
|
||||
expect(observer.rev).toBe(3);
|
||||
expect(observer.revNumber(obj)).toBe(3);
|
||||
expect(observer.revNumber(obj.a)).toBe(3);
|
||||
});
|
||||
|
||||
test("deep observe misc changes", () => {
|
||||
const observer = new Observer();
|
||||
const state: any = observer.observe({ o: { a: 1 }, arr: [1], n: 13 });
|
||||
expect(observer.revNumber(state)).toBe(1);
|
||||
|
||||
state.o.a = 2;
|
||||
expect(observer.rev).toBe(2);
|
||||
expect(observer.revNumber(state)).toBe(2);
|
||||
|
||||
state.arr.push(2);
|
||||
expect(observer.rev).toBe(3);
|
||||
expect(observer.revNumber(state)).toBe(3);
|
||||
|
||||
state.n = 155;
|
||||
expect(observer.rev).toBe(4);
|
||||
expect(observer.revNumber(state)).toBe(4);
|
||||
});
|
||||
|
||||
test("properly handle already observed state", () => {
|
||||
const observer = new Observer();
|
||||
const obj1: any = observer.observe({ a: 1 });
|
||||
const obj2: any = observer.observe({ b: 1 });
|
||||
|
||||
expect(observer.revNumber(obj1)).toBe(1);
|
||||
expect(observer.revNumber(obj2)).toBe(1);
|
||||
|
||||
obj1.a = 2;
|
||||
obj2.b = 3;
|
||||
expect(observer.revNumber(obj1)).toBe(2);
|
||||
expect(observer.revNumber(obj2)).toBe(2);
|
||||
|
||||
obj2.b = obj1;
|
||||
expect(observer.revNumber(obj1)).toBe(2);
|
||||
expect(observer.revNumber(obj2)).toBe(3);
|
||||
});
|
||||
|
||||
test("can set a property more than once", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({});
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(1);
|
||||
expect(observer.rev).toBe(1);
|
||||
|
||||
obj.aku = "always finds annoying problems";
|
||||
expect(observer.revNumber(obj)).toBe(2);
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
obj.aku = "always finds good problems";
|
||||
|
||||
expect(observer.revNumber(obj)).toBe(3);
|
||||
expect(observer.rev).toBe(3);
|
||||
});
|
||||
|
||||
test("properly handle swapping elements", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ a: { arr: [] }, b: 1 });
|
||||
|
||||
// swap a and b
|
||||
const b = obj.b;
|
||||
obj.b = obj.a;
|
||||
obj.a = b;
|
||||
expect(observer.rev).toBe(3);
|
||||
|
||||
// push something into array to make sure it works
|
||||
obj.b.arr.push("blanche");
|
||||
expect(observer.rev).toBe(4);
|
||||
});
|
||||
|
||||
test("properly handle assigning observed obj containing array", () => {
|
||||
const observer = new Observer();
|
||||
const obj: any = observer.observe({ a: { arr: [], val: "test" } });
|
||||
|
||||
expect(observer.rev).toBe(1);
|
||||
obj.a = { ...obj.a, val: "test2" };
|
||||
expect(observer.rev).toBe(2);
|
||||
|
||||
// push something into array to make sure it works
|
||||
obj.a.arr.push("blanche");
|
||||
expect(observer.rev).toBe(3);
|
||||
});
|
||||
|
||||
test("accept cycles in observed state", () => {
|
||||
const observer = new Observer();
|
||||
let obj1: any = {};
|
||||
let obj2: any = { b: obj1, key: 1 };
|
||||
obj1.a = obj2;
|
||||
obj1 = observer.observe(obj1);
|
||||
obj2 = obj1.a;
|
||||
|
||||
expect(observer.revNumber(obj1)).toBe(1);
|
||||
expect(observer.revNumber(obj2)).toBe(1);
|
||||
|
||||
obj2.key = 3;
|
||||
expect(observer.revNumber(obj1)).toBe(2);
|
||||
expect(observer.revNumber(obj2)).toBe(2);
|
||||
});
|
||||
|
||||
test("call callback when state is changed", async () => {
|
||||
const observer = new Observer();
|
||||
observer.notifyCB = jest.fn();
|
||||
const obj: any = observer.observe({ a: 1, b: { c: 2 }, d: [{ e: 3 }], f: 4 });
|
||||
|
||||
expect(observer.notifyCB).toBeCalledTimes(0);
|
||||
|
||||
obj.a = 2;
|
||||
await nextMicroTick();
|
||||
expect(observer.notifyCB).toBeCalledTimes(1);
|
||||
|
||||
obj.b.c = 3;
|
||||
await nextMicroTick();
|
||||
expect(observer.notifyCB).toBeCalledTimes(2);
|
||||
|
||||
obj.d[0].e = 5;
|
||||
await nextMicroTick();
|
||||
expect(observer.notifyCB).toBeCalledTimes(3);
|
||||
|
||||
obj.a = 111;
|
||||
obj.f = 222;
|
||||
await nextMicroTick();
|
||||
expect(observer.notifyCB).toBeCalledTimes(5);
|
||||
});
|
||||
|
||||
test("throw error when state is mutated in object if allowMutation=false", async () => {
|
||||
const observer = new Observer();
|
||||
observer.allowMutations = false;
|
||||
const obj: any = observer.observe({ a: 1 });
|
||||
expect(() => {
|
||||
obj.a = 2;
|
||||
}).toThrow('Observed state cannot be changed here! (key: "a", val: "2")');
|
||||
});
|
||||
|
||||
test("throw error when state is mutated in array if allowMutation=false", async () => {
|
||||
const observer = new Observer();
|
||||
observer.allowMutations = false;
|
||||
const obj: any = observer.observe({ a: [1] });
|
||||
|
||||
expect(() => {
|
||||
obj.a.push(2);
|
||||
}).toThrow('Observed state cannot be changed here! (key: "1", val: "2")');
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,35 @@
|
||||
import { EventBus } from "../src/event_bus";
|
||||
|
||||
describe("event bus behaviour", () => {
|
||||
test("can subscribe and be notified", () => {
|
||||
const bus = new EventBus();
|
||||
let notified = false;
|
||||
bus.addEventListener("event", () => {
|
||||
notified = true;
|
||||
});
|
||||
expect(notified).toBe(false);
|
||||
bus.trigger("event");
|
||||
expect(notified).toBe(true);
|
||||
});
|
||||
|
||||
test("can unsubscribe", () => {
|
||||
const bus = new EventBus();
|
||||
let n = 0;
|
||||
let cb = () => n++;
|
||||
bus.addEventListener("event", cb);
|
||||
expect(n).toBe(0);
|
||||
bus.trigger("event");
|
||||
expect(n).toBe(1);
|
||||
bus.removeEventListener("event", cb);
|
||||
expect(n).toBe(1);
|
||||
bus.trigger("event");
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
|
||||
test("arguments are properly propagated", () => {
|
||||
expect.assertions(1);
|
||||
const bus = new EventBus();
|
||||
bus.addEventListener("event", (ev: any) => expect(ev.detail).toBe("hello world"));
|
||||
bus.trigger("event", "hello world");
|
||||
});
|
||||
});
|
||||
+161
-107
@@ -1,59 +1,49 @@
|
||||
import { Env, Component, STATUS } from "../src/component/component";
|
||||
import { scheduler } from "../src/component/scheduler";
|
||||
import { EvalContext, QWeb } from "../src/qweb/qweb";
|
||||
import { CompilationContext } from "../src/qweb/compilation_context";
|
||||
import { patch } from "../src/vdom";
|
||||
import "../src/qweb/base_directives";
|
||||
import "../src/qweb/extensions";
|
||||
import "../src/component/directive";
|
||||
import { browser } from "../src/browser";
|
||||
import {
|
||||
onDestroyed,
|
||||
onWillPatch,
|
||||
onWillUnmount,
|
||||
onMounted,
|
||||
onPatched,
|
||||
onWillStart,
|
||||
onWillUpdateProps,
|
||||
useComponent,
|
||||
status,
|
||||
onRender,
|
||||
Component,
|
||||
} from "../src";
|
||||
import { TemplateSet, globalTemplates, UTILS } from "../src/qweb/template_helpers";
|
||||
import { blockDom } from "../src";
|
||||
import { BDom } from "../src/blockdom";
|
||||
// import { mountBlock } from "../src/blockdom/block";
|
||||
import { compileTemplate, Template } from "../src/qweb/compiler";
|
||||
import { xml } from "../src/tags";
|
||||
// import { UTILS } from "../src/template_utils";
|
||||
|
||||
// Some static cleanup
|
||||
let nextSlotId;
|
||||
let slots;
|
||||
let nextId;
|
||||
let TEMPLATES;
|
||||
const mount = blockDom.mount;
|
||||
|
||||
beforeEach(() => {
|
||||
nextSlotId = QWeb.nextSlotId;
|
||||
CompilationContext.nextID = 1;
|
||||
slots = Object.assign({}, QWeb.slots);
|
||||
nextId = QWeb.nextId;
|
||||
TEMPLATES = Object.assign({}, QWeb.TEMPLATES);
|
||||
Component.scheduler.tasks = [];
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
QWeb.nextSlotId = nextSlotId;
|
||||
QWeb.slots = slots;
|
||||
QWeb.nextId = nextId;
|
||||
QWeb.TEMPLATES = TEMPLATES;
|
||||
Component.scheduler.tasks = [];
|
||||
});
|
||||
|
||||
// helpers
|
||||
export function nextMicroTick(): Promise<void> {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
export async function nextTick(): Promise<void> {
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
export async function nextFrame(): Promise<void> {
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
|
||||
}
|
||||
let lastFixture: any = null;
|
||||
|
||||
export function makeTestFixture() {
|
||||
let fixture = document.createElement("div");
|
||||
document.body.appendChild(fixture);
|
||||
if (lastFixture) {
|
||||
lastFixture.remove();
|
||||
}
|
||||
lastFixture = fixture;
|
||||
return fixture;
|
||||
}
|
||||
|
||||
export function normalize(str: string): string {
|
||||
return str.replace(/\s+/g, "");
|
||||
export function snapshotTemplateCode(template: string) {
|
||||
expect(compileTemplate(template).toString()).toMatchSnapshot();
|
||||
}
|
||||
|
||||
export async function nextTick(): Promise<void> {
|
||||
await new Promise((resolve) => setTimeout(resolve));
|
||||
await new Promise((resolve) => requestAnimationFrame(resolve));
|
||||
}
|
||||
|
||||
interface Deferred extends Promise<any> {
|
||||
@@ -67,85 +57,149 @@ export function makeDeferred(): Deferred {
|
||||
resolve = _resolve;
|
||||
reject = _reject;
|
||||
});
|
||||
(<Deferred>def).resolve = resolve;
|
||||
(<Deferred>def).reject = reject;
|
||||
(def as any).resolve = resolve;
|
||||
(def as any).reject = reject;
|
||||
return <Deferred>def;
|
||||
}
|
||||
|
||||
export function makeTestEnv(): Env {
|
||||
return {
|
||||
qweb: new QWeb(),
|
||||
browser: browser,
|
||||
};
|
||||
}
|
||||
/**
|
||||
* Return the global template xml string corresponding to the given name
|
||||
*/
|
||||
// export function fromName(name: string): string {
|
||||
// return globalTemplates[name];
|
||||
// }
|
||||
|
||||
export function trim(str: string): string {
|
||||
return str.replace(/\s/g, "");
|
||||
}
|
||||
|
||||
export function renderToDOM(
|
||||
qweb: QWeb,
|
||||
template: string,
|
||||
context: EvalContext = {},
|
||||
extra?: any
|
||||
): HTMLElement | Text {
|
||||
if (!context.__owl__) {
|
||||
// we add `__owl__` to better simulate a component as context. This is
|
||||
// particularly important for event handlers added with the `t-on` directive.
|
||||
context.__owl__ = { status: STATUS.MOUNTED };
|
||||
}
|
||||
const vnode = qweb.render(template, context, extra);
|
||||
|
||||
// we snapshot here the compiled code. This is useful to prevent unwanted code
|
||||
// change.
|
||||
expect(qweb.templates[template].fn.toString()).toMatchSnapshot();
|
||||
|
||||
if (vnode.sel === undefined) {
|
||||
return document.createTextNode(vnode.text!);
|
||||
}
|
||||
const node = document.createElement(vnode.sel!);
|
||||
const result = patch(node, vnode);
|
||||
return result.elm as HTMLElement;
|
||||
export function addTemplate(name: string, template: string): string {
|
||||
globalTemplates[name] = template;
|
||||
return name;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render a template to an html string. The big difference with the
|
||||
* renderToString method in QWeb is that we use the renderToDom method, which
|
||||
* snapshots the resulting template function. Doing so gives us a large body
|
||||
* of reference to evaluate changes in the generated QWeb code.
|
||||
*
|
||||
* Note that the result of renderToString is guaranteed to be the same as the
|
||||
* one from QWeb.
|
||||
*/
|
||||
export function renderToString(
|
||||
qweb: QWeb,
|
||||
t: string,
|
||||
context: EvalContext = {},
|
||||
extra?: any
|
||||
): string {
|
||||
const result = qweb.renderToString(t, context, extra);
|
||||
expect(qweb.templates[t].fn.toString()).toMatchSnapshot();
|
||||
return result;
|
||||
// -----------------------------------------------------------------------------
|
||||
// Helpers
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
export function compile(template: string): Template {
|
||||
// register here the template globally so snapshotEverything
|
||||
// can get it
|
||||
globalTemplates[template] = template;
|
||||
const templateFunction = compileTemplate(template);
|
||||
return templateFunction(blockDom, UTILS);
|
||||
}
|
||||
|
||||
// hereafter, we define two helpers to patch/unpatch the nextFrame utils. This
|
||||
// is useful for animations tests, as we hook before repaints to trigger
|
||||
// animations (thanks to requestAnimationFrame). Patching nextFrame allows to
|
||||
// simulate calls to this hook. One must not forget to unpatch afterwards.
|
||||
let _nextFrame = QWeb.utils.nextFrame;
|
||||
export function patchNextFrame(f: Function) {
|
||||
QWeb.utils.nextFrame = (cb: () => void) => {
|
||||
setTimeout(() => f(cb));
|
||||
export function renderToBdom(template: string, context: any = {}, node: any = {}): BDom {
|
||||
return compile(template)(context, node);
|
||||
}
|
||||
|
||||
export function renderToString(template: string, context: any = {}): string {
|
||||
const fixture = makeTestFixture();
|
||||
const bdom = renderToBdom(template, context);
|
||||
mount(bdom, fixture);
|
||||
return fixture.innerHTML;
|
||||
}
|
||||
|
||||
export class TestContext extends TemplateSet {
|
||||
renderToString(name: string, context: any = {}): string {
|
||||
const renderFn = this.getTemplate(name);
|
||||
const bdom = renderFn(context, {});
|
||||
const fixture = makeTestFixture();
|
||||
mount(bdom, fixture);
|
||||
return fixture.innerHTML;
|
||||
}
|
||||
}
|
||||
|
||||
export function snapshotEverything() {
|
||||
const consolewarn = console.warn;
|
||||
|
||||
const originalAddTemplate = TemplateSet.prototype.addTemplate;
|
||||
TemplateSet.prototype.addTemplate = function (name: string, template: string, options) {
|
||||
originalAddTemplate.call(this, name, template, options);
|
||||
// register it so snapshotEverything can get it
|
||||
globalTemplates[name] = template;
|
||||
};
|
||||
|
||||
let globalSet: any;
|
||||
|
||||
beforeAll(() => {
|
||||
globalSet = new Set(Object.keys(globalTemplates));
|
||||
});
|
||||
|
||||
beforeEach(() => {
|
||||
xml.nextId = 9;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
console.warn = () => {};
|
||||
for (let k in globalTemplates) {
|
||||
if (globalSet.has(k)) {
|
||||
// ignore generic templates
|
||||
continue;
|
||||
}
|
||||
try {
|
||||
snapshotTemplateCode(globalTemplates[k]);
|
||||
} catch (e) {
|
||||
// ignore error
|
||||
}
|
||||
delete globalTemplates[k];
|
||||
}
|
||||
console.warn = consolewarn;
|
||||
});
|
||||
}
|
||||
|
||||
export function unpatchNextFrame() {
|
||||
QWeb.utils.nextFrame = _nextFrame;
|
||||
export function useLogLifecycle(steps: string[]) {
|
||||
const component = useComponent();
|
||||
const name = component.constructor.name;
|
||||
steps.push(`${name}:setup`);
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "new");
|
||||
|
||||
onWillStart(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "new");
|
||||
steps.push(`${name}:willStart`);
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
|
||||
steps.push(`${name}:mounted`);
|
||||
});
|
||||
|
||||
onWillUpdateProps(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
|
||||
steps.push(`${name}:willUpdateProps`);
|
||||
});
|
||||
|
||||
onRender(() => {
|
||||
steps.push(`${name}:render`);
|
||||
});
|
||||
|
||||
onWillPatch(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
|
||||
steps.push(`${name}:willPatch`);
|
||||
});
|
||||
|
||||
onPatched(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
|
||||
steps.push(`${name}:patched`);
|
||||
});
|
||||
|
||||
onWillUnmount(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "mounted");
|
||||
steps.push(`${name}:willUnmount`);
|
||||
});
|
||||
|
||||
onDestroyed(() => {
|
||||
expect(name + ": " + status(component)).toBe(name + ": " + "destroyed");
|
||||
steps.push(`${name}:destroyed`);
|
||||
});
|
||||
}
|
||||
|
||||
export async function editInput(input: HTMLInputElement | HTMLTextAreaElement, value: string) {
|
||||
input.value = value;
|
||||
input.dispatchEvent(new Event("input"));
|
||||
input.dispatchEvent(new Event("change"));
|
||||
return nextTick();
|
||||
export function children(w: Component): Component[] {
|
||||
const childrenMap = w.__owl__.children;
|
||||
return Object.keys(childrenMap).map((id) => childrenMap[id].component);
|
||||
}
|
||||
|
||||
export function isDirectChildOf(child: Component, parent: Component): boolean {
|
||||
return children(parent).includes(child);
|
||||
}
|
||||
|
||||
@@ -1,686 +0,0 @@
|
||||
import { makeTestEnv, makeTestFixture, nextTick } from "./helpers";
|
||||
import { Component, Env } from "../src/component/component";
|
||||
import {
|
||||
useState,
|
||||
onMounted,
|
||||
onWillUnmount,
|
||||
useRef,
|
||||
onPatched,
|
||||
onWillPatch,
|
||||
onWillStart,
|
||||
onWillUpdateProps,
|
||||
useEnv,
|
||||
useSubEnv,
|
||||
useExternalListener,
|
||||
useComponent,
|
||||
} from "../src/hooks";
|
||||
import { xml } from "../src/tags";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - env: a WEnv, necessary to create new components
|
||||
|
||||
let fixture: HTMLElement;
|
||||
let env: Env;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
env = makeTestEnv();
|
||||
Component.env = env;
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("hooks", () => {
|
||||
test("can use a state hook", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`<div><t t-esc="counter.value"/></div>`;
|
||||
counter = useState({ value: 42 });
|
||||
}
|
||||
const counter = new Counter();
|
||||
await counter.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>42</div>");
|
||||
counter.counter.value = 3;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
});
|
||||
|
||||
test("can use onMounted, onWillUnmount", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onMounted(() => {
|
||||
steps.push("mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("willunmount");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook();
|
||||
}
|
||||
}
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
expect(steps).toEqual(["mounted"]);
|
||||
component.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(steps).toEqual(["mounted", "willunmount"]);
|
||||
});
|
||||
|
||||
test("can use onMounted, onWillUnmount, part 2", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onMounted(() => {
|
||||
steps.push("mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("willunmount");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
useMyHook();
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
|
||||
static components = { MyComponent };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>hey</div></div>");
|
||||
expect(steps).toEqual(["mounted"]);
|
||||
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
expect(steps).toEqual(["mounted", "willunmount"]);
|
||||
});
|
||||
|
||||
test("mounted, willUnmount, onMounted, onWillUnmount order", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onMounted(() => {
|
||||
steps.push("hook:mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("hook:willunmount");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook();
|
||||
}
|
||||
mounted() {
|
||||
steps.push("comp:mounted");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("comp:willunmount");
|
||||
}
|
||||
}
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
component.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(steps).toEqual(["comp:mounted", "hook:mounted", "hook:willunmount", "comp:willunmount"]);
|
||||
});
|
||||
|
||||
test("mounted, willUnmount, onMounted, onWillUnmount order, part 2", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onMounted(() => {
|
||||
steps.push("hook:mounted");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("hook:willunmount");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
useMyHook();
|
||||
}
|
||||
mounted() {
|
||||
steps.push("comp:mounted");
|
||||
}
|
||||
willUnmount() {
|
||||
steps.push("comp:willunmount");
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
|
||||
static components = { MyComponent };
|
||||
state = useState({ flag: true });
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><div>hey</div></div>");
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
expect(steps).toEqual(["comp:mounted", "hook:mounted", "hook:willunmount", "comp:willunmount"]);
|
||||
});
|
||||
|
||||
test("two different call to mounted/willunmount should work", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook(i) {
|
||||
onMounted(() => {
|
||||
steps.push("hook:mounted" + i);
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("hook:willunmount" + i);
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey</div>`;
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook(1);
|
||||
useMyHook(2);
|
||||
}
|
||||
}
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
component.unmount();
|
||||
expect(fixture.innerHTML).toBe("");
|
||||
expect(steps).toEqual([
|
||||
"hook:mounted1",
|
||||
"hook:mounted2",
|
||||
"hook:willunmount2",
|
||||
"hook:willunmount1",
|
||||
]);
|
||||
});
|
||||
|
||||
test("useRef hook", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`<div><button t-ref="button"><t t-esc="value"/></button></div>`;
|
||||
button = useRef("button");
|
||||
value = 0;
|
||||
increment() {
|
||||
this.value++;
|
||||
(this.button.el as HTMLButtonElement).innerHTML = String(this.value);
|
||||
}
|
||||
}
|
||||
const counter = new Counter();
|
||||
expect(counter.button.el).toBe(null);
|
||||
await counter.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><button>0</button></div>");
|
||||
expect(counter.button.el).not.toBe(null);
|
||||
expect(counter.button.el).toBe(fixture.querySelector("button"));
|
||||
counter.increment();
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><button>1</button></div>");
|
||||
});
|
||||
|
||||
test("useRef hook is null if ref is removed ", async () => {
|
||||
expect.assertions(4);
|
||||
class TestRef extends Component {
|
||||
static template = xml`<div><span t-if="state.flag" t-ref="span">owl</span></div>`;
|
||||
spanRef = useRef("span");
|
||||
state = useState({ flag: true });
|
||||
willPatch() {
|
||||
expect(this.spanRef.el).not.toBeNull();
|
||||
}
|
||||
patched() {
|
||||
expect(this.spanRef.el).toBeNull();
|
||||
}
|
||||
}
|
||||
const component = new TestRef();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>owl</span></div>");
|
||||
component.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
});
|
||||
|
||||
test("t-refs on widget are components", async () => {
|
||||
class WidgetB extends Component {
|
||||
static template = xml`<div>b</div>`;
|
||||
}
|
||||
class WidgetC extends Component {
|
||||
static template = xml`<div class="outer-div">Hello<WidgetB t-ref="mywidgetb" /></div>`;
|
||||
static components = { WidgetB };
|
||||
ref = useRef<WidgetB>("mywidgetb");
|
||||
}
|
||||
|
||||
const widget = new WidgetC();
|
||||
expect(widget.ref.comp).toBe(null);
|
||||
expect(widget.ref.el).toBe(null);
|
||||
await widget.mount(fixture);
|
||||
expect(widget.ref.comp).toBeInstanceOf(WidgetB);
|
||||
expect(widget.ref.el).toEqual(fixture.querySelector(".outer-div > div"));
|
||||
});
|
||||
|
||||
test("t-refs are bound at proper timing", async () => {
|
||||
expect.assertions(2);
|
||||
class Widget extends Component {
|
||||
static template = xml`<div>widget</div>`;
|
||||
}
|
||||
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-foreach="state.list" t-as="elem" t-ref="child" t-key="elem" t-component="Widget"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { Widget };
|
||||
state = useState({ list: <any>[] });
|
||||
child = useRef("child");
|
||||
willPatch() {
|
||||
expect(this.child.comp).toBeNull();
|
||||
}
|
||||
patched() {
|
||||
expect(this.child.comp).not.toBeNull();
|
||||
}
|
||||
}
|
||||
|
||||
const parent = new ParentWidget();
|
||||
await parent.mount(fixture);
|
||||
parent.state.list.push(1);
|
||||
await nextTick();
|
||||
});
|
||||
|
||||
test("t-refs are bound at proper timing (2)", async () => {
|
||||
expect.assertions(10);
|
||||
class Widget extends Component {
|
||||
static template = xml`<div>widget</div>`;
|
||||
}
|
||||
class ParentWidget extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<t t-if="state.child1" t-ref="child1" t-component="Widget"/>
|
||||
<t t-if="state.child2" t-ref="child2" t-component="Widget"/>
|
||||
</div>`;
|
||||
static components = { Widget };
|
||||
state = useState({ child1: true, child2: false });
|
||||
child1 = useRef("child1");
|
||||
child2 = useRef("child2");
|
||||
count = 0;
|
||||
mounted() {
|
||||
expect(this.child1.comp).toBeDefined();
|
||||
expect(this.child2.comp).toBeNull();
|
||||
}
|
||||
willPatch() {
|
||||
if (this.count === 0) {
|
||||
expect(this.child1.comp).toBeDefined();
|
||||
expect(this.child2.comp).toBeNull();
|
||||
}
|
||||
if (this.count === 1) {
|
||||
expect(this.child1.comp).toBeDefined();
|
||||
expect(this.child2.comp).toBeDefined();
|
||||
}
|
||||
}
|
||||
patched() {
|
||||
if (this.count === 0) {
|
||||
expect(this.child1.comp).toBeDefined();
|
||||
expect(this.child2.comp).toBeDefined();
|
||||
}
|
||||
if (this.count === 1) {
|
||||
expect(this.child1.comp).toBeNull();
|
||||
expect(this.child2.comp).toBeDefined();
|
||||
}
|
||||
this.count++;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = new ParentWidget();
|
||||
await parent.mount(fixture);
|
||||
parent.state.child2 = true;
|
||||
await nextTick();
|
||||
parent.state.child1 = false;
|
||||
await nextTick();
|
||||
});
|
||||
|
||||
test("can use onPatched, onWillPatch", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onWillPatch(() => {
|
||||
steps.push("willPatch");
|
||||
});
|
||||
onPatched(() => {
|
||||
steps.push("patched");
|
||||
});
|
||||
}
|
||||
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div><t t-if="state.flag">hey</t></div>`;
|
||||
state = useState({ flag: true });
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook();
|
||||
}
|
||||
}
|
||||
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(steps).toEqual([]);
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
component.state.flag = false;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div></div>");
|
||||
|
||||
expect(steps).toEqual(["willPatch", "patched"]);
|
||||
});
|
||||
|
||||
test("patched, willPatch, onPatched, onWillPatch order", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook() {
|
||||
onPatched(() => {
|
||||
steps.push("hook:patched");
|
||||
});
|
||||
onWillPatch(() => {
|
||||
steps.push("hook:willPatch");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div><t t-if="state.flag">hey</t></div>`;
|
||||
state = useState({ flag: true });
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook();
|
||||
}
|
||||
willPatch() {
|
||||
steps.push("comp:willPatch");
|
||||
}
|
||||
patched() {
|
||||
steps.push("comp:patched");
|
||||
}
|
||||
}
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey</div>");
|
||||
component.state.flag = false;
|
||||
await nextTick();
|
||||
|
||||
expect(steps).toEqual(["hook:willPatch", "comp:willPatch", "comp:patched", "hook:patched"]);
|
||||
});
|
||||
|
||||
test("two different call to willPatch/patched should work", async () => {
|
||||
const steps: string[] = [];
|
||||
function useMyHook(i) {
|
||||
onPatched(() => {
|
||||
steps.push("hook:patched" + i);
|
||||
});
|
||||
onWillPatch(() => {
|
||||
steps.push("hook:willPatch" + i);
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<div>hey<t t-esc="state.value"/></div>`;
|
||||
state = useState({ value: 1 });
|
||||
constructor() {
|
||||
super();
|
||||
useMyHook(1);
|
||||
useMyHook(2);
|
||||
}
|
||||
}
|
||||
const component = new MyComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>hey1</div>");
|
||||
component.state.value++;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>hey2</div>");
|
||||
|
||||
expect(steps).toEqual(["hook:willPatch2", "hook:willPatch1", "hook:patched1", "hook:patched2"]);
|
||||
});
|
||||
|
||||
describe("autofocus hook", () => {
|
||||
function useAutofocus(name) {
|
||||
let ref = useRef(name);
|
||||
let isInDom = false;
|
||||
function updateFocus() {
|
||||
if (!isInDom && ref.el) {
|
||||
isInDom = true;
|
||||
ref.el.focus();
|
||||
} else if (isInDom && !ref.el) {
|
||||
isInDom = false;
|
||||
}
|
||||
}
|
||||
onPatched(updateFocus);
|
||||
onMounted(updateFocus);
|
||||
}
|
||||
|
||||
test("simple input", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<input t-ref="input1"/>
|
||||
<input t-ref="input2"/>
|
||||
</div>`;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
useAutofocus("input2");
|
||||
}
|
||||
}
|
||||
|
||||
const component = new SomeComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><input><input></div>");
|
||||
const input2 = fixture.querySelectorAll("input")[1];
|
||||
expect(input2).toBe(document.activeElement);
|
||||
});
|
||||
|
||||
test("input in a t-if", async () => {
|
||||
class SomeComponent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<input t-ref="input1"/>
|
||||
<t t-if="state.flag"><input t-ref="input2"/></t>
|
||||
</div>`;
|
||||
|
||||
state = useState({ flag: false });
|
||||
constructor() {
|
||||
super();
|
||||
useAutofocus("input2");
|
||||
}
|
||||
}
|
||||
|
||||
const component = new SomeComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><input></div>");
|
||||
expect(document.activeElement).toBe(document.body);
|
||||
|
||||
component.state.flag = true;
|
||||
await nextTick();
|
||||
const input2 = fixture.querySelectorAll("input")[1];
|
||||
expect(input2).toBe(document.activeElement);
|
||||
});
|
||||
});
|
||||
|
||||
test("can use useEnv", async () => {
|
||||
expect.assertions(1);
|
||||
class TestComponent extends Component {
|
||||
static template = xml`<div><t t-esc="env.val"/></div>`;
|
||||
constructor() {
|
||||
super();
|
||||
expect(useEnv()).toBe(env);
|
||||
}
|
||||
}
|
||||
const component = new TestComponent();
|
||||
await component.mount(fixture);
|
||||
});
|
||||
|
||||
test("can use sub env", async () => {
|
||||
class TestComponent extends Component {
|
||||
static template = xml`<div><t t-esc="env.val"/></div>`;
|
||||
constructor() {
|
||||
super();
|
||||
useSubEnv({ val: 3 });
|
||||
}
|
||||
}
|
||||
const component = new TestComponent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
expect(env).not.toHaveProperty("val");
|
||||
expect(component.env).toHaveProperty("val");
|
||||
});
|
||||
|
||||
test("can use useComponent", async () => {
|
||||
expect.assertions(1);
|
||||
class TestComponent extends Component {
|
||||
static template = xml`<div></div>`;
|
||||
constructor() {
|
||||
super();
|
||||
expect(useComponent()).toBe(this);
|
||||
}
|
||||
}
|
||||
const component = new TestComponent();
|
||||
await component.mount(fixture);
|
||||
});
|
||||
|
||||
test("parent and child env", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<div><t t-esc="env.val"/></div>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
useSubEnv({ val: 5 });
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`<div><t t-esc="env.val"/><Child/></div>`;
|
||||
static components = { Child };
|
||||
constructor() {
|
||||
super();
|
||||
useSubEnv({ val: 3 });
|
||||
}
|
||||
}
|
||||
const component = new Parent();
|
||||
await component.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>3<div>5</div></div>");
|
||||
});
|
||||
|
||||
test("can use onWillStart, onWillUpdateProps", async () => {
|
||||
const steps: string[] = [];
|
||||
async function slow(): Promise<string> {
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
resolve("slow");
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
function useMyHook() {
|
||||
onWillStart(async () => {
|
||||
steps.push(await slow());
|
||||
steps.push("onWillStart");
|
||||
});
|
||||
onWillUpdateProps(async (nextProps) => {
|
||||
expect(nextProps).toEqual({ value: 2 });
|
||||
steps.push(await slow());
|
||||
steps.push("onWillUpdateProps");
|
||||
});
|
||||
}
|
||||
function use2ndHook() {
|
||||
onWillStart(() => {
|
||||
steps.push("on2ndStart");
|
||||
});
|
||||
onWillUpdateProps((nextProps) => {
|
||||
expect(nextProps).toEqual({ value: 2 });
|
||||
steps.push("on2ndUpdate");
|
||||
});
|
||||
}
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<span><t t-esc="props.value"/></span>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
useMyHook();
|
||||
use2ndHook();
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`<div><MyComponent value="state.value"/></div>`;
|
||||
static components = { MyComponent };
|
||||
state = useState({ value: 1 });
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
|
||||
|
||||
// NOTE: 'on2ndStart' appears first in the list even though
|
||||
// the 'use2ndHook' is declared after 'useMyHook'. This is
|
||||
// because Promise.all is used to call the callbacks specified
|
||||
// in the hooks, which runs them simultaneously.
|
||||
// Additionally, 'slow' should be listed before 'onWillStart'
|
||||
// because call to `slow` is awaited.
|
||||
expect(steps).toEqual(["on2ndStart", "slow", "onWillStart"]);
|
||||
|
||||
app.state.value = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
|
||||
expect(steps).toEqual([
|
||||
"on2ndStart",
|
||||
"slow",
|
||||
"onWillStart",
|
||||
"on2ndUpdate",
|
||||
"slow",
|
||||
"onWillUpdateProps",
|
||||
]);
|
||||
});
|
||||
|
||||
test("useExternalListener", async () => {
|
||||
let n = 0;
|
||||
|
||||
class MyComponent extends Component {
|
||||
static template = xml`<span><t t-esc="props.value"/></span>`;
|
||||
constructor(parent, props) {
|
||||
super(parent, props);
|
||||
useExternalListener(window as any, "click", this.increment);
|
||||
}
|
||||
increment() {
|
||||
n++;
|
||||
}
|
||||
}
|
||||
class App extends Component {
|
||||
static template = xml`<div><MyComponent t-if="state.flag"/></div>`;
|
||||
static components = { MyComponent };
|
||||
state = useState({ flag: false });
|
||||
}
|
||||
|
||||
const app = new App();
|
||||
await app.mount(fixture);
|
||||
|
||||
expect(n).toBe(0);
|
||||
window.dispatchEvent(new Event("click"));
|
||||
expect(n).toBe(0);
|
||||
app.state.flag = true;
|
||||
await nextTick();
|
||||
window.dispatchEvent(new Event("click"));
|
||||
expect(n).toBe(1);
|
||||
app.state.flag = false;
|
||||
await nextTick();
|
||||
window.dispatchEvent(new Event("click"));
|
||||
expect(n).toBe(1);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,87 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Memo if no prop change, prevent renderings from above 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(ctx['props'].value);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Memo if no prop change, prevent renderings from above 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let b6 = text(ctx['state'].a);
|
||||
let b7 = text(ctx['state'].b);
|
||||
let b8 = text(ctx['state'].c);
|
||||
return multi([b6, b7, b8]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(ctx['state'].a);
|
||||
let b3 = text(ctx['state'].b);
|
||||
let b4 = text(ctx['state'].c);
|
||||
let b9 = assign(component(\`Memo\`, {a: ctx['state'].a,b: ctx['state'].b}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return multi([b2, b3, b4, b9]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Memo if no props, prevent renderings from above 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(ctx['props'].value);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Memo if no props, prevent renderings from above 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
const slot3 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {value: ctx['state'].value}, key + \`__4\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`Child\`, {value: ctx['state'].value}, key + \`__1\`, node, ctx);
|
||||
let b4 = assign(component(\`Memo\`, {}, key + \`__2\`, node, ctx), {slots: {'default': slot3(ctx)}});
|
||||
return multi([b2, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Memo if no props, prevent renderings from above (work with simple html) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return text(ctx['state'].value);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(ctx['state'].value);
|
||||
let b4 = assign(component(\`Memo\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return multi([b2, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,466 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Portal Portal composed with t-slot 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>child2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal Portal composed with t-slot 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return callSlot(ctx, node, key, 'default');
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal Portal composed with t-slot 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let h4 = [\`custom\`, ctx, '_handled'];
|
||||
return assign(component(\`Child2\`, {}, key + \`__3\`, node, ctx), {handlers: [h4]});
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal basic use of portal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><span>1</span><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return block2();
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal conditional use of Portal (with sub Component) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-text-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal conditional use of Portal (with sub Component) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block2 = createBlock(\`<span>1</span>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b4;
|
||||
b2 = block2();
|
||||
if (ctx['state'].hasPortal) {
|
||||
b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
}
|
||||
return multi([b2, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal conditional use of Portal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block2 = createBlock(\`<span>1</span>\`);
|
||||
let block3 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return block3();
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b4;
|
||||
b2 = block2();
|
||||
if (ctx['state'].hasPortal) {
|
||||
b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
}
|
||||
return multi([b2, b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal lifecycle hooks of portal sub component are properly called 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal lifecycle hooks of portal sub component are properly called 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3;
|
||||
if (ctx['state'].hasChild) {
|
||||
b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
}
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal could have dynamically no content 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let b3;
|
||||
if (ctx['state'].val) {
|
||||
let d1 = ctx['state'].val;
|
||||
b3 = block3([d1]);
|
||||
}
|
||||
return multi([b3]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with child and props 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with child and props 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with dynamic body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
let block4 = createBlock(\`<div/>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let b3,b4;
|
||||
if (ctx['state'].val) {
|
||||
let d1 = ctx['state'].val;
|
||||
b3 = block3([d1]);
|
||||
} else {
|
||||
b4 = block4();
|
||||
}
|
||||
return multi([b3, b4]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b5 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b5]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with many children 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div>1</div>\`);
|
||||
let block4 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let b3 = block3();
|
||||
let b4 = block4();
|
||||
return multi([b3, b4]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b5 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b5]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with no content 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
let b3;
|
||||
if (false) {
|
||||
b3 = text('ABC');
|
||||
}
|
||||
return multi([b3]);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b4 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b4]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with only text as content 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return text('only text');
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal with target not in dom 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><owl-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<div>2</div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return block2();
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(node.getChild(\`Portal\`, {target: '#does-not-exist'}, key + \`__1\`, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal's parent's env is not polluted 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button>child</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal portal's parent's env is not polluted 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {}, key + \`__3\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal with target in template (after portal) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><span>1</span><block-child-0/><div id=\\"local-target\\"/></div>\`);
|
||||
let block2 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return block2();
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#local-target'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal with target in template (before portal) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><div id=\\"local-target\\"/><span>1</span><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return block2();
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#local-target'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal: UI/UX focus is kept across re-renders 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<input id=\\"target-me\\" block-attribute-0=\\"placeholder\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['props'].val;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Portal: UI/UX focus is kept across re-renders 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
const slot2 = ctx => (node, key) => {
|
||||
return component(\`Child\`, {val: ctx['state'].val}, key + \`__3\`, node, ctx);
|
||||
}
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = assign(component(\`Portal\`, {target: '#outside'}, key + \`__1\`, node, ctx), {slots: {'default': slot2(ctx)}});
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -1,188 +0,0 @@
|
||||
import { AsyncRoot } from "../../src/misc/async_root";
|
||||
import { useState } from "../../src/hooks";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeDeferred, makeTestFixture, makeTestEnv, nextTick } from "../helpers";
|
||||
import { Component } from "../../src/component/component";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
// We create before each test:
|
||||
// - fixture: a div, appended to the DOM, intended to be the target of dom
|
||||
// manipulations. Note that it is removed after each test.
|
||||
// - a test env, necessary to create components, that is set as env
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
Component.env = makeTestEnv();
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
fixture.remove();
|
||||
});
|
||||
|
||||
describe("Asyncroot", () => {
|
||||
test("delayed component with AsyncRoot component", async () => {
|
||||
let def;
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
class AsyncChild extends Child {
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<button t-on-click="updateApp">Update App State</button>
|
||||
<div class="children">
|
||||
<Child val="state.val"/>
|
||||
<AsyncRoot>
|
||||
<AsyncChild val="state.val"/>
|
||||
</AsyncRoot>
|
||||
</div>
|
||||
</div>`;
|
||||
static components = { Child, AsyncChild, AsyncRoot };
|
||||
state = useState({ val: 0 });
|
||||
|
||||
updateApp() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>0</span><span>0</span>");
|
||||
|
||||
// click on button to increment Parent counter
|
||||
def = makeDeferred();
|
||||
fixture.querySelector("button")!.click();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1</span><span>0</span>");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1</span><span>1</span>");
|
||||
});
|
||||
|
||||
test("fast component with AsyncRoot", async () => {
|
||||
let def;
|
||||
class Child extends Component {
|
||||
static template = xml`<span><t t-esc="props.val"/></span>`;
|
||||
}
|
||||
class AsyncChild extends Child {
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<button t-on-click="updateApp">Update App State</button>
|
||||
<div class="children">
|
||||
<AsyncRoot>
|
||||
<Child val="state.val"/>
|
||||
</AsyncRoot>
|
||||
<AsyncChild val="state.val"/>
|
||||
</div>
|
||||
</div>`;
|
||||
static components = { Child, AsyncChild, AsyncRoot };
|
||||
state = useState({ val: 0 });
|
||||
|
||||
updateApp() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>0</span><span>0</span>");
|
||||
|
||||
// click on button to increment Parent counter
|
||||
def = makeDeferred();
|
||||
fixture.querySelector("button")!.click();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1</span><span>0</span>");
|
||||
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1</span><span>1</span>");
|
||||
});
|
||||
|
||||
test("asyncroot component: mixed re-renderings", async () => {
|
||||
let def;
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<span t-on-click="increment">
|
||||
<t t-esc="state.val"/>/<t t-esc="props.val"/>
|
||||
</span>`;
|
||||
state = useState({ val: 0 });
|
||||
|
||||
increment() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
class AsyncChild extends Child {
|
||||
willUpdateProps() {
|
||||
return def;
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<button t-on-click="updateApp">Update App State</button>
|
||||
<div class="children">
|
||||
<Child val="state.val"/>
|
||||
<AsyncRoot>
|
||||
<AsyncChild val="state.val"/>
|
||||
</AsyncRoot>
|
||||
</div>
|
||||
</div>`;
|
||||
static components = { Child, AsyncChild, AsyncRoot };
|
||||
state = useState({ val: 0 });
|
||||
|
||||
updateApp() {
|
||||
this.state.val++;
|
||||
}
|
||||
}
|
||||
|
||||
const parent = new Parent();
|
||||
await parent.mount(fixture);
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>0/0</span><span>0/0</span>");
|
||||
|
||||
// click on button to increment Parent counter
|
||||
def = makeDeferred();
|
||||
fixture.querySelector("button")!.click();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>0/1</span><span>0/0</span>");
|
||||
|
||||
// click on each Child to increment their local counter
|
||||
const children = parent.el!.querySelectorAll("span");
|
||||
children[0]!.click();
|
||||
await nextTick();
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1/1</span><span>0/0</span>");
|
||||
|
||||
children[1]!.click();
|
||||
await nextTick();
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1/1</span><span>0/0</span>");
|
||||
|
||||
// finalize first re-rendering (coming from the props update)
|
||||
def.resolve();
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.querySelector(".children")!.innerHTML).toBe("<span>1/1</span><span>1/1</span>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,93 @@
|
||||
import { Component, mount, useState } from "../../src";
|
||||
import { Memo } from "../../src/";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("Memo", () => {
|
||||
test("if no props, prevent renderings from above ", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.value"/>`;
|
||||
}
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<Child value="state.value"/>
|
||||
<Memo>
|
||||
<Child value="state.value"/>
|
||||
</Memo>`;
|
||||
|
||||
static components = { Memo, Child };
|
||||
|
||||
state = useState({ value: 1 });
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("11");
|
||||
component.state.value = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("21");
|
||||
});
|
||||
|
||||
test("if no props, prevent renderings from above (work with simple html) ", async () => {
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<t t-esc="state.value"/>
|
||||
<Memo>
|
||||
<t t-esc="state.value"/>
|
||||
</Memo>`;
|
||||
|
||||
static components = { Memo };
|
||||
|
||||
state = useState({ value: 1 });
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("11");
|
||||
component.state.value = 2;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("21");
|
||||
});
|
||||
|
||||
test("if no prop change, prevent renderings from above ", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.value"/>`;
|
||||
}
|
||||
|
||||
class Test extends Component {
|
||||
static template = xml`
|
||||
<t t-esc="state.a"/>
|
||||
<t t-esc="state.b"/>
|
||||
<t t-esc="state.c"/>
|
||||
<Memo a="state.a" b="state.b">
|
||||
<t t-esc="state.a"/>
|
||||
<t t-esc="state.b"/>
|
||||
<t t-esc="state.c"/>
|
||||
</Memo>`;
|
||||
|
||||
static components = { Memo, Child };
|
||||
|
||||
state = useState({ a: "a", b: "b", c: "c" });
|
||||
}
|
||||
|
||||
const component = await mount(Test, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe("abcabc");
|
||||
|
||||
component.state.c = "C";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("abCabc");
|
||||
|
||||
component.state.a = "A";
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("AbCAbC");
|
||||
});
|
||||
});
|
||||
+440
-579
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,42 @@
|
||||
// mockEventTarget.js
|
||||
|
||||
// copy the code from https://developer.mozilla.org/en-US/docs/Web/API/EventTarget#Simple_implementation_of_EventTarget
|
||||
var EventTarget = function() {
|
||||
this.listeners = {};
|
||||
};
|
||||
|
||||
EventTarget.prototype.listeners = null;
|
||||
EventTarget.prototype.addEventListener = function(type, callback) {
|
||||
if (!(type in this.listeners)) {
|
||||
this.listeners[type] = [];
|
||||
}
|
||||
this.listeners[type].push(callback);
|
||||
};
|
||||
|
||||
EventTarget.prototype.removeEventListener = function(type, callback) {
|
||||
if (!(type in this.listeners)) {
|
||||
return;
|
||||
}
|
||||
var stack = this.listeners[type];
|
||||
for (var i = 0, l = stack.length; i < l; i++) {
|
||||
if (stack[i] === callback){
|
||||
stack.splice(i, 1);
|
||||
return;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
EventTarget.prototype.dispatchEvent = function(event) {
|
||||
if (!(event.type in this.listeners)) {
|
||||
return true;
|
||||
}
|
||||
var stack = this.listeners[event.type].slice();
|
||||
|
||||
for (var i = 0, l = stack.length; i < l; i++) {
|
||||
stack[i].call(this, event);
|
||||
}
|
||||
return !event.defaultPrevented;
|
||||
};
|
||||
|
||||
// make the EventTarget global
|
||||
global.EventTarget = EventTarget
|
||||
@@ -0,0 +1,679 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`attributes changing a class with t-att-class (preexisting class 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes changing a class with t-att-class 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes changing an attribute with t-att- 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"value\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes class and t-att-class should combine together 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\" class=\\"hello\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes class and t-attf-class with ternary operation 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = (ctx['value']?'world':'');
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic attribute evaluating to 0 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic attribute falsy variable 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic attribute with a dash 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"data-action-id\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['id'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic attributes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = 'bar';
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic class attribute 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['c'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic class attribute evaluating to 0 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic empty class attribute 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['c'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes dynamic formatted attributes with a dash 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"aria-label\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`Some text \${ctx['id']}\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes fixed variable 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes format expression 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = (ctx['value']+37);
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes format literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`bar\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes format multiple 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`a \${ctx['value1']} is \${ctx['value2']} of \${ctx['value3']} ]\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes format value 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`b\${ctx['value']}r\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes from object variables set previously 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`o\`] = {a:'b'};
|
||||
let d1 = ctx['o'].a;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes from variables set previously (no external node) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`abc\`] = 'def';
|
||||
let d1 = ctx['abc'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes from variables set previously 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-attribute-0=\\"class\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`abc\`] = 'def';
|
||||
let d1 = ctx['abc'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes object 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes static attributes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div foo=\\"a\\" bar=\\"b\\" baz=\\"c\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes static attributes on void elements 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<img src=\\"/test.skip.jpg\\" alt=\\"Test\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes static attributes with dashes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div aria-label=\\"Close\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-att-class and class should combine together 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-att-class with multiple classes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {'a b c':ctx['value']};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-att-class with multiple classes 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {['a b c']:ctx['value']};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-att-class with multiple classes, some of which are duplicate 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {'a b c':ctx['value'],'a b d':!ctx['value']};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-att-class with object 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"static\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {a:ctx['b'],c:ctx['d'],e:ctx['f']};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-attf-class 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`hello\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-attf-class should combine with class 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"hello\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`world\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-attf-class with multiple classes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`hello \${ctx['word']}\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes t-attf-class with multiple classes separated by multiple spaces 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = \`hello \${ctx['word']}\`;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes tuple literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ['foo','bar'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes tuple variable 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attributes=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes two classes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"a b\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes two dynamic attributes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"foo\\" block-attribute-1=\\"bar\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = 'bar';
|
||||
let d2 = 'foo';
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes updating classes (with obj notation) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"hoy\\" block-attribute-0=\\"class\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = {'a b':ctx['condition']};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes various escapes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div foo=\\"<foo\\" block-attribute-0=\\"bar\\" block-attribute-1=\\"baz\\" block-attributes=\\"2\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['bar'];
|
||||
let d2 = \`<\${ctx['baz']}>\`;
|
||||
let d3 = ctx['qux'];
|
||||
return block1([d1, d2, d3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`attributes various escapes 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div> < </div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`special cases for some specific html attributes/properties input of type checkbox with t-att-indeterminate 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"indeterminate\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`special cases for some specific html attributes/properties input type= checkbox, with t-att-checked 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<input type=\\"checkbox\\" block-attribute-0=\\"checked\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['flag'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`special cases for some specific html attributes/properties input with t-att-value 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<input block-attribute-0=\\"value\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`special cases for some specific html attributes/properties various boolean html attributes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><input type=\\"checkbox\\" checked=\\"checked\\"/><input checked=\\"checked\\"/><div checked=\\"checked\\"/><div selected=\\"selected\\"/><option selected=\\"selected\\" other=\\"1\\"/><input readonly=\\"readonly\\"/><button disabled=\\"disabled\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,51 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`comments only a comment 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<!-- comment-->\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`comments properly handle comments 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>hello <!-- comment-->owl</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`comments properly handle comments between t-if/t-else 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<span>true</span>\`);
|
||||
let block3 = createBlock(\`<span>owl</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (true) {
|
||||
b2 = block2();
|
||||
} else {
|
||||
b3 = block3();
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,369 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-on can bind event handler 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'add'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind handlers with arguments 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [5];
|
||||
let d1 = [ctx, 'add', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind handlers with empty object 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [{}];
|
||||
let d1 = [ctx, 'doSomething', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind handlers with empty object (with non empty inner string) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [{}];
|
||||
let d1 = [ctx, 'doSomething', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind handlers with empty object (with non empty inner string) 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<ul><block-child-0/></ul>\`);
|
||||
let block3 = createBlock(\`<li><a block-handler-0=\\"click\\">link</a></li>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(['someval']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`action\`] = v2[i1];
|
||||
ctx[\`action_index\`] = i1;
|
||||
let key1 = ctx['action_index'];
|
||||
const arg1 = [ctx['action']];
|
||||
let d1 = [ctx, 'activate', arg1];
|
||||
c2[i1] = withKey(block3([d1]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind handlers with object arguments 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [{val:5}];
|
||||
let d1 = [ctx, 'add', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on can bind two event handlers 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\" block-handler-1=\\"dblclick\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'handleClick'];
|
||||
let d2 = [ctx, 'handleDblClick'];
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'add'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList([1]);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`value\`] = v1[i1];
|
||||
let key1 = ctx['value'];
|
||||
let d1 = [ctx, 'add'];
|
||||
c1[i1] = withKey(block2([d1]), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner, part 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'add'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner, part 3 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return callTemplate_2(ctx, node, key + \`__1\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner, part 4 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'add'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on handler is bound to proper owner, part 4 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList([1]);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`value\`] = v1[i1];
|
||||
ctx[\`value_first\`] = i1 === 0;
|
||||
ctx[\`value_last\`] = i1 === v1.length - 1;
|
||||
ctx[\`value_index\`] = i1;
|
||||
ctx[\`value_value\`] = k1[i1];
|
||||
let key1 = ctx['value'];
|
||||
c1[i1] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}\`), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on receive event in first argument 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'add'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with inline statement (function call) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const v1 = ctx['state'];
|
||||
let d1 = (e) => {const res = (() => { return v1.incrementCounter(2) })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with inline statement 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Click</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const v1 = ctx['state'];
|
||||
let d1 = (e) => {const res = (() => { return v1.counter++ })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with inline statement, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const v1 = ctx['state'];
|
||||
let d1 = (e) => {const res = (() => { return v1.flag=!v1.flag })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with inline statement, part 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<button block-handler-0=\\"click\\">Toggle</button>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const v1 = ctx['state'];
|
||||
const v2 = ctx['someFunction'];
|
||||
let d1 = (e) => {const res = (() => { return v1.n=v2(3) })(); if (typeof res === 'function') { res(e) }};
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [ctx, 'update'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on with t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on, with arguments and t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p block-handler-0=\\"click\\">lucas</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const arg1 = [ctx['value']];
|
||||
let d1 = [ctx, 'update', arg1];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-on t-on, with arguments and t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,324 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`misc complex template 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div block-attribute-0=\\"class\\"><div block-attribute-1=\\"class\\"><div class=\\"batch_header\\"><a block-attribute-2=\\"href\\" block-attribute-3=\\"class\\" title=\\"View Batch\\"><block-text-4/><block-child-0/><i class=\\"arrow fa fa-window-maximize\\"/></a></div><block-child-1/><div class=\\"batch_slots\\"><block-child-2/><block-child-3/></div><div class=\\"batch_commits\\"><block-child-4/></div></div></div>\`);
|
||||
let block2 = createBlock(\`<i class=\\"fa fa-exclamation-triangle\\"/>\`);
|
||||
let block3 = createBlock(\`<span><i class=\\"fa fa-cog fa-spin fa-fw\\"/> preparing</span>\`);
|
||||
let block7 = createBlock(\`<div class=\\"slot_filler\\"/>\`);
|
||||
let block9 = createBlock(\`<div class=\\"one_line\\"><a block-attribute-0=\\"href\\" block-attribute-1=\\"class\\"><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-text-2/></a><a block-attribute-3=\\"href\\" class=\\"badge badge-light\\" title=\\"View Commit on Github\\"><i class=\\"fa fa-github\\"/></a><span><block-text-4/></span></div>\`);
|
||||
let block10 = createBlock(\`<i class=\\"fa fa-fw fa-hashtag\\" title=\\"This commit is a new head\\"/>\`);
|
||||
let block11 = createBlock(\`<i class=\\"fa fa-fw fa-link\\" title=\\"This commit is an existing head from bundle branches\\"/>\`);
|
||||
let block12 = createBlock(\`<i class=\\"fa fa-fw fa-code-fork\\" title=\\"This commit is matched from a base batch with matching merge_base\\"/>\`);
|
||||
let block13 = createBlock(\`<i class=\\"fa fa-fw fa-clock-o\\" title=\\"This commit is the head of a base branch\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4,b6,b8;
|
||||
let d1 = \`batch_tile \${ctx['options'].more?'more':'nomore'}\`;
|
||||
let d2 = \`card bg-\${ctx['klass']}-light\`;
|
||||
let d3 = \`/runbot/batch/\${ctx['batch'].id}\`;
|
||||
let d4 = \`badge badge-\${ctx['batch'].has_warning?'warning':'light'}\`;
|
||||
let d5 = ctx['batch'].formated_age;
|
||||
if (ctx['batch'].has_warning) {
|
||||
b2 = block2();
|
||||
}
|
||||
if (ctx['batch'].state=='preparing') {
|
||||
b3 = block3();
|
||||
}
|
||||
ctx = Object.create(ctx);
|
||||
const [k4, v4, l4, c4] = prepareList(ctx['batch'].slot_ids.filter(slot=>slot.build_id.id&&!slot.trigger_id.manual&&(ctx['options'].trigger_display[slot.trigger_id.id])));
|
||||
for (let i1 = 0; i1 < l4; i1++) {
|
||||
ctx[\`slot\`] = v4[i1];
|
||||
let key1 = ctx['slot'].id;
|
||||
c4[i1] = withKey(component(\`SlotButton\`, {class: ctx['slot_container'],slot: ctx['slot']}, key + \`__1__\${key1}\`, node, ctx), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
b4 = list(c4);
|
||||
ctx = Object.create(ctx);
|
||||
const [k6, v6, l6, c6] = prepareList([1,2,3,4]);
|
||||
for (let i1 = 0; i1 < l6; i1++) {
|
||||
ctx[\`x\`] = v6[i1];
|
||||
let key1 = ctx['x'];
|
||||
c6[i1] = withKey(block7(), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
b6 = list(c6);
|
||||
ctx = Object.create(ctx);
|
||||
const [k8, v8, l8, c8] = prepareList(ctx['commit_links']);
|
||||
for (let i1 = 0; i1 < l8; i1++) {
|
||||
ctx[\`commit_link\`] = v8[i1];
|
||||
let key1 = ctx['commit_link'].id;
|
||||
let b10,b11,b12,b13;
|
||||
let d6 = \`/runbot/commit/\${ctx['commit_link'].commit_id}\`;
|
||||
let d7 = \`badge badge-light batch_commit match_type_\${ctx['commit_link'].match_type}\`;
|
||||
if (ctx['commit_link'].match_type=='new') {
|
||||
b10 = block10();
|
||||
}
|
||||
if (ctx['commit_link'].match_type=='head') {
|
||||
b11 = block11();
|
||||
}
|
||||
if (ctx['commit_link'].match_type=='base_match') {
|
||||
b12 = block12();
|
||||
}
|
||||
if (ctx['commit_link'].match_type=='base_head') {
|
||||
b13 = block13();
|
||||
}
|
||||
let d8 = ctx['commit_link'].commit_dname;
|
||||
let d9 = 'https://%s/commit/%s'%(ctx['commit_link'].commit_remote_url,ctx['commit_link'].commit_name);
|
||||
let d10 = ctx['commit_link'].commit_subject;
|
||||
c8[i1] = withKey(block9([d6, d7, d8, d9, d10], [b10, b11, b12, b13]), key1);
|
||||
}
|
||||
b8 = list(c8);
|
||||
return block1([d1, d2, d3, d4, d5], [b2, b3, b4, b6, b8]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`misc global 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<año block-attribute-0=\\"falló\\"><block-child-0/></año>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = 'agüero';
|
||||
let b2 = html(ctx[zero]);
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`misc global 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = withDefault(ctx['foo'], \`foo default\`);
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`misc global 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = text(\`toto default\`);
|
||||
let b2 = html(withDefault(ctx['toto'], b3));
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`misc global 4`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`_callee-uses-foo\`);
|
||||
const callTemplate_4 = getTemplate(\`_callee-uses-foo\`);
|
||||
const callTemplate_6 = getTemplate(\`_callee-uses-foo\`);
|
||||
const callTemplate_8 = getTemplate(\`_callee-asc\`);
|
||||
const callTemplate_10 = getTemplate(\`_callee-asc-toto\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block4 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([4,5,6]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`value\`] = v2[i1];
|
||||
ctx[\`value_first\`] = i1 === 0;
|
||||
ctx[\`value_last\`] = i1 === v2.length - 1;
|
||||
ctx[\`value_index\`] = i1;
|
||||
ctx[\`value_value\`] = k2[i1];
|
||||
let key1 = ctx['value'];
|
||||
let d1 = ctx['value'];
|
||||
let b4 = block4([d1]);
|
||||
ctx = Object.create(ctx);
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`foo\`] = 'aaa';
|
||||
let b6 = callTemplate_2(ctx, node, key + \`__1__\${key1}\`);
|
||||
ctx = ctx.__proto__;
|
||||
let b7 = callTemplate_4(ctx, node, key + \`__3__\${key1}\`);
|
||||
ctx[\`foo\`] = 'bbb';
|
||||
let b8 = callTemplate_6(ctx, node, key + \`__5__\${key1}\`);
|
||||
let b5 = multi([b6, b7, b8]);
|
||||
ctx[zero] = b5;
|
||||
let b9 = callTemplate_8(ctx, node, key + \`__7__\${key1}\`);
|
||||
ctx = ctx.__proto__;
|
||||
c2[i1] = withKey(multi([b4, b9]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b2 = list(c2);
|
||||
let b10 = callTemplate_10(ctx, node, key + \`__9\`);
|
||||
return block1([], [b2, b10]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`misc other complex template 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_3 = getTemplate(\`LOAD_INFOS_TEMPLATE\`);
|
||||
|
||||
let block1 = createBlock(\`<div><header><nav class=\\"navbar navbar-expand-md navbar-light bg-light\\"><a block-attribute-0=\\"href\\"><b style=\\"color:#777;\\"><block-text-1/></b></a><button type=\\"button\\" class=\\"navbar-toggler\\" data-toggle=\\"collapse\\" data-target=\\"#top_menu_collapse\\"><span class=\\"navbar-toggler-icon\\"/></button><div class=\\"collapse navbar-collapse\\" id=\\"top_menu_collapse\\" aria-expanded=\\"false\\"><ul class=\\"nav navbar-nav ml-auto text-right\\" id=\\"top_menu\\"><block-child-0/><li class=\\"nav-item divider\\"/><block-child-1/></ul><div><div class=\\"input-group input-group-sm\\"><div class=\\"input-group-prepend input-group-sm\\"><button class=\\"btn btn-default fa fa-cog\\" title=\\"Settings\\" block-handler-2=\\"click\\"/><button class=\\"btn btn-default\\" block-handler-3=\\"click\\"> More </button><block-child-2/></div><input class=\\"form-control\\" type=\\"text\\" placeholder=\\"Search\\" aria-label=\\"Search\\" name=\\"search\\" block-attribute-4=\\"value\\" block-handler-5=\\"keyup\\" block-handler-6=\\"change\\" block-ref=\\"7\\"/><div class=\\"input-group-append\\"><button class=\\"btn btn-default fa fa-eraser\\" block-handler-8=\\"click\\"/></div></div></div></div></nav></header><div class=\\"container-fluid\\" block-ref=\\"9\\"><div class=\\"row\\"><!--div class=\\"form-group col-md-6\\">
|
||||
<h5>Search options</h5>
|
||||
<input class=\\"form-control\\" type=\\"text\\" name=\\"default_search\\" id=\\"default_search\\" t-att-checked=\\"default_search\\" placeholder=\\"Default search\\"/>
|
||||
|
||||
<h5>Display options</h5>
|
||||
<div class=\\"form-check\\">
|
||||
<input class=\\"form-check-input\\" type=\\"checkbox\\" name=\\"display_sticky\\"/>
|
||||
<label class=\\"form-check-label\\" for=\\"display_sticky\\">Display sticky</label>
|
||||
</div>
|
||||
<div class=\\"form-check\\">
|
||||
<input class=\\"form-check-input\\" type=\\"checkbox\\" name=\\"display_dev\\"/>
|
||||
<label class=\\"form-check-label\\" for=\\"display_dev\\">Display dev</label>
|
||||
</div>
|
||||
</div--><div class=\\"form-group col-md-6\\"><h5>Triggers</h5><block-child-3/></div></div></div><div class=\\"container-fluid frontend\\"><div class=\\"row\\"><div class=\\"col-md-12\\"><block-child-4/></div><div class=\\"col-md-12\\"><block-child-5/><block-child-6/><block-child-7/></div></div></div></div>\`);
|
||||
let block3 = createBlock(\`<li class=\\"nav-item\\"><a class=\\"nav-link\\" href=\\"#\\" block-handler-0=\\"click\\"><block-text-1/></a></li>\`);
|
||||
let block5 = createBlock(\`<li class=\\"nav-item dropdown\\"><b><a class=\\"nav-link\\" block-attribute-0=\\"href\\">Login</a></b></li>\`);
|
||||
let block8 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link text-danger\\" block-attribute-0=\\"title\\"><i class=\\"fa fa-bug\\"/><block-text-1/></a></li>\`);
|
||||
let block9 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
|
||||
let block11 = createBlock(\`<li class=\\"nav-item\\"><a href=\\"/runbot/errors\\" class=\\"nav-link\\" title=\\"Random Bugs\\"><i class=\\"fa fa-bug\\"/></a></li>\`);
|
||||
let block12 = createBlock(\`<li class=\\"nav-item divider\\"/>\`);
|
||||
let block13 = createBlock(\`<li class=\\"nav-item dropdown\\"><a href=\\"#\\" class=\\"nav-link dropdown-toggle\\" data-toggle=\\"dropdown\\"><b><span><block-text-0/></span></b></a><div class=\\"dropdown-menu js_usermenu\\" role=\\"menu\\"><a class=\\"dropdown-item\\" id=\\"o_logout\\" role=\\"menuitem\\" block-attribute-1=\\"href\\">Logout</a><a class=\\"dropdown-item\\" role=\\"menuitem\\" block-attribute-2=\\"href\\">Web</a></div></li>\`);
|
||||
let block14 = createBlock(\`<select class=\\"custom-select\\" name=\\"category\\" id=\\"category\\"><block-child-0/></select>\`);
|
||||
let block16 = createBlock(\`<option block-attribute-0=\\"value\\" block-attribute-1=\\"selected\\"><block-text-2/></option>\`);
|
||||
let block20 = createBlock(\`<div class=\\"form-check\\"><input class=\\"form-check-input\\" type=\\"checkbox\\" block-attribute-0=\\"name\\" block-attribute-1=\\"id\\" block-attribute-2=\\"checked\\" block-attribute-3=\\"data-trigger_id\\" block-handler-4=\\"change\\"/><label class=\\"form-check-label\\" block-attribute-5=\\"for\\"><block-text-6/></label></div>\`);
|
||||
let block21 = createBlock(\`<div><button class=\\"btn btn-sm btn-default\\" block-handler-0=\\"click\\">All</button><button class=\\"btn btn-sm btn-default\\" block-handler-1=\\"click\\">None</button><button class=\\"btn btn-sm btn-info\\" block-handler-2=\\"click\\">Default</button><button class=\\"btn btn-sm btn-default\\" block-handler-3=\\"click\\">Close</button></div>\`);
|
||||
let block23 = createBlock(\`<div class=\\"alert alert-warning\\" role=\\"alert\\"><block-text-0/> <!-- todo fixme--></div>\`);
|
||||
let block24 = createBlock(\`<div class=\\"mb32\\"><h1>No project</h1></div>\`);
|
||||
let block25 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let b2,b4,b14,b17,b22,b23,b24,b25;
|
||||
let d1 = \`/runbot/\${ctx['project'].slug}\`;
|
||||
let d2 = ctx['project'].name;
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['projects']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`project\`] = v2[i1];
|
||||
let key1 = ctx['project'].id;
|
||||
const arg1 = [ctx['project']];
|
||||
let d3 = [ctx, 'selectProject', arg1];
|
||||
let d4 = ctx['project'].name;
|
||||
c2[i1] = withKey(block3([d3, d4]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
b2 = list(c2);
|
||||
if (ctx['user']) {
|
||||
let b5,b6;
|
||||
if (ctx['user'].public) {
|
||||
let d5 = \`/web/login?redirect=/\`;
|
||||
b5 = block5([d5]);
|
||||
} else {
|
||||
let b7,b10,b13;
|
||||
if (ctx['nb_assigned_errors']&&ctx['nb_assigned_errors']>0) {
|
||||
let d6 = \`You have \${ctx['nb_assigned_errors']} random bug assigned\`;
|
||||
let d7 = ctx['nb_assigned_errors'];
|
||||
let b8 = block8([d6, d7]);
|
||||
let b9 = block9();
|
||||
b7 = multi([b8, b9]);
|
||||
} else if (ctx['nb_build_errors']&&ctx['nb_build_errors']>0) {
|
||||
let b11 = block11();
|
||||
let b12 = block12();
|
||||
b10 = multi([b11, b12]);
|
||||
}
|
||||
let d8 = ctx['user'].name.length>25?ctx['user'].namesubstring(0,23)+'...':ctx['user'].name;
|
||||
let d9 = \`/web/session/logout?redirect=/\`;
|
||||
let d10 = \`/web\`;
|
||||
b13 = block13([d8, d9, d10]);
|
||||
b6 = multi([b7, b10, b13]);
|
||||
}
|
||||
b4 = multi([b5, b6]);
|
||||
}
|
||||
let d11 = [ctx, 'toggleSettingsMenu'];
|
||||
let d12 = [ctx, 'toggleMore'];
|
||||
if (ctx['categories']&&ctx['categories'].length>1) {
|
||||
ctx = Object.create(ctx);
|
||||
const [k15, v15, l15, c15] = prepareList(ctx['categories']);
|
||||
for (let i1 = 0; i1 < l15; i1++) {
|
||||
ctx[\`category\`] = v15[i1];
|
||||
let key1 = ctx['category'].id;
|
||||
let d13 = ctx['category'].id;
|
||||
let d14 = ctx['category'].id==ctx['options'].active_category_id;
|
||||
let d15 = ctx['category'].name;
|
||||
c15[i1] = withKey(block16([d13, d14, d15]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b15 = list(c15);
|
||||
b14 = block14([], [b15]);
|
||||
}
|
||||
let d16 = ctx['search'].value;
|
||||
let d17 = [ctx, 'updateFilter'];
|
||||
let d18 = [ctx, 'updateFilter'];
|
||||
let d19 = (el) => refs[\`search_input\`] = el;
|
||||
let d20 = [ctx, 'clearSearch'];
|
||||
let d21 = (el) => refs[\`settings_menu\`] = el;
|
||||
if (ctx['triggers']) {
|
||||
ctx = Object.create(ctx);
|
||||
const [k18, v18, l18, c18] = prepareList(ctx['triggers']);
|
||||
for (let i1 = 0; i1 < l18; i1++) {
|
||||
ctx[\`trigger\`] = v18[i1];
|
||||
let key1 = ctx['trigger'].id;
|
||||
let b20;
|
||||
if (!ctx['trigger'].manual&&ctx['trigger'].project_id===ctx['project'].id&&ctx['trigger'].category_id===ctx['options'].active_category_id) {
|
||||
let d22 = \`trigger_\${ctx['trigger'].id}\`;
|
||||
let d23 = \`trigger_\${ctx['trigger'].id}\`;
|
||||
let d24 = ctx['options'].trigger_display[ctx['trigger'].id];
|
||||
let d25 = ctx['trigger'].id;
|
||||
let d26 = [ctx, 'updateTriggerDisplay'];
|
||||
let d27 = \`trigger_\${ctx['trigger'].id}\`;
|
||||
let d28 = ctx['trigger'].name;
|
||||
b20 = block20([d22, d23, d24, d25, d26, d27, d28]);
|
||||
}
|
||||
c18[i1] = withKey(multi([b20]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b18 = list(c18);
|
||||
let d29 = [ctx, 'triggerAll'];
|
||||
let d30 = [ctx, 'triggerNone'];
|
||||
let d31 = [ctx, 'triggerDefault'];
|
||||
let d32 = [ctx, 'toggleSettingsMenu'];
|
||||
let b21 = block21([d29, d30, d31, d32]);
|
||||
b17 = multi([b18, b21]);
|
||||
}
|
||||
if (ctx['load_infos']) {
|
||||
b22 = callTemplate_3(ctx, node, key + \`__2\`);
|
||||
}
|
||||
if (ctx['message']) {
|
||||
let d33 = ctx['message'];
|
||||
b23 = block23([d33]);
|
||||
}
|
||||
if (!ctx['project']) {
|
||||
b24 = block24();
|
||||
} else {
|
||||
let b26 = component(\`BundlesList\`, {bundles: ctx['bundles'].sticky,category_custom_views: ctx['category_custom_views'],search: ctx['search']}, key + \`__4\`, node, ctx);
|
||||
let b27 = component(\`BundlesList\`, {bundles: ctx['bundles'].dev,search: ctx['search']}, key + \`__5\`, node, ctx);
|
||||
b25 = block25([], [b26, b27]);
|
||||
}
|
||||
return block1([d1, d2, d11, d12, d16, d17, d18, d19, d20, d21], [b2, b4, b14, b17, b22, b23, b24, b25]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,37 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`memory t-foreach does not leak stuff in global scope 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let vn1 = h('p', p1, c1);
|
||||
let _2 = [3,2,1];
|
||||
if (!_2) { throw new Error('QWeb error: Invalid loop expression')}
|
||||
let _3 = _2;
|
||||
let _4 = _2;
|
||||
if (!(_2 instanceof Array)) {
|
||||
_3 = Object.keys(_2);
|
||||
_4 = Object.values(_2);
|
||||
}
|
||||
let _length3 = _3.length;
|
||||
let _origScope5 = scope;
|
||||
scope = Object.create(scope);
|
||||
for (let i1 = 0; i1 < _length3; i1++) {
|
||||
scope.item_first = i1 === 0
|
||||
scope.item_last = i1 === _length3 - 1
|
||||
scope.item_index = i1
|
||||
scope.item = _3[i1]
|
||||
scope.item_value = _4[i1]
|
||||
let key1 = i1;
|
||||
let _6 = scope['item'];
|
||||
if (_6 != null) {
|
||||
c1.push({text: _6});
|
||||
}
|
||||
}
|
||||
scope = _origScope5;
|
||||
return vn1;
|
||||
}"
|
||||
`;
|
||||
@@ -1,57 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`qweb t-att t-att-class with multiple classes 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _1 = utils.toClassObj({'a b c':scope['value']});
|
||||
let c2 = [], p2 = {key:2,class:_1};
|
||||
let vn2 = h('div', p2, c2);
|
||||
return vn2;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-att t-att-class with multiple classes 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _3 = utils.toClassObj({['a b c']:scope['value']});
|
||||
let c4 = [], p4 = {key:4,class:_3};
|
||||
let vn4 = h('div', p4, c4);
|
||||
return vn4;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-att t-att-class with multiple classes, some of which are duplicate 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _1 = utils.toClassObj({'a b c':scope['value'],'a b d':!scope['value']});
|
||||
let c2 = [], p2 = {key:2,class:_1};
|
||||
let vn2 = h('div', p2, c2);
|
||||
return vn2;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-att t-att-class with multiple classes, some of which are duplicate 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let utils = this.constructor.utils;
|
||||
let scope = Object.create(context);
|
||||
let h = this.h;
|
||||
let _3 = utils.toClassObj({'a b c':scope['value'],'a b d':!scope['value']});
|
||||
let c4 = [], p4 = {key:4,class:_3};
|
||||
let vn4 = h('div', p4, c4);
|
||||
return vn4;
|
||||
}"
|
||||
`;
|
||||
@@ -1,71 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`qweb t-tag simple usecases 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let scope = Object.create(context);
|
||||
let result;
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let tag2 = 'div';
|
||||
let vn1 = h(tag2, p1, c1);
|
||||
result = vn1;
|
||||
return result;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-tag simple usecases 2`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let scope = Object.create(context);
|
||||
let result;
|
||||
let h = this.h;
|
||||
let c3 = [], p3 = {key:3};
|
||||
let tag4 = scope['tag'];
|
||||
let vn3 = h(tag4, p3, c3);
|
||||
result = vn3;
|
||||
c3.push({text: \`text\`});
|
||||
return result;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-tag with multiple attributes 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let scope = Object.create(context);
|
||||
let result;
|
||||
let h = this.h;
|
||||
let _2 = {'blueberry':true};
|
||||
let _3 = 'raspberry';
|
||||
let c4 = [], p4 = {key:4,attrs:{taste: _3},class:_2};
|
||||
let tag5 = scope['tag'];
|
||||
let vn4 = h(tag5, p4, c4);
|
||||
result = vn4;
|
||||
c4.push({text: \`gooseberry\`});
|
||||
return result;
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`qweb t-tag with multiple child nodes 1`] = `
|
||||
"function anonymous(context, extra
|
||||
) {
|
||||
// Template name: \\"test\\"
|
||||
let scope = Object.create(context);
|
||||
let result;
|
||||
let h = this.h;
|
||||
let c1 = [], p1 = {key:1};
|
||||
let tag2 = scope['tag'];
|
||||
let vn1 = h(tag2, p1, c1);
|
||||
result = vn1;
|
||||
c1.push({text: \` pear \`});
|
||||
let c3 = [], p3 = {key:3};
|
||||
let vn3 = h('span', p3, c3);
|
||||
c1.push(vn3);
|
||||
c3.push({text: \`apple\`});
|
||||
c1.push({text: \` strawberry \`});
|
||||
return result;
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,337 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`simple templates, mostly static can render a table row 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<tr><td>cell</td></tr>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with a class attribute 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"abc\\">foo</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with a class attribute with a quote 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div class=\\"a'bc\\">word</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with a span child node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span>word</span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with an arbitrary attribute with a quote 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div abc=\\"a'bc\\">word</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with an empty class attribute 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>word</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static div with content 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>foo</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static dom node with t-esc 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static dom node with t-esc 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static dynamic text value 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(ctx['text']);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static empty div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static empty string 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static empty string in a template set 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static multiple root nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div>foo</div>\`);
|
||||
let block3 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = block2();
|
||||
let b3 = block3();
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static simple string 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`hello vdom\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static simple string in t tag 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return text(\`hello vdom\`);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static static text and dynamic text (no t tag) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(\`hello \`);
|
||||
let b3 = text(ctx['text']);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static static text and dynamic text 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(\`hello \`);
|
||||
let b3 = text(ctx['text']);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static t-esc in dom node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static t-esc in dom node, variations 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>hello <block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static t-esc in dom node, variations 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>hello <block-text-0/> world</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static two t-escs next to each other 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(ctx['text1']);
|
||||
let b3 = text(ctx['text2']);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static two t-escs next to each other 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(ctx['text1']);
|
||||
let b3 = text(ctx['text2']);
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`simple templates, mostly static two t-escs next to each other, in a div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['text1'];
|
||||
let d2 = ctx['text2'];
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,39 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`debugging t-debug 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>hey</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
debugger;
|
||||
let b2;
|
||||
if (true) {
|
||||
debugger;
|
||||
b2 = block2();
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`debugging t-log 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`foo\`] = 42;
|
||||
console.log(ctx['foo']+3);
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,200 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-esc div with falsy values 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><p><block-text-0/></p><p><block-text-1/></p><p><block-text-2/></p><p><block-text-3/></p><p><block-text-4/></p></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['v1'];
|
||||
let d2 = ctx['v2'];
|
||||
let d3 = ctx['v3'];
|
||||
let d4 = ctx['v4'];
|
||||
let d5 = ctx['v5'];
|
||||
return block1([d1, d2, d3, d4, d5]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc escaping 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['var'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc escaping on a node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = 'ok';
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc escaping on a node with a body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = withDefault('ok', \`nope\`);
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc escaping on a node with a body, as a default 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = withDefault(ctx['var'], \`nope\`);
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc falsy values in text nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(ctx['v1']);
|
||||
let b3 = text(\`:\`);
|
||||
let b4 = text(ctx['v2']);
|
||||
let b5 = text(\`:\`);
|
||||
let b6 = text(ctx['v3']);
|
||||
let b7 = text(\`:\`);
|
||||
let b8 = text(ctx['v4']);
|
||||
let b9 = text(\`:\`);
|
||||
let b10 = text(ctx['v5']);
|
||||
return multi([b2, b3, b4, b5, b6, b7, b8, b9, b10]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = 'ok';
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc t-esc is escaped 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>escaped</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = block2();
|
||||
ctx[\`var\`] = b2;
|
||||
let d1 = ctx['var'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc t-esc work with spread operator 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = [...ctx['state'].list];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc t-esc=0 is escaped 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx[zero];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc t-esc=0 is escaped 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<p>escaped</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = block2();
|
||||
ctx[zero] = b2;
|
||||
let b3 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-esc variable 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['var'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,524 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-foreach does not pollute the rendering context 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([1]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = ctx['item'];
|
||||
c2[i1] = withKey(text(ctx['item']), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach iterate on items (on a element node) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([1,2]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = ctx['item'];
|
||||
let d1 = ctx['item'];
|
||||
c2[i1] = withKey(block3([d1]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach iterate on items 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([3,2,1]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
ctx[\`item_index\`] = i1;
|
||||
ctx[\`item_value\`] = k2[i1];
|
||||
let key1 = ctx['item'];
|
||||
let b4 = text(\` [\`);
|
||||
let b5 = text(ctx['item_index']);
|
||||
let b6 = text(\`: \`);
|
||||
let b7 = text(ctx['item']);
|
||||
let b8 = text(\` \`);
|
||||
let b9 = text(ctx['item_value']);
|
||||
let b10 = text(\`] \`);
|
||||
c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach iterate, dict param 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['value']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
ctx[\`item_index\`] = i1;
|
||||
ctx[\`item_value\`] = k2[i1];
|
||||
let key1 = ctx['item_index'];
|
||||
let b4 = text(\` [\`);
|
||||
let b5 = text(ctx['item_index']);
|
||||
let b6 = text(\`: \`);
|
||||
let b7 = text(ctx['item']);
|
||||
let b8 = text(\` \`);
|
||||
let b9 = text(ctx['item_value']);
|
||||
let b10 = text(\`] \`);
|
||||
c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9, b10]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach iterate, position 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(Array(5));
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`elem\`] = v2[i1];
|
||||
ctx[\`elem_first\`] = i1 === 0;
|
||||
ctx[\`elem_last\`] = i1 === v2.length - 1;
|
||||
ctx[\`elem_index\`] = i1;
|
||||
let key1 = ctx['elem'];
|
||||
let b4,b5,b6,b7,b8,b9;
|
||||
b4 = text(\` -\`);
|
||||
if (ctx['elem_first']) {
|
||||
b5 = text(\` first\`);
|
||||
}
|
||||
if (ctx['elem_last']) {
|
||||
b6 = text(\` last\`);
|
||||
}
|
||||
b7 = text(\` (\`);
|
||||
b8 = text(ctx['elem_index']);
|
||||
b9 = text(\`) \`);
|
||||
c2[i1] = withKey(multi([b4, b5, b6, b7, b8, b9]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach simple iteration (in a node) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([3,2,1]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = ctx['item'];
|
||||
c2[i1] = withKey(text(ctx['item']), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach simple iteration 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList([3,2,1]);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`item\`] = v1[i1];
|
||||
let key1 = ctx['item'];
|
||||
c1[i1] = withKey(text(ctx['item']), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach simple iteration with two nodes inside 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block3 = createBlock(\`<span>a<block-text-0/></span>\`);
|
||||
let block4 = createBlock(\`<span>b<block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList([3,2,1]);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`item\`] = v1[i1];
|
||||
let key1 = ctx['item'];
|
||||
let d1 = ctx['item'];
|
||||
let b3 = block3([d1]);
|
||||
let d2 = ctx['item'];
|
||||
let b4 = block4([d2]);
|
||||
c1[i1] = withKey(multi([b3, b4]), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-call with body in t-foreach in t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = text(\` [\`);
|
||||
let b3 = text(ctx['a']);
|
||||
let b4 = text(\`] [\`);
|
||||
let b5 = text(ctx['b']);
|
||||
let b6 = text(\`] [\`);
|
||||
let b7 = text(ctx['c']);
|
||||
let b8 = text(\`] \`);
|
||||
return multi([b2, b3, b4, b5, b6, b7, b8]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-call with body in t-foreach in t-foreach 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
|
||||
let block6 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`a\`] = v2[i1];
|
||||
ctx[\`a_first\`] = i1 === 0;
|
||||
ctx[\`a_last\`] = i1 === v2.length - 1;
|
||||
ctx[\`a_index\`] = i1;
|
||||
ctx[\`a_value\`] = k2[i1];
|
||||
let key1 = ctx['a'];
|
||||
ctx = Object.create(ctx);
|
||||
const [k4, v4, l4, c4] = prepareList(ctx['letters']);
|
||||
for (let i2 = 0; i2 < l4; i2++) {
|
||||
ctx[\`b\`] = v4[i2];
|
||||
ctx[\`b_first\`] = i2 === 0;
|
||||
ctx[\`b_last\`] = i2 === v4.length - 1;
|
||||
ctx[\`b_index\`] = i2;
|
||||
ctx[\`b_value\`] = k4[i2];
|
||||
let key2 = ctx['b'];
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`c\`] = 'x'+'_'+ctx['a']+'_'+ctx['b'];
|
||||
c4[i2] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
|
||||
ctx = ctx.__proto__;
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b4 = list(c4);
|
||||
let d1 = ctx['c'];
|
||||
let b6 = block6([d1]);
|
||||
c2[i1] = withKey(multi([b4, b6]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b2 = list(c2);
|
||||
let d2 = ctx['a'];
|
||||
let d3 = ctx['b'];
|
||||
let d4 = ctx['c'];
|
||||
return block1([d2, d3, d4], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-call without body in t-foreach in t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`c\`] = 'x'+'_'+ctx['a']+'_'+ctx['b'];
|
||||
let b2 = text(\` [\`);
|
||||
let b3 = text(ctx['a']);
|
||||
let b4 = text(\`] [\`);
|
||||
let b5 = text(ctx['b']);
|
||||
let b6 = text(\`] [\`);
|
||||
let b7 = text(ctx['c']);
|
||||
let b8 = text(\`] \`);
|
||||
return multi([b2, b3, b4, b5, b6, b7, b8]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-call without body in t-foreach in t-foreach 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><span>[<block-text-0/>][<block-text-1/>][<block-text-2/>]</span></div>\`);
|
||||
let block6 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`a\`] = v2[i1];
|
||||
ctx[\`a_first\`] = i1 === 0;
|
||||
ctx[\`a_last\`] = i1 === v2.length - 1;
|
||||
ctx[\`a_index\`] = i1;
|
||||
ctx[\`a_value\`] = k2[i1];
|
||||
let key1 = ctx['a'];
|
||||
ctx = Object.create(ctx);
|
||||
const [k4, v4, l4, c4] = prepareList(ctx['letters']);
|
||||
for (let i2 = 0; i2 < l4; i2++) {
|
||||
ctx[\`b\`] = v4[i2];
|
||||
ctx[\`b_first\`] = i2 === 0;
|
||||
ctx[\`b_last\`] = i2 === v4.length - 1;
|
||||
ctx[\`b_index\`] = i2;
|
||||
ctx[\`b_value\`] = k4[i2];
|
||||
let key2 = ctx['b'];
|
||||
c4[i2] = withKey(callTemplate_2(ctx, node, key + \`__1__\${key1}__\${key2}\`), key2);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b4 = list(c4);
|
||||
let d1 = ctx['c'];
|
||||
let b6 = block6([d1]);
|
||||
c2[i1] = withKey(multi([b4, b6]), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
let b2 = list(c2);
|
||||
let d2 = ctx['a'];
|
||||
let d3 = ctx['b'];
|
||||
let d4 = ctx['c'];
|
||||
return block1([d2, d3, d4], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-foreach in t-foreach 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['numbers']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`number\`] = v2[i1];
|
||||
let key1 = ctx['number'];
|
||||
ctx = Object.create(ctx);
|
||||
const [k3, v3, l3, c3] = prepareList(ctx['letters']);
|
||||
for (let i2 = 0; i2 < l3; i2++) {
|
||||
ctx[\`letter\`] = v3[i2];
|
||||
let key2 = ctx['letter'];
|
||||
let b5 = text(\` [\`);
|
||||
let b6 = text(ctx['number']);
|
||||
let b7 = text(ctx['letter']);
|
||||
let b8 = text(\`] \`);
|
||||
c3[i2] = withKey(multi([b5, b6, b7, b8]), key2);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
c2[i1] = withKey(list(c3), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-foreach with t-if inside (no external node) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block3 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k1, v1, l1, c1] = prepareList(ctx['elems']);
|
||||
for (let i1 = 0; i1 < l1; i1++) {
|
||||
ctx[\`elem\`] = v1[i1];
|
||||
let key1 = ctx['elem'].id;
|
||||
let b3;
|
||||
if (ctx['elem'].id<3) {
|
||||
let d1 = ctx['elem'].text;
|
||||
b3 = block3([d1]);
|
||||
}
|
||||
c1[i1] = withKey(multi([b3]), key1);
|
||||
}
|
||||
return list(c1);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach t-foreach with t-if inside 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block4 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['elems']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`elem\`] = v2[i1];
|
||||
let key1 = ctx['elem'].id;
|
||||
let b4;
|
||||
if (ctx['elem'].id<3) {
|
||||
let d1 = ctx['elem'].text;
|
||||
b4 = block4([d1]);
|
||||
}
|
||||
c2[i1] = withKey(multi([b4]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach throws error if invalid loop expression 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['abc']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
ctx[\`item_index\`] = i1;
|
||||
let key1 = ctx['item'];
|
||||
c2[i1] = withKey(block3(), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach warn if no key in some case 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList([1,2]);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = i1;
|
||||
let d1 = ctx['item'];
|
||||
c2[i1] = withKey(block3([d1]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-foreach with t-memo 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
let assign = Object.assign;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<p><block-text-0/><block-text-1/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let cache = ctx.cache || {};
|
||||
let nextCache = ctx.cache = {};
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['items']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = ctx['item'].id;
|
||||
let memo1 = [ctx['item'].x]
|
||||
let vnode1 = cache[key1];
|
||||
if (vnode1) {
|
||||
if (shallowEqual(vnode1.memo, memo1)) {
|
||||
c2[i1] = vnode1;
|
||||
nextCache[key1] = vnode1;
|
||||
continue;
|
||||
}
|
||||
}
|
||||
let d1 = ctx['item'].x;
|
||||
let d2 = ctx['item'].y;
|
||||
c2[i1] = withKey(block3([d1, d2]), key1);
|
||||
nextCache[key1] = assign(c2[i1], {memo: memo1});
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,521 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-if a t-if next to a div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block2 = createBlock(\`<div>foo</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
b2 = block2();
|
||||
if (ctx['cond']) {
|
||||
b3 = text(\`1\`);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if a t-if with two inner nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block3 = createBlock(\`<span>yip</span>\`);
|
||||
let block4 = createBlock(\`<div>yip</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let b3 = block3();
|
||||
let b4 = block4();
|
||||
b2 = multi([b3, b4]);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if boolean value condition elif (no outside node) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4,b5;
|
||||
if (ctx['color']=='black') {
|
||||
b2 = text(\`black pearl\`);
|
||||
} else if (ctx['color']=='yellow') {
|
||||
b3 = text(\`yellow submarine\`);
|
||||
} else if (ctx['color']=='red') {
|
||||
b4 = text(\`red is dead\`);
|
||||
} else {
|
||||
b5 = text(\`beer\`);
|
||||
}
|
||||
return multi([b2, b3, b4, b5]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if boolean value condition elif 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4,b5;
|
||||
if (ctx['color']=='black') {
|
||||
b2 = text(\`black pearl\`);
|
||||
} else if (ctx['color']=='yellow') {
|
||||
b3 = text(\`yellow submarine\`);
|
||||
} else if (ctx['color']=='red') {
|
||||
b4 = text(\`red is dead\`);
|
||||
} else {
|
||||
b5 = text(\`beer\`);
|
||||
}
|
||||
return block1([], [b2, b3, b4, b5]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if boolean value condition else 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`ok\`);
|
||||
} else {
|
||||
b3 = text(\`ok-else\`);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if boolean value condition false else 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span>begin</span><block-child-0/><block-child-1/><span>end</span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`fail\`);
|
||||
} else {
|
||||
b3 = text(\`fail-else\`);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if can use some boolean operators in expressions 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/><block-child-2/><block-child-3/><block-child-4/><block-child-5/><block-child-6/><block-child-7/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3,b4,b5,b6,b7,b8,b9;
|
||||
if (ctx['cond1']&&ctx['cond2']) {
|
||||
b2 = text(\`and\`);
|
||||
}
|
||||
if (ctx['cond1']&&ctx['cond3']) {
|
||||
b3 = text(\`nope\`);
|
||||
}
|
||||
if (ctx['cond1']||ctx['cond3']) {
|
||||
b4 = text(\`or\`);
|
||||
}
|
||||
if (ctx['cond3']||ctx['cond4']) {
|
||||
b5 = text(\`nope\`);
|
||||
}
|
||||
if (ctx['m']>3) {
|
||||
b6 = text(\`mgt\`);
|
||||
}
|
||||
if (ctx['n']>3) {
|
||||
b7 = text(\`ngt\`);
|
||||
}
|
||||
if (ctx['m']<3) {
|
||||
b8 = text(\`mlt\`);
|
||||
}
|
||||
if (ctx['n']<3) {
|
||||
b9 = text(\`nlt\`);
|
||||
}
|
||||
return block1([], [b2, b3, b4, b5, b6, b7, b8, b9]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if div containing a t-if with two inner nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<span>yip</span>\`);
|
||||
let block4 = createBlock(\`<div>yip</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let b3 = block3();
|
||||
let b4 = block4();
|
||||
b2 = multi([b3, b4]);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if dynamic content after t-if with two children nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
|
||||
let block3 = createBlock(\`<p>1</p>\`);
|
||||
let block4 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let b3 = block3();
|
||||
let b4 = block4();
|
||||
b2 = multi([b3, b4]);
|
||||
}
|
||||
let d1 = ctx['text'];
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if just a t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`ok\`);
|
||||
}
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if simple t-if/t-else 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`1\`);
|
||||
} else {
|
||||
b3 = text(\`2\`);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if simple t-if/t-else in a div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`1\`);
|
||||
} else {
|
||||
b3 = text(\`2\`);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-esc with t-elif 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (false) {
|
||||
b2 = text(\`abc\`);
|
||||
} else {
|
||||
b3 = text('x');
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-esc with t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (true) {
|
||||
b2 = text('x');
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-if and t-else with two nodes 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block4 = createBlock(\`<span>a</span>\`);
|
||||
let block5 = createBlock(\`<span>b</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`1\`);
|
||||
} else {
|
||||
let b4 = block4();
|
||||
let b5 = block5();
|
||||
b3 = multi([b4, b5]);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-if in a div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`ok\`);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-if in a t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>1<block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['cond1']) {
|
||||
let b3;
|
||||
if (ctx['cond2']) {
|
||||
b3 = text(\`2\`);
|
||||
}
|
||||
b2 = block2([], [b3]);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-if/t-else with more content 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
if (ctx['condition']) {
|
||||
b2 = text(\`asf\`);
|
||||
}
|
||||
} else {
|
||||
b3 = text(\`coucou\`);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-set, then t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2;
|
||||
ctx[\`title\`] = 'test';
|
||||
if (ctx['title']) {
|
||||
b2 = text(ctx['title']);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-set, then t-if, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>COUCOU</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2;
|
||||
ctx[\`y\`] = true;
|
||||
ctx[\`x\`] = ctx['y'];
|
||||
if (ctx['x']) {
|
||||
b2 = block2();
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if t-set, then t-if, part 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<span>AAA</span>\`);
|
||||
let block3 = createBlock(\`<span>BBB</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2,b3;
|
||||
ctx[\`y\`] = false;
|
||||
ctx[\`x\`] = ctx['y'];
|
||||
if (ctx['x']) {
|
||||
b2 = block2();
|
||||
} else if (!ctx['x']) {
|
||||
b3 = block3();
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if two consecutive t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['cond1']) {
|
||||
b2 = text(\`1\`);
|
||||
}
|
||||
if (ctx['cond2']) {
|
||||
b3 = text(\`2\`);
|
||||
}
|
||||
return multi([b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if two consecutive t-if in a div 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['cond1']) {
|
||||
b2 = text(\`1\`);
|
||||
}
|
||||
if (ctx['cond2']) {
|
||||
b3 = text(\`2\`);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-if two t-ifs next to each other 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
let block2 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
let block4 = createBlock(\`<p>1</p>\`);
|
||||
let block5 = createBlock(\`<p>2</p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2,b3;
|
||||
if (ctx['condition']) {
|
||||
let d1 = ctx['text'];
|
||||
b2 = block2([d1]);
|
||||
}
|
||||
if (ctx['condition']) {
|
||||
let b4 = block4();
|
||||
let b5 = block5();
|
||||
b3 = multi([b4, b5]);
|
||||
}
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,181 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-raw literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html('ok');
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw literal, no outside html element 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return html('ok');
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw multiple calls to t-raw 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><div>Greeter</div><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html(ctx[zero]);
|
||||
let b3 = html(ctx[zero]);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw multiple calls to t-raw 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>coucou</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = block2();
|
||||
ctx[zero] = b2;
|
||||
let b3 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw not escaping 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html(ctx['var']);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw and another sibling node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><span>hello</span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html(ctx['var']);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw on a node with a body, as a default 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = text(\`nope\`);
|
||||
let b2 = html(withDefault(ctx['var'], b3));
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw on a node with a dom node in body, as a default 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
let block3 = createBlock(\`<div>nope</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b3 = block3();
|
||||
let b2 = html(withDefault(ctx['var'], b3));
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw with a <t/> in body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return html(ctx['var']);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw with comment 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html(ctx['var']);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw t-raw with just a t-set t-value in body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return html(ctx['var']);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-raw variable 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-child-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = html(ctx['var']);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,136 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-ref can get a dynamic ref on a node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
const v1 = ctx['id'];
|
||||
let d1 = (el) => refs[\`myspan\${v1}\`] = el;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref can get a ref on a node 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span block-ref=\\"0\\"/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let d1 = (el) => refs[\`myspan\`] = el;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref ref in a t-call 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
const callTemplate_2 = getTemplate(\`sub\`);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = callTemplate_2(ctx, node, key + \`__1\`);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref ref in a t-call 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div>1<span block-ref=\\"0\\"/>2</div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let d1 = (el) => refs[\`name\`] = el;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref ref in a t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let d1 = (el) => refs[\`name\`] = el;
|
||||
b2 = block2([d1]);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref refs in a loop 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div block-ref=\\"0\\"><block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['items']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`item\`] = v2[i1];
|
||||
let key1 = ctx['item'];
|
||||
const v1 = ctx['item'];
|
||||
let d1 = (el) => refs[\`\${v1}\`] = el;
|
||||
let d2 = ctx['item'];
|
||||
c2[i1] = withKey(block3([d1, d2]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-ref two refs, one in a t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><p block-ref=\\"0\\"/></div>\`);
|
||||
let block2 = createBlock(\`<span block-ref=\\"0\\"/>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const refs = ctx.__owl__.refs;
|
||||
let b2;
|
||||
if (ctx['condition']) {
|
||||
let d1 = (el) => refs[\`name\`] = el;
|
||||
b2 = block2([d1]);
|
||||
}
|
||||
let d2 = (el) => refs[\`p\`] = el;
|
||||
return block1([d2], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,386 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`t-set evaluate value expression 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = 1+2;
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set evaluate value expression, part 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = ctx['somevariable']+2;
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from attribute literal (no outside div) 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = 'ok';
|
||||
return text(ctx['value']);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from attribute literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = 'ok';
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from attribute lookup 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`stuff\`] = ctx['value'];
|
||||
let d1 = ctx['stuff'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from body literal 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = \`ok\`;
|
||||
return text(ctx['value']);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from body lookup 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = text(ctx['value']);
|
||||
ctx[\`stuff\`] = b2;
|
||||
let d1 = ctx['stuff'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set set from empty body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`stuff\`] = null;
|
||||
let d1 = ctx['stuff'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set and t-if 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2;
|
||||
ctx[\`v\`] = ctx['value'];
|
||||
if (ctx['v']==='ok') {
|
||||
b2 = text(\`grimbergen\`);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set body is evaluated immediately 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`v1\`] = 'before';
|
||||
let d1 = ctx['v1'];
|
||||
let b2 = block2([d1]);
|
||||
ctx[\`v2\`] = b2;
|
||||
ctx[\`v1\`] = 'after';
|
||||
let b3 = html(ctx['v2']);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set evaluates an expression only once 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`v\`] = ctx['value']+' artois';
|
||||
let d1 = ctx['v'];
|
||||
let d2 = ctx['v'];
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set should reuse variable if possible 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block3 = createBlock(\`<div><span>v<block-text-0/></span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`v\`] = 1;
|
||||
ctx = Object.create(ctx);
|
||||
const [k2, v2, l2, c2] = prepareList(ctx['list']);
|
||||
for (let i1 = 0; i1 < l2; i1++) {
|
||||
ctx[\`elem\`] = v2[i1];
|
||||
ctx[\`elem_index\`] = i1;
|
||||
let key1 = ctx['elem_index'];
|
||||
let d1 = ctx['v'];
|
||||
ctx[\`v\`] = ctx['elem'];
|
||||
c2[i1] = withKey(block3([d1]), key1);
|
||||
}
|
||||
let b2 = list(c2);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set with content and sub t-esc 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b3 = text(ctx['beep']);
|
||||
let b4 = text(\` boop\`);
|
||||
let b2 = multi([b3, b4]);
|
||||
ctx[\`setvar\`] = b2;
|
||||
let d1 = ctx['setvar'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set with t-value (falsy) and body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`v3\`] = false;
|
||||
ctx[\`v1\`] = 'before';
|
||||
let d1 = ctx['v1'];
|
||||
let b2 = block2([d1]);
|
||||
ctx[\`v2\`] = withDefault(ctx['v3'], b2);
|
||||
ctx[\`v1\`] = 'after';
|
||||
ctx[\`v3\`] = true;
|
||||
let b3 = html(ctx['v2']);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set with t-value (truthy) and body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
let block2 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`v3\`] = 'Truthy';
|
||||
ctx[\`v1\`] = 'before';
|
||||
let d1 = ctx['v1'];
|
||||
let b2 = block2([d1]);
|
||||
ctx[\`v2\`] = withDefault(ctx['v3'], b2);
|
||||
ctx[\`v1\`] = 'after';
|
||||
ctx[\`v3\`] = false;
|
||||
let b3 = html(ctx['v2']);
|
||||
return block1([], [b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set, t-if, and mix of expression/body lookup, 1 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
if (ctx['flag']) {
|
||||
ctx[\`ourvar\`] = \`1\`;
|
||||
} else {
|
||||
ctx[\`ourvar\`] = 0;
|
||||
}
|
||||
let d1 = ctx['ourvar'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set, t-if, and mix of expression/body lookup, 2 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
if (ctx['flag']) {
|
||||
ctx[\`ourvar\`] = 1;
|
||||
} else {
|
||||
ctx[\`ourvar\`] = \`0\`;
|
||||
}
|
||||
let d1 = ctx['ourvar'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set t-set, t-if, and mix of expression/body lookup, 3 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2;
|
||||
if (ctx['flag']) {
|
||||
ctx[\`ourvar\`] = 1;
|
||||
} else {
|
||||
ctx[\`ourvar\`] = \`0\`;
|
||||
}
|
||||
b2 = text(ctx['ourvar']);
|
||||
return multi([b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set value priority (with non text body 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
let block2 = createBlock(\`<span>2</span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
let b2 = block2();
|
||||
ctx[\`value\`] = withDefault(1, b2);
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`t-set value priority 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
ctx[\`value\`] = withDefault(1, \`2\`);
|
||||
let d1 = ctx['value'];
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,89 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`white space handling consecutives whitespaces are condensed into a single space 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div> abc </div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`white space handling nothing is done in pre tags 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<pre> </pre>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`white space handling nothing is done in pre tags 2`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<pre>
|
||||
some text
|
||||
</pre>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`white space handling nothing is done in pre tags 3`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<pre>
|
||||
|
||||
</pre>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`white space handling white space only text nodes are condensed into a single space 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div> </div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`white space handling whitespace only text nodes with newlines are removed 1`] = `
|
||||
"function anonymous(bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, component } = bdom;
|
||||
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><span>abc</span></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
return block1();
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -0,0 +1,382 @@
|
||||
import { xml } from "../../src";
|
||||
import { mount, patch } from "../../src/blockdom";
|
||||
import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
// -----------------------------------------------------------------------------
|
||||
// attributes
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("attributes", () => {
|
||||
test("static attributes", () => {
|
||||
const template = `<div foo="a" bar="b" baz="c"/>`;
|
||||
expect(renderToString(template)).toBe(`<div foo="a" bar="b" baz="c"></div>`);
|
||||
});
|
||||
|
||||
test("two classes", () => {
|
||||
const template = `<div class="a b"/>`;
|
||||
expect(renderToString(template)).toBe(`<div class="a b"></div>`);
|
||||
});
|
||||
|
||||
test("static attributes with dashes", () => {
|
||||
const template = `<div aria-label="Close"/>`;
|
||||
expect(renderToString(template)).toBe(`<div aria-label="Close"></div>`);
|
||||
});
|
||||
|
||||
test("static attributes on void elements", () => {
|
||||
const template = `<img src="/test.skip.jpg" alt="Test"/>`;
|
||||
expect(renderToString(template)).toBe(`<img src="/test.skip.jpg" alt="Test">`);
|
||||
});
|
||||
|
||||
test("dynamic attributes", () => {
|
||||
const template = `<div t-att-foo="'bar'"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div foo="bar"></div>`);
|
||||
});
|
||||
|
||||
test("two dynamic attributes", () => {
|
||||
const template = `<div t-att-foo="'bar'" t-att-bar="'foo'"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div foo="bar" bar="foo"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic class attribute", () => {
|
||||
const template = `<div t-att-class="c"/>`;
|
||||
const result = renderToString(template, { c: "abc" });
|
||||
expect(result).toBe(`<div class="abc"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic empty class attribute", () => {
|
||||
const template = `<div t-att-class="c"/>`;
|
||||
const result = renderToString(template, { c: "" });
|
||||
expect(result).toBe(`<div></div>`);
|
||||
});
|
||||
|
||||
test("dynamic attribute with a dash", () => {
|
||||
const template = `<div t-att-data-action-id="id"/>`;
|
||||
const result = renderToString(template, { id: 32 });
|
||||
expect(result).toBe(`<div data-action-id="32"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic formatted attributes with a dash", () => {
|
||||
const template = `<div t-attf-aria-label="Some text {{id}}"/>`;
|
||||
const result = renderToString(template, { id: 32 });
|
||||
expect(result).toBe(`<div aria-label="Some text 32"></div>`);
|
||||
});
|
||||
|
||||
test("fixed variable", () => {
|
||||
const template = `<div t-att-foo="value"/>`;
|
||||
const result = renderToString(template, { value: "ok" });
|
||||
expect(result).toBe(`<div foo="ok"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic attribute evaluating to 0", () => {
|
||||
const template = `<div t-att-foo="value"/>`;
|
||||
const result = renderToString(template, { value: 0 });
|
||||
expect(result).toBe(`<div foo="0"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic class attribute evaluating to 0", () => {
|
||||
const template = `<div t-att-class="value"/>`;
|
||||
const result = renderToString(template, { value: 0 });
|
||||
expect(result).toBe(`<div class="0"></div>`);
|
||||
});
|
||||
|
||||
test("dynamic attribute falsy variable ", () => {
|
||||
const template = `<div t-att-foo="value"/>`;
|
||||
const result = renderToString(template, { value: false });
|
||||
expect(result).toBe(`<div></div>`);
|
||||
});
|
||||
|
||||
test("tuple literal", () => {
|
||||
const template = `<div t-att="['foo', 'bar']"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div foo="bar"></div>`);
|
||||
});
|
||||
|
||||
test("tuple variable", () => {
|
||||
const template = `<div t-att="value"/>`;
|
||||
const result = renderToString(template, { value: ["foo", "bar"] });
|
||||
expect(result).toBe(`<div foo="bar"></div>`);
|
||||
});
|
||||
|
||||
test("object", () => {
|
||||
const template = `<div t-att="value"/>`;
|
||||
const result = renderToString(template, {
|
||||
value: { a: 1, b: 2, c: 3 },
|
||||
});
|
||||
expect(result).toBe(`<div a="1" b="2" c="3"></div>`);
|
||||
});
|
||||
|
||||
test("format literal", () => {
|
||||
const template = `<div t-attf-foo="bar"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div foo="bar"></div>`);
|
||||
});
|
||||
|
||||
test("format value", () => {
|
||||
const template = `<div t-attf-foo="b{{value}}r"/>`;
|
||||
const result = renderToString(template, { value: "a" });
|
||||
expect(result).toBe(`<div foo="bar"></div>`);
|
||||
});
|
||||
|
||||
test("t-attf-class", () => {
|
||||
const template = `<div t-attf-class="hello"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div class="hello"></div>`);
|
||||
});
|
||||
|
||||
test("t-attf-class with multiple classes", () => {
|
||||
const template = `<div t-attf-class="hello {{word}}"/>`;
|
||||
const result = renderToString(template, { word: "world" });
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("t-attf-class with multiple classes separated by multiple spaces", () => {
|
||||
const template = `<div t-attf-class="hello {{word}}"/>`;
|
||||
const result = renderToString(template, { word: "world" });
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("t-attf-class should combine with class", () => {
|
||||
const template = `<div class="hello" t-attf-class="world"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("from variables set previously", () => {
|
||||
const template = `<div><t t-set="abc" t-value="'def'"/><span t-att-class="abc"/></div>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe('<div><span class="def"></span></div>');
|
||||
});
|
||||
|
||||
test("from variables set previously (no external node)", () => {
|
||||
const template = `
|
||||
<t t-set="abc" t-value="'def'"/>
|
||||
<span t-att-class="abc"/>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe('<span class="def"></span>');
|
||||
});
|
||||
|
||||
test("from object variables set previously", () => {
|
||||
// Note: standard qweb does not allow this...
|
||||
const template = `
|
||||
<div>
|
||||
<t t-set="o" t-value="{a:'b'}"/>
|
||||
<span t-att-class="o.a"/>
|
||||
</div>`;
|
||||
const result = renderToString(template);
|
||||
expect(result).toBe('<div><span class="b"></span></div>');
|
||||
});
|
||||
|
||||
test("format expression", () => {
|
||||
const template = `<div t-attf-foo="{{value + 37}}"/>`;
|
||||
const result = renderToString(template, { value: 5 });
|
||||
expect(result).toBe(`<div foo="42"></div>`);
|
||||
});
|
||||
|
||||
test("format multiple", () => {
|
||||
const template = `<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>`;
|
||||
const result = renderToString(template, {
|
||||
value1: 0,
|
||||
value2: 1,
|
||||
value3: 2,
|
||||
});
|
||||
expect(result).toBe(`<div foo="a 0 is 1 of 2 ]"></div>`);
|
||||
});
|
||||
|
||||
test("various escapes", () => {
|
||||
const template = `
|
||||
<div foo="<foo"
|
||||
t-att-bar="bar"
|
||||
t-attf-baz="<{{baz}}>"
|
||||
t-att="qux"/>`;
|
||||
|
||||
const result = renderToString(template, {
|
||||
bar: 0,
|
||||
baz: 1,
|
||||
qux: { qux: "<>" },
|
||||
});
|
||||
const expected = '<div foo="<foo" bar="0" baz="<1>" qux="<>"></div>';
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
|
||||
test("various escapes 2", () => {
|
||||
const template = `<div> < </div>`;
|
||||
|
||||
const result = renderToString(template, {});
|
||||
const expected = "<div> < </div>";
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-att-class and class should combine together", () => {
|
||||
const template = `<div class="hello" t-att-class="value"/>`;
|
||||
const result = renderToString(template, { value: "world" });
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("class and t-att-class should combine together", () => {
|
||||
const template = `<div t-att-class="value" class="hello" />`;
|
||||
const result = renderToString(template, { value: "world" });
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("class and t-attf-class with ternary operation", () => {
|
||||
const template = `<div class="hello" t-attf-class="{{value ? 'world' : ''}}"/>`;
|
||||
const result = renderToString(template, { value: true });
|
||||
expect(result).toBe(`<div class="hello world"></div>`);
|
||||
});
|
||||
|
||||
test("t-att-class with object", () => {
|
||||
const template = `<div class="static" t-att-class="{a: b, c: d, e: f}"/>`;
|
||||
const result = renderToString(template, { b: true, d: false, f: true });
|
||||
expect(result).toBe(`<div class="static a e"></div>`);
|
||||
});
|
||||
|
||||
test("t-att-class with multiple classes", () => {
|
||||
expect(renderToString(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
|
||||
'<div class="a b c"></div>'
|
||||
);
|
||||
expect(renderToString(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
|
||||
'<div class="a b c"></div>'
|
||||
);
|
||||
});
|
||||
|
||||
test("t-att-class with multiple classes, some of which are duplicate", () => {
|
||||
expect(
|
||||
renderToString(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: true })
|
||||
).toBe('<div class="a b c"></div>');
|
||||
expect(
|
||||
renderToString(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: false })
|
||||
).toBe('<div class="a b d"></div>');
|
||||
});
|
||||
|
||||
test("changing an attribute with t-att-", () => {
|
||||
// render input with initial value
|
||||
const template = `<div t-att-value="v"/>`;
|
||||
const bnode1 = renderToBdom(template, { v: "zucchini" });
|
||||
const fixture = makeTestFixture();
|
||||
mount(bnode1, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div value="zucchini"></div>');
|
||||
|
||||
const bnode2 = renderToBdom(template, { v: "potato" });
|
||||
patch(bnode1, bnode2);
|
||||
expect(fixture.innerHTML).toBe('<div value="potato"></div>');
|
||||
|
||||
const bnode3 = renderToBdom(template, { v: "" });
|
||||
patch(bnode1, bnode3);
|
||||
// not sure about this. maybe we want to remove the attribute?
|
||||
expect(fixture.innerHTML).toBe('<div value=""></div>');
|
||||
});
|
||||
|
||||
test("changing a class with t-att-class", () => {
|
||||
// render input with initial value
|
||||
const template = `<div t-att-class="v"/>`;
|
||||
const bnode1 = renderToBdom(template, { v: "zucchini" });
|
||||
const fixture = makeTestFixture();
|
||||
mount(bnode1, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="zucchini"></div>');
|
||||
|
||||
const bnode2 = renderToBdom(template, { v: "potato" });
|
||||
patch(bnode1, bnode2);
|
||||
expect(fixture.innerHTML).toBe('<div class="potato"></div>');
|
||||
|
||||
const bnode3 = renderToBdom(template, { v: "" });
|
||||
patch(bnode1, bnode3);
|
||||
// not sure about this. maybe we want to remove the attribute?
|
||||
expect(fixture.innerHTML).toBe('<div class=""></div>');
|
||||
});
|
||||
|
||||
test("changing a class with t-att-class (preexisting class", () => {
|
||||
// render input with initial value
|
||||
const template = `<div class="hoy" t-att-class="v"/>`;
|
||||
const bnode1 = renderToBdom(template, { v: "zucchini" });
|
||||
const fixture = makeTestFixture();
|
||||
mount(bnode1, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy zucchini"></div>');
|
||||
|
||||
const bnode2 = renderToBdom(template, { v: "potato" });
|
||||
patch(bnode1, bnode2);
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy potato"></div>');
|
||||
|
||||
const bnode3 = renderToBdom(template, { v: "" });
|
||||
patch(bnode1, bnode3);
|
||||
// not sure about this. maybe we want to remove the attribute?
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy"></div>');
|
||||
});
|
||||
|
||||
test("updating classes (with obj notation)", () => {
|
||||
// render input with initial value
|
||||
const template = `<div class="hoy" t-att-class="{'a b': condition}"/>`;
|
||||
const bnode1 = renderToBdom(template, { condition: true });
|
||||
const fixture = makeTestFixture();
|
||||
mount(bnode1, fixture);
|
||||
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
|
||||
|
||||
const bnode2 = renderToBdom(template, { condition: false });
|
||||
patch(bnode1, bnode2);
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy"></div>');
|
||||
|
||||
const bnode3 = renderToBdom(template, { condition: true });
|
||||
patch(bnode1, bnode3);
|
||||
// not sure about this. maybe we want to remove the attribute?
|
||||
expect(fixture.innerHTML).toBe('<div class="hoy a b"></div>');
|
||||
});
|
||||
});
|
||||
|
||||
describe("special cases for some specific html attributes/properties", () => {
|
||||
test("input type= checkbox, with t-att-checked", () => {
|
||||
const template = `<input type="checkbox" t-att-checked="flag"/>`;
|
||||
const result = renderToString(template, { flag: true });
|
||||
expect(result).toBe(`<input type="checkbox">`);
|
||||
});
|
||||
|
||||
test("various boolean html attributes", () => {
|
||||
// the unique assertion here is the code snapshot automatically done by
|
||||
// renderToString
|
||||
xml`
|
||||
<div>
|
||||
<input type="checkbox" checked="checked"/>
|
||||
<input checked="checked"/>
|
||||
<div checked="checked"/>
|
||||
<div selected="selected"/>
|
||||
<option selected="selected" other="1"/>
|
||||
<input readonly="readonly"/>
|
||||
<button disabled="disabled"/>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
test("input with t-att-value", () => {
|
||||
// render input with initial value
|
||||
const template = `<input t-att-value="v"/>`;
|
||||
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
|
||||
const bnode2 = renderToBdom(template, { v: "potato" });
|
||||
patch(bnode1, bnode2);
|
||||
expect(input.value).toBe("potato");
|
||||
});
|
||||
|
||||
test("input of type checkbox with t-att-indeterminate", () => {
|
||||
const template = `<input type="checkbox" t-att-indeterminate="v"/>`;
|
||||
const bnode1 = renderToBdom(template, { v: true });
|
||||
const fixture = makeTestFixture();
|
||||
mount(bnode1, fixture);
|
||||
const input = fixture.querySelector("input")!;
|
||||
expect(input.indeterminate).toBe(true);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,29 @@
|
||||
import { renderToString, snapshotEverything } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// comments
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("comments", () => {
|
||||
test("properly handle comments", () => {
|
||||
const template = `<div>hello <!-- comment-->owl</div>`;
|
||||
expect(renderToString(template)).toBe("<div>hello <!-- comment-->owl</div>");
|
||||
});
|
||||
|
||||
test("only a comment", () => {
|
||||
const template = `<!-- comment-->`;
|
||||
expect(renderToString(template)).toBe(`<!-- comment-->`);
|
||||
});
|
||||
|
||||
test("properly handle comments between t-if/t-else", () => {
|
||||
const template = `
|
||||
<div>
|
||||
<span t-if="true">true</span>
|
||||
<!-- comment-->
|
||||
<span t-else="">owl</span>
|
||||
</div>`;
|
||||
expect(renderToString(template)).toBe("<div><span>true</span></div>");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,304 @@
|
||||
import { TemplateSet } from "../../src/qweb/template_helpers";
|
||||
import { mount } from "../../src/blockdom";
|
||||
import { makeTestFixture, renderToBdom, renderToString, snapshotEverything } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
// -----------------------------------------------------------------------------
|
||||
// t-on
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("t-on", () => {
|
||||
function mountToFixture(template: string, ctx: any = {}, node?: any): HTMLDivElement {
|
||||
if (!node) {
|
||||
node = { component: ctx };
|
||||
ctx.__owl__ = node;
|
||||
}
|
||||
const block = renderToBdom(template, ctx, node);
|
||||
const fixture = makeTestFixture();
|
||||
|
||||
mount(block, fixture);
|
||||
return fixture;
|
||||
}
|
||||
|
||||
test("can bind event handler", () => {
|
||||
const template = `<button t-on-click="add">Click</button>`;
|
||||
let a = 1;
|
||||
const fixture = mountToFixture(template, { add: () => (a = 3) });
|
||||
expect(a).toBe(1);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(a).toBe(3);
|
||||
});
|
||||
|
||||
test("receive event in first argument", () => {
|
||||
expect.assertions(2);
|
||||
const template = `<button t-on-click="add">Click</button>`;
|
||||
const fixture = mountToFixture(template, {
|
||||
add: (ev: any) => {
|
||||
expect(ev).toBeInstanceOf(Event);
|
||||
},
|
||||
});
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("can bind two event handlers", () => {
|
||||
const template = `
|
||||
<button t-on-click="handleClick" t-on-dblclick="handleDblClick">Click</button>`;
|
||||
let steps: string[] = [];
|
||||
const fixture = mountToFixture(template, {
|
||||
handleClick() {
|
||||
steps.push("click");
|
||||
},
|
||||
handleDblClick() {
|
||||
steps.push("dblclick");
|
||||
},
|
||||
});
|
||||
expect(steps).toEqual([]);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(steps).toEqual(["click"]);
|
||||
fixture.querySelector("button")!.dispatchEvent(new Event("dblclick", { bubbles: true }));
|
||||
expect(steps).toEqual(["click", "dblclick"]);
|
||||
});
|
||||
|
||||
test("can bind handlers with arguments", () => {
|
||||
const template = `<button t-on-click="add(5)">Click</button>`;
|
||||
let a = 1;
|
||||
const fixture = mountToFixture(template, { add: (n: number) => (a = a + n) });
|
||||
expect(a).toBe(1);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(a).toBe(6);
|
||||
});
|
||||
|
||||
test("can bind handlers with object arguments", () => {
|
||||
const template = `<button t-on-click="add({val: 5})">Click</button>`;
|
||||
let a = 1;
|
||||
const fixture = mountToFixture(template, { add: ({ val }: any) => (a = a + val) });
|
||||
expect(a).toBe(1);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(a).toBe(6);
|
||||
});
|
||||
|
||||
test("can bind handlers with empty object", () => {
|
||||
expect.assertions(2);
|
||||
const template = `<button t-on-click="doSomething({})">Click</button>`;
|
||||
const fixture = mountToFixture(template, {
|
||||
doSomething(arg: any) {
|
||||
expect(arg).toEqual({});
|
||||
},
|
||||
});
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("can bind handlers with empty object (with non empty inner string)", () => {
|
||||
expect.assertions(2);
|
||||
const template = `<button t-on-click="doSomething({ })">Click</button>`;
|
||||
const fixture = mountToFixture(template, {
|
||||
doSomething(arg: any) {
|
||||
expect(arg).toEqual({});
|
||||
},
|
||||
});
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("can bind handlers with empty object (with non empty inner string)", () => {
|
||||
expect.assertions(2);
|
||||
const template = `
|
||||
<ul>
|
||||
<li t-foreach="['someval']" t-as="action" t-key="action_index">
|
||||
<a t-on-click="activate(action)">link</a>
|
||||
</li>
|
||||
</ul>`;
|
||||
const fixture = mountToFixture(template, {
|
||||
activate(action: string) {
|
||||
expect(action).toBe("someval");
|
||||
},
|
||||
});
|
||||
fixture.querySelector("a")!.click();
|
||||
});
|
||||
|
||||
test("handler is bound to proper owner", () => {
|
||||
expect.assertions(2);
|
||||
const template = `<button t-on-click="add">Click</button>`;
|
||||
let owner = {
|
||||
add() {
|
||||
expect(this).toBe(owner);
|
||||
},
|
||||
};
|
||||
const fixture = mountToFixture(template, owner);
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("handler is bound to proper owner, part 2", () => {
|
||||
expect.assertions(2);
|
||||
const template = `
|
||||
<t t-foreach="[1]" t-as="value" t-key="value">
|
||||
<button t-on-click="add">Click</button>
|
||||
</t>`;
|
||||
let owner = {
|
||||
add() {
|
||||
expect(this).toBe(owner);
|
||||
},
|
||||
};
|
||||
const fixture = mountToFixture(template, owner);
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("handler is bound to proper owner, part 3", () => {
|
||||
expect.assertions(3);
|
||||
const context = new TemplateSet();
|
||||
const sub = `<button t-on-click="add">Click</button>`;
|
||||
const main = `<t t-call="sub"/>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
let owner: any = {
|
||||
add() {
|
||||
expect(this).toBe(owner);
|
||||
},
|
||||
};
|
||||
const node = { component: owner };
|
||||
owner.__owl__ = node;
|
||||
const fixture = makeTestFixture();
|
||||
const render = context.getTemplate("main");
|
||||
const bdom = render(owner, node);
|
||||
mount(bdom, fixture);
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("handler is bound to proper owner, part 4", () => {
|
||||
expect.assertions(3);
|
||||
const context = new TemplateSet();
|
||||
const sub = `<button t-on-click="add">Click</button>`;
|
||||
const main = `
|
||||
<t t-foreach="[1]" t-as="value" t-key="value">
|
||||
<t t-call="sub"/>
|
||||
</t>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
let owner: any = {
|
||||
add() {
|
||||
expect(this).toBe(owner);
|
||||
},
|
||||
};
|
||||
const node = { component: owner };
|
||||
owner.__owl__ = node;
|
||||
const fixture = makeTestFixture();
|
||||
const render = context.getTemplate("main");
|
||||
const bdom = render(owner, node);
|
||||
mount(bdom, fixture);
|
||||
fixture.querySelector("button")!.click();
|
||||
});
|
||||
|
||||
test("t-on with inline statement", () => {
|
||||
const template = `<button t-on-click="state.counter++">Click</button>`;
|
||||
let owner = { state: { counter: 0 } };
|
||||
const fixture = mountToFixture(template, owner);
|
||||
expect(owner.state.counter).toBe(0);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(owner.state.counter).toBe(1);
|
||||
});
|
||||
|
||||
test("t-on with inline statement (function call)", () => {
|
||||
const template = `<button t-on-click="state.incrementCounter(2)">Click</button>`;
|
||||
let owner = {
|
||||
state: {
|
||||
counter: 0,
|
||||
incrementCounter: (inc: number) => {
|
||||
owner.state.counter += inc;
|
||||
},
|
||||
},
|
||||
};
|
||||
const fixture = mountToFixture(template, owner);
|
||||
expect(owner.state.counter).toBe(0);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(owner.state.counter).toBe(2);
|
||||
});
|
||||
|
||||
test("t-on with inline statement, part 2", () => {
|
||||
const template = `<button t-on-click="state.flag = !state.flag">Toggle</button>`;
|
||||
let owner = {
|
||||
state: {
|
||||
flag: true,
|
||||
},
|
||||
};
|
||||
const fixture = mountToFixture(template, owner);
|
||||
expect(owner.state.flag).toBe(true);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(owner.state.flag).toBe(false);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(owner.state.flag).toBe(true);
|
||||
});
|
||||
|
||||
test("t-on with inline statement, part 3", () => {
|
||||
const template = `<button t-on-click="state.n = someFunction(3)">Toggle</button>`;
|
||||
let owner = {
|
||||
someFunction(n: number) {
|
||||
return n + 1;
|
||||
},
|
||||
state: {
|
||||
n: 11,
|
||||
},
|
||||
};
|
||||
|
||||
const fixture = mountToFixture(template, owner);
|
||||
expect(owner.state.n).toBe(11);
|
||||
fixture.querySelector("button")!.click();
|
||||
expect(owner.state.n).toBe(4);
|
||||
});
|
||||
|
||||
test("t-on with t-call", async () => {
|
||||
expect.assertions(3);
|
||||
const app = new TemplateSet();
|
||||
const sub = `<p t-on-click="update">lucas</p>`;
|
||||
const main = `<div><t t-call="sub"/></div>`;
|
||||
app.addTemplate("sub", sub);
|
||||
app.addTemplate("main", main);
|
||||
|
||||
let owner: any = {
|
||||
update() {
|
||||
expect(this).toBe(owner);
|
||||
},
|
||||
};
|
||||
const node = { component: owner };
|
||||
owner.__owl__ = node;
|
||||
|
||||
const fixture = makeTestFixture();
|
||||
const render = app.getTemplate("main");
|
||||
const bdom = render(owner, node);
|
||||
mount(bdom, fixture);
|
||||
fixture.querySelector("p")!.click();
|
||||
});
|
||||
|
||||
test("t-on, with arguments and t-call", async () => {
|
||||
expect.assertions(4);
|
||||
const app = new TemplateSet();
|
||||
const sub = `<p t-on-click="update(value)">lucas</p>`;
|
||||
const main = `<div><t t-call="sub"/></div>`;
|
||||
app.addTemplate("sub", sub);
|
||||
app.addTemplate("main", main);
|
||||
|
||||
let owner: any = {
|
||||
update(val: number) {
|
||||
expect(this).toBe(owner);
|
||||
expect(val).toBe(444);
|
||||
},
|
||||
value: 444,
|
||||
};
|
||||
|
||||
const node = { component: owner };
|
||||
owner.__owl__ = node;
|
||||
|
||||
const fixture = makeTestFixture();
|
||||
const render = app.getTemplate("main");
|
||||
const bdom = render(owner, node);
|
||||
mount(bdom, fixture);
|
||||
fixture.querySelector("p")!.click();
|
||||
});
|
||||
|
||||
test("nice error when t-on is evaluated with a missing event", () => {
|
||||
const template = `<div t-on="somemethod"></div>`;
|
||||
expect(() => renderToString(template, { someMethod() {} })).toThrow(
|
||||
"Missing event name with t-on directive"
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,209 @@
|
||||
import { compileExpr, tokenize } from "../../src/qweb/inline_expressions";
|
||||
|
||||
describe("tokenizer", () => {
|
||||
test("simple tokens", () => {
|
||||
expect(tokenize("1.3")).toEqual([{ type: "VALUE", value: "1.3" }]);
|
||||
|
||||
expect(tokenize("{}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("{ }}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("a")).toEqual([{ type: "SYMBOL", value: "a" }]);
|
||||
expect(tokenize("true")).toEqual([{ type: "SYMBOL", value: "true" }]);
|
||||
expect(tokenize("abcde")).toEqual([{ type: "SYMBOL", value: "abcde" }]);
|
||||
expect(tokenize("_ab2")).toEqual([{ type: "SYMBOL", value: "_ab2" }]);
|
||||
expect(tokenize("$ab2")).toEqual([{ type: "SYMBOL", value: "$ab2" }]);
|
||||
expect(tokenize("ABC")).toEqual([{ type: "SYMBOL", value: "ABC" }]);
|
||||
|
||||
expect(tokenize("{a: 2}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "COLON", value: ":" },
|
||||
{ type: "VALUE", value: "2" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("a,")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "COMMA", value: "," },
|
||||
]);
|
||||
expect(tokenize("][")).toEqual([
|
||||
{ type: "RIGHT_BRACKET", value: "]" },
|
||||
{ type: "LEFT_BRACKET", value: "[" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("various operators", () => {
|
||||
expect(tokenize(">= <= < > !== !=")).toEqual([
|
||||
{ type: "OPERATOR", value: ">=" },
|
||||
{ type: "OPERATOR", value: "<=" },
|
||||
{ type: "OPERATOR", value: "<" },
|
||||
{ type: "OPERATOR", value: ">" },
|
||||
{ type: "OPERATOR", value: "!==" },
|
||||
{ type: "OPERATOR", value: "!=" },
|
||||
]);
|
||||
expect(tokenize("typeof a")).toEqual([
|
||||
{ type: "OPERATOR", value: "typeof " },
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
]);
|
||||
|
||||
expect(tokenize("a...1")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "OPERATOR", value: "..." },
|
||||
{ type: "VALUE", value: "1" },
|
||||
]);
|
||||
|
||||
expect(tokenize("a in b")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "OPERATOR", value: "in " },
|
||||
{ type: "SYMBOL", value: "b" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("strings", () => {
|
||||
expect(() => tokenize("'")).toThrow("Invalid expression");
|
||||
expect(() => tokenize("'\\")).toThrow("Invalid expression");
|
||||
expect(() => tokenize("'\\'")).toThrow("Invalid expression");
|
||||
expect(tokenize("'hello ged'")).toEqual([{ type: "VALUE", value: "'hello ged'" }]);
|
||||
expect(tokenize("'hello \\'ged\\''")).toEqual([{ type: "VALUE", value: "'hello \\'ged\\''" }]);
|
||||
|
||||
expect(() => tokenize('"')).toThrow("Invalid expression");
|
||||
expect(() => tokenize('"\\"')).toThrow("Invalid expression");
|
||||
expect(tokenize('"hello ged"')).toEqual([{ type: "VALUE", value: '"hello ged"' }]);
|
||||
expect(tokenize('"hello ged"}')).toEqual([
|
||||
{ type: "VALUE", value: '"hello ged"' },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize('"hello \\"ged\\""')).toEqual([{ type: "VALUE", value: '"hello \\"ged\\""' }]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("expression evaluation", () => {
|
||||
test("simple static values", () => {
|
||||
expect(compileExpr("1")).toBe("1");
|
||||
expect(compileExpr("1 ")).toBe("1");
|
||||
expect(compileExpr("'some string#/, {' ")).toBe("'some string#/, {'");
|
||||
expect(compileExpr("{ } ")).toBe("{}");
|
||||
expect(compileExpr("{a: 1} ")).toBe("{a:1}");
|
||||
expect(compileExpr("{a: 1, b: 2 } ")).toBe("{a:1,b:2}");
|
||||
expect(compileExpr("[] ")).toBe("[]");
|
||||
expect(compileExpr("[1] ")).toBe("[1]");
|
||||
expect(compileExpr("['1', '2'] ")).toBe("['1','2']");
|
||||
expect(compileExpr("['1', \"2\"] ")).toBe("['1',\"2\"]");
|
||||
});
|
||||
|
||||
test("various types of 'words'", () => {
|
||||
expect(compileExpr("true")).toBe("true");
|
||||
expect(compileExpr("false")).toBe("false");
|
||||
expect(compileExpr("debugger")).toBe("debugger");
|
||||
});
|
||||
|
||||
test("parenthesis", () => {
|
||||
expect(compileExpr("(1)")).toBe("(1)");
|
||||
expect(compileExpr("a*(1 +3)")).toBe("ctx['a']*(1+3)");
|
||||
});
|
||||
|
||||
test("objects and sub objects", () => {
|
||||
expect(compileExpr("{a:{b:1}} ")).toBe("{a:{b:1}}");
|
||||
});
|
||||
|
||||
test("arrays and objects", () => {
|
||||
expect(compileExpr("[{b:1}] ")).toBe("[{b:1}]");
|
||||
expect(compileExpr("{a: []} ")).toBe("{a:[]}");
|
||||
expect(compileExpr("[{b:1, c: [1, {d: {e: 3}} ]}] ")).toBe("[{b:1,c:[1,{d:{e:3}}]}]");
|
||||
});
|
||||
|
||||
test("dot operator", () => {
|
||||
expect(compileExpr("a.b")).toBe("ctx['a'].b");
|
||||
expect(compileExpr("a.b.c")).toBe("ctx['a'].b.c");
|
||||
});
|
||||
|
||||
test("various unary operators", () => {
|
||||
expect(compileExpr("!flag")).toBe("!ctx['flag']");
|
||||
expect(compileExpr("-3")).toBe("-3");
|
||||
expect(compileExpr("-a")).toBe("-ctx['a']");
|
||||
expect(compileExpr("typeof a")).toBe("typeof ctx['a']");
|
||||
});
|
||||
|
||||
test("various binary operators", () => {
|
||||
expect(compileExpr("color == 'black'")).toBe("ctx['color']=='black'");
|
||||
expect(compileExpr("a || b")).toBe("ctx['a']||ctx['b']");
|
||||
expect(compileExpr("color === 'black'")).toBe("ctx['color']==='black'");
|
||||
expect(compileExpr("'li_'+item")).toBe("'li_'+ctx['item']");
|
||||
expect(compileExpr("state.val > 1")).toBe("ctx['state'].val>1");
|
||||
expect(compileExpr("a in b")).toBe("ctx['a']in ctx['b']");
|
||||
});
|
||||
|
||||
test("boolean operations", () => {
|
||||
expect(compileExpr("a && b")).toBe("ctx['a']&&ctx['b']");
|
||||
});
|
||||
|
||||
test("ternary operators", () => {
|
||||
expect(compileExpr("a ? b: '2'")).toBe("ctx['a']?ctx['b']:'2'");
|
||||
expect(compileExpr("a ? b: (c or '2') ")).toBe("ctx['a']?ctx['b']:(ctx['c']||'2')");
|
||||
expect(compileExpr("a ? {test:c}: [1,u]")).toBe("ctx['a']?{test:ctx['c']}:[1,ctx['u']]");
|
||||
});
|
||||
|
||||
test("word replacement", () => {
|
||||
expect(compileExpr("a or b")).toBe("ctx['a']||ctx['b']");
|
||||
expect(compileExpr("a and b")).toBe("ctx['a']&&ctx['b']");
|
||||
});
|
||||
|
||||
test("function calls", () => {
|
||||
expect(compileExpr("a()")).toBe("ctx['a']()");
|
||||
expect(compileExpr("a(1)")).toBe("ctx['a'](1)");
|
||||
expect(compileExpr("a(1,2)")).toBe("ctx['a'](1,2)");
|
||||
expect(compileExpr("a(1,2,{a:[a]})")).toBe("ctx['a'](1,2,{a:[ctx['a']]})");
|
||||
expect(compileExpr("'x'.toUpperCase()")).toBe("'x'.toUpperCase()");
|
||||
expect(compileExpr("'x'.toUpperCase({a: 3})")).toBe("'x'.toUpperCase({a:3})");
|
||||
});
|
||||
|
||||
test("arrow functions", () => {
|
||||
expect(compileExpr("list.map(e => e.val)")).toBe("ctx['list'].map(e=>e.val)");
|
||||
expect(compileExpr("list.map(e => a + e)")).toBe("ctx['list'].map(e=>ctx['a']+e)");
|
||||
expect(compileExpr("list.map((e) => e)")).toBe("ctx['list'].map((e)=>e)");
|
||||
expect(compileExpr("list.map((elem, index) => elem + index)")).toBe(
|
||||
"ctx['list'].map((elem,index)=>elem+index)"
|
||||
);
|
||||
});
|
||||
|
||||
test("assignation", () => {
|
||||
expect(compileExpr("a = b")).toBe("ctx['a']=ctx['b']");
|
||||
expect(compileExpr("a += b")).toBe("ctx['a']+=ctx['b']");
|
||||
expect(compileExpr("a -= b")).toBe("ctx['a']-=ctx['b']");
|
||||
expect(compileExpr("a.b = !a.b")).toBe("ctx['a'].b=!ctx['a'].b");
|
||||
});
|
||||
|
||||
test("spread operator", () => {
|
||||
expect(compileExpr("[...state.list]")).toBe("[...ctx['state'].list]");
|
||||
expect(compileExpr("f(...state.list)")).toBe("ctx['f'](...ctx['state'].list)");
|
||||
expect(compileExpr("f([...list])")).toBe("ctx['f']([...ctx['list']])");
|
||||
});
|
||||
|
||||
test("works with builtin properties", () => {
|
||||
expect(compileExpr("state.constructor.name")).toBe("ctx['state'].constructor.name");
|
||||
});
|
||||
|
||||
test("works with shortcut object key description", () => {
|
||||
expect(compileExpr("{a}")).toBe("{a:ctx['a']}");
|
||||
expect(compileExpr("{a,b}")).toBe("{a:ctx['a'],b:ctx['b']}");
|
||||
expect(compileExpr("{a,b:3,c}")).toBe("{a:ctx['a'],b:3,c:ctx['c']}");
|
||||
});
|
||||
|
||||
test("template strings", () => {
|
||||
expect(compileExpr("`hey`")).toBe("`hey`");
|
||||
expect(compileExpr("`hey ${you}`")).toBe("`hey ${ctx['you']}`");
|
||||
expect(compileExpr("`hey ${1 + 2}`")).toBe("`hey ${1+2}`");
|
||||
});
|
||||
|
||||
test("works with short object description and lists ", () => {
|
||||
expect(compileExpr("[a, b]")).toBe("[ctx['a'],ctx['b']]");
|
||||
expect(compileExpr("[a, b, c]")).toBe("[ctx['a'],ctx['b'],ctx['c']]");
|
||||
expect(compileExpr("[a, {b, c},d]")).toBe("[ctx['a'],{b:ctx['b'],c:ctx['c']},ctx['d']]");
|
||||
expect(compileExpr("{a:[b, {c, d: e}]}")).toBe("{a:[ctx['b'],{c:ctx['c'],d:ctx['e']}]}");
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,262 @@
|
||||
import { xml } from "../../src";
|
||||
import { renderToString, snapshotEverything, TestContext, trim } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// misc
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("misc", () => {
|
||||
test("global", () => {
|
||||
const context = new TestContext();
|
||||
const _calleeAsc = `<año t-att-falló="'agüero'" t-raw="0"/>`;
|
||||
const _calleeUsesFoo = `<span t-esc="foo">foo default</span>`;
|
||||
const _calleeAscToto = `<div t-raw="toto">toto default</div>`;
|
||||
const caller = `
|
||||
<div>
|
||||
<t t-foreach="[4,5,6]" t-as="value" t-key="value">
|
||||
<span t-esc="value"/>
|
||||
<t t-call="_callee-asc">
|
||||
<t t-call="_callee-uses-foo">
|
||||
<t t-set="foo" t-value="'aaa'"/>
|
||||
</t>
|
||||
<t t-call="_callee-uses-foo"/>
|
||||
<t t-set="foo" t-value="'bbb'"/>
|
||||
<t t-call="_callee-uses-foo"/>
|
||||
</t>
|
||||
</t>
|
||||
<t t-call="_callee-asc-toto"/>
|
||||
</div>`;
|
||||
context.addTemplate("_callee-asc", _calleeAsc);
|
||||
context.addTemplate("_callee-uses-foo", _calleeUsesFoo);
|
||||
context.addTemplate("_callee-asc-toto", _calleeAscToto);
|
||||
context.addTemplate("caller", caller);
|
||||
|
||||
const result = trim(context.renderToString("caller"));
|
||||
const expected = trim(`
|
||||
<div>
|
||||
<span>4</span>
|
||||
<año falló="agüero">
|
||||
<span>aaa</span>
|
||||
<span>foo default</span>
|
||||
<span>bbb</span>
|
||||
</año>
|
||||
|
||||
<span>5</span>
|
||||
<año falló="agüero">
|
||||
<span>aaa</span>
|
||||
<span>foo default</span>
|
||||
<span>bbb</span>
|
||||
</año>
|
||||
|
||||
<span>6</span>
|
||||
<año falló="agüero">
|
||||
<span>aaa</span>
|
||||
<span>foo default</span>
|
||||
<span>bbb</span>
|
||||
</año>
|
||||
|
||||
<div>toto default</div>
|
||||
</div>
|
||||
`);
|
||||
expect(result).toBe(expected);
|
||||
});
|
||||
|
||||
test("complex template", () => {
|
||||
const template = `
|
||||
<div t-attf-class="batch_tile {{options.more? 'more' : 'nomore'}}">
|
||||
<div t-attf-class="card bg-{{klass}}-light">
|
||||
<div class="batch_header">
|
||||
<a t-attf-href="/runbot/batch/{{batch.id}}" t-attf-class="badge badge-{{batch.has_warning ? 'warning' : 'light'}}" title="View Batch">
|
||||
<t t-esc="batch.formated_age"/>
|
||||
<i class="fa fa-exclamation-triangle" t-if="batch.has_warning"/>
|
||||
<i class="arrow fa fa-window-maximize"/>
|
||||
</a>
|
||||
</div>
|
||||
<t t-if="batch.state=='preparing'">
|
||||
<span><i class="fa fa-cog fa-spin fa-fw"/> preparing</span>
|
||||
</t>
|
||||
<div class="batch_slots">
|
||||
<t t-foreach="batch.slot_ids.filter(slot => slot.build_id.id and !slot.trigger_id.manual and (options.trigger_display[slot.trigger_id.id]))" t-as="slot" t-key="slot.id">
|
||||
<SlotButton class="slot_container" slot="slot"/>
|
||||
</t>
|
||||
<div class="slot_filler" t-foreach="[1, 2, 3, 4]" t-as="x" t-key="x"/>
|
||||
</div>
|
||||
<div class="batch_commits">
|
||||
<div t-foreach="commit_links" t-as="commit_link" class="one_line" t-key="commit_link.id">
|
||||
<a t-attf-href="/runbot/commit/{{commit_link.commit_id}}" t-attf-class="badge badge-light batch_commit match_type_{{commit_link.match_type}}">
|
||||
<i class="fa fa-fw fa-hashtag" t-if="commit_link.match_type == 'new'" title="This commit is a new head"/>
|
||||
<i class="fa fa-fw fa-link" t-if="commit_link.match_type == 'head'" title="This commit is an existing head from bundle branches"/>
|
||||
<i class="fa fa-fw fa-code-fork" t-if="commit_link.match_type == 'base_match'" title="This commit is matched from a base batch with matching merge_base"/>
|
||||
<i class="fa fa-fw fa-clock-o" t-if="commit_link.match_type == 'base_head'" title="This commit is the head of a base branch"/>
|
||||
<t t-esc="commit_link.commit_dname"/>
|
||||
</a>
|
||||
<a t-att-href="'https://%s/commit/%s' % (commit_link.commit_remote_url, commit_link.commit_name)" class="badge badge-light" title="View Commit on Github"><i class="fa fa-github"/></a>
|
||||
<span t-esc="commit_link.commit_subject"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
|
||||
const context = {
|
||||
options: { more: true },
|
||||
klass: "info",
|
||||
batch: {
|
||||
id: 3,
|
||||
has_warning: true,
|
||||
formated_age: "1 year",
|
||||
state: "preparing",
|
||||
slot_ids: [],
|
||||
},
|
||||
commit_links: [],
|
||||
};
|
||||
const expected = `<div class=\"batch_tile more\"><div class=\"card bg-info-light\"><div class=\"batch_header\"><a title=\"View Batch\" href=\"/runbot/batch/3\" class=\"badge badge-warning\">1 year<i class=\"fa fa-exclamation-triangle\"></i><i class=\"arrow fa fa-window-maximize\"></i></a></div><span><i class=\"fa fa-cog fa-spin fa-fw\"></i> preparing</span><div class=\"batch_slots\"><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div><div class=\"slot_filler\"></div></div><div class=\"batch_commits\"></div></div></div>`;
|
||||
expect(renderToString(template, context)).toBe(expected);
|
||||
});
|
||||
|
||||
test("other complex template", () => {
|
||||
xml`
|
||||
<div>
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-light bg-light">
|
||||
<a t-attf-href="/runbot/{{project.slug}}">
|
||||
<b style="color:#777;">
|
||||
<t t-esc="project.name"/>
|
||||
</b>
|
||||
</a>
|
||||
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#top_menu_collapse">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="top_menu_collapse" aria-expanded="false">
|
||||
<ul class="nav navbar-nav ml-auto text-right" id="top_menu">
|
||||
<li class="nav-item" t-foreach="projects" t-as="project" t-key="project.id">
|
||||
<a class="nav-link" href="#" t-on-click="selectProject(project)">
|
||||
<t t-esc="project.name"/>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li class="nav-item divider"></li>
|
||||
<t t-if="user">
|
||||
<t t-if="user.public">
|
||||
<li class="nav-item dropdown">
|
||||
<b>
|
||||
<a class="nav-link" t-attf-href="/web/login?redirect=/">Login</a>
|
||||
</b>
|
||||
</li>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<t t-if="nb_assigned_errors and nb_assigned_errors > 0">
|
||||
<li class="nav-item">
|
||||
<a href="/runbot/errors" class="nav-link text-danger" t-attf-title="You have {{nb_assigned_errors}} random bug assigned">
|
||||
<i class="fa fa-bug"/><t t-esc="nb_assigned_errors"/>
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item divider"/>
|
||||
</t>
|
||||
<t t-elif="nb_build_errors and nb_build_errors > 0">
|
||||
<li class="nav-item">
|
||||
<a href="/runbot/errors" class="nav-link" title="Random Bugs"><i class="fa fa-bug"/></a>
|
||||
</li>
|
||||
<li class="nav-item divider"/>
|
||||
</t>
|
||||
<li class="nav-item dropdown">
|
||||
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
|
||||
<b>
|
||||
<span t-esc=" user.name.length > 25 ? user.namesubstring(0, 23) + '...' : user.name"/>
|
||||
</b>
|
||||
</a>
|
||||
<div class="dropdown-menu js_usermenu" role="menu">
|
||||
<a class="dropdown-item" id="o_logout" role="menuitem" t-attf-href="/web/session/logout?redirect=/">Logout</a>
|
||||
<a class="dropdown-item" role="menuitem" t-attf-href="/web">Web</a>
|
||||
</div>
|
||||
</li>
|
||||
</t>
|
||||
</t>
|
||||
</ul>
|
||||
|
||||
<div>
|
||||
<div class="input-group input-group-sm">
|
||||
<div class="input-group-prepend input-group-sm">
|
||||
<button class="btn btn-default fa fa-cog" t-on-click="toggleSettingsMenu" title="Settings"/>
|
||||
<button class="btn btn-default" t-on-click="toggleMore">
|
||||
More
|
||||
</button>
|
||||
<select t-if="categories and categories.length > 1" class="custom-select" name="category" id="category">
|
||||
<option t-foreach="categories" t-as="category" t-key="category.id" t-att-value="category.id" t-esc="category.name" t-att-selected="category.id==options.active_category_id"/>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<input class="form-control" type="text" placeholder="Search" aria-label="Search" name="search" t-att-value="search.value" t-on-keyup="updateFilter" t-on-change="updateFilter" t-ref="search_input"/>
|
||||
<div class="input-group-append">
|
||||
<button class="btn btn-default fa fa-eraser" t-on-click="clearSearch"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container-fluid" t-ref="settings_menu">
|
||||
<div class="row">
|
||||
<!--div class="form-group col-md-6">
|
||||
<h5>Search options</h5>
|
||||
<input class="form-control" type="text" name="default_search" id="default_search" t-att-checked="default_search" placeholder="Default search"/>
|
||||
|
||||
<h5>Display options</h5>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="display_sticky"/>
|
||||
<label class="form-check-label" for="display_sticky">Display sticky</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" name="display_dev"/>
|
||||
<label class="form-check-label" for="display_dev">Display dev</label>
|
||||
</div>
|
||||
</div-->
|
||||
<div class="form-group col-md-6">
|
||||
<h5>Triggers</h5>
|
||||
<t t-if="triggers">
|
||||
<t t-foreach="triggers" t-as="trigger" t-key="trigger.id">
|
||||
<div t-if="!trigger.manual and trigger.project_id === project.id and trigger.category_id === options.active_category_id" class="form-check">
|
||||
<input class="form-check-input" type="checkbox"
|
||||
t-attf-name="trigger_{{trigger.id}}"
|
||||
t-attf-id="trigger_{{trigger.id}}"
|
||||
t-att-checked="options.trigger_display[trigger.id]"
|
||||
t-att-data-trigger_id="trigger.id"
|
||||
t-on-change="updateTriggerDisplay"/>
|
||||
<label class="form-check-label" t-attf-for="trigger_{{trigger.id}}" t-esc="trigger.name"/>
|
||||
</div>
|
||||
</t>
|
||||
<div>
|
||||
<button class="btn btn-sm btn-default" t-on-click="triggerAll">All</button>
|
||||
<button class="btn btn-sm btn-default" t-on-click="triggerNone">None</button>
|
||||
<button class="btn btn-sm btn-info" t-on-click="triggerDefault">Default</button>
|
||||
<button class="btn btn-sm btn-default" t-on-click="toggleSettingsMenu">Close</button>
|
||||
</div>
|
||||
</t>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container-fluid frontend">
|
||||
<div class="row">
|
||||
<div class='col-md-12'>
|
||||
<t t-call="LOAD_INFOS_TEMPLATE" t-if="load_infos"/>
|
||||
</div>
|
||||
<div class='col-md-12'>
|
||||
<div t-if="message" class="alert alert-warning" role="alert">
|
||||
<t t-esc="message" /> <!-- todo fixme-->
|
||||
</div>
|
||||
<div t-if="! project" class="mb32">
|
||||
<h1>No project</h1>
|
||||
</div>
|
||||
<div t-else="">
|
||||
<BundlesList bundles="bundles.sticky" category_custom_views="category_custom_views" search="search"/>
|
||||
<BundlesList bundles="bundles.dev" search="search"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>`;
|
||||
});
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@@ -1,226 +0,0 @@
|
||||
import { compileExpr, tokenize } from "../../src/qweb/expression_parser";
|
||||
|
||||
describe("tokenizer", () => {
|
||||
test("simple tokens", () => {
|
||||
expect(tokenize("1.3")).toEqual([{ type: "VALUE", value: "1.3" }]);
|
||||
|
||||
expect(tokenize("{}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("{ }}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("a")).toEqual([{ type: "SYMBOL", value: "a" }]);
|
||||
expect(tokenize("true")).toEqual([{ type: "SYMBOL", value: "true" }]);
|
||||
expect(tokenize("abcde")).toEqual([{ type: "SYMBOL", value: "abcde" }]);
|
||||
expect(tokenize("_ab2")).toEqual([{ type: "SYMBOL", value: "_ab2" }]);
|
||||
expect(tokenize("$ab2")).toEqual([{ type: "SYMBOL", value: "$ab2" }]);
|
||||
expect(tokenize("ABC")).toEqual([{ type: "SYMBOL", value: "ABC" }]);
|
||||
|
||||
expect(tokenize("{a: 2}")).toEqual([
|
||||
{ type: "LEFT_BRACE", value: "{" },
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "COLON", value: ":" },
|
||||
{ type: "VALUE", value: "2" },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize("a,")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "COMMA", value: "," },
|
||||
]);
|
||||
expect(tokenize("][")).toEqual([
|
||||
{ type: "RIGHT_BRACKET", value: "]" },
|
||||
{ type: "LEFT_BRACKET", value: "[" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("various operators", () => {
|
||||
expect(tokenize(">= <= < > !== !=")).toEqual([
|
||||
{ type: "OPERATOR", value: ">=" },
|
||||
{ type: "OPERATOR", value: "<=" },
|
||||
{ type: "OPERATOR", value: "<" },
|
||||
{ type: "OPERATOR", value: ">" },
|
||||
{ type: "OPERATOR", value: "!==" },
|
||||
{ type: "OPERATOR", value: "!=" },
|
||||
]);
|
||||
expect(tokenize("typeof a")).toEqual([
|
||||
{ type: "OPERATOR", value: "typeof " },
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
]);
|
||||
|
||||
expect(tokenize("a...1")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "OPERATOR", value: "..." },
|
||||
{ type: "VALUE", value: "1" },
|
||||
]);
|
||||
|
||||
expect(tokenize("a in b")).toEqual([
|
||||
{ type: "SYMBOL", value: "a" },
|
||||
{ type: "OPERATOR", value: "in " },
|
||||
{ type: "SYMBOL", value: "b" },
|
||||
]);
|
||||
});
|
||||
|
||||
test("strings", () => {
|
||||
expect(() => tokenize("'")).toThrow("Invalid expression");
|
||||
expect(() => tokenize("'\\")).toThrow("Invalid expression");
|
||||
expect(() => tokenize("'\\'")).toThrow("Invalid expression");
|
||||
expect(tokenize("'hello ged'")).toEqual([{ type: "VALUE", value: "'hello ged'" }]);
|
||||
expect(tokenize("'hello \\'ged\\''")).toEqual([{ type: "VALUE", value: "'hello \\'ged\\''" }]);
|
||||
|
||||
expect(() => tokenize('"')).toThrow("Invalid expression");
|
||||
expect(() => tokenize('"\\"')).toThrow("Invalid expression");
|
||||
expect(tokenize('"hello ged"')).toEqual([{ type: "VALUE", value: '"hello ged"' }]);
|
||||
expect(tokenize('"hello ged"}')).toEqual([
|
||||
{ type: "VALUE", value: '"hello ged"' },
|
||||
{ type: "RIGHT_BRACE", value: "}" },
|
||||
]);
|
||||
expect(tokenize('"hello \\"ged\\""')).toEqual([{ type: "VALUE", value: '"hello \\"ged\\""' }]);
|
||||
});
|
||||
});
|
||||
|
||||
describe("expression evaluation", () => {
|
||||
test("simple static values", () => {
|
||||
expect(compileExpr("1", {})).toBe("1");
|
||||
expect(compileExpr("1 ", {})).toBe("1");
|
||||
expect(compileExpr("'some string#/, {' ", {})).toBe("'some string#/, {'");
|
||||
expect(compileExpr("{ } ", {})).toBe("{}");
|
||||
expect(compileExpr("{a: 1} ", {})).toBe("{a:1}");
|
||||
expect(compileExpr("{a: 1, b: 2 } ", {})).toBe("{a:1,b:2}");
|
||||
expect(compileExpr("[] ", {})).toBe("[]");
|
||||
expect(compileExpr("[1] ", {})).toBe("[1]");
|
||||
expect(compileExpr("['1', '2'] ", {})).toBe("['1','2']");
|
||||
expect(compileExpr("['1', \"2\"] ", {})).toBe("['1',\"2\"]");
|
||||
});
|
||||
|
||||
test("various types of 'words'", () => {
|
||||
expect(compileExpr("true", {})).toBe("true");
|
||||
expect(compileExpr("false", {})).toBe("false");
|
||||
expect(compileExpr("debugger", {})).toBe("debugger");
|
||||
});
|
||||
|
||||
test("parenthesis", () => {
|
||||
expect(compileExpr("(1)", {})).toBe("(1)");
|
||||
expect(compileExpr("a*(1 +3)", {})).toBe("scope['a']*(1+3)");
|
||||
});
|
||||
|
||||
test("objects and sub objects", () => {
|
||||
expect(compileExpr("{a:{b:1}} ", {})).toBe("{a:{b:1}}");
|
||||
});
|
||||
|
||||
test("replacing variables", () => {
|
||||
expect(compileExpr("a", {})).toBe("scope['a']");
|
||||
expect(compileExpr("a", { a: { id: "_3", expr: "scope._3" } })).toBe("scope._3");
|
||||
});
|
||||
|
||||
test("arrays and objects", () => {
|
||||
expect(compileExpr("[{b:1}] ", {})).toBe("[{b:1}]");
|
||||
expect(compileExpr("{a: []} ", {})).toBe("{a:[]}");
|
||||
expect(compileExpr("[{b:1, c: [1, {d: {e: 3}} ]}] ", {})).toBe("[{b:1,c:[1,{d:{e:3}}]}]");
|
||||
});
|
||||
|
||||
test("dot operator", () => {
|
||||
expect(compileExpr("a.b", {})).toBe("scope['a'].b");
|
||||
expect(compileExpr("a.b.c", {})).toBe("scope['a'].b.c");
|
||||
});
|
||||
|
||||
test("various unary operators", () => {
|
||||
expect(compileExpr("!flag", {})).toBe("!scope['flag']");
|
||||
expect(compileExpr("-3", {})).toBe("-3");
|
||||
expect(compileExpr("-a", {})).toBe("-scope['a']");
|
||||
expect(compileExpr("typeof a", {})).toBe("typeof scope['a']");
|
||||
});
|
||||
|
||||
test("various binary operators", () => {
|
||||
expect(compileExpr("color == 'black'", {})).toBe("scope['color']=='black'");
|
||||
expect(compileExpr("a || b", {})).toBe("scope['a']||scope['b']");
|
||||
expect(compileExpr("color === 'black'", {})).toBe("scope['color']==='black'");
|
||||
expect(compileExpr("'li_'+item", {})).toBe("'li_'+scope['item']");
|
||||
expect(compileExpr("state.val > 1", {})).toBe("scope['state'].val>1");
|
||||
expect(compileExpr("a in b", {})).toBe("scope['a']in scope['b']");
|
||||
});
|
||||
|
||||
test("boolean operations", () => {
|
||||
expect(compileExpr("a && b", {})).toBe("scope['a']&&scope['b']");
|
||||
});
|
||||
|
||||
test("ternary operators", () => {
|
||||
expect(compileExpr("a ? b: '2'", {})).toBe("scope['a']?scope['b']:'2'");
|
||||
expect(compileExpr("a ? b: (c or '2') ", {})).toBe("scope['a']?scope['b']:(scope['c']||'2')");
|
||||
expect(compileExpr("a ? {test:c}: [1,u]", {})).toBe(
|
||||
"scope['a']?{test:scope['c']}:[1,scope['u']]"
|
||||
);
|
||||
});
|
||||
|
||||
test("word replacement", () => {
|
||||
expect(compileExpr("a or b", {})).toBe("scope['a']||scope['b']");
|
||||
expect(compileExpr("a and b", {})).toBe("scope['a']&&scope['b']");
|
||||
});
|
||||
|
||||
test("function calls", () => {
|
||||
expect(compileExpr("a()", {})).toBe("scope['a']()");
|
||||
expect(compileExpr("a(1)", {})).toBe("scope['a'](1)");
|
||||
expect(compileExpr("a(1,2)", {})).toBe("scope['a'](1,2)");
|
||||
expect(compileExpr("a(1,2,{a:[a]})", {})).toBe("scope['a'](1,2,{a:[scope['a']]})");
|
||||
expect(compileExpr("'x'.toUpperCase()", {})).toBe("'x'.toUpperCase()");
|
||||
expect(compileExpr("'x'.toUpperCase({a: 3})", {})).toBe("'x'.toUpperCase({a:3})");
|
||||
expect(compileExpr("'x'.toUpperCase(a)", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
|
||||
"'x'.toUpperCase(scope._v5)"
|
||||
);
|
||||
expect(compileExpr("'x'.toUpperCase({b: a})", { a: { id: "_v5", expr: "scope._v5" } })).toBe(
|
||||
"'x'.toUpperCase({b:scope._v5})"
|
||||
);
|
||||
});
|
||||
|
||||
test("arrow functions", () => {
|
||||
expect(compileExpr("list.map(e => e.val)", {})).toBe("scope['list'].map(e=>e.val)");
|
||||
expect(compileExpr("list.map(e => a + e)", {})).toBe("scope['list'].map(e=>scope['a']+e)");
|
||||
expect(compileExpr("list.map((e) => e)", {})).toBe("scope['list'].map((e)=>e)");
|
||||
expect(compileExpr("list.map((elem, index) => elem + index)", {})).toBe(
|
||||
"scope['list'].map((elem,index)=>elem+index)"
|
||||
);
|
||||
});
|
||||
|
||||
test("assignation", () => {
|
||||
expect(compileExpr("a = b", {})).toBe("scope['a']=scope['b']");
|
||||
expect(compileExpr("a += b", {})).toBe("scope['a']+=scope['b']");
|
||||
expect(compileExpr("a -= b", {})).toBe("scope['a']-=scope['b']");
|
||||
expect(compileExpr("a.b = !a.b", {})).toBe("scope['a'].b=!scope['a'].b");
|
||||
});
|
||||
|
||||
test("spread operator", () => {
|
||||
expect(compileExpr("[...state.list]", {})).toBe("[...scope['state'].list]");
|
||||
expect(compileExpr("f(...state.list)", {})).toBe("scope['f'](...scope['state'].list)");
|
||||
expect(compileExpr("f([...list])", {})).toBe("scope['f']([...scope['list']])");
|
||||
});
|
||||
|
||||
test("works with builtin properties", () => {
|
||||
expect(compileExpr("state.constructor.name", {})).toBe("scope['state'].constructor.name");
|
||||
});
|
||||
|
||||
test("works with shortcut object key description", () => {
|
||||
expect(compileExpr("{a}", {})).toBe("{a:scope['a']}");
|
||||
expect(compileExpr("{a,b}", {})).toBe("{a:scope['a'],b:scope['b']}");
|
||||
expect(compileExpr("{a,b:3,c}", {})).toBe("{a:scope['a'],b:3,c:scope['c']}");
|
||||
});
|
||||
|
||||
test("works with short object description and lists ", () => {
|
||||
expect(compileExpr("[a, b]", {})).toBe("[scope['a'],scope['b']]");
|
||||
expect(compileExpr("[a, b, c]", {})).toBe("[scope['a'],scope['b'],scope['c']]");
|
||||
expect(compileExpr("[a, {b, c},d]", {})).toBe(
|
||||
"[scope['a'],{b:scope['b'],c:scope['c']},scope['d']]"
|
||||
);
|
||||
expect(compileExpr("{a:[b, {c, d: e}]}", {})).toBe(
|
||||
"{a:[scope['b'],{c:scope['c'],d:scope['e']}]}"
|
||||
);
|
||||
});
|
||||
|
||||
test("template strings", () => {
|
||||
expect(compileExpr("`hey`", {})).toBe("`hey`");
|
||||
expect(compileExpr("`hey ${you}`", {})).toBe("`hey ${scope['you']}`");
|
||||
expect(compileExpr("`hey ${1 + 2}`", {})).toBe("`hey ${1+2}`");
|
||||
});
|
||||
});
|
||||
@@ -1,14 +0,0 @@
|
||||
import { QWeb } from "../../src/qweb/index";
|
||||
import { renderToString } from "../helpers";
|
||||
|
||||
describe("memory", () => {
|
||||
test("t-foreach does not leak stuff in global scope", () => {
|
||||
let qweb = new QWeb();
|
||||
const initialNumberOfGlobals = Object.keys(window).length;
|
||||
qweb.addTemplate("test", `<p><t t-foreach="[3, 2, 1]" t-as="item"><t t-esc="item"/></t></p>`);
|
||||
const result = renderToString(qweb, "test");
|
||||
const expected = `<p>321</p>`;
|
||||
expect(result).toBe(expected);
|
||||
expect(Object.keys(window).length).toBe(initialNumberOfGlobals);
|
||||
});
|
||||
});
|
||||
@@ -1,36 +0,0 @@
|
||||
import { QWeb } from "../../src/qweb/index";
|
||||
import { renderToString } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function render(template, context = {}) {
|
||||
const qweb = new QWeb();
|
||||
qweb.addTemplate("test", template);
|
||||
return renderToString(qweb, "test", context);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("qweb t-att", () => {
|
||||
test("t-att-class with multiple classes", () => {
|
||||
expect(render(`<div t-att-class="{'a b c': value}" />`, { value: true })).toBe(
|
||||
'<div class="a b c"></div>'
|
||||
);
|
||||
expect(render(`<div t-att-class="{['a b c']: value}" />`, { value: true })).toBe(
|
||||
'<div class="a b c"></div>'
|
||||
);
|
||||
});
|
||||
|
||||
test("t-att-class with multiple classes, some of which are duplicate", () => {
|
||||
expect(render(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: true })).toBe(
|
||||
'<div class="a b c"></div>'
|
||||
);
|
||||
expect(
|
||||
render(`<div t-att-class="{'a b c': value, 'a b d': !value}" />`, { value: false })
|
||||
).toBe('<div class="a b d"></div>');
|
||||
});
|
||||
});
|
||||
@@ -1,42 +0,0 @@
|
||||
import { QWeb } from "../../src/qweb/index";
|
||||
import { renderToString } from "../helpers";
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Setup and helpers
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
function render(template, context = {}) {
|
||||
const qweb = new QWeb();
|
||||
qweb.addTemplate("test", template);
|
||||
return renderToString(qweb, "test", context);
|
||||
}
|
||||
|
||||
//------------------------------------------------------------------------------
|
||||
// Tests
|
||||
//------------------------------------------------------------------------------
|
||||
|
||||
describe("qweb t-tag", () => {
|
||||
test("simple usecases", () => {
|
||||
expect(render(`<t t-tag="'div'"></t>`)).toBe("<div></div>");
|
||||
expect(render(`<t t-tag="tag">text</t>`, { tag: "span" })).toBe("<span>text</span>");
|
||||
});
|
||||
|
||||
test("with multiple child nodes", () => {
|
||||
const template = `
|
||||
<t t-tag="tag">
|
||||
pear
|
||||
<span>apple</span>
|
||||
strawberry
|
||||
</t>`;
|
||||
expect(render(template, { tag: "div" })).toBe(
|
||||
"<div> pear <span>apple</span> strawberry </div>"
|
||||
);
|
||||
});
|
||||
|
||||
test("with multiple attributes", () => {
|
||||
const template = `
|
||||
<t t-tag="tag" class="blueberry" taste="raspberry">gooseberry</t>`;
|
||||
const expected = `<div taste=\"raspberry\" class=\"blueberry\">gooseberry</div>`;
|
||||
expect(render(template, { tag: "div" })).toBe(expected);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,125 @@
|
||||
import { renderToString, snapshotEverything, TestContext } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// Simple templates, mostly static
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("simple templates, mostly static", () => {
|
||||
test("simple string", () => {
|
||||
const template = `hello vdom`;
|
||||
expect(renderToString(template)).toBe("hello vdom");
|
||||
});
|
||||
|
||||
test("simple string in t tag", () => {
|
||||
const template = `<t>hello vdom</t>`;
|
||||
expect(renderToString(template)).toBe("hello vdom");
|
||||
});
|
||||
|
||||
test("empty string", () => {
|
||||
const template = ``;
|
||||
expect(renderToString(template)).toBe("");
|
||||
});
|
||||
|
||||
test("empty string in a template set", () => {
|
||||
const template = ``;
|
||||
const context = new TestContext();
|
||||
context.addTemplate("potato", template);
|
||||
expect(context.renderToString("potato")).toBe("");
|
||||
});
|
||||
|
||||
test("empty div", () => {
|
||||
const template = `<div></div>`;
|
||||
expect(renderToString(template)).toBe("<div></div>");
|
||||
});
|
||||
|
||||
test("div with content", () => {
|
||||
const template = `<div>foo</div>`;
|
||||
expect(renderToString(template)).toBe("<div>foo</div>");
|
||||
});
|
||||
|
||||
test("multiple root nodes", () => {
|
||||
const template = `<div>foo</div><span>hey</span>`;
|
||||
expect(renderToString(template)).toBe("<div>foo</div><span>hey</span>");
|
||||
});
|
||||
|
||||
test("dynamic text value", () => {
|
||||
const template = `<t><t t-esc="text"/></t>`;
|
||||
expect(renderToString(template, { text: "owl" })).toBe("owl");
|
||||
});
|
||||
|
||||
test("two t-escs next to each other", () => {
|
||||
const template = `<t><t t-esc="text1"/><t t-esc="text2"/></t>`;
|
||||
expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("helloowl");
|
||||
});
|
||||
|
||||
test("two t-escs next to each other", () => {
|
||||
const template = `<t t-esc="text1"/><t t-esc="text2"/>`;
|
||||
expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("helloowl");
|
||||
});
|
||||
|
||||
test("two t-escs next to each other, in a div", () => {
|
||||
const template = `<div><t t-esc="text1"/><t t-esc="text2"/></div>`;
|
||||
expect(renderToString(template, { text1: "hello", text2: "owl" })).toBe("<div>helloowl</div>");
|
||||
});
|
||||
|
||||
test("static text and dynamic text", () => {
|
||||
const template = `<t>hello <t t-esc="text"/></t>`;
|
||||
expect(renderToString(template, { text: "owl" })).toBe("hello owl");
|
||||
});
|
||||
|
||||
test("static text and dynamic text (no t tag)", () => {
|
||||
const template = `hello <t t-esc="text"/>`;
|
||||
expect(renderToString(template, { text: "owl" })).toBe("hello owl");
|
||||
});
|
||||
|
||||
test("t-esc in dom node", () => {
|
||||
const template = `<div><t t-esc="text"/></div>`;
|
||||
expect(renderToString(template, { text: "hello owl" })).toBe("<div>hello owl</div>");
|
||||
});
|
||||
|
||||
test("dom node with t-esc", () => {
|
||||
const template1 = `<div t-esc="text" />`;
|
||||
expect(renderToString(template1, { text: "hello owl" })).toBe("<div>hello owl</div>");
|
||||
const template2 = `<div t-esc="text"></div>`;
|
||||
expect(renderToString(template2, { text: "hello owl" })).toBe("<div>hello owl</div>");
|
||||
});
|
||||
|
||||
test("t-esc in dom node, variations", () => {
|
||||
const template1 = `<div>hello <t t-esc="text"/></div>`;
|
||||
expect(renderToString(template1, { text: "owl" })).toBe("<div>hello owl</div>");
|
||||
const template2 = `<div>hello <t t-esc="text"/> world</div>`;
|
||||
expect(renderToString(template2, { text: "owl" })).toBe("<div>hello owl world</div>");
|
||||
});
|
||||
|
||||
test("div with a class attribute", () => {
|
||||
const template = `<div class="abc">foo</div>`;
|
||||
expect(renderToString(template)).toBe(`<div class="abc">foo</div>`);
|
||||
});
|
||||
|
||||
test("div with a class attribute with a quote", () => {
|
||||
const template = `<div class="a'bc">word</div>`;
|
||||
expect(renderToString(template)).toBe(`<div class="a'bc">word</div>`);
|
||||
});
|
||||
|
||||
test("div with an arbitrary attribute with a quote", () => {
|
||||
const template = `<div abc="a'bc">word</div>`;
|
||||
expect(renderToString(template)).toBe(`<div abc="a'bc">word</div>`);
|
||||
});
|
||||
|
||||
test("div with an empty class attribute", () => {
|
||||
const template = `<div class="">word</div>`;
|
||||
expect(renderToString(template)).toBe(`<div>word</div>`);
|
||||
});
|
||||
|
||||
test("div with a span child node", () => {
|
||||
const template = `<div><span>word</span></div>`;
|
||||
expect(renderToString(template)).toBe("<div><span>word</span></div>");
|
||||
});
|
||||
|
||||
test("can render a table row", () => {
|
||||
const template = `<tr><td>cell</td></tr>`;
|
||||
expect(renderToString(template)).toBe(template);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,448 @@
|
||||
import { snapshotEverything, TestContext } from "../helpers";
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// t-call
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("t-call (template calling)", () => {
|
||||
test("basic caller", () => {
|
||||
const context = new TestContext();
|
||||
context.addTemplate("_basic-callee", `<span>ok</span>`);
|
||||
context.addTemplate("caller", `<div><t t-call="_basic-callee"/></div>`);
|
||||
|
||||
expect(context.renderToString("caller")).toBe("<div><span>ok</span></div>");
|
||||
});
|
||||
|
||||
test("basic caller, no parent node", () => {
|
||||
const context = new TestContext();
|
||||
context.addTemplate("_basic-callee", `<span>ok</span>`);
|
||||
context.addTemplate("caller", `<t t-call="_basic-callee"/>`);
|
||||
|
||||
expect(context.renderToString("caller")).toBe("<span>ok</span>");
|
||||
});
|
||||
|
||||
test("t-esc inside t-call, with t-set outside", () => {
|
||||
const context = new TestContext();
|
||||
const main = `<div><t t-set="v">Hi</t><t t-call="sub"/></div>`;
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", `<span t-esc="v"/>`);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div><span>Hi</span></div>");
|
||||
});
|
||||
|
||||
test("t-call with t-if", () => {
|
||||
const context = new TestContext();
|
||||
const main = '<div><t t-if="flag" t-call="sub"/></div>';
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", "<span>ok</span>");
|
||||
|
||||
expect(context.renderToString("main", { flag: true })).toBe("<div><span>ok</span></div>");
|
||||
});
|
||||
|
||||
test("t-call allowed on a non t node", () => {
|
||||
const context = new TestContext();
|
||||
const main = '<div t-call="sub"/>';
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", "<span>ok</span>");
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div><span>ok</span></div>");
|
||||
});
|
||||
|
||||
test("with unused body", () => {
|
||||
const context = new TestContext();
|
||||
const sub = "<div>ok</div>";
|
||||
const main = '<t t-call="sub">WHEEE</t>';
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div>ok</div>");
|
||||
});
|
||||
|
||||
test("with unused setbody", () => {
|
||||
const context = new TestContext();
|
||||
const sub = "<div>ok</div>";
|
||||
const main = `<t t-call="sub"><t t-set="qux" t-value="3"/></t>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div>ok</div>");
|
||||
});
|
||||
|
||||
test("with used body", () => {
|
||||
const context = new TestContext();
|
||||
const sub = '<h1><t t-esc="0"/></h1>';
|
||||
const main = '<t t-call="sub">ok</t>';
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<h1>ok</h1>");
|
||||
});
|
||||
|
||||
test("with used setbody", () => {
|
||||
const context = new TestContext();
|
||||
const sub = '<t t-esc="foo"/>';
|
||||
const main = `<span><t t-call="sub"><t t-set="foo" t-value="'ok'"/></t></span>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<span>ok</span>");
|
||||
});
|
||||
|
||||
test("inherit context", () => {
|
||||
const context = new TestContext();
|
||||
const sub = '<t t-esc="foo"/>';
|
||||
const main = `<div><t t-set="foo" t-value="1"/><t t-call="sub"/></div>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div>1</div>");
|
||||
});
|
||||
|
||||
test("scoped parameters", () => {
|
||||
const context = new TestContext();
|
||||
const sub = "<t>ok</t>";
|
||||
const main = `
|
||||
<div>
|
||||
<t t-call="sub">
|
||||
<t t-set="foo" t-value="42"/>
|
||||
</t>
|
||||
<t t-esc="foo"/>
|
||||
</div>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div>ok</div>");
|
||||
});
|
||||
|
||||
test("scoped parameters, part 2", () => {
|
||||
const context = new TestContext();
|
||||
const sub = '<t t-esc="foo"/>';
|
||||
const main = `
|
||||
<div>
|
||||
<t t-set="foo" t-value="11"/>
|
||||
<t t-call="sub">
|
||||
<t t-set="foo" t-value="42"/>
|
||||
</t>
|
||||
<t t-esc="foo"/>
|
||||
</div>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
expect(context.renderToString("main")).toBe("<div>4211</div>");
|
||||
});
|
||||
|
||||
test("call with several sub nodes on same line", () => {
|
||||
const context = new TestContext();
|
||||
const sub = `
|
||||
<div>
|
||||
<t t-raw="0"/>
|
||||
</div>`;
|
||||
const main = `
|
||||
<div>
|
||||
<t t-call="sub">
|
||||
<span>hey</span> <span>yay</span>
|
||||
</t>
|
||||
</div>`;
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
const expected = "<div><div><span>hey</span> <span>yay</span></div></div>";
|
||||
expect(context.renderToString("main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("cascading t-call t-raw='0'", () => {
|
||||
const context = new TestContext();
|
||||
const finalTemplate = `
|
||||
<div>
|
||||
<span>cascade 2</span>
|
||||
<t t-raw="0"/>
|
||||
</div>`;
|
||||
|
||||
const subSubTemplate = `
|
||||
<div>
|
||||
<t t-call="finalTemplate">
|
||||
<span>cascade 1</span>
|
||||
<t t-raw="0"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const subTemplate = `
|
||||
<div>
|
||||
<t t-call="subSubTemplate">
|
||||
<span>cascade 0</span>
|
||||
<t t-raw="0"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const main = `
|
||||
<div>
|
||||
<t t-call="subTemplate">
|
||||
<span>hey</span> <span>yay</span>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("finalTemplate", finalTemplate);
|
||||
context.addTemplate("subSubTemplate", subSubTemplate);
|
||||
context.addTemplate("subTemplate", subTemplate);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
const expected =
|
||||
"<div><div><div><div><span>cascade 2</span><span>cascade 1</span><span>cascade 0</span><span>hey</span> <span>yay</span></div></div></div></div>";
|
||||
expect(context.renderToString("main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("cascading t-call t-raw='0', without external divs", () => {
|
||||
const context = new TestContext();
|
||||
const finalTemplate = `
|
||||
<span>cascade 2</span>
|
||||
<t t-raw="0"/>`;
|
||||
|
||||
const subSubTemplate = `
|
||||
<t t-call="finalTemplate">
|
||||
<span>cascade 1</span>
|
||||
<t t-raw="0"/>
|
||||
</t>`;
|
||||
|
||||
const subTemplate = `
|
||||
<t t-call="subSubTemplate">
|
||||
<span>cascade 0</span>
|
||||
<t t-raw="0"/>
|
||||
</t>`;
|
||||
|
||||
const main = `
|
||||
<t t-call="subTemplate">
|
||||
<span>hey</span> <span>yay</span>
|
||||
</t>`;
|
||||
|
||||
context.addTemplate("finalTemplate", finalTemplate);
|
||||
context.addTemplate("subSubTemplate", subSubTemplate);
|
||||
context.addTemplate("subTemplate", subTemplate);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
const expected =
|
||||
"<span>cascade 2</span><span>cascade 1</span><span>cascade 0</span><span>hey</span> <span>yay</span>";
|
||||
expect(context.renderToString("main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("recursive template, part 1", () => {
|
||||
const context = new TestContext();
|
||||
const recursive = `
|
||||
<div>
|
||||
<span>hey</span>
|
||||
<t t-if="false">
|
||||
<t t-call="recursive"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("recursive", recursive);
|
||||
|
||||
const expected = "<div><span>hey</span></div>";
|
||||
expect(context.renderToString("recursive")).toBe(expected);
|
||||
});
|
||||
|
||||
test("recursive template, part 2", () => {
|
||||
const context = new TestContext();
|
||||
const Parent = `
|
||||
<div>
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="node" t-value="root"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const nodeTemplate = `
|
||||
<div>
|
||||
<p><t t-esc="node.val"/></p>
|
||||
<t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="node" t-value="subtree"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("Parent", Parent);
|
||||
context.addTemplate("nodeTemplate", nodeTemplate);
|
||||
|
||||
const root = { val: "a", children: [{ val: "b" }, { val: "c" }] };
|
||||
const expected = "<div><div><p>a</p><div><p>b</p></div><div><p>c</p></div></div></div>";
|
||||
expect(context.renderToString("Parent", { root })).toBe(expected);
|
||||
});
|
||||
|
||||
test("recursive template, part 3", () => {
|
||||
const context = new TestContext();
|
||||
const Parent = `
|
||||
<div>
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="node" t-value="root"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const nodeTemplate = `
|
||||
<div>
|
||||
<p><t t-esc="node.val"/></p>
|
||||
<t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="node" t-value="subtree"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("Parent", Parent);
|
||||
context.addTemplate("nodeTemplate", nodeTemplate);
|
||||
|
||||
const root = { val: "a", children: [{ val: "b", children: [{ val: "d" }] }, { val: "c" }] };
|
||||
const expected =
|
||||
"<div><div><p>a</p><div><p>b</p><div><p>d</p></div></div><div><p>c</p></div></div></div>";
|
||||
expect(context.renderToString("Parent", { root })).toBe(expected);
|
||||
});
|
||||
|
||||
test("recursive template, part 4: with t-set recursive index", () => {
|
||||
const context = new TestContext();
|
||||
const Parent = `
|
||||
<div>
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="recursive_idx" t-value="1"/>
|
||||
<t t-set="node" t-value="root"/>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
const nodeTemplate = `
|
||||
<div>
|
||||
<t t-set="recursive_idx" t-value="recursive_idx + 1"/>
|
||||
<p><t t-esc="node.val"/> <t t-esc="recursive_idx"/></p>
|
||||
<t t-foreach="node.children or []" t-as="subtree" t-key="subtree_index">
|
||||
<t t-call="nodeTemplate">
|
||||
<t t-set="node" t-value="subtree"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("Parent", Parent);
|
||||
context.addTemplate("nodeTemplate", nodeTemplate);
|
||||
|
||||
const root = {
|
||||
val: "a",
|
||||
children: [{ val: "b", children: [{ val: "c", children: [{ val: "d" }] }] }],
|
||||
};
|
||||
const expected =
|
||||
"<div><div><p>a 2</p><div><p>b 3</p><div><p>c 4</p><div><p>d 5</p></div></div></div></div></div>";
|
||||
expect(context.renderToString("Parent", { root })).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call, conditional and t-set in t-call body", () => {
|
||||
const context = new TestContext();
|
||||
const callee1 = `<div>callee1</div>`;
|
||||
const callee2 = `<div>callee2 <t t-esc="v"/></div>`;
|
||||
const caller = `
|
||||
<div>
|
||||
<t t-set="v1" t-value="'elif'"/>
|
||||
<t t-if="v1 === 'if'" t-call="callee1" />
|
||||
<t t-elif="v1 === 'elif'" t-call="callee2" >
|
||||
<t t-set="v" t-value="'success'" />
|
||||
</t>
|
||||
</div>`;
|
||||
|
||||
context.addTemplate("callee1", callee1);
|
||||
context.addTemplate("callee2", callee2);
|
||||
context.addTemplate("caller", caller);
|
||||
|
||||
const expected = `<div><div>callee2 success</div></div>`;
|
||||
expect(context.renderToString("caller")).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call with t-set inside and outside", () => {
|
||||
const context = new TestContext();
|
||||
const main = `
|
||||
<div>
|
||||
<t t-foreach="list" t-as="v" t-key="v_index">
|
||||
<t t-set="val" t-value="v.val"/>
|
||||
<t t-call="sub">
|
||||
<t t-set="val3" t-value="val*3"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
const sub = `
|
||||
<t>
|
||||
<span t-esc="val3"/>
|
||||
</t>`;
|
||||
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", sub);
|
||||
|
||||
const expected = "<div><span>3</span><span>6</span><span>9</span></div>";
|
||||
const ctx = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
|
||||
expect(context.renderToString("main", ctx)).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call with t-set inside and outside. 2", () => {
|
||||
const context = new TestContext();
|
||||
const main = `
|
||||
<div>
|
||||
<t t-foreach="list" t-as="v" t-key="v_index">
|
||||
<t t-set="val" t-value="v.val"/>
|
||||
<t t-call="sub">
|
||||
<t t-set="val3" t-value="val*3"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>`;
|
||||
const sub = `
|
||||
<t>
|
||||
<span t-esc="val3"/>
|
||||
<t t-esc="w"/>
|
||||
</t>`;
|
||||
const wrapper = `<p><t t-set="w" t-value="'fromwrapper'"/><t t-call="main"/></p>`;
|
||||
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", sub);
|
||||
context.addTemplate("wrapper", wrapper);
|
||||
|
||||
const expected =
|
||||
"<p><div><span>3</span>fromwrapper<span>6</span>fromwrapper<span>9</span>fromwrapper</div></p>";
|
||||
const ctx = { list: [{ val: 1 }, { val: 2 }, { val: 3 }] };
|
||||
expect(context.renderToString("wrapper", ctx)).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call with t-set inside and body text content", () => {
|
||||
const context = new TestContext();
|
||||
const main = `
|
||||
<div>
|
||||
<t t-call="sub">
|
||||
<t t-set="val">yip yip</t>
|
||||
</t>
|
||||
</div>`;
|
||||
const sub = `<p><t t-esc="val"/></p>`;
|
||||
|
||||
context.addTemplate("main", main);
|
||||
context.addTemplate("sub", sub);
|
||||
|
||||
const expected = "<div><p>yip yip</p></div>";
|
||||
expect(context.renderToString("main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("t-call with body content as root of a template", () => {
|
||||
const context = new TestContext();
|
||||
const antony = `<foo><t t-raw="0"/></foo>`;
|
||||
const main = `<t><t t-call="antony"><p>antony</p></t></t>`;
|
||||
context.addTemplate("antony", antony);
|
||||
context.addTemplate("main", main);
|
||||
const expected = "<foo><p>antony</p></foo>";
|
||||
expect(context.renderToString("main")).toBe(expected);
|
||||
});
|
||||
|
||||
test("dynamic t-call", () => {
|
||||
const context = new TestContext();
|
||||
const foo = `<foo><t t-esc="val"/></foo>`;
|
||||
const bar = `<bar><t t-esc="val"/></bar>`;
|
||||
const main = `<div><t t-call="{{template}}"/></div>`;
|
||||
|
||||
context.addTemplate("foo", foo);
|
||||
context.addTemplate("bar", bar);
|
||||
context.addTemplate("main", main);
|
||||
|
||||
const expected1 = "<div><foo>foo</foo></div>";
|
||||
expect(context.renderToString("main", { template: "foo", val: "foo" })).toBe(expected1);
|
||||
const expected2 = "<div><bar>quux</bar></div>";
|
||||
expect(context.renderToString("main", { template: "bar", val: "quux" })).toBe(expected2);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,30 @@
|
||||
import { renderToString, snapshotTemplateCode } from "../helpers";
|
||||
|
||||
// -----------------------------------------------------------------------------
|
||||
// debugging
|
||||
// -----------------------------------------------------------------------------
|
||||
|
||||
describe("debugging", () => {
|
||||
test("t-debug", () => {
|
||||
const consoleLog = console.log;
|
||||
console.log = jest.fn();
|
||||
const template = `<div t-debug=""><t t-if="true"><span t-debug="">hey</span></t></div>`;
|
||||
snapshotTemplateCode(template);
|
||||
expect(console.log).toHaveBeenCalledTimes(1);
|
||||
console.log = consoleLog;
|
||||
});
|
||||
|
||||
test("t-log", () => {
|
||||
const consoleLog = console.log;
|
||||
console.log = jest.fn();
|
||||
|
||||
const template = `<div>
|
||||
<t t-set="foo" t-value="42"/>
|
||||
<t t-log="foo + 3"/>
|
||||
</div>`;
|
||||
snapshotTemplateCode(template);
|
||||
renderToString(template);
|
||||
expect(console.log).toHaveBeenCalledWith(45);
|
||||
console.log = consoleLog;
|
||||
});
|
||||
});
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user