add support for text root nodes (and test suite cleanups)

README.md

@@ -44,4 +44,7 @@ Before even thinking about using this in a real scenario:
 - check qweb tests and see if it is reasonable
 - Note: the compilation of a template should have a unique node (but sub templates
   can have multiple roots)
-- remove the "if (${exprID} || ${exprID} === 0) {"
+- remove the "if (${exprID} || ${exprID} === 0) {"
+- style is props? difference between props and attrs
+- text node
+- t-extend???

demo/src/RootWidget.ts

@@ -11,6 +11,10 @@ const template = `
         <t t-if="state.validcounter">
             <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
         </t>
+        <t t-else="1">
+            <t t-widget="Counter" t-ref="counter" t-props="{initialState:7}"/>
+        </t>
+        <div ref="target"/>
     </div>
 `;
 

src/core/qweb_vdom.ts

@@ -33,6 +33,9 @@ export class Context {
 
   withParent(node: number): Context {
     const newContext: Context = Object.create(this);
+    if (this === this.rootContext && this.parentNode) {
+      throw new Error('A template should not have more than one root node');
+    }
     newContext.parentNode = node;
     if (!this.rootContext.rootNode) {
       this.rootContext.rootNode = node;
@@ -171,7 +174,7 @@ export default class QWeb {
    *
    * @param {string} name the template should already have been added
    */
-  render(name: string, context: any = {}): VNode {
+  render(name: string, context: EvalContext = {}): VNode {
     if (!(name in this.rawTemplates)) {
       throw new Error(`Template ${name} does not exist`);
     }
@@ -217,7 +220,16 @@ export default class QWeb {
     if (!(node instanceof Element)) {
       // this is a text node, there are no directive to apply
       let text = node.textContent!;
-      ctx.addLine(`c${ctx.parentNode}.push({text: \`${text}\`})`);
+      if (ctx.parentNode) {
+        ctx.addLine(`c${ctx.parentNode}.push({text: \`${text}\`})`);
+      } else {
+        // this is an unusual situation: this text node is the result of the
+        // template rendering.
+        let nodeID = ctx.generateID();
+        ctx.addLine(`let vn${nodeID} = {text: \`${text}\`}`);
+        ctx.rootContext.rootNode = nodeID;
+        ctx.rootContext.parentNode = nodeID;
+      }
       return;
     }
 

tests/qweb_vdom.test.ts

@@ -5,44 +5,56 @@ import sdListeners from "../src/libs/snabbdom/src/modules/eventlisteners";
 
 const patch = init([sdAttributes, sdListeners]);
 
+function trim(str: string): string {
+  return str.replace(/\s/g, "");
+}
+
 function renderToDOM(
   qweb: QWeb,
-  t: string,
+  template: string,
   context: EvalContext = {}
-): HTMLElement {
-  const vnode = qweb.render(t, context);
+): HTMLElement | Text {
+  const vnode = qweb.render(template, context);
+  if (vnode.sel === undefined) {
+    return document.createTextNode(vnode.text!);
+  }
   const node = document.createElement(vnode.sel!);
   patch(node, vnode);
   return node;
 }
-function qwebRender(qweb: QWeb, t: string, context: EvalContext = {}): string {
-  const node = renderToDOM(qweb, t, context);
-  return node.outerHTML;
-}
 
-function renderToString(t: string, context: EvalContext = {}): string {
-  const qweb = new QWeb();
-  qweb.addTemplate("test", t);
-  return qwebRender(qweb, "test", context);
+function renderToString(
+  qweb: QWeb,
+  t: string,
+  context: EvalContext = {}
+): string {
+  const node = renderToDOM(qweb, t, context);
+  return node instanceof Text ? node.textContent! : node.outerHTML;
 }
 
 describe("static templates", () => {
+  test("simple string", () => {
+    const qweb = new QWeb();
+    qweb.addTemplate("test", "<t>hello vdom</t>");
+    expect(renderToString(qweb, "test")).toBe("hello vdom");
+  });
+
   test("empty div", () => {
-    const template = "<div></div>";
-    const expected = template;
-    expect(renderToString(template)).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", "<div></div>");
+    expect(renderToString(qweb, "test")).toBe("<div></div>");
   });
 
   test("div with a text node", () => {
-    const template = "<div>word</div>";
-    const result = renderToString(template);
-    expect(result).toBe(template);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", "<div>word</div>");
+    expect(renderToString(qweb, "test")).toBe("<div>word</div>");
   });
 
   test("div with a span child node", () => {
-    const template = "<div><span>word</span></div>";
-    const result = renderToString(template);
-    expect(result).toBe(template);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", "<div><span>word</span></div>");
+    expect(renderToString(qweb, "test")).toBe("<div><span>word</span></div>");
   });
 });
 
@@ -55,11 +67,12 @@ describe("error handling", () => {
     );
   });
 
-  test("template with only text node", () => {
-    const template = `<t>text</t>`;
+  test("template with text node and tag", () => {
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<t t-debug="1">text<span>other node</span></t>`);
 
-    expect(() => renderToString(template)).toThrow(
-      "A template should have one root node"
+    expect(() => renderToString(qweb, "test")).toThrow(
+      "A template should not have more than one root node"
     );
   });
 
@@ -71,163 +84,202 @@ describe("error handling", () => {
 
 describe("t-esc", () => {
   test("literal", () => {
-    const template = `<span><t t-esc="'ok'"/></span>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-esc="'ok'"/></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
   });
 
   test("variable", () => {
-    const template = `<span><t t-esc="var"/></span>`;
-    const result = renderToString(template, { var: "ok" });
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-esc="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "ok" })).toBe("<span>ok</span>");
   });
 
   test.skip("escaping", () => {
-    const template = `<span t-debug="1"><t t-esc="var"/></span>`;
-    const result = renderToString(template, { var: "<ok>" });
-    expect(result).toBe("<span>&lt;ok&gt;</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-esc="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "<ok>" })).toBe(
+      "<span>&lt;ok&gt;</span>"
+    );
   });
 
   test("escaping on a node", () => {
-    const template = `<span t-esc="'ok'"/>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span t-esc="'ok'"/>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
   });
 
   test("escaping on a node with a body", () => {
-    const template = `<span t-esc="'ok'">nope</span>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span t-esc="'ok'">nope</span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
   });
 
   test("escaping on a node with a body, as a default", () => {
-    const template = `<span t-esc="var">nope</span>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span>nope</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span t-esc="var">nope</span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>nope</span>");
   });
 });
 
 describe("t-raw", () => {
   test("literal", () => {
-    const template = `<span><t t-raw="'ok'"/></span>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-raw="'ok'"/></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span>ok</span>");
   });
 
   test("variable", () => {
-    const template = `<span><t t-raw="var"/></span>`;
-    const result = renderToString(template, { var: "ok" });
-    expect(result).toBe("<span>ok</span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-raw="var"/></span>`);
+    expect(renderToString(qweb, "test", { var: "ok" })).toBe("<span>ok</span>");
   });
 
   test("not escaping", () => {
-    const template = `<div><t t-raw="var"/></div>`;
-    const result = renderToString(template, { var: "<ok></ok>" });
-    expect(result).toBe("<div><ok></ok></div>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div><t t-raw="var"/></div>`);
+    expect(renderToString(qweb, "test", { var: "<ok></ok>" })).toBe(
+      "<div><ok></ok></div>"
+    );
   });
 });
 
 describe("t-set", () => {
   test("set from attribute literal", () => {
-    const template = `<div><t t-set="value" t-value="'ok'"/><t t-esc="value"/></div>`;
-    const result = renderToString(template);
-    expect(result).toBe("<div>ok</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="'ok'"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>ok</div>");
   });
 
   test("set from body literal", () => {
-    const template = `<div><t t-set="value">ok</t><t t-esc="value"/></div>`;
-    const result = renderToString(template);
-    expect(result).toBe("<div>ok</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<t><t t-set="value">ok</t><t t-esc="value"/></t>`
+    );
+    expect(renderToString(qweb, "test")).toBe("ok");
   });
 
   test("set from attribute lookup", () => {
-    const template = `<div><t t-set="stuff" t-value="value"/><t t-esc="stuff"/></div>`;
-    const result = renderToString(template, { value: "ok" });
-    expect(result).toBe("<div>ok</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="stuff" t-value="value"/><t t-esc="stuff"/></div>`
+    );
+    expect(renderToString(qweb, "test", { value: "ok" })).toBe("<div>ok</div>");
   });
 
   test("set from body lookup", () => {
-    const template = `<div><t t-set="stuff"><t t-esc="value"/></t><t t-esc="stuff"/></div>`;
-    const result = renderToString(template, { value: "ok" });
-    expect(result).toBe("<div>ok</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="stuff"><t t-esc="value"/></t><t t-esc="stuff"/></div>`
+    );
+    expect(renderToString(qweb, "test", { value: "ok" })).toBe("<div>ok</div>");
   });
 
   test("set from empty body", () => {
-    const template = `<div><t t-set="stuff"/><t t-esc="stuff"/></div>`;
-    const result = renderToString(template);
-    expect(result).toBe("<div></div>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div><t t-set="stuff"/><t t-esc="stuff"/></div>`);
+    expect(renderToString(qweb, "test")).toBe("<div></div>");
   });
 
   test("value priority", () => {
-    const template = `<div><t t-set="value" t-value="1">2</t><t t-esc="value"/></div>`;
-    const result = renderToString(template);
-    expect(result).toBe("<div>1</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="1">2</t><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>1</div>");
   });
 
   test("evaluate value expression", () => {
-    const template = `<div><t t-set="value" t-value="1 + 2"/><t t-esc="value"/></div>`;
-    const result = renderToString(template);
-    expect(result).toBe("<div>3</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="1 + 2"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test")).toBe("<div>3</div>");
   });
 
   test("evaluate value expression, part 2", () => {
-    const template = `<div><t t-set="value" t-value="somevariable + 2"/><t t-esc="value"/></div>`;
-    const result = renderToString(template, { somevariable: 43 });
-    expect(result).toBe("<div>45</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-set="value" t-value="somevariable + 2"/><t t-esc="value"/></div>`
+    );
+    expect(renderToString(qweb, "test", { somevariable: 43 })).toBe(
+      "<div>45</div>"
+    );
   });
 });
 
 describe("t-if", () => {
   test("boolean value true condition", () => {
-    const template = `<div><t t-if="condition">ok</t></div>`;
-    const result = renderToString(template, { condition: true });
-    expect(result).toBe("<div>ok</div>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div><t t-if="condition">ok</t></div>`);
+    expect(renderToString(qweb, "test", { condition: true })).toBe(
+      "<div>ok</div>"
+    );
   });
 
   test("boolean value false condition", () => {
-    const template = `<div><t t-if="condition">fail</t></div>`;
-    const result = renderToString(template, { condition: false });
-    expect(result).toBe("<div></div>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div><t t-if="condition">ok</t></div>`);
+    expect(renderToString(qweb, "test", { condition: false })).toBe(
+      "<div></div>"
+    );
   });
 
   test("boolean value condition missing", () => {
-    const template = `<span><t t-if="condition">fail</t></span>`;
-    const result = renderToString(template);
-    expect(result).toBe("<span></span>");
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<span><t t-if="condition">fail</t></span>`);
+    expect(renderToString(qweb, "test")).toBe("<span></span>");
   });
 
   test("boolean value condition elif", () => {
-    const template = `
-      <div><t t-if="color == 'black'">black pearl</t>
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-if="color == 'black'">black pearl</t>
         <t t-elif="color == 'yellow'">yellow submarine</t>
         <t t-elif="color == 'red'">red is dead</t>
         <t t-else="">beer</t></div>
-    `;
-    const result = renderToString(template, { color: "red" });
-    expect(result.trim()).toBe("<div>red is dead</div>");
+    `
+    );
+    expect(renderToString(qweb, "test", { color: "red" })).toBe(
+      "<div>red is dead</div>"
+    );
   });
 
   test("boolean value condition else", () => {
-    const template = `
-      <div>
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div>
         <span>begin</span>
         <t t-if="condition">ok</t>
         <t t-else="">ok-else</t>
         <span>end</span>
       </div>
-    `;
-    const result = renderToString(template, { condition: true });
-    expect(result).toBe(
-      "<div>\n        <span>begin</span>\n        ok\n        <span>end</span>\n      </div>"
+    `
     );
+    const result = trim(renderToString(qweb, "test", { condition: true }));
+    expect(result).toBe("<div><span>begin</span>ok<span>end</span></div>");
   });
 
   test("boolean value condition false else", () => {
-    const template = `
-        <div><span>begin</span><t t-if="condition">fail</t>
-        <t t-else="">fail-else</t><span>end</span></div>
-      `;
-    const result = renderToString(template, { condition: false });
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><span>begin</span><t t-if="condition">fail</t>
+          <t t-else="">fail-else</t><span>end</span></div>
+        `
+    );
+    const result = trim(renderToString(qweb, "test", { condition: false }));
     expect(result).toBe(
       "<div><span>begin</span>fail-else<span>end</span></div>"
     );
@@ -236,94 +288,118 @@ describe("t-if", () => {
 
 describe("attributes", () => {
   test("static attributes", () => {
-    const template = `<div foo="a" bar="b" baz="c"/>`;
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div foo="a" bar="b" baz="c"/>`);
+    const result = renderToString(qweb, "test");
     const expected = `<div foo="a" bar="b" baz="c"></div>`;
-    expect(renderToString(template)).toBe(expected);
+    expect(result).toBe(expected);
   });
 
   test("static attributes on void elements", () => {
-    const template = `<img src="/test.jpg" alt="Test"/>`;
-    const expected = `<img src="/test.jpg" alt="Test">`;
-    expect(renderToString(template)).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<img src="/test.jpg" alt="Test"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<img src="/test.jpg" alt="Test">`);
   });
 
   test("dynamic attributes", () => {
-    const template = `<div t-att-foo="'bar'"/>`;
-    const expected = `<div foo="bar"></div>`;
-    expect(renderToString(template)).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att-foo="'bar'"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
   });
 
   test("fixed variable", () => {
-    const template = `<div t-att-foo="value"/>`;
-    const expected = `<div foo="ok"></div>`;
-    expect(renderToString(template, { value: "ok" })).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att-foo="value"/>`);
+    const result = renderToString(qweb, "test", { value: "ok" });
+    expect(result).toBe(`<div foo="ok"></div>`);
   });
 
   test("dynamic attribute falsy variable ", () => {
-    const template = `<div t-att-foo="value"/>`;
-    const expected = `<div></div>`;
-    expect(renderToString(template, { value: false })).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att-foo="value"/>`);
+    const result = renderToString(qweb, "test", { value: false });
+    expect(result).toBe(`<div></div>`);
   });
 
   test("tuple literal", () => {
-    const template = `<div t-att="['foo', 'bar']"/>`;
-    const expected = `<div foo="bar"></div>`;
-    expect(renderToString(template)).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att="['foo', 'bar']"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
   });
 
   test("tuple variable", () => {
-    const template = `<div t-att="value"/>`;
-    const expected = `<div foo="bar"></div>`;
-    expect(renderToString(template, { value: ["foo", "bar"] })).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att="value"/>`);
+    const result = renderToString(qweb, "test", { value: ["foo", "bar"] });
+    expect(result).toBe(`<div foo="bar"></div>`);
   });
 
   test("object", () => {
-    const template = `<div t-att="value"/>`;
-    const expected = `<div a="1" b="2" c="3"></div>`;
-    expect(renderToString(template, { value: { a: 1, b: 2, c: 3 } })).toBe(
-      expected
-    );
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-att="value"/>`);
+    const result = renderToString(qweb, "test", {
+      value: { a: 1, b: 2, c: 3 }
+    });
+    expect(result).toBe(`<div a="1" b="2" c="3"></div>`);
   });
 
   test("format literal", () => {
-    const template = `<div t-attf-foo="bar"/>`;
-    const expected = `<div foo="bar"></div>`;
-    expect(renderToString(template)).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-attf-foo="bar"/>`);
+    const result = renderToString(qweb, "test");
+    expect(result).toBe(`<div foo="bar"></div>`);
   });
 
   test("format value", () => {
-    const template = `<div t-attf-foo="b{{value}}r"/>`;
-    const expected = `<div foo="bar"></div>`;
-    expect(renderToString(template, { value: "a" })).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-attf-foo="b{{value}}r"/>`);
+    const result = renderToString(qweb, "test", { value: "a" });
+    expect(result).toBe(`<div foo="bar"></div>`);
   });
 
   test("format expression", () => {
-    const template = `<div t-attf-foo="{{value + 37}}"/>`;
-    const expected = `<div foo="42"></div>`;
-    expect(renderToString(template, { value: 5 })).toBe(expected);
+    const qweb = new QWeb();
+    qweb.addTemplate("test", `<div t-attf-foo="{{value + 37}}"/>`);
+    const result = renderToString(qweb, "test", { value: 5 });
+    expect(result).toBe(`<div foo="42"></div>`);
   });
 
   test("format multiple", () => {
-    const template = `<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>`;
-    const expected = `<div foo="a 0 is 1 of 2 ]"></div>`;
-    expect(renderToString(template, { value1: 0, value2: 1, value3: 2 })).toBe(
-      expected
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div t-attf-foo="a {{value1}} is {{value2}} of {{value3}} ]"/>`
     );
+    const result = renderToString(qweb, "test", {
+      value1: 0,
+      value2: 1,
+      value3: 2
+    });
+    expect(result).toBe(`<div foo="a 0 is 1 of 2 ]"></div>`);
   });
 
   test.skip("various escapes", () => {
-    // need to think about this... This one does not pass, but I am not sure it is
-    // a correct test
-    const template = `
-       <div foo="&lt;foo"
-          t-att-bar="bar"
-          t-attf-baz="&lt;{{baz}}&gt;"
-          t-att="qux"/>
-      `;
+    // not needed??
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `
+         <div foo="&lt;foo"
+            t-att-bar="bar"
+            t-attf-baz="&lt;{{baz}}&gt;"
+            t-att="qux"/>
+        `
+    );
+    const result = renderToString(qweb, "test", {
+      bar: 0,
+      baz: 1,
+      qux: { qux: "<>" }
+    });
     const expected = `<div foo="&lt;foo" bar="&lt;bar&gt;" baz="&lt;&quot;&lt;baz&gt;&quot;&gt;" qux="&lt;&gt;"></div>`;
-    expect(
-      renderToString(template, { bar: 0, baz: 1, qux: { qux: "<>" } })
-    ).toBe(expected);
+    expect(result).toBe(expected);
   });
 });
 
@@ -333,14 +409,14 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("_basic-callee", "<div>ok</div>");
     qweb.addTemplate("caller", '<t t-call="_basic-callee"/>');
     const expected = "<div>ok</div>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("t-call not allowed on a non t node", () => {
     const qweb = new QWeb();
     qweb.addTemplate("_basic-callee", "<t>ok</t>");
     qweb.addTemplate("caller", '<div t-call="_basic-callee"/>');
-    expect(() => qwebRender(qweb, "caller")).toThrow("Invalid tag");
+    expect(() => renderToString(qweb, "caller")).toThrow("Invalid tag");
   });
 
   test("with unused body", () => {
@@ -348,7 +424,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("_basic-callee", "<div>ok</div>");
     qweb.addTemplate("caller", '<t t-call="_basic-callee">WHEEE</t>');
     const expected = "<div>ok</div>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("with unused setbody", () => {
@@ -359,7 +435,7 @@ describe("t-call (template calling", () => {
       '<t t-call="_basic-callee"><t t-set="qux" t-value="3"/></t>'
     );
     const expected = "<div>ok</div>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("with used body", () => {
@@ -367,7 +443,7 @@ describe("t-call (template calling", () => {
     qweb.addTemplate("_callee-printsbody", '<h1><t t-esc="0"/></h1>');
     qweb.addTemplate("caller", '<t t-call="_callee-printsbody">ok</t>');
     const expected = "<h1>ok</h1>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("with used set body", () => {
@@ -379,7 +455,7 @@ describe("t-call (template calling", () => {
         <span><t t-call="_callee-uses-foo"><t t-set="foo" t-value="'ok'"/></t></span>`
     );
     const expected = "<span>ok</span>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("inherit context", () => {
@@ -391,7 +467,7 @@ describe("t-call (template calling", () => {
         <div><t t-set="foo" t-value="1"/><t t-call="_callee-uses-foo"/></div>`
     );
     const expected = "<div>1</div>";
-    expect(qwebRender(qweb, "caller")).toBe(expected);
+    expect(renderToString(qweb, "caller")).toBe(expected);
   });
 
   test("scoped parameters", () => {
@@ -409,64 +485,81 @@ describe("t-call (template calling", () => {
       `
     );
     const expected = "<div>ok</div>";
-    expect(qwebRender(qweb, "caller").replace(/\s/g, "")).toBe(expected);
+    expect(trim(renderToString(qweb, "caller"))).toBe(expected);
   });
 });
 
 describe("foreach", () => {
   test("iterate on items", () => {
-    const template = `
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `
       <div>
         <t t-foreach="[3, 2, 1]" t-as="item">
           [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
         </t>
-    </div>`;
+    </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
     const expected = `<div>[0:33][1:22][2:11]</div>`;
-    expect(renderToString(template).replace(/\s/g, "")).toBe(expected);
+    expect(result).toBe(expected);
   });
 
   test("iterate on items (on a element node)", () => {
-    const template = `
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `
       <div>
         <span t-foreach="[1, 2]" t-as="item"><t t-esc="item"/></span>
-    </div>`;
+    </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
     const expected = `<div><span>1</span><span>2</span></div>`;
-    expect(renderToString(template).replace(/\s/g, "")).toBe(expected);
+    expect(result).toBe(expected);
   });
 
   test("iterate, position", () => {
-    const template = `
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `
       <div>
         <t t-foreach="5" t-as="elem">
           -<t t-if="elem_first"> first</t><t t-if="elem_last"> last</t> (<t t-esc="elem_parity"/>)
         </t>
-      </div>`;
+      </div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
     const expected = `<div>-first(even)-(odd)-(even)-(odd)-last(even)</div>`;
-    expect(renderToString(template).replace(/\s/g, "")).toBe(expected);
+    expect(result).toBe(expected);
   });
 
   test("iterate, integer param", () => {
-    const template = `<div><t t-foreach="3" t-as="item">
-      [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
-    </t></div>`;
+    const qweb = new QWeb();
+    qweb.addTemplate(
+      "test",
+      `<div><t t-foreach="3" t-as="item">
+        [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/>]
+      </t></div>`
+    );
+    const result = trim(renderToString(qweb, "test"));
     const expected = `<div>[0:00][1:11][2:22]</div>`;
-    expect(renderToString(template).replace(/\s/g, "")).toBe(expected);
+    expect(result).toBe(expected);
   });
 
   test("iterate, dict param", () => {
-    const template = `
+    const qweb = new QWeb();
+    qweb.addTemplate('test',`
       <div>
         <t t-foreach="value" t-as="item">
           [<t t-esc="item_index"/>: <t t-esc="item"/> <t t-esc="item_value"/> - <t t-esc="item_parity"/>]
         </t>
-      </div>`;
+      </div>`);
+    const result = trim(renderToString(qweb, "test", { value: { a: 1, b: 2, c: 3 } }));
     const expected = `<div>[0:a1-even][1:b2-odd][2:c3-even]</div>`;
-    expect(
-      renderToString(template, { value: { a: 1, b: 2, c: 3 } }).replace(
-        /\s/g,
-        ""
-      )
-    ).toBe(expected);
+    expect(result).toBe(expected);
   });
 });
 
@@ -501,37 +594,34 @@ describe("misc", () => {
       </div>
     `
     );
-    const expected = `
+    const result = trim(renderToString(qweb, "caller"))
+    const expected = trim(`
       <div>
-        
-          <span>4</span>
-          <año falló="agüero">
-            <span>aaa</span>
-            <span>foo default</span>
-            
-            <span>bbb</span>
-          </año>
-        
-          <span>5</span>
-          <año falló="agüero">
-            <span>aaa</span>
-            <span>foo default</span>
-            
-            <span>bbb</span>
-          </año>
-        
-          <span>6</span>
-          <año falló="agüero">
-            <span>aaa</span>
-            <span>foo default</span>
-            
-            <span>bbb</span>
-          </año>
-        
+        <span>4</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
+        <span>5</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
+        <span>6</span>
+        <año falló="agüero">
+          <span>aaa</span>
+          <span>foo default</span>
+          <span>bbb</span>
+        </año>
+
         <div>toto default</div>
       </div>
-    `.trim();
-    expect(qwebRender(qweb, "caller").trim()).toBe(expected);
+    `);
+    expect(result).toBe(expected);
   });
 });
 
@@ -545,7 +635,7 @@ describe("t-on", () => {
         a = 3;
       }
     });
-    node.click();
+    (<HTMLElement>node).click();
     expect(a).toBe(3);
   });
 
@@ -558,7 +648,7 @@ describe("t-on", () => {
         a = a + n;
       }
     });
-    node.click();
+    (<HTMLElement>node).click();
     expect(a).toBe(6);
   });
 });