[FIX] component: various issues while mounting manually components

The initial problem solved by this commit is that it was possible to get
into a situation where a mounting/rendering was started, then the component was
updated, but then another mounting operation begins, and it tries to
reuse the previous rendering operation, which is no longer uptodate.

The underlying issue is that Owl did not track properly the various
internal state change of a component.  These issue should be solved by
the introduction of the status enum, which currently tracks 6 possible
states:

- CREATED
- WILLSTARTED
- RENDERED
- MOUNTED
- UNMOUNTED
- DESTROYED

This status number replaces the isMounted and isDestroyed boolean flags.
It has the advantage of making sure that the component is in a
consistent state (it is no longer possible to be destroyed and mounted,
for example)

Another advantage is that it gives us an easy way to track the fact that
a component has been rendered, but is not in the DOM.  This is a subtle
situation where some various events can happen, and we need to be able
to react to that case.

Note that there is a change of behaviour: if a component is mounted in a
specific target, then before the mounting is complete, the component is
mounted in another target, we no longer reject the first mounting
operation.

tests/component/un_mounting.test.ts

@@ -404,6 +404,40 @@ describe("unmounting and remounting", () => {
     expect(fixture.innerHTML).toBe("<div>P2<span>C2</span></div>");
   });
 
+  test("change state while component is mounted in a fragment", async () => {
+    class Child1 extends Component {
+      static template = xml`<span>C1</span>`;
+    }
+
+    class Child2 extends Component {
+      static template = xml`<span>C2</span>`;
+    }
+
+    class Parent extends Component {
+      static components = { Child1, Child2 };
+      static template = xml`
+        <div>
+          <Child1 t-if="child == 'c1'"/>
+          <Child2 t-if="child == 'c2'"/>
+        </div>`;
+      child: string | false = false;
+    }
+
+    const fragment = document.createDocumentFragment();
+    const parent = new Parent();
+    await parent.mount(fragment);
+    expect(parent.el.outerHTML).toBe("<div></div>");
+
+    parent.child = "c1";
+    parent.render();
+    await Promise.resolve();
+
+    parent.child = "c2";
+    await parent.mount(fixture);
+
+    expect(fixture.innerHTML).toBe("<div><span>C2</span></div>");
+  });
+
   test("unmount component during a re-rendering", async () => {
     const def = makeDeferred();
     class Child extends Component {
@@ -490,17 +524,17 @@ describe("unmounting and remounting", () => {
     // one full tick.
     await nextMicroTick();
     await nextMicroTick();
-    expect(steps).toEqual(["1 catch"]);
+    expect(steps).toEqual([]);
     await nextTick();
     expect(fixture.innerHTML).toBe("<div></div><span></span>");
 
     def.resolve();
     await nextTick();
-    expect(steps).toEqual(["1 catch", "2 resolved"]);
+    expect(steps).toEqual(["2 resolved"]);
     expect(fixture.innerHTML).toBe("<div></div><span><div>Hey</div></span>");
   });
 
-  test("widget can be mounted on same target, another situation", async () => {
+  test("component can be mounted on same target, another situation", async () => {
     const def = makeDeferred();
     const steps: string[] = [];
 
@@ -528,8 +562,8 @@ describe("unmounting and remounting", () => {
 
     def.resolve();
     await nextTick();
-    expect(steps).toEqual(["1 resolved", "2 resolved"]);
     expect(fixture.innerHTML).toBe("<div>Hey</div>");
+    expect(steps).toEqual(["1 resolved", "2 resolved"]);
   });
 
   test("mounting a destroyed widget", async () => {