load widget templates separately (so no more inline)

package.json

@@ -6,9 +6,10 @@
   "scripts": {
     "test": "jest",
     "test:watch": "jest --watch",
-    "build": "cp -r web/ dist/app && npm run build:js && npm run build:css",
+    "build": "cp -r web/ dist/app && npm run build:js && npm run build:css && npm run build:xml",
     "build:css": "sass web/static/src/scss/app.scss dist/app/app.css",
     "build:js": "tsc --allowjs -m amd --lib es2017,dom --target esnext --outfile dist/app/main.js web/static/src/ts/main.ts",
+    "build:xml": "cpx web/static/src/xml/templates.xml dist/app",
     "minify": "uglifyjs dist/app/main.js -o dist/app/main.js --compress --mangle",
     "serve": "live-server --entry-file=index.html dist/app/",
     "predev": "npm run build",
@@ -26,6 +27,7 @@
   "homepage": "https://github.com/ged-odoo/web-core#readme",
   "devDependencies": {
     "@types/jest": "^23.3.12",
+    "cpx": "^1.5.0",
     "jest": "^23.6.0",
     "live-server": "^1.2.1",
     "npm-run-all": "^4.1.5",

web/static/src/ts/core/Widget.ts

@@ -37,8 +37,7 @@ const patch = init([sdListeners, sdAttrs]);
 
 export class Widget<T extends WEnv, Props> {
   __widget__: Meta<WEnv>;
-  name: string = "widget";
-  template: string = "<div></div>";
+  template: string = "default";
 
   get el(): HTMLElement | null {
     return this.__widget__.vnode ? (<any>this).__widget__.vnode.elm : null;
@@ -207,12 +206,8 @@ export class Widget<T extends WEnv, Props> {
   }
 
   private async _render(): Promise<VNode> {
-    if (this.template) {
-      this.env.qweb.addTemplate(this.name, this.template);
-      delete this.template;
-    }
     const promises: Promise<void>[] = [];
-    let vnode = this.env.qweb.render(this.name, this, { promises });
+    let vnode = this.env.qweb.render(this.template, this, { promises });
 
     // this part is critical for the patching process to be done correctly. The
     // tricky part is that a child widget can be rerendered on its own, which

web/static/src/ts/core/qweb_vdom.ts

@@ -134,7 +134,7 @@ export class QWeb {
    */
   addTemplate(name: string, template: RawTemplate) {
     if (name in this.processedTemplates) {
-      return;
+      throw new Error(`Template ${name} already defined`);
     }
     const parser = new DOMParser();
     const doc = parser.parseFromString(template, "text/xml");
@@ -191,6 +191,11 @@ export class QWeb {
       }
     }
   }
+  /**
+   * Load templates from a xml (as a string).  This will look up for the first
+   * <templates> tag, and will consider each child of this as a template, with
+   * the name given by the t-name attribute.
+   */
   loadTemplates(xmlstr: string) {
     const parser = new DOMParser();
     const doc = parser.parseFromString(xmlstr, "text/xml");

web/static/src/ts/env.ts

@@ -54,7 +54,7 @@ export interface Env extends WEnv {
  * For this reason, the result of makeEnvironment is memoized: every call to
  * this function will actually return the same environment.
  */
-export const makeEnvironment = memoize(function(): Env {
+export const makeEnvironment = memoize(async function(): Promise<Env> {
   // main application registry
   registry.add("action", "discuss", Discuss);
   registry.add("action", "crm", CRM);
@@ -72,6 +72,15 @@ export const makeEnvironment = memoize(function(): Env {
     { title: "CRM", actionID: 2 }
   ];
 
+  // templates
+  const result = await fetch("templates.xml");
+  if (!result.ok) {
+    throw new Error("Error while fetching xml templates");
+  }
+  const templates = await result.text();
+  qweb.addTemplate("default", "<div/>");
+  qweb.loadTemplates(templates);
+
   return {
     // Base widget requirements
     qweb,

web/static/src/ts/main.ts

@@ -9,7 +9,7 @@ import { Root } from "./root";
 //------------------------------------------------------------------------------
 
 document.addEventListener("DOMContentLoaded", async function() {
-  const env = makeEnvironment();
+  const env = await makeEnvironment();
   const rootWidget = new Root(env);
   await rootWidget.mount(document.body);
 

web/static/src/ts/root.ts

@@ -21,26 +21,8 @@ interface State {
 // Root Widget
 //------------------------------------------------------------------------------
 
-const template = `
-  <div class="o_web_client">
-    <t t-widget="Navbar" t-props="{toggleHome:toggleHome,inMenu:state.inMenu}"/>
-    <t t-if="state.inMenu">
-      <t t-widget="HomeMenu" t-keep-alive="1"/>
-    </t>
-    <t t-else="1">
-      <t t-widget="Action" t-props="{stack:state.stack}" t-keep-alive="1"/>
-    </t>
-    <div class="o_notification_container">
-      <t t-foreach="state.notifications" t-as="notif">
-        <t t-widget="Notification" t-props="notif"/>
-      </t>
-    </div>
-  </div>
-`;
-
 export class Root extends Widget<Env, {}> {
-  name = "root";
-  template = template;
+  template = "web_client";
   widgets = { Navbar, Notification, HomeMenu, Action };
 
   state: State = {

web/static/src/ts/widgets/Action.ts

@@ -7,8 +7,7 @@ export interface Props {
 }
 
 export class Action extends Widget<Env, Props> {
-  name = "action";
-  template = `<div class="o_content"/>`;
+  template = "action";
   currentWidget: any;
 
   shouldUpdate(nextProps: Props) {

web/static/src/ts/widgets/CRM.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_crm">
-        <span>CRM!!!!</span>
-    </div>
-`;
-
 export class CRM extends Widget<Env, {}> {
-  name = "crm";
-  template = template;
+  template = "crm";
 }

web/static/src/ts/widgets/Counter.ts

@@ -1,21 +1,12 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div>
-        <button t-on-click="increment(-1)">-</button>
-        <span style="font-weight:bold">Value: <t t-esc="state.counter"/></span>
-        <button t-on-click="increment(1)">+</button>
-    </div>
-`;
-
 interface Props {
   initialState?: number;
 }
 
 export class Counter extends Widget<Env, Props> {
-  name = "counter";
-  template = template;
+  template = "counter";
   state = {
     counter: 0
   };

web/static/src/ts/widgets/Discuss.ts

@@ -3,32 +3,8 @@ import { Env } from "../env";
 import { Clock } from "./clock";
 import { Counter } from "./counter";
 
-const template = `
-    <div class="o_discuss">
-        <span>DISCUSS!!</span>
-        <button t-on-click="resetCounter">Reset first counter</button>
-        <button t-on-click="resetCounterAsync">Reset counter 2 in 3s</button>
-        <button t-on-click="toggle">Toggle  Clock/counters</button>
-        <button t-on-click="toggleColor">Toggle Color</button>
-        <button t-on-click="updateState({})">Rerender this widget</button>
-        <input t-ref="textinput"/>
-        <t t-if="state.validcounter">
-            <t t-widget="Counter" t-ref="counter" t-props="{initialState:4}"/>
-            <t t-widget="Counter" t-ref="counter2" t-props="{initialState:400}"/>
-        </t>
-        <t t-else="1">
-            <t t-widget="Clock"/>
-        </t>
-        <t t-widget="ColorWidget" t-props="{color: state.color}"/>
-        <button t-on-click="addNotif(false)">Add notif</button>
-        <button t-on-click="addNotif(true)">Add sticky notif</button>
-
-    </div>
-`;
-
 export class Discuss extends Widget<Env, {}> {
-  name = "discuss";
-  template = template;
+  template = "discuss";
   widgets = { Clock, Counter, ColorWidget };
   state = { validcounter: true, color: "red" };
 
@@ -63,6 +39,5 @@ export class Discuss extends Widget<Env, {}> {
 }
 
 class ColorWidget extends Widget<Env, { color: "red" | "blue" }> {
-  name = "colorwidget";
-  template = `<div>Current Color: <t t-esc="props.color"/></div>`;
+  template = "colorwidget";
 }

web/static/src/ts/widgets/Navbar.ts

@@ -1,28 +1,13 @@
 import { Widget } from "../core/widget";
 import { Env, Menu } from "../env";
 
-const template = `
-    <div class="o_navbar">
-        <a aria-label="Applications" class="o_title fa fa-th" href="#" title="Applications" accesskey="h" t-on-click="toggleHome"/>
-        <ul t-if="!props.inMenu">
-            <li t-foreach="env.menus" t-as="menu">
-                <a t-att-href="getUrl(menu)">
-                    <t t-esc="menu.title"/>
-                </a>
-            </li>
-            <li t-if="env.isMobile">MOBILEMODE</li>
-        </ul>
-    </div>
-`;
-
 export interface Props {
   toggleHome: () => void;
   inMenu: boolean;
 }
 
 export class Navbar extends Widget<Env, Props> {
-  name = "navbar";
-  template = template;
+  template = "navbar";
 
   getUrl(menu: Menu) {
     const action_id = String(menu.actionID);

web/static/src/ts/widgets/clock.ts

@@ -2,8 +2,7 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 
 export class Clock extends Widget<Env, {}> {
-  name = "clock";
-  template = `<div class="o_clock"><t t-esc="state.currentTime"/></div>`;
+  template = "clock";
   timeout: any | undefined;
 
   state = {

web/static/src/ts/widgets/home_menu.ts

@@ -1,13 +1,6 @@
 import { Widget } from "../core/widget";
 import { Env } from "../env";
 
-const template = `
-    <div class="o_home_menu">
-        <span>HOME MENU</span>
-    </div>
-`;
-
 export class HomeMenu extends Widget<Env, {}> {
-  name = "home";
-  template = template;
+  template = "home";
 }

web/static/src/ts/widgets/notification.ts

@@ -2,21 +2,8 @@ import { Widget } from "../core/widget";
 import { Env } from "../env";
 import { INotification } from "../services/notifications";
 
-const template = `
-    <div class="o_notification">
-        <a t-if="props.sticky" class="fa fa-times o_close" href="#" title="Close" aria-label="Close" t-on-click="close"/>
-        <div class="o_notification_title">
-            <t t-raw="props.title"/>
-        </div>
-        <div class="o_notification_content" t-if="props.message.length">
-            <t t-raw="props.message"/>
-        </div>
-
-    </div>`;
-
 export class Notification extends Widget<Env, INotification> {
-  name = "notification";
-  template = template;
+  template = "notification";
 
   close() {
     this.env.notifications.close(this.props.id);

web/static/tests/core/qweb_vdom.test.ts

@@ -89,6 +89,11 @@ describe("error handling", () => {
   test("nice warning if no template with given name", () => {
     expect(() => qweb.render("invalidname")).toThrow("does not exist");
   });
+
+  test("cannot add twice the same template", () => {
+    qweb.addTemplate("test", `<t></t>`);
+    expect(() => qweb.addTemplate("test", "<div/>")).toThrow("already defined");
+  });
 });
 
 describe("t-esc", () => {

web/static/tests/core/widget.test.ts

@@ -17,6 +17,13 @@ let env: WEnv;
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestWEnv();
+  env.qweb.addTemplate(
+    "counter",
+    `<div><t t-esc="state.counter"/><button t-on-click="inc">Inc</button></div>`
+  );
+  env.qweb.addTemplate("widgetA", `<div>Hello<t t-widget="b"/></div>`);
+  env.qweb.addTemplate("widgetB", `<div>world</div>`);
+  env.qweb.addTemplate("default", "<div/>");
 });
 
 afterEach(() => {
@@ -34,8 +41,7 @@ function children(w: Widget<WEnv, {}>): Widget<WEnv, {}>[] {
 
 // Test widgets
 class Counter extends Widget<WEnv, {}> {
-  name = "counter";
-  template = `<div><t t-esc="state.counter"/><button t-on-click="inc">Inc</button></div>`;
+  template = "counter";
   state = {
     counter: 0
   };
@@ -46,13 +52,12 @@ class Counter extends Widget<WEnv, {}> {
 }
 
 class WidgetA extends Widget<WEnv, {}> {
-  name = "a";
-  template = `<div>Hello<t t-widget="b"/></div>`;
+  template = "widgetA";
   widgets = { b: WidgetB };
 }
 
 class WidgetB extends Widget<WEnv, {}> {
-  template = `<div>world</div>`;
+  template = "widgetB";
 }
 
 //------------------------------------------------------------------------------
@@ -83,8 +88,12 @@ describe("basic widget properties", () => {
   });
 
   test("widget style and classname", async () => {
+    env.qweb.addTemplate(
+      "styledwidget",
+      `<div style="font-weight:bold;" class="some-class">world</div>`
+    );
     class StyledWidget extends Widget<WEnv, {}> {
-      template = `<div style="font-weight:bold;" class="some-class">world</div>`;
+      template = "styledwidget";
     }
     const widget = new StyledWidget(env);
     await widget.mount(fixture);
@@ -174,9 +183,9 @@ describe("lifecycle hooks", () => {
 
   test("willStart hook is called on subwidget", async () => {
     let ok = false;
+    env.qweb.addTemplate("parent", `<div><t t-widget="child"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-widget="child"/></div>`;
+      template = "parent";
       widgets = { child: ChildWidget };
     }
     class ChildWidget extends Widget<WEnv, {}> {
@@ -193,9 +202,9 @@ describe("lifecycle hooks", () => {
     expect.assertions(4);
     let parentMounted = false;
     let childMounted = false;
+    env.qweb.addTemplate("parent", `<div><t t-widget="child"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-widget="child"/></div>`;
+      template = "parent";
       widgets = { child: ChildWidget };
       mounted() {
         expect(childMounted).toBe(false);
@@ -217,10 +226,9 @@ describe("lifecycle hooks", () => {
   test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
     expect.assertions(3);
     let hookCounter = 0;
-    class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
-      state = { ok: false };
-      template = `
+    env.qweb.addTemplate(
+      "parent",
+      `
           <div>
             <t t-if="state.ok">
               <t t-widget="child"/>
@@ -228,9 +236,14 @@ describe("lifecycle hooks", () => {
             <t t-else="1">
               <div/>
             </t>
-          </div>`; // the t-else part in this template is important. This is
-      // necessary to have a situation that could confuse the vdom
-      // patching algorithm
+          </div>`
+    ); // the t-else part in this template is important. This is
+    // necessary to have a situation that could confuse the vdom
+    // patching algorithm
+    class ParentWidget extends Widget<WEnv, {}> {
+      name = "a";
+      state = { ok: false };
+      template = "parent";
       widgets = { child: ChildWidget };
     }
     class ChildWidget extends Widget<WEnv, {}> {
@@ -277,13 +290,15 @@ describe("lifecycle hooks", () => {
 
   test("widgets are unmounted and destroyed if no longer in DOM", async () => {
     let steps: string[] = [];
+    env.qweb.addTemplate(
+      "parent",
+      `<div>
+        <t t-if="state.ok"><t t-widget="child"/></t>
+      </div>`
+    );
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
       state = { ok: true };
-      template = `
-          <div>
-            <t t-if="state.ok"><t t-widget="child"/></t>
-          </div>`;
+      template = "parent";
       widgets = { child: ChildWidget };
     }
 
@@ -320,10 +335,9 @@ describe("lifecycle hooks", () => {
 
   test("hooks are called in proper order in widget creation/destruction", async () => {
     let steps: string[] = [];
+    env.qweb.addTemplate("parent", `<div><t t-widget="child"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
-      template = `
-          <div><t t-widget="child"/></div>`;
+      template = "parent";
       widgets = { child: ChildWidget };
       constructor(parent) {
         super(parent);
@@ -380,9 +394,9 @@ describe("lifecycle hooks", () => {
 
   test("shouldUpdate hook prevent rerendering", async () => {
     let shouldUpdate = false;
+    env.qweb.addTemplate("testw", `<div><t t-esc="props.val"/></div>`);
     class TestWidget extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-esc="props.val"/></div>`;
+      template = "testw";
       shouldUpdate() {
         return shouldUpdate;
       }
@@ -493,9 +507,12 @@ describe("composition", () => {
   });
 
   test("t-refs on widget are widgets", async () => {
+    env.qweb.addTemplate(
+      "widgetc",
+      `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`
+    );
     class WidgetC extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`;
+      template = "widgetc";
       widgets = { b: WidgetB };
     }
     const widget = new WidgetC(env);
@@ -504,8 +521,9 @@ describe("composition", () => {
   });
 
   test("modifying a sub widget", async () => {
+    env.qweb.addTemplate("parent", `<div><t t-widget="Counter"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      template = `<div><t t-widget="Counter"/></div>`;
+      template = "parent";
       widgets = { Counter };
     }
     const widget = new ParentWidget(env);
@@ -542,8 +560,9 @@ describe("composition", () => {
   });
 
   test("rerendering a widget with a sub widget", async () => {
+    env.qweb.addTemplate("parent", `<div><t t-widget="Counter"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      template = `<div><t t-widget="Counter"/></div>`;
+      template = "parent";
       widgets = { Counter };
     }
     const widget = new ParentWidget(env);
@@ -561,11 +580,13 @@ describe("composition", () => {
   });
 
   test("sub widgets are destroyed if no longer in dom, then recreated", async () => {
+    env.qweb.addTemplate(
+      "parent",
+      `<div><t t-if="state.ok"><t t-widget="counter"/></t></div>`
+    );
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
       state = { ok: true };
-      template = `
-          <div><t t-if="state.ok"><t t-widget="counter"/></t></div>`;
+      template = "parent";
       widgets = { counter: Counter };
     }
     const widget = new ParentWidget(env);
@@ -585,11 +606,14 @@ describe("composition", () => {
   });
 
   test("sub widgets with t-keep-alive are not destroyed if no longer in dom", async () => {
+    env.qweb.addTemplate(
+      "parent",
+      `
+          <div><t t-if="state.ok"><t t-widget="counter" t-keep-alive="1"/></t></div>`
+    );
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
       state = { ok: true };
-      template = `
-          <div><t t-if="state.ok"><t t-widget="counter" t-keep-alive="1"/></t></div>`;
+      template = "parent";
       widgets = { counter: Counter };
     }
     const widget = new ParentWidget(env);
@@ -613,15 +637,19 @@ describe("composition", () => {
   });
 
   test("sub widgets dom state with t-keep-alive is preserved", async () => {
+    env.qweb.addTemplate(
+      "parent",
+      `
+          <div><t t-if="state.ok"><t t-widget="InputWidget" t-keep-alive="1"/></t></div>`
+    );
+    env.qweb.addTemplate("inputwidget", "<input/>");
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
       state = { ok: true };
-      template = `
-          <div><t t-if="state.ok"><t t-widget="InputWidget" t-keep-alive="1"/></t></div>`;
+      template = "parent";
       widgets = { InputWidget };
     }
     class InputWidget extends Widget<WEnv, {}> {
-      template = `<input/>`;
+      template = "inputwidget";
     }
     const widget = new ParentWidget(env);
     await widget.mount(fixture);
@@ -637,18 +665,21 @@ describe("composition", () => {
   });
 
   test("sub widgets rendered in a loop", async () => {
+    env.qweb.addTemplate("child", `<span><t t-esc="props.n"/></span>`);
     class ChildWidget extends Widget<WEnv, { n: number }> {
-      name = "c";
-      template = `<span><t t-esc="props.n"/></span>`;
+      template = "child";
     }
-    class Parent extends Widget<WEnv, {}> {
-      name = "p";
-      template = `
+    env.qweb.addTemplate(
+      "parent",
+      `
         <div>
           <t t-foreach="state.numbers" t-as="number">
             <t t-widget="ChildWidget" t-props="{n: number}"/>
           </t>
-        </div>`;
+        </div>`
+    );
+    class Parent extends Widget<WEnv, {}> {
+      template = "parent";
       state = {
         numbers: [1, 2, 3]
       };
@@ -669,23 +700,27 @@ describe("composition", () => {
 
   test("sub widgets with some state rendered in a loop", async () => {
     let n = 1;
+    env.qweb.addTemplate("child", `<span><t t-esc="state.n"/></span>`);
     class ChildWidget extends Widget<WEnv, never> {
-      name = "c";
-      template = `<span><t t-esc="state.n"/></span>`;
+      template = "child";
       constructor(parent) {
         super(parent);
         this.state = { n };
         n++;
       }
     }
-    class Parent extends Widget<WEnv, {}> {
-      name = "p";
-      template = `
+
+    env.qweb.addTemplate(
+      "parent",
+      `
         <div>
           <t t-foreach="state.numbers" t-as="number">
             <t t-widget="ChildWidget" t-key="number"/>
           </t>
-        </div>`;
+        </div>`
+    );
+    class Parent extends Widget<WEnv, {}> {
+      template = "parent";
       state = {
         numbers: [1, 2, 3]
       };
@@ -707,15 +742,19 @@ describe("composition", () => {
 
 describe("props evaluation (with t-props directive)", () => {
   test("explicit object prop", async () => {
+    env.qweb.addTemplate(
+      "parent",
+      `<div><t t-widget="child" t-props="{value: state.val}"/></div>`
+    );
     class Parent extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-widget="child" t-props="{value: state.val}"/></div>`;
+      template = "parent";
       widgets = { child: Child };
       state = { val: 42 };
     }
 
+    env.qweb.addTemplate("child", `<span><t t-esc="state.someval"/></span>`);
     class Child extends Widget<WEnv, {}> {
-      template = `<span><t t-esc="state.someval"/></span>`;
+      template = "child";
       state: { someval: number };
       constructor(parent: Parent, props: { value: number }) {
         super(parent);
@@ -729,15 +768,19 @@ describe("props evaluation (with t-props directive)", () => {
   });
 
   test("object prop value", async () => {
+    env.qweb.addTemplate(
+      "parent",
+      `<div><t t-widget="child" t-props="state"/></div>`
+    );
     class Parent extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-widget="child" t-props="state"/></div>`;
+      template = "parent";
       widgets = { child: Child };
       state = { val: 42 };
     }
 
+    env.qweb.addTemplate("child", `<span><t t-esc="state.someval"/></span>`);
     class Child extends Widget<WEnv, {}> {
-      template = `<span><t t-esc="state.someval"/></span>`;
+      template = "child";
       state: { someval: number };
       constructor(parent: Parent, props: { val: number }) {
         super(parent);
@@ -756,9 +799,12 @@ describe("random stuff", () => {
     // this test makes sure that the foreach directive does not pollute sub
     // context with the inLoop variable, which is then used in the t-widget
     // directive as a key
+    env.qweb.addTemplate(
+      "test",
+      `<div><t t-foreach="2">txt</t><t t-widget="widget"/></div>`
+    );
     class Test extends Widget<WEnv, {}> {
-      name = "test";
-      template = `<div><t t-foreach="2">txt</t><t t-widget="widget"/></div>`;
+      template = "test";
       widgets = { widget: Widget };
     }
     const widget = new Test(env);
@@ -772,15 +818,22 @@ describe("miscellaneous", () => {
     // in this situation, we protect against a bug that occurred: because of the
     // interplay between widgets and vnodes, a sub widget vnode was patched
     // twice.
+    env.qweb.addTemplate(
+      "parent",
+      `<div><t t-widget="child" t-props="state"/></div>`
+    );
     class Parent extends Widget<WEnv, {}> {
-      name = "a";
-      template = `<div><t t-widget="child" t-props="state"/></div>`;
+      template = "parent";
       widgets = { child: Child };
       state = { flag: false };
     }
 
+    env.qweb.addTemplate(
+      "child",
+      `<span>abc<t t-if="props.flag">def</t></span>`
+    );
     class Child extends Widget<WEnv, {}> {
-      template = `<span>abc<t t-if="props.flag">def</t></span>`;
+      template = "child";
     }
 
     const widget = new Parent(env);

web/static/tests/helpers.ts

@@ -9,6 +9,7 @@ import { NotificationManager } from "../src/ts/services/notifications";
 import { IActionManager, ActionEvent } from "../src/ts/services/action_manager";
 import { Callback } from "../src/ts/core/event_bus";
 import { IRouter, Query, RouterEvent } from "../src/ts/services/router";
+import { readFile } from "fs";
 
 export function makeTestFixture() {
   let fixture = document.createElement("div");
@@ -74,3 +75,11 @@ class MockRouter implements IRouter {
 export function normalize(str: string): string {
   return str.replace(/\s+/g, "");
 }
+
+export async function loadTemplates(): Promise<string> {
+  return new Promise((resolve, reject) => {
+    readFile("web/static/src/xml/templates.xml", "utf-8", (err, result) => {
+      resolve(result);
+    });
+  });
+}

web/static/tests/widgets/navbar.test.ts

@@ -1,6 +1,6 @@
 import { Env } from "../../src/ts/env";
 import { Navbar, Props } from "../../src/ts/widgets/navbar";
-import { makeTestEnv, makeTestFixture } from "../helpers";
+import { makeTestEnv, makeTestFixture, loadTemplates } from "../helpers";
 
 //------------------------------------------------------------------------------
 // Setup and helpers
@@ -9,10 +9,16 @@ import { makeTestEnv, makeTestFixture } from "../helpers";
 let fixture: HTMLElement;
 let env: Env;
 let props: Props;
+let templates: string;
+
+beforeAll(async () => {
+  templates = await loadTemplates();
+});
 
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestEnv();
+  env.qweb.loadTemplates(templates);
   props = { inMenu: false, toggleHome: () => {} };
 });
 

web/static/tests/widgets/notification.test.ts

@@ -1,7 +1,7 @@
 import { Env } from "../../src/ts/env";
 import { INotification } from "../../src/ts/services/notifications";
 import { Notification } from "../../src/ts/widgets/notification";
-import { makeTestEnv, makeTestFixture } from "../helpers";
+import { makeTestEnv, makeTestFixture, loadTemplates } from "../helpers";
 
 //------------------------------------------------------------------------------
 // Setup and helpers
@@ -9,10 +9,16 @@ import { makeTestEnv, makeTestFixture } from "../helpers";
 
 let fixture: HTMLElement;
 let env: Env;
+let templates: string;
+
+beforeAll(async () => {
+  templates = await loadTemplates();
+});
 
 beforeEach(() => {
   fixture = makeTestFixture();
   env = makeTestEnv();
+  env.qweb.loadTemplates(templates);
 });
 
 afterEach(() => {