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] qweb: properly handle t-raw in various situations

Browse Source 
closes #325
closes #327
This commit is contained in:
Géry Debongnie
2019-10-12 09:07:25 +02:00
parent 41b0618c93
commit 3e8f60cefa
11 changed files with 153 additions and 69 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/Context.test.ts
+2 -2
View File
@@ -96,10 +96,10 @@ describe("Context", () => {
const parent = new Parent(env);
await parent.mount(fixture);
expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
expect(steps).toEqual(['child']);
expect(steps).toEqual(["child"]);
testContext.state.a = 3;
await nextTick();
expect(steps).toEqual(['child', 'child']);
expect(steps).toEqual(["child", "child"]);
});
test("parent and children subscribed to same context", async () => {
tests/component/component.test.ts
+36
View File
@@ -4293,3 +4293,39 @@ describe("support svg components", () => {
);
});
});
describe("t-raw in components", () => {
test("update properly on state changes", async () => {
class TestW extends Widget {
static template = xml`<div><t t-raw="state.value"/></div>`;
state = useState({ value: "<b>content</b>" });
}
const widget = new TestW(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<div><b>content</b></div>");
widget.state.value = "<span>other content</span>";
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>other content</span></div>");
});
test("can render list of t-raw ", async () => {
class TestW extends Widget {
static template = xml`
<div>
<t t-foreach="state.items" t-as="item">
<t t-esc="item"/>
<t t-raw="item"/>
</t>
</div>`;
state = useState({ items: ["<b>one</b>", "<b>two</b>", "<b>tree</b>"] });
}
const widget = new TestW(env);
await widget.mount(fixture);
expect(fixture.innerHTML).toBe(
"<div>&lt;b&gt;one&lt;/b&gt;<b>one</b>&lt;b&gt;two&lt;/b&gt;<b>two</b>&lt;b&gt;tree&lt;/b&gt;<b>tree</b></div>"
);
});
});
tests/hooks.test.ts
+2 -4
View File
@@ -440,7 +440,7 @@ describe("hooks", () => {
steps.push("onWillStart");
});
onWillUpdateProps(nextProps => {
expect(nextProps).toEqual({value: 2});
expect(nextProps).toEqual({ value: 2 });
steps.push("onWillUpdateProps");
});
}
@@ -454,7 +454,7 @@ describe("hooks", () => {
class App extends Component<any, any> {
static template = xml`<div><MyComponent value="state.value"/></div>`;
static components = { MyComponent };
state = useState({ value: 1});
state = useState({ value: 1 });
}
const app = new App(env);
@@ -469,6 +469,4 @@ describe("hooks", () => {
expect(fixture.innerHTML).toBe("<div><span>2</span></div>");
expect(steps).toEqual(["onWillStart", "onWillUpdateProps"]);
});
});
tests/qweb/__snapshots__/qweb.test.ts.snap
+6 -36
View File
@@ -630,12 +630,7 @@ exports[`misc global 1`] = `
c1.push(vn21);
var _22 = context['toto'];
if (_22 || _22 === 0) {
var frag23 = utils.getFragment(_22)
var p24 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag23, n.elm),
}};
var vn24 = h('div', p24)
c21.push(vn24);
c21.push(...utils.htmlToVDOM(_22));
} else {
c21.push({text: \`toto default\`});
}
@@ -1670,12 +1665,7 @@ exports[`t-on t-on combined with t-raw 1`] = `
p2.on['click'] = extra.handlers['click' + 2];
var _3 = context['html'];
if (_3 || _3 === 0) {
var frag4 = utils.getFragment(_3)
var p5 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag4, n.elm),
}};
var vn5 = h('div', p5)
c2.push(vn5);
c2.push(...utils.htmlToVDOM(_3));
}
return vn1;
}"
@@ -1851,12 +1841,7 @@ exports[`t-raw literal 1`] = `
var vn1 = h('span', p1, c1);
var _2 = 'ok';
if (_2 || _2 === 0) {
var frag3 = utils.getFragment(_2)
var p4 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag3, n.elm),
}};
var vn4 = h('div', p4)
c1.push(vn4);
c1.push(...utils.htmlToVDOM(_2));
}
return vn1;
}"
@@ -1871,12 +1856,7 @@ exports[`t-raw not escaping 1`] = `
var vn1 = h('div', p1, c1);
var _2 = context['var'];
if (_2 || _2 === 0) {
var frag3 = utils.getFragment(_2)
var p4 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag3, n.elm),
}};
var vn4 = h('div', p4)
c1.push(vn4);
c1.push(...utils.htmlToVDOM(_2));
}
return vn1;
}"
@@ -1895,12 +1875,7 @@ exports[`t-raw t-raw and another sibling node 1`] = `
c2.push({text: \`hello\`});
var _3 = context['var'];
if (_3 || _3 === 0) {
var frag4 = utils.getFragment(_3)
var p5 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag4, n.elm),
}};
var vn5 = h('div', p5)
c1.push(vn5);
c1.push(...utils.htmlToVDOM(_3));
}
return vn1;
}"
@@ -1915,12 +1890,7 @@ exports[`t-raw variable 1`] = `
var vn1 = h('span', p1, c1);
var _2 = context['var'];
if (_2 || _2 === 0) {
var frag3 = utils.getFragment(_2)
var p4 = {hook: {
insert: n => n.elm.parentNode.replaceChild(frag3, n.elm),
}};
var vn4 = h('div', p4)
c1.push(vn4);
c1.push(...utils.htmlToVDOM(_2));
}
return vn1;
}"
tests/qweb/qweb.test.ts
+16 -14
View File
@@ -1099,18 +1099,20 @@ describe("t-on", () => {
</t>
</div>`
);
const steps:string[] = [];
const steps: string[] = [];
const owner = {
projects: [{id: 1, name: 'Project 1'}, {id: 2, name: 'Project 2'}],
projects: [{ id: 1, name: "Project 1" }, { id: 2, name: "Project 2" }],
onEdit(projectId, ev) {
expect(ev.defaultPrevented).toBe(true);
steps.push(projectId);
},
}
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
expect(node.outerHTML).toBe(`<div><a href="#"> Edit Project 1</a><a href="#"> Edit Project 2</a></div>`);
expect(node.outerHTML).toBe(
`<div><a href="#"> Edit Project 1</a><a href="#"> Edit Project 2</a></div>`
);
const links = node.querySelectorAll("a")!;
links[0].click();
@@ -1122,12 +1124,12 @@ describe("t-on", () => {
test("t-on combined with t-esc", async () => {
expect.assertions(3);
qweb.addTemplate("test", `<div><button t-on-click="onClick" t-esc="text"/></div>`);
const steps:string[] = [];
const steps: string[] = [];
const owner = {
text: 'Click here',
text: "Click here",
onClick() {
steps.push('onClick');
},
steps.push("onClick");
}
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
@@ -1135,18 +1137,18 @@ describe("t-on", () => {
node.querySelector("button")!.click();
expect(steps).toEqual(['onClick']);
expect(steps).toEqual(["onClick"]);
});
test("t-on combined with t-raw", async () => {
expect.assertions(3);
qweb.addTemplate("test", `<div><button t-on-click="onClick" t-raw="html"/></div>`);
const steps:string[] = [];
const steps: string[] = [];
const owner = {
html: 'Click <b>here</b>',
html: "Click <b>here</b>",
onClick() {
steps.push('onClick');
},
steps.push("onClick");
}
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
@@ -1154,7 +1156,7 @@ describe("t-on", () => {
node.querySelector("button")!.click();
expect(steps).toEqual(['onClick']);
expect(steps).toEqual(["onClick"]);
});
});
tests/vdom.test.ts
+50
View File
@@ -1,4 +1,5 @@
import { h, patch } from "../src/vdom";
import { htmlToVDOM } from "../src/vdom/html_to_vdom";
import { init, addNS } from "../src/vdom/vdom";
function map(list, fn) {
@@ -1104,3 +1105,52 @@ describe("snabbdom", function() {
});
});
});
//------------------------------------------------------------------------------
// Html to vdom
//------------------------------------------------------------------------------
describe("html to vdom", function() {
let elm, vnode0;
beforeEach(function() {
elm = document.createElement("div");
vnode0 = elm;
});
test("empty strings return empty list", function() {
expect(htmlToVDOM("")).toEqual([]);
});
test("just text", function() {
const nodeList = htmlToVDOM("simple text");
expect(nodeList).toHaveLength(1);
expect(nodeList[0]).toEqual({ text: "simple text" });
});
test("empty tag", function() {
const nodeList = htmlToVDOM("<span></span>");
expect(nodeList).toHaveLength(1);
elm = patch(vnode0, nodeList[0]).elm;
expect(elm.outerHTML).toEqual("<span></span>");
});
test("tag with text", function() {
const nodeList = htmlToVDOM("<span>abc</span>");
expect(nodeList).toHaveLength(1);
elm = patch(vnode0, nodeList[0]).elm;
expect(elm.outerHTML).toEqual("<span>abc</span>");
});
test("tag with attribute", function() {
const nodeList = htmlToVDOM(`<span a="1" b="2">abc</span>`);
expect(nodeList).toHaveLength(1);
elm = patch(vnode0, nodeList[0]).elm;
expect(elm.outerHTML).toEqual(`<span a="1" b="2">abc</span>`);
});
test("misc", function() {
const nodeList = htmlToVDOM(`<span a="1" b="2">abc<div>1</div></span>`);
expect(nodeList).toHaveLength(1);
elm = patch(vnode0, nodeList[0]).elm;
expect(elm.outerHTML).toEqual(`<span a="1" b="2">abc<div>1</div></span>`);
});
});