implement destroy, add tests

demo/src/Counter.ts

@@ -1,7 +1,7 @@
 import Widget from "../../src/core/widget";
 
 const template = `
-    <div t-debug="1">
+    <div>
         <button t-on-click="increment(-1)">-</button>
         <span>Value: <t t-esc="state.counter"/></span>
         <button t-on-click="increment(1)">+</button>
@@ -15,7 +15,7 @@ export default class Counter extends Widget {
     counter: 0
   };
 
-  constructor(parent: Widget, initialState?: number) {
+  constructor(parent: Widget | null, initialState?: number) {
     super(parent);
     this.state.counter = initialState || 0;
   }

src/core/widget.ts

@@ -25,7 +25,9 @@ export default class Widget {
     this.parent = parent;
     if (parent) {
       parent.children.push(this);
-      this.setEnvironment(parent.env);
+      if (parent.env) {
+        this.setEnvironment(parent.env);
+      }
     }
   }
 
@@ -46,16 +48,18 @@ export default class Widget {
     target.appendChild(this.el!);
   }
 
-  destroy() {}
+  destroy() {
-
+    if (this.el) {
-  setEnvironment(env: Env | null) {
+      this.el.remove();
-    this.env = env ? Object.create(env) : null;
-    if (this.env) {
-      this.env.qweb.addTemplate(this.name, this.template);
-      delete this.template;
     }
   }
 
+  setEnvironment(env: Env) {
+    this.env = Object.create(env);
+    env.qweb.addTemplate(this.name, this.template);
+    delete this.template;
+  }
+
   async updateState(newState: Object) {
     Object.assign(this.state, newState);
     await this.render();

tests/widget.test.ts

@@ -54,3 +54,42 @@ describe("basic widget properties", () => {
     expect(target.innerHTML).toBe("<div>1<button>Inc</button></div>");
   });
 });
+
+describe("lifecycle hooks", () => {
+  test("willStart hook is called", async () => {
+    let willstart = false;
+    class HookWidget extends Widget {
+      async willStart() {
+        willstart = true;
+      }
+    }
+    const widget = makeWidget(HookWidget);
+    const target = document.createElement("div");
+    await widget.mount(target);
+    expect(willstart).toBe(true);
+  });
+
+  test("mounted hook is not called if not in DOM", async () => {
+    let mounted = false;
+    class HookWidget extends Widget {
+      async mounted() {
+        mounted = true;
+      }
+    }
+    const widget = makeWidget(HookWidget);
+    const target = document.createElement("div");
+    await widget.mount(target);
+    expect(mounted).toBe(false);
+  });
+});
+
+describe("destroy method", () => {
+  test("destroy remove the widget from the DOM", async () => {
+    const widget = makeWidget(Widget);
+    const target = document.body;
+    await widget.mount(target);
+    expect(document.contains(widget.el)).toBe(true);
+    widget.destroy();
+    expect(document.contains(widget.el)).toBe(false);
+  });
+});