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] component: allow dynamic root nodes

Browse Source 
closes #283
This commit is contained in:
Géry Debongnie
2019-09-11 11:28:41 +02:00
parent e1acf66143
commit ffb3263c79
10 changed files with 542 additions and 150 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/component.test.ts
+88
View File
@@ -4271,3 +4271,91 @@ describe("unmounting and remounting", () => {
expect(fixture.innerHTML).toBe("<div>3</div>");
});
});
describe("dynamic root nodes", () => {
test("template with t-if, part 1", async () => {
env.qweb.addTemplates(`
<templates>
<t t-name="TestWidget">
<t t-if="true"><span>hey</span></t>
<t t-if="false"><div>abc</div></t>
</t>
</templates>
`);
class TestWidget extends Widget {}
const widget = new TestWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<span>hey</span>");
});
test("template with t-if, part 2", async () => {
env.qweb.addTemplates(`
<templates>
<t t-name="TestWidget">
<t t-if="false"><span>hey</span></t>
<t t-if="true"><div>abc</div></t>
</t>
</templates>
`);
class TestWidget extends Widget {}
const widget = new TestWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<div>abc</div>");
});
test("switching between sub branches dynamically", async () => {
env.qweb.addTemplates(`
<templates>
<t t-name="TestWidget">
<t t-if="state.flag"><span>hey</span></t>
<t t-if="!state.flag"><div>abc</div></t>
</t>
</templates>
`);
class TestWidget extends Widget {
state = {flag: true};
}
const widget = new TestWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<span>hey</span>");
widget.state.flag = false;
await nextTick();
expect(fixture.innerHTML).toBe("<div>abc</div>");
});
test("switching between sub components dynamically", async () => {
env.qweb.addTemplates(`
<templates>
<t t-name="ChildA"><span>hey</span></t>
<t t-name="ChildB"><div>abc</div></t>
<t t-name="TestWidget">
<t t-if="state.flag"><ChildA/></t>
<t t-if="!state.flag"><ChildB/></t>
</t>
</templates>
`);
class ChildA extends Widget {}
class ChildB extends Widget {}
class TestWidget extends Widget {
static components = {ChildA, ChildB};
state = {flag: true};
}
const widget = new TestWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<span>hey</span>");
widget.state.flag = false;
await nextTick();
expect(fixture.innerHTML).toBe("<div>abc</div>");
});
});