[FIX] components: cascading render after microtaskTick (makeChildFiber)

Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: François Georis <fge@odoo.com>

tests/components/__snapshots__/concurrency.test.ts.snap

@@ -1,5 +1,57 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Cascading renders after microtaskTick 1`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+    let b3 = text(\` _ \`);
+    ctx = Object.create(ctx);
+    const [k_block4, v_block4, l_block4, c_block4] = prepareList(ctx['state']);
+    for (let i1 = 0; i1 < l_block4; i1++) {
+      ctx[\`elem\`] = v_block4[i1];
+      let key1 = ctx['elem'].id;
+      c_block4[i1] = withKey(text(ctx['elem'].id), key1);
+    }
+    let b4 = list(c_block4);
+    return multi([b2, b3, b4]);
+  }
+}"
+`;
+
+exports[`Cascading renders after microtaskTick 2`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  let { prepareList, withKey } = helpers;
+  
+  return function template(ctx, node, key = \\"\\") {
+    ctx = Object.create(ctx);
+    const [k_block1, v_block1, l_block1, c_block1] = prepareList(ctx['state']);
+    for (let i1 = 0; i1 < l_block1; i1++) {
+      ctx[\`elem\`] = v_block1[i1];
+      let key1 = ctx['elem'].id;
+      c_block1[i1] = withKey(component(\`Element\`, {id: ctx['elem'].id}, key + \`__1__\${key1}\`, node, ctx), key1);
+    }
+    return list(c_block1);
+  }
+}"
+`;
+
+exports[`Cascading renders after microtaskTick 3`] = `
+"function anonymous(bdom, helpers
+) {
+  let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
+  
+  return function template(ctx, node, key = \\"\\") {
+    return text(ctx['props'].id);
+  }
+}"
+`;
+
 exports[`async rendering destroying a widget before start is over 1`] = `
 "function anonymous(bdom, helpers
 ) {

tests/components/concurrency.test.ts

@@ -3082,6 +3082,53 @@ test("t-foreach with dynamic async component", async () => {
     "Child (3):mounted",
   ]).toBeLogged();
 });
+
+test("Cascading renders after microtaskTick", async () => {
+  const state = [{ id: 0 }, { id: 1 }];
+  let child: any;
+  let parent: any;
+
+  class Element extends Component {
+    static template = xml`<t t-esc="props.id" />`;
+  }
+
+  class Child extends Component {
+    static components = { Element };
+    static template = xml`
+      <t t-foreach="state" t-as="elem" t-key="elem.id">
+        <Element id="elem.id"/>
+      </t>`;
+    state = state;
+    setup() {
+      child = this;
+    }
+  }
+
+  class Parent extends Component {
+    static components = { Child };
+    static template = xml`<Child /> _ <t t-foreach="state" t-as="elem" t-key="elem.id" t-esc="elem.id"/>`;
+    state = state;
+    setup() {
+      parent = this;
+    }
+  }
+
+  await mount(Parent, fixture);
+  expect(fixture.innerHTML).toBe("01 _ 01");
+
+  state.push({ id: 2 });
+  parent.render();
+  child.render();
+
+  await Promise.resolve();
+  expect(fixture.innerHTML).toBe("01 _ 01");
+  state.push({ id: 3 });
+  parent.render();
+  child.render();
+
+  await nextTick();
+  expect(fixture.innerHTML).toBe("0123 _ 0123");
+});
 //   test.skip("components with shouldUpdate=false", async () => {
 //     const state = { p: 1, cc: 10 };