add inlineTemplate key to widget

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

@@ -88,12 +88,8 @@ 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 = "styledwidget";
+      inlineTemplate = `<div style="font-weight:bold;" class="some-class">world</div>`;
     }
     const widget = new StyledWidget(env);
     await widget.mount(fixture);
@@ -183,9 +179,8 @@ 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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child"/></div>`;
       widgets = { child: ChildWidget };
     }
     class ChildWidget extends Widget<WEnv, {}> {
@@ -202,9 +197,8 @@ 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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child"/></div>`;
       widgets = { child: ChildWidget };
       mounted() {
         expect(childMounted).toBe(false);
@@ -226,9 +220,11 @@ describe("lifecycle hooks", () => {
   test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
     expect.assertions(3);
     let hookCounter = 0;
-    env.qweb.addTemplate(
-      "parent",
-      `
+    // the t-else part in the template is important. This is
+    // necessary to have a situation that could confuse the vdom
+    // patching algorithm
+    class ParentWidget extends Widget<WEnv, {}> {
+      inlineTemplate = `
           <div>
             <t t-if="state.ok">
               <t t-widget="child"/>
@@ -236,14 +232,8 @@ 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
-    class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
+          </div>`;
       state = { ok: false };
-      template = "parent";
       widgets = { child: ChildWidget };
     }
     class ChildWidget extends Widget<WEnv, {}> {
@@ -272,7 +262,6 @@ describe("lifecycle hooks", () => {
     const target = document.createElement("div");
     document.body.appendChild(target);
     class ParentWidget extends Widget<WEnv, {}> {
-      name = "a";
       mounted() {
         const child = new ChildWidget(this);
         child.mount(this.el!);
@@ -290,15 +279,11 @@ 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, {}> {
       state = { ok: true };
-      template = "parent";
+      inlineTemplate = `<div>
+        <t t-if="state.ok"><t t-widget="child"/></t>
+      </div>`;
       widgets = { child: ChildWidget };
     }
 
@@ -335,9 +320,8 @@ 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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child"/></div>`;
       widgets = { child: ChildWidget };
       constructor(parent) {
         super(parent);
@@ -394,9 +378,8 @@ 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, {}> {
-      template = "testw";
+      inlineTemplate = `<div><t t-esc="props.val"/></div>`;
       shouldUpdate() {
         return shouldUpdate;
       }
@@ -507,12 +490,8 @@ 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, {}> {
-      template = "widgetc";
+      inlineTemplate = `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`;
       widgets = { b: WidgetB };
     }
     const widget = new WidgetC(env);
@@ -521,9 +500,8 @@ describe("composition", () => {
   });
 
   test("modifying a sub widget", async () => {
-    env.qweb.addTemplate("parent", `<div><t t-widget="Counter"/></div>`);
     class ParentWidget extends Widget<WEnv, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="Counter"/></div>`;
       widgets = { Counter };
     }
     const widget = new ParentWidget(env);
@@ -560,9 +538,8 @@ 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 = "parent";
+      inlineTemplate = `<div><t t-widget="Counter"/></div>`;
       widgets = { Counter };
     }
     const widget = new ParentWidget(env);
@@ -580,13 +557,9 @@ 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, {}> {
       state = { ok: true };
-      template = "parent";
+      inlineTemplate = `<div><t t-if="state.ok"><t t-widget="counter"/></t></div>`;
       widgets = { counter: Counter };
     }
     const widget = new ParentWidget(env);
@@ -606,14 +579,9 @@ 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, {}> {
       state = { ok: true };
-      template = "parent";
+      inlineTemplate = `<div><t t-if="state.ok"><t t-widget="counter" t-keep-alive="1"/></t></div>`;
       widgets = { counter: Counter };
     }
     const widget = new ParentWidget(env);
@@ -637,19 +605,13 @@ 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, {}> {
       state = { ok: true };
-      template = "parent";
+      inlineTemplate = `<div><t t-if="state.ok"><t t-widget="InputWidget" t-keep-alive="1"/></t></div>`;
       widgets = { InputWidget };
     }
     class InputWidget extends Widget<WEnv, {}> {
-      template = "inputwidget";
+      inlineTemplate = "<input/>";
     }
     const widget = new ParentWidget(env);
     await widget.mount(fixture);
@@ -665,21 +627,17 @@ 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 }> {
-      template = "child";
+      inlineTemplate = `<span><t t-esc="props.n"/></span>`;
     }
-    env.qweb.addTemplate(
-      "parent",
-      `
+
+    class Parent extends Widget<WEnv, {}> {
+      inlineTemplate = `
         <div>
           <t t-foreach="state.numbers" t-as="number">
             <t t-widget="ChildWidget" t-props="{n: number}"/>
           </t>
-        </div>`
-    );
-    class Parent extends Widget<WEnv, {}> {
-      template = "parent";
+        </div>`;
       state = {
         numbers: [1, 2, 3]
       };
@@ -700,9 +658,8 @@ 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> {
-      template = "child";
+      inlineTemplate = `<span><t t-esc="state.n"/></span>`;
       constructor(parent) {
         super(parent);
         this.state = { n };
@@ -710,17 +667,12 @@ describe("composition", () => {
       }
     }
 
-    env.qweb.addTemplate(
-      "parent",
-      `
-        <div>
+    class Parent extends Widget<WEnv, {}> {
+      inlineTemplate = `<div>
           <t t-foreach="state.numbers" t-as="number">
             <t t-widget="ChildWidget" t-key="number"/>
           </t>
-        </div>`
-    );
-    class Parent extends Widget<WEnv, {}> {
-      template = "parent";
+        </div>`;
       state = {
         numbers: [1, 2, 3]
       };
@@ -742,19 +694,14 @@ 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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child" t-props="{value: state.val}"/></div>`;
       widgets = { child: Child };
       state = { val: 42 };
     }
 
-    env.qweb.addTemplate("child", `<span><t t-esc="state.someval"/></span>`);
     class Child extends Widget<WEnv, {}> {
-      template = "child";
+      inlineTemplate = `<span><t t-esc="state.someval"/></span>`;
       state: { someval: number };
       constructor(parent: Parent, props: { value: number }) {
         super(parent);
@@ -768,19 +715,14 @@ 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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child" t-props="state"/></div>`;
       widgets = { child: Child };
       state = { val: 42 };
     }
 
-    env.qweb.addTemplate("child", `<span><t t-esc="state.someval"/></span>`);
     class Child extends Widget<WEnv, {}> {
-      template = "child";
+      inlineTemplate = `<span><t t-esc="state.someval"/></span>`;
       state: { someval: number };
       constructor(parent: Parent, props: { val: number }) {
         super(parent);
@@ -797,12 +739,8 @@ describe("props evaluation (with t-props directive)", () => {
 describe("t-on directive on widgets", () => {
   test("t-on works as expected", async () => {
     let n = 0;
-    env.qweb.addTemplate(
-      "parent",
-      `<div><t t-widget="child" t-on-customevent="someMethod"/></div>`
-    );
     class ParentWidget extends Widget<WEnv, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child" t-on-customevent="someMethod"/></div>`;
       widgets = { child: Child };
       someMethod(arg) {
         expect(arg).toBe(43);
@@ -827,12 +765,8 @@ describe("random stuff/miscellaneous", () => {
     // 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, {}> {
-      template = "test";
+      inlineTemplate = `<div><t t-foreach="2">txt</t><t t-widget="widget"/></div>`;
       widgets = { widget: Widget };
     }
     const widget = new Test(env);
@@ -844,22 +778,14 @@ describe("random stuff/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, {}> {
-      template = "parent";
+      inlineTemplate = `<div><t t-widget="child" t-props="state"/></div>`;
       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 = "child";
+      inlineTemplate = `<span>abc<t t-if="props.flag">def</t></span>`;
     }
 
     const widget = new Parent(env);