NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity

[IMP] t-on directive: handle inline statements

Browse Source 
Closes #265
This commit is contained in:
Aaron Bohy
2019-10-25 10:57:08 +02:00
committed by Géry Debongnie
parent 71827c3ba8
commit 0ea1091692
8 changed files with 310 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/qweb/__snapshots__/qweb.test.ts.snap
+53 -77
View File
@@ -1618,10 +1618,7 @@ exports[`t-on can bind event handler 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['add']) {
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {const fn = context['add'];if (fn) { fn.call(owner, e); } else { context.add; }};
p1.on['click'] = extra.handlers['click' + 1];
c1.push({text: \`Click\`});
return vn1;
@@ -1635,10 +1632,8 @@ exports[`t-on can bind handlers with arguments 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['add']) {
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
}
p1.on['click'] = context['add'].bind(owner, 5);
const handler2 = context['add'] && context['add'].bind(owner, 5);
p1.on['click'] = function (e) {if (handler2) { handler2(e); } else { context.add(5); }};
c1.push({text: \`Click\`});
return vn1;
}"
@@ -1651,10 +1646,8 @@ exports[`t-on can bind handlers with empty object (with non empty inner string)
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['doSomething']) {
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
}
p1.on['click'] = context['doSomething'].bind(owner, {});
const handler2 = context['doSomething'] && context['doSomething'].bind(owner, {});
p1.on['click'] = function (e) {if (handler2) { handler2(e); } else { context.doSomething({ }); }};
c1.push({text: \`Click\`});
return vn1;
}"
@@ -1667,10 +1660,8 @@ exports[`t-on can bind handlers with empty object 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['doSomething']) {
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'test'\`)
}
p1.on['click'] = context['doSomething'].bind(owner, {});
const handler2 = context['doSomething'] && context['doSomething'].bind(owner, {});
p1.on['click'] = function (e) {if (handler2) { handler2(e); } else { context.doSomething({}); }};
c1.push({text: \`Click\`});
return vn1;
}"
@@ -1705,10 +1696,8 @@ exports[`t-on can bind handlers with loop variable as argument 1`] = `
let c6 = [], p6 = {key:6,on:{}};
var vn6 = h('a', p6, c6);
c5.push(vn6);
if (!context['activate']) {
throw new Error('Missing handler \\\\'' + 'activate' + \`\\\\' when evaluating template 'test'\`)
}
p6.on['click'] = context['activate'].bind(owner, context['action']);
const handler7 = context['activate'] && context['activate'].bind(owner, context['action']);
p6.on['click'] = function (e) {if (handler7) { handler7(e); } else { context.activate(action); }};
c6.push({text: \`link\`});
}
return vn1;
@@ -1722,10 +1711,8 @@ exports[`t-on can bind handlers with object arguments 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['add']) {
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
}
p1.on['click'] = context['add'].bind(owner, {val:5});
const handler2 = context['add'] && context['add'].bind(owner, {val:5});
p1.on['click'] = function (e) {if (handler2) { handler2(e); } else { context.add({val: 5}); }};
c1.push({text: \`Click\`});
return vn1;
}"
@@ -1738,15 +1725,9 @@ exports[`t-on can bind two event handlers 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['handleClick']) {
throw new Error('Missing handler \\\\'' + 'handleClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['handleClick'].bind(owner);
extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {const fn = context['handleClick'];if (fn) { fn.call(owner, e); } else { context.handleClick; }};
p1.on['click'] = extra.handlers['click' + 1];
if (!context['handleDblClick']) {
throw new Error('Missing handler \\\\'' + 'handleDblClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || context['handleDblClick'].bind(owner);
extra.handlers['dblclick' + 1] = extra.handlers['dblclick' + 1] || function (e) {const fn = context['handleDblClick'];if (fn) { fn.call(owner, e); } else { context.handleDblClick; }};
p1.on['dblclick'] = extra.handlers['dblclick' + 1];
c1.push({text: \`Click\`});
return vn1;
@@ -1760,10 +1741,7 @@ exports[`t-on handler is bound to proper owner 1`] = `
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
if (!context['add']) {
throw new Error('Missing handler \\\\'' + 'add' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 1] = extra.handlers['click' + 1] || context['add'].bind(owner);
extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {const fn = context['add'];if (fn) { fn.call(owner, e); } else { context.add; }};
p1.on['click'] = extra.handlers['click' + 1];
c1.push({text: \`Click\`});
return vn1;
@@ -1780,10 +1758,7 @@ exports[`t-on t-on combined with t-esc 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClick']) {
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {const fn = context['onClick'];if (fn) { fn.call(owner, e); } else { context.onClick; }};
p2.on['click'] = extra.handlers['click' + 2];
var _3 = context['text'];
if (_3 || _3 === 0) {
@@ -1804,10 +1779,7 @@ exports[`t-on t-on combined with t-raw 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClick']) {
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {const fn = context['onClick'];if (fn) { fn.call(owner, e); } else { context.onClick; }};
p2.on['click'] = extra.handlers['click' + 2];
var _3 = context['html'];
if (_3 || _3 === 0) {
@@ -1817,6 +1789,34 @@ exports[`t-on t-on combined with t-raw 1`] = `
}"
`;
exports[`t-on t-on with inline statement (function call) 1`] = `
"function anonymous(context,extra
) {
let owner = context;
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
const handler2 = context['state.incrementCounter'] && context['state.incrementCounter'].bind(owner, 2);
p1.on['click'] = function (e) {if (handler2) { handler2(e); } else { context.state.incrementCounter(2); }};
c1.push({text: \`Click\`});
return vn1;
}"
`;
exports[`t-on t-on with inline statement 1`] = `
"function anonymous(context,extra
) {
let owner = context;
var h = this.h;
let c1 = [], p1 = {key:1,on:{}};
var vn1 = h('button', p1, c1);
extra.handlers['click' + 1] = extra.handlers['click' + 1] || function (e) {const fn = context['state.counter++'];if (fn) { fn.call(owner, e); } else { context.state.counter++; }};
p1.on['click'] = extra.handlers['click' + 1];
c1.push({text: \`Click\`});
return vn1;
}"
`;
exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
"function anonymous(context,extra
) {
@@ -1827,10 +1827,7 @@ exports[`t-on t-on with prevent and self modifiers (order matters) 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClick']) {
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();if (e.target !== this.elm) {return}context['onClick'].call(owner, e);};
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();if (e.target !== this.elm) {return}const fn = context['onClick'];if (fn) { fn.call(owner, e); } else { context.onClick; }};
p2.on['click'] = extra.handlers['click' + 2];
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
@@ -1850,28 +1847,19 @@ exports[`t-on t-on with prevent and/or stop modifiers 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClickPrevented']) {
throw new Error('Missing handler \\\\'' + 'onClickPrevented' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();context['onClickPrevented'].call(owner, e);};
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {e.preventDefault();const fn = context['onClickPrevented'];if (fn) { fn.call(owner, e); } else { context.onClickPrevented; }};
p2.on['click'] = extra.handlers['click' + 2];
c2.push({text: \`Button 1\`});
let c3 = [], p3 = {key:3,on:{}};
var vn3 = h('button', p3, c3);
c1.push(vn3);
if (!context['onClickStopped']) {
throw new Error('Missing handler \\\\'' + 'onClickStopped' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.stopPropagation();context['onClickStopped'].call(owner, e);};
extra.handlers['click' + 3] = extra.handlers['click' + 3] || function (e) {e.stopPropagation();const fn = context['onClickStopped'];if (fn) { fn.call(owner, e); } else { context.onClickStopped; }};
p3.on['click'] = extra.handlers['click' + 3];
c3.push({text: \`Button 2\`});
let c4 = [], p4 = {key:4,on:{}};
var vn4 = h('button', p4, c4);
c1.push(vn4);
if (!context['onClickPreventedAndStopped']) {
throw new Error('Missing handler \\\\'' + 'onClickPreventedAndStopped' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {e.preventDefault();e.stopPropagation();context['onClickPreventedAndStopped'].call(owner, e);};
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {e.preventDefault();e.stopPropagation();const fn = context['onClickPreventedAndStopped'];if (fn) { fn.call(owner, e); } else { context.onClickPreventedAndStopped; }};
p4.on['click'] = extra.handlers['click' + 4];
c4.push({text: \`Button 3\`});
return vn1;
@@ -1905,11 +1893,8 @@ exports[`t-on t-on with prevent modifier in t-foreach 1`] = `
let c6 = [], p6 = {key:nodeKey6,attrs:{href: _5},on:{}};
var vn6 = h('a', p6, c6);
c1.push(vn6);
if (!context['onEdit']) {
throw new Error('Missing handler \\\\'' + 'onEdit' + \`\\\\' when evaluating template 'test'\`)
}
const handler7 = context['onEdit'].bind(owner, context['project'].id);
p6.on['click'] = function (e) {e.preventDefault();handler7(e);};
const handler7 = context['onEdit'] && context['onEdit'].bind(owner, context['project'].id);
p6.on['click'] = function (e) {e.preventDefault();if (handler7) { handler7(e); } else { context.onEdit(project.id); }};
c6.push({text: \` Edit \`});
var _8 = context['project'].name;
if (_8 || _8 === 0) {
@@ -1930,10 +1915,7 @@ exports[`t-on t-on with self and prevent modifiers (order matters) 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClick']) {
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (e.target !== this.elm) {return}e.preventDefault();context['onClick'].call(owner, e);};
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {if (e.target !== this.elm) {return}e.preventDefault();const fn = context['onClick'];if (fn) { fn.call(owner, e); } else { context.onClick; }};
p2.on['click'] = extra.handlers['click' + 2];
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
@@ -1953,10 +1935,7 @@ exports[`t-on t-on with self modifier 1`] = `
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
if (!context['onClick']) {
throw new Error('Missing handler \\\\'' + 'onClick' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['onClick'].bind(owner);
extra.handlers['click' + 2] = extra.handlers['click' + 2] || function (e) {const fn = context['onClick'];if (fn) { fn.call(owner, e); } else { context.onClick; }};
p2.on['click'] = extra.handlers['click' + 2];
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
@@ -1965,10 +1944,7 @@ exports[`t-on t-on with self modifier 1`] = `
let c4 = [], p4 = {key:4,on:{}};
var vn4 = h('button', p4, c4);
c1.push(vn4);
if (!context['onClickSelf']) {
throw new Error('Missing handler \\\\'' + 'onClickSelf' + \`\\\\' when evaluating template 'test'\`)
}
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (e.target !== this.elm) {return}context['onClickSelf'].call(owner, e);};
extra.handlers['click' + 4] = extra.handlers['click' + 4] || function (e) {if (e.target !== this.elm) {return}const fn = context['onClickSelf'];if (fn) { fn.call(owner, e); } else { context.onClickSelf; }};
p4.on['click'] = extra.handlers['click' + 4];
let c5 = [], p5 = {key:5};
var vn5 = h('span', p5, c5);
tests/qweb/qweb.test.ts
+42 -14
View File
@@ -85,13 +85,6 @@ describe("error handling", () => {
}).toThrow("Invalid XML in template");
});
test("nice error when t-on-directive is evaluated with a missing handler", () => {
qweb.addTemplate("templatename", `<div t-on-click="somemethod"></div>`);
expect(() => qweb.render("templatename", {}, { handlers: [] })).toThrow(
"Missing handler 'somemethod' when evaluating template 'templatename'"
);
});
test("nice error when t-on is evaluated with a missing event", () => {
qweb.addTemplate("templatename", `<div t-on="somemethod"></div>`);
expect(() => qweb.render("templatename", { someMethod() {} }, { handlers: [] })).toThrow(
@@ -340,41 +333,49 @@ describe("t-if", () => {
});
test("t-set, then t-if", () => {
qweb.addTemplate("test", `
qweb.addTemplate(
"test",
`
<div>
<t t-set="title" t-value="'test'"/>
<t t-if="title"><t t-esc="title"/></t>
</div>`);
</div>`
);
const result = renderToString(qweb, "test");
const expected = `<div>test</div>`;
expect(result).toBe(expected);
});
test("t-set, then t-if, part 2", () => {
qweb.addTemplate("test", `
qweb.addTemplate(
"test",
`
<div>
<t t-set="y" t-value="true"/>
<t t-set="x" t-value="y"/>
<span t-if="x">COUCOU</span>
</div>`);
</div>`
);
const result = renderToString(qweb, "test");
const expected = `<div><span>COUCOU</span></div>`;
expect(result).toBe(expected);
});
test("t-set, then t-elif, part 3", () => {
qweb.addTemplate("test", `
qweb.addTemplate(
"test",
`
<div>
<t t-set="y" t-value="false"/>
<t t-set="x" t-value="y"/>
<span t-if="x">AAA</span>
<span t-elif="!x">BBB</span>
</div>`);
</div>`
);
const result = renderToString(qweb, "test");
const expected = `<div><span>BBB</span></div>`;
expect(result).toBe(expected);
});
});
describe("attributes", () => {
@@ -1039,6 +1040,33 @@ describe("t-on", () => {
(<HTMLElement>node).click();
});
test("t-on with inline statement", () => {
qweb.addTemplate("test", `<button t-on-click="state.counter++">Click</button>`);
let owner = {
state: {
counter: 0,
},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
expect(owner.state.counter).toBe(0);
(<HTMLElement>node).click();
expect(owner.state.counter).toBe(1);
});
test("t-on with inline statement (function call)", () => {
qweb.addTemplate("test", `<button t-on-click="state.incrementCounter(2)">Click</button>`);
let owner = {
state: {
counter: 0,
incrementCounter: (inc) => { owner.state.counter += inc; },
},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
expect(owner.state.counter).toBe(0);
(<HTMLElement>node).click();
expect(owner.state.counter).toBe(2);
});
test("t-on with prevent and/or stop modifiers", async () => {
expect.assertions(7);
qweb.addTemplate(