[REF] component: large cleanup of concurrency branch

We remove here old comments, add some tests and documentation, and in
general, make sure the state of the code is in a good shape

part of #330

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

@@ -12,7 +12,6 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
     let c1 = [], p1 = {key:1};
     var vn1 = h('div', p1, c1);
     //COMPONENT
-    let def2;
     let templateId3 = \`__4__\`;
     let w3 = templateId3 in parent.__owl__.cmap ? parent.__owl__.children[parent.__owl__.cmap[templateId3]] : false;
     let props3 = {message:1};
@@ -20,25 +19,25 @@ exports[`props validation props are validated in dev mode (code snapshot) 1`] =
         w3.destroy();
         w3 = false;
     }
-    if (!w3) {
+    if (w3) {
+        utils.validateProps(w3.constructor, props3)
+        w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
+        let pvnode = w3.__owl__.pvnode;
+        c1.push(pvnode);
+    } else {
         let componentKey3 = \`Child\`;
         let W3 = context.constructor.components[componentKey3] || QWeb.components[componentKey3]|| context['Child'];
         if (!W3) {throw new Error('Cannot find the definition of component \\"' + componentKey3 + '\\"')}
         w3 = new W3(parent, props3);
         parent.__owl__.cmap[templateId3] = w3.__owl__.id;
-        def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
+        let def2 = w3.__prepare(extra.fiber, undefined, undefined, sibling);
         let pvnode = h('dummy', {key: templateId3, hook: {insert(vn) { let nvn=w3.__mount(fiber, pvnode.elm);pvnode.elm=nvn.elm;},remove() {},destroy(vn) {w3.destroy();}}});
         const fiber = w3.__owl__.currentFiber;
         def2.then(function () {if (w3.__owl__.isDestroyed) {return;} const vnode = fiber.vnode; pvnode.sel = vnode.sel; });
         c1.push(pvnode);
         w3.__owl__.pvnode = pvnode;
-    } else {
-        utils.validateProps(w3.constructor, props3)
-        def2 = def2 || w3.__updateProps(props3, extra.fiber, undefined, undefined, sibling);
-        let pvnode = w3.__owl__.pvnode;
-        c1.push(pvnode);
     }
-    sibling = w3.__owl__.currentFiber;
+    sibling = w3.__owl__.currentFiber || sibling;
     return vn1;
 }"
 `;

tests/component/component.test.ts

@@ -193,6 +193,23 @@ describe("basic widget properties", () => {
     expect(steps).toEqual(["__render", "mounted"]);
   });
 
+  test("render method wait until rendering is done", async () => {
+    class TestW extends Component<any, any> {
+      static template = xml`<div><t t-esc="state.drinks"/></div>`;
+      state = { drinks: 1 };
+    }
+    const widget = new TestW(env);
+    await widget.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div>1</div>");
+
+    widget.state.drinks = 2;
+
+    const renderPromise = widget.render();
+    expect(fixture.innerHTML).toBe("<div>1</div>");
+    await renderPromise;
+    expect(fixture.innerHTML).toBe("<div>2</div>");
+  });
+
   test("keeps a reference to env", async () => {
     const widget = new Widget(env);
     expect(widget.env).toBe(env);
@@ -1553,6 +1570,44 @@ describe("composition", () => {
     expect(fixture.innerHTML).toBe("<div><div>world</div></div>");
     expect(env.qweb.templates.ParentWidget.fn.toString()).toMatchSnapshot();
   });
+
+  test("sub components, loops, and shouldUpdate", async () => {
+    class ChildWidget extends Component<any, any> {
+      static template = xml`<span><t t-esc="props.val"/></span>`;
+      shouldUpdate(nextProps) {
+        if (nextProps.val === 12) {
+          return false;
+        }
+        return true;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`
+          <div>
+            <t t-foreach="state.records" t-as="record">
+              <ChildWidget t-key="record.id" val="record.val"/>
+            </t>
+          </div>`;
+      state = useState({
+        records: [{ id: 1, val: 1 }, { id: 2, val: 2 }, { id: 3, val: 3 }]
+      });
+      static components = { ChildWidget };
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(normalize(fixture.innerHTML)).toBe(
+      "<div><span>1</span><span>2</span><span>3</span></div>"
+    );
+
+    parent.state.records[0].val = 11;
+    parent.state.records[1].val = 12;
+    parent.state.records[2].val = 13;
+    await nextTick();
+    expect(normalize(fixture.innerHTML)).toBe(
+      "<div><span>11</span><span>2</span><span>13</span></div>"
+    );
+  });
 });
 
 describe("props evaluation ", () => {
@@ -2707,7 +2762,7 @@ describe("async rendering", () => {
         return defs[index++];
       }
       patched() {
-        steps.push('patched');
+        steps.push("patched");
       }
     }
 
@@ -2730,7 +2785,45 @@ describe("async rendering", () => {
     defs[1].resolve();
     await nextTick();
     expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
-    expect(steps).toEqual(['patched']);
+    expect(steps).toEqual(["patched"]);
+  });
+
+  test("update a sub-component twice in the same frame, 2", async () => {
+    const steps: string[] = [];
+    class ChildA extends Component<any, any> {
+      static template = xml`<span><t t-esc="val()"/></span>`;
+      patched() {
+        steps.push("patched");
+      }
+      val() {
+        steps.push("render");
+        return this.props.val;
+      }
+    }
+
+    class Parent extends Component<any, any> {
+      static template = xml`<div><ChildA val="state.valA"/></div>`;
+      static components = { ChildA };
+      state = useState({ valA: 1 });
+    }
+    const parent = new Parent(env);
+    await parent.mount(fixture);
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    parent.state.valA = 2;
+    await nextMicroTick();
+    expect(steps).toEqual(["render"]);
+    await nextMicroTick();
+    expect(steps).toEqual(["render", "render"]);
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    parent.state.valA = 3;
+    await nextMicroTick();
+    expect(steps).toEqual(["render", "render"]);
+    await nextMicroTick();
+    expect(steps).toEqual(["render", "render", "render"]);
+    expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
+    await nextTick();
+    expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
+    expect(steps).toEqual(["render", "render", "render", "patched"]);
   });
 
   test("components in a node in a t-foreach ", async () => {

tests/component/props_validation.test.ts

@@ -363,13 +363,12 @@ describe("default props", () => {
     }
 
     class App extends Widget {
-        static template = xml`<div><TestWidget/></div>`;
-        static components = { TestWidget };
+      static template = xml`<div><TestWidget/></div>`;
+      static components = { TestWidget };
     }
 
     const w = new App(env, {});
     await w.mount(fixture);
-    expect(fixture.innerHTML).toBe('<div><span>heyhey</span></div>')
+    expect(fixture.innerHTML).toBe("<div><span>heyhey</span></div>");
   });
-
 });