[FIX] component: updateProps: validation and default values

Before this rev., default values weren't taken into account when
validating props whenever a component was updated. Moreover, there
was no test attesting that props were validated at update.

src/component/component.ts

@@ -503,6 +503,9 @@ export class Component<T extends Env, Props extends {}> {
       if (defaultProps) {
         nextProps = this.__applyDefaultProps(nextProps, defaultProps);
       }
+      if (QWeb.dev) {
+        QWeb.utils.validateProps(this.constructor, nextProps);
+      }
       await Promise.all([
         this.willUpdateProps(nextProps),
         __owl__.willUpdatePropsCB && __owl__.willUpdatePropsCB(nextProps)

src/component/directive.ts

@@ -412,9 +412,6 @@ QWeb.addDirective({
       // disable the patch queue
       patchQueueCode = `w${componentID}.__owl__.isMounted ? extra.fiber : fiber${componentID}`;
     }
-    if (QWeb.dev) {
-      ctx.addLine(`utils.validateProps(w${componentID}.constructor, props${componentID})`);
-    }
     let styleCode = "";
     if (tattStyle) {
       styleCode = `.then(()=>{if (w${componentID}.__owl__.isDestroyed) {return};w${componentID}.el.style=${tattStyle};});`;

tests/component/__snapshots__/props_validation.test.ts.snap

@@ -20,7 +20,6 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
         w3 = false;
     }
     if (w3) {
-        utils.validateProps(w3.constructor, props3)
         w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
         let pvnode = w3.__owl__.pvnode;
         c1.push(pvnode);

tests/component/props_validation.test.ts

@@ -323,7 +323,7 @@ describe("props validation", () => {
     }).toThrow();
   });
 
-  test("can set default required boolean values", async () => {
+  test("missing required boolean prop causes an error", async () => {
     class TestWidget extends Widget {
       static props = ["p"];
       static template = xml`<span><t t-if="props.p">hey</t></span>`;
@@ -344,6 +344,57 @@ describe("props validation", () => {
     expect(error).toBeDefined();
     expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
   });
+
+  test("props are validated whenever component is updated", async () => {
+    let error;
+    class TestWidget extends Component<any, any> {
+      static props = { p: { type: Number } };
+      static template = xml`<div><t t-esc="props.p"/></div>`;
+
+      async __updateProps() {
+        try {
+          await Component.prototype.__updateProps.apply(this, arguments);
+        } catch(e) {
+          error = e;
+        }
+      }
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><TestWidget p="state.p"/></div>`;
+      static components = { TestWidget };
+      state: any = useState({ p: 1 });
+    }
+
+    const w = new Parent(env);
+    await w.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
+
+    w.state.p = undefined;
+    await nextTick();
+    expect(error).toBeDefined();
+    expect(error.message).toBe("Missing props 'p' (component 'TestWidget')");
+  });
+
+  test("default values are applied before validating props at update", async () => {
+    class TestWidget extends Component<any, any> {
+      static props = { p: { type: Number } };
+      static template = xml`<div><t t-esc="props.p"/></div>`;
+      static defaultProps = { p: 4 };
+    }
+    class Parent extends Component<any, any> {
+      static template = xml`<div><TestWidget p="state.p"/></div>`;
+      static components = { TestWidget };
+      state: any = useState({ p: 1 });
+    }
+
+    const w = new Parent(env);
+    await w.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><div>1</div></div>");
+
+    w.state.p = undefined;
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><div>4</div></div>");
+  });
 });
 
 describe("default props", () => {