From b159a073d98001f0038d9b9c64cdb96cab377a5c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?G=C3=A9ry=20Debongnie?= <ged@odoo.com>
Date: Mon, 24 Jan 2022 13:14:50 +0100
Subject: [PATCH] [FIX] component: proper error message in dev mode in some
 cases

---
 src/component/props_validation.ts             |  5 ++++
 .../__snapshots__/error_handling.test.ts.snap | 13 +++++++++++
 tests/components/error_handling.test.ts       | 23 +++++++++++++++++++
 3 files changed, 41 insertions(+)

diff --git a/src/component/props_validation.ts b/src/component/props_validation.ts
index bae01d94..015d0345 100644
--- a/src/component/props_validation.ts
+++ b/src/component/props_validation.ts
@@ -39,6 +39,11 @@ export const validateProps = function (name: string | typeof Component, props: a
     typeof name !== "string" ? name : parent.constructor.components[name]
   ) as typeof Component;
 
+  if (!ComponentClass) {
+    // this is an error, wrong component. We silently return here instead so the
+    // error is triggered by the usual path ('component' function)
+    return;
+  }
   applyDefaultProps(props, ComponentClass);
 
   let propsDef = getPropDescription(ComponentClass.props);
diff --git a/tests/components/__snapshots__/error_handling.test.ts.snap b/tests/components/__snapshots__/error_handling.test.ts.snap
index 21b36a8f..8ad895e1 100644
--- a/tests/components/__snapshots__/error_handling.test.ts.snap
+++ b/tests/components/__snapshots__/error_handling.test.ts.snap
@@ -1,5 +1,18 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`basics display a nice error if it cannot find component (in dev mode) 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    const props1 = {}
+    helpers.validateProps(\`SomeMispelledComponent\`, props1, ctx)
+    return component(\`SomeMispelledComponent\`, props1, key + \`__1\`, node, ctx);
+  }
+}"
+`;
+
 exports[`basics display a nice error if it cannot find component 1`] = `
 "function anonymous(bdom, helpers
 ) {
diff --git a/tests/components/error_handling.test.ts b/tests/components/error_handling.test.ts
index 50eb48b1..3033cd6e 100644
--- a/tests/components/error_handling.test.ts
+++ b/tests/components/error_handling.test.ts
@@ -81,6 +81,29 @@ describe("basics", () => {
     expect(mockConsoleWarn).toBeCalledTimes(1);
   });
 
+  test("display a nice error if it cannot find component (in dev mode)", async () => {
+    const info = console.info;
+    console.info = jest.fn(() => {}); // dev mode message
+    class SomeComponent extends Component {}
+    class Parent extends Component {
+      static template = xml`<SomeMispelledComponent />`;
+      static components = { SomeComponent };
+    }
+    let error: Error;
+    try {
+      await mount(Parent, fixture, { dev: true });
+    } catch (e) {
+      error = e as Error;
+    }
+    expect(error!).toBeDefined();
+    expect(error!.message).toBe('Cannot find the definition of component "SomeMispelledComponent"');
+    expect(console.error).toBeCalledTimes(0);
+    expect(mockConsoleError).toBeCalledTimes(0);
+    expect(mockConsoleWarn).toBeCalledTimes(1);
+    expect(console.info).toBeCalledTimes(1);
+    console.info = info;
+  });
+
   test("simple catchError", async () => {
     class Boom extends Component {
       static template = xml`<div t-esc="a.b.c"/>`;