[IMP] component: display better error message if render is empty

closes #446

src/component/component.ts

@@ -282,9 +282,7 @@ export class Component<T extends Env, Props extends {}> {
       return Promise.resolve();
     }
     if (!(target instanceof HTMLElement)) {
-      let message = `Component '${
-        this.constructor.name
-      }' cannot be mounted: the target is not a valid DOM node.`;
+      let message = `Component '${this.constructor.name}' cannot be mounted: the target is not a valid DOM node.`;
       message += `\nMaybe the DOM is not ready yet? (in that case, you can use owl.utils.whenReady)`;
       throw new Error(message);
     }
@@ -579,10 +577,14 @@ export class Component<T extends Env, Props extends {}> {
       __owl__.observer.allowMutations = false;
     }
     try {
-      fiber.vnode = __owl__.renderFn!(this, {
+      let vnode = __owl__.renderFn!(this, {
         handlers: __owl__.boundHandlers,
         fiber: fiber
       });
+      if (!vnode) {
+        throw new Error(`Rendering '${this.constructor.name}' did not return anything`);
+      }
+      fiber.vnode = vnode;
     } catch (e) {
       fiber.handleError(e);
     }

src/qweb/base_directives.ts

@@ -236,9 +236,7 @@ QWeb.addDirective({
         varCode = `{${content}}`;
       }
       ctx.addLine(
-        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${
-          ctx.parentNode
-        }, fiber: {vars: ${varCode}, scope}}));`
+        `this.recursiveFns['${subTemplateName}'].call(this, context, Object.assign({}, extra, {parentNode: c${ctx.parentNode}, fiber: {vars: ${varCode}, scope}}));`
       );
       return true;
     }
@@ -307,9 +305,7 @@ QWeb.addDirective({
       !node.children[0].hasAttribute("t-key");
     if (shouldWarn) {
       console.warn(
-        `Directive t-foreach should always be used with a t-key! (in template: '${
-          ctx.templateName
-        }')`
+        `Directive t-foreach should always be used with a t-key! (in template: '${ctx.templateName}')`
       );
     }
 

tests/component/component.test.ts

@@ -108,6 +108,21 @@ describe("basic widget properties", () => {
     );
   });
 
+  test("display an error message if result of rendering is empty", async () => {
+    class SomeWidget extends Component<any, any> {
+      static template = xml`<t/>`;
+    }
+    const widget = new SomeWidget();
+    let error;
+    try {
+      await widget.mount(fixture);
+    } catch (e) {
+      error = e;
+    }
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Rendering 'SomeWidget' did not return anything");
+  });
+
   test("crashes if it cannot find a template", async () => {
     expect.assertions(1);
     class SomeWidget extends Component<any, any> {}