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

[FIX] component: properly handle wrapper component and slots

Browse Source 
closes #297
This commit is contained in:
Géry Debongnie
2019-09-22 22:24:24 +02:00
parent 78a4550ebb
commit 82a6961b3a
5 changed files with 124 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/__snapshots__/component.test.ts.snap
+46 -46
View File
@@ -1447,10 +1447,10 @@ exports[`t-slot directive can define and call slots 3`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('span', p2, c2);
c1.push(vn2);
c2.push({text: \`header\`});
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c1.push(vn6);
c6.push({text: \`header\`});
}"
`;
@@ -1460,10 +1460,10 @@ exports[`t-slot directive can define and call slots 4`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('span', p2, c2);
c1.push(vn2);
c2.push({text: \`footer\`});
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c1.push(vn6);
c6.push({text: \`footer\`});
}"
`;
@@ -1473,10 +1473,10 @@ exports[`t-slot directive content is the default slot 1`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('span', p2, c2);
c1.push(vn2);
c2.push({text: \`sts rocks\`});
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c1.push(vn6);
c6.push({text: \`sts rocks\`});
}"
`;
@@ -1496,14 +1496,14 @@ exports[`t-slot directive multiple roots are allowed in a default slot 1`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('span', p2, c2);
c1.push(vn2);
c2.push({text: \`sts\`});
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
c1.push(vn3);
c3.push({text: \`rocks\`});
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c1.push(vn6);
c6.push({text: \`sts\`});
let c7 = [], p7 = {key:7};
var vn7 = h('span', p7, c7);
c1.push(vn7);
c7.push({text: \`rocks\`});
}"
`;
@@ -1513,14 +1513,14 @@ exports[`t-slot directive multiple roots are allowed in a named slot 1`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('span', p2, c2);
c1.push(vn2);
c2.push({text: \`sts\`});
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
c1.push(vn3);
c3.push({text: \`rocks\`});
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c1.push(vn6);
c6.push({text: \`sts\`});
let c7 = [], p7 = {key:7};
var vn7 = h('span', p7, c7);
c1.push(vn7);
c7.push({text: \`rocks\`});
}"
`;
@@ -1531,21 +1531,21 @@ exports[`t-slot directive refs are properly bound in slots 1`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
let c10 = [], p10 = {key:10,on:{}};
var vn10 = h('button', p10, c10);
c1.push(vn10);
if (!context['doSomething']) {
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'slot_footer_template'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['doSomething'].bind(owner);
p2.on['click'] = extra.handlers['click' + 2];
const ref3 = \`myButton\`;
p2.hook = {
extra.handlers['click' + 10] = extra.handlers['click' + 10] || context['doSomething'].bind(owner);
p10.on['click'] = extra.handlers['click' + 10];
const ref11 = \`myButton\`;
p10.hook = {
create: (_, n) => {
context.refs[ref3] = n.elm;
context.refs[ref11] = n.elm;
},
};
c2.push({text: \`do something\`});
c10.push({text: \`do something\`});
}"
`;
@@ -1556,15 +1556,15 @@ exports[`t-slot directive slots are rendered with proper context 1`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2,on:{}};
var vn2 = h('button', p2, c2);
c1.push(vn2);
let c10 = [], p10 = {key:10,on:{}};
var vn10 = h('button', p10, c10);
c1.push(vn10);
if (!context['doSomething']) {
throw new Error('Missing handler \\\\'' + 'doSomething' + \`\\\\' when evaluating template 'slot_footer_template'\`)
}
extra.handlers['click' + 2] = extra.handlers['click' + 2] || context['doSomething'].bind(owner);
p2.on['click'] = extra.handlers['click' + 2];
c2.push({text: \`do something\`});
extra.handlers['click' + 10] = extra.handlers['click' + 10] || context['doSomething'].bind(owner);
p10.on['click'] = extra.handlers['click' + 10];
c10.push({text: \`do something\`});
}"
`;
@@ -1665,9 +1665,9 @@ exports[`t-slot directive slots are rendered with proper context, part 2 3`] = `
let c6 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
c6.push({text: \`User \`});
var _7 = context['user'].name;
if (_7 || _7 === 0) {
c6.push({text: _7});
var _12 = context['user'].name;
if (_12 || _12 === 0) {
c6.push({text: _12});
}
}"
`;
tests/component/component.test.ts
+25 -6
View File
@@ -2312,16 +2312,16 @@ describe("random stuff/miscellaneous", () => {
});
test("can inject values in tagged templates", async () => {
const SUBTEMPLATE = xml`<span><t t-esc="state.n"/></span>`
class Parent extends Widget {
static template = xml`<div><t t-call="${SUBTEMPLATE}"/></div>`
state = {n: 42};
}
const SUBTEMPLATE = xml`<span><t t-esc="state.n"/></span>`;
class Parent extends Widget {
static template = xml`<div><t t-call="${SUBTEMPLATE}"/></div>`;
state = { n: 42 };
}
const widget = new Parent(env);
await widget.mount(fixture);
expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
expect(fixture.innerHTML).toBe('<div><span>42</span></div>')
expect(fixture.innerHTML).toBe("<div><span>42</span></div>");
});
});
@@ -3476,6 +3476,25 @@ describe("t-slot directive", () => {
await nextTick();
expect(fixture.innerHTML).toBe("<div><button>Inc[5]</button><div><div> SC:5</div></div></div>");
});
test("slots and wrapper components", async () => {
class Link extends Component<any, any, any> {
static template = xml`
<a href="abc">
<t t-slot="default"/>
</a>`;
}
class A extends Component<any, any, any> {
static template = xml`<Link>hey</Link>`;
static components = { Link: Link };
}
const a = new A(env);
await a.mount(fixture);
expect(fixture.innerHTML).toBe(`<a href="abc">hey</a>`);
});
});
describe("t-model directive", () => {
tests/qweb/__snapshots__/qweb.test.ts.snap
+50 -50
View File
@@ -897,15 +897,15 @@ exports[`t-call (template calling recursive template, part 1 2`] = `
var h = this.h;
let c1 = extra.parentNode;
Object.assign(context, extra.fiber.scope);
let c2 = [], p2 = {key:2};
var vn2 = h('div', p2, c2);
c1.push(vn2);
let c3 = [], p3 = {key:3};
var vn3 = h('span', p3, c3);
c2.push(vn3);
c3.push({text: \`hey\`});
let c5 = [], p5 = {key:5};
var vn5 = h('div', p5, c5);
c1.push(vn5);
let c6 = [], p6 = {key:6};
var vn6 = h('span', p6, c6);
c5.push(vn6);
c6.push({text: \`hey\`});
if (false) {
this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c2, fiber: {vars: {}, scope}}));
this.recursiveFns['__3'].call(this, context, Object.assign({}, extra, {parentNode: c5, fiber: {vars: {}, scope}}));
}
}"
`;
@@ -968,36 +968,36 @@ exports[`t-call (template calling recursive template, part 2 2`] = `
let c3 = extra.parentNode;
let _v0 = extra.fiber.vars._v0
Object.assign(context, extra.fiber.scope);
let c4 = [], p4 = {key:4};
var vn4 = h('div', p4, c4);
c3.push(vn4);
let c5 = [], p5 = {key:5};
var vn5 = h('p', p5, c5);
c4.push(vn5);
var _6 = _v0.val;
if (_6 || _6 === 0) {
c5.push({text: _6});
let c12 = [], p12 = {key:12};
var vn12 = h('div', p12, c12);
c3.push(vn12);
let c13 = [], p13 = {key:13};
var vn13 = h('p', p13, c13);
c12.push(vn13);
var _14 = _v0.val;
if (_14 || _14 === 0) {
c13.push({text: _14});
}
var _7 = _v0.children||[];
if (!_7) { throw new Error('QWeb error: Invalid loop expression')}
var _8 = _9 = _7;
if (!(_7 instanceof Array)) {
_8 = Object.keys(_7);
_9 = Object.values(_7);
var _15 = _v0.children||[];
if (!_15) { throw new Error('QWeb error: Invalid loop expression')}
var _16 = _17 = _15;
if (!(_15 instanceof Array)) {
_16 = Object.keys(_15);
_17 = Object.values(_15);
}
var _length8 = _8.length;
for (let i = 0; i < _length8; i++) {
var _length16 = _16.length;
for (let i = 0; i < _length16; i++) {
context.subtree_first = i === 0;
scope.subtree_first = context.subtree_first;
context.subtree_last = i === _length8 - 1;
context.subtree_last = i === _length16 - 1;
scope.subtree_last = context.subtree_last;
context.subtree_index = i;
scope.subtree_index = context.subtree_index;
context.subtree = _8[i];
context.subtree = _16[i];
scope.subtree = context.subtree;
context.subtree_value = _9[i];
context.subtree_value = _17[i];
scope.subtree_value = context.subtree_value;
this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, fiber: {vars: {_v0: context['subtree']}, scope}}));
this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c12, fiber: {vars: {_v0: context['subtree']}, scope}}));
}
}"
`;
@@ -1060,36 +1060,36 @@ exports[`t-call (template calling recursive template, part 3 2`] = `
let c3 = extra.parentNode;
let _v0 = extra.fiber.vars._v0
Object.assign(context, extra.fiber.scope);
let c4 = [], p4 = {key:4};
var vn4 = h('div', p4, c4);
c3.push(vn4);
let c5 = [], p5 = {key:5};
var vn5 = h('p', p5, c5);
c4.push(vn5);
var _6 = _v0.val;
if (_6 || _6 === 0) {
c5.push({text: _6});
let c12 = [], p12 = {key:12};
var vn12 = h('div', p12, c12);
c3.push(vn12);
let c13 = [], p13 = {key:13};
var vn13 = h('p', p13, c13);
c12.push(vn13);
var _14 = _v0.val;
if (_14 || _14 === 0) {
c13.push({text: _14});
}
var _7 = _v0.children||[];
if (!_7) { throw new Error('QWeb error: Invalid loop expression')}
var _8 = _9 = _7;
if (!(_7 instanceof Array)) {
_8 = Object.keys(_7);
_9 = Object.values(_7);
var _15 = _v0.children||[];
if (!_15) { throw new Error('QWeb error: Invalid loop expression')}
var _16 = _17 = _15;
if (!(_15 instanceof Array)) {
_16 = Object.keys(_15);
_17 = Object.values(_15);
}
var _length8 = _8.length;
for (let i = 0; i < _length8; i++) {
var _length16 = _16.length;
for (let i = 0; i < _length16; i++) {
context.subtree_first = i === 0;
scope.subtree_first = context.subtree_first;
context.subtree_last = i === _length8 - 1;
context.subtree_last = i === _length16 - 1;
scope.subtree_last = context.subtree_last;
context.subtree_index = i;
scope.subtree_index = context.subtree_index;
context.subtree = _8[i];
context.subtree = _16[i];
scope.subtree = context.subtree;
context.subtree_value = _9[i];
context.subtree_value = _17[i];
scope.subtree_value = context.subtree_value;
this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c4, fiber: {vars: {_v0: context['subtree']}, scope}}));
this.recursiveFns['__10'].call(this, context, Object.assign({}, extra, {parentNode: c12, fiber: {vars: {_v0: context['subtree']}, scope}}));
}
}"
`;