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: add support for dynamic css on t-widget

Browse Source 
closes #80
This commit is contained in:
Géry Debongnie
2019-05-06 10:36:40 +02:00
parent 51320204f9
commit b9591cfecd
4 changed files with 200 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component.test.ts
+60 -2
View File
@@ -1234,13 +1234,39 @@ describe("class and style attributes with t-widget", () => {
widgets = { child: Child };
}
class Child extends Widget {
inlineTemplate = `<div class="c"/>`
inlineTemplate = `<div class="c"/>`;
}
const widget = new ParentWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe(`<div><div class="c a b"></div></div>`);
});
test("t-att-class is properly added/removed on widget root el", async () => {
env.qweb.addTemplate(
"parent",
`<div>
<t t-widget="child" t-att-class="{a:state.a, b:state.b}"/>
</div>`
);
class ParentWidget extends Widget {
template = "parent";
widgets = { child: Child };
state = { a: true, b: false };
}
class Child extends Widget {
inlineTemplate = `<div class="c"/>`;
}
const widget = new ParentWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe(`<div><div class="c a"></div></div>`);
expect(env.qweb.templates.parent.fn.toString()).toMatchSnapshot();
widget.state.a = false;
widget.state.b = true;
await nextTick();
expect(fixture.innerHTML).toBe(`<div><div class="c b"></div></div>`);
});
test("style is properly added on widget root el", async () => {
class ParentWidget extends Widget {
inlineTemplate = `
@@ -1251,7 +1277,39 @@ describe("class and style attributes with t-widget", () => {
}
const widget = new ParentWidget(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe(`<div><div style="font-weight: bold;"></div></div>`);
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(
"parent",
`
<div>
<t t-widget="child" t-att-style="state.style"/>
</div>`
);
class ParentWidget extends Widget {
template = "parent";
widgets = { child: Widget };
state = { style: "font-size: 20px" };
}
const widget = new ParentWidget(env);
await widget.mount(fixture);
expect(env.qweb.templates.parent.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>`
);
});
});