[IMP] props_validation: have clearer error messages

With this commit, props validation error messages will include a more
developer-friendly error message, avoiding the need to investigate in
the Developer Tools why a complex props structure is invalid.

tests/component/props_validation.test.ts

@@ -138,7 +138,9 @@ describe("props validation", () => {
         error = e;
       }
       expect(error).toBeDefined();
-      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
+      expect(error.message).toBe(
+        `Invalid Prop 'p' in component '_a': type of p is not ${test.type.name}`
+      );
     }
   });
 
@@ -195,7 +197,9 @@ describe("props validation", () => {
         error = e;
       }
       expect(error).toBeDefined();
-      expect(error.message).toBe("Invalid Prop 'p' in component '_a'");
+      expect(error.message).toBe(
+        `Invalid Prop 'p' in component '_a': type of p is not ${test.type.name}`
+      );
     }
   });
 
@@ -240,7 +244,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': type of p is not String and type of p is not Boolean"
+    );
   });
 
   test("can validate an optional props", async () => {
@@ -284,7 +290,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': type of p is not String"
+    );
   });
 
   test("can validate an array with given primitive type", async () => {
@@ -389,7 +397,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': type of p[1] is not String and type of p[1] is not Boolean"
+    );
   });
 
   test("can validate an object with simple shape", async () => {
@@ -426,7 +436,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid prop 'p' in component TestWidget (unknown prop 'extra')");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': unknown prop p['extra']"
+    );
 
     try {
       props = { p: { id: "1", url: "url" } };
@@ -436,7 +448,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': type of p['id'] is not Number"
+    );
 
     error = undefined;
     try {
@@ -447,7 +461,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': type of p['url'] is not String"
+    );
   });
 
   test("can validate recursively complicated prop def", async () => {
@@ -499,7 +515,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'p' in component 'TestWidget'");
+    expect(error.message).toBe(
+      "Invalid Prop 'p' in component 'TestWidget': p['url'] is not an instance of Boolean and type of p['url'][1] is not Number"
+    );
   });
 
   test("can validate optional attributes in nested sub props", () => {
@@ -531,7 +549,7 @@ describe("props validation", () => {
     }
     expect(error).toBeDefined();
     expect(error.message).toBe(
-      "Invalid prop 'myprop' in component TestComponent (unknown prop 'a')"
+      "Invalid Prop 'myprop' in component 'TestComponent': unknown prop myprop[0]['a']"
     );
   });
 
@@ -557,7 +575,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'size' in component 'TestComponent'");
+    expect(error.message).toBe(
+      "Invalid Prop 'size' in component 'TestComponent': size could not be validated by `validate` function"
+    );
   });
 
   test("can validate with a custom validator, and a type", () => {
@@ -585,7 +605,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
+    expect(error.message).toBe(
+      "Invalid Prop 'n' in component 'TestComponent': type of n is not Number"
+    );
     expect(validator).toBeCalledTimes(1);
 
     error = null;
@@ -595,7 +617,9 @@ describe("props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe("Invalid Prop 'n' in component 'TestComponent'");
+    expect(error.message).toBe(
+      "Invalid Prop 'n' in component 'TestComponent': n could not be validated by `validate` function"
+    );
     expect(validator).toBeCalledTimes(2);
   });
 

tests/misc/portal.test.ts

@@ -78,7 +78,9 @@ describe("Portal: Props validation", () => {
       error = e;
     }
     expect(error).toBeDefined();
-    expect(error.message).toBe(`Invalid Prop 'target' in component 'Portal'`);
+    expect(error.message).toBe(
+      "Invalid Prop 'target' in component 'Portal': target is not an instance of String"
+    );
 
     QWeb.dev = dev;
   });