[FIX] remove indeterminism in animation tests

Animations have quite a few intricate calls to request next animation
frames. On quick devices, the helper method nextFrame made of 2
request of animation frames would not be enough and race condition
problems would rise.

The fix is simply to ask the nextFrame helper to do a third request
of animation frame in the animation tests, making the test deterministic
on a very fast device. Hopefully, this should be enough.

README.md

@@ -124,7 +124,7 @@ npm install @odoo/owl
 
 If you want to use a simple `<script>` tag, the last release can be downloaded here:
 
-- [owl-1.4.6](https://github.com/odoo/owl/releases/tag/v1.4.6)
+- [owl-1.4.5](https://github.com/odoo/owl/releases/tag/v1.4.5)
 
 ## License
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odoo/owl",
-  "version": "1.4.6",
+  "version": "1.4.5",
   "description": "Odoo Web Library (OWL)",
   "main": "dist/owl.cjs.js",
   "browser": "dist/owl.iife.js",

roadmap.md

@@ -1,6 +1,6 @@
 # 🦉 OWL Roadmap 🦉
 
-- Current version: 1.4.6
+- Current version: 1.4.5
 - Status: stable
 
 This roadmap is only an attempt at predicting Owl's future.  Everything may

src/component/component.ts

@@ -400,7 +400,6 @@ export class Component<Props extends {} = any, T extends Env = Env> {
     if (currentFiber && !currentFiber.isRendered && !currentFiber.isCompleted) {
       return scheduler.addFiber(currentFiber.root);
     }
-
     // if we aren't mounted at this point, it implies that there is a
     // currentFiber that is already rendered (isRendered is true), so we are
     // about to be mounted
@@ -506,6 +505,7 @@ export class Component<Props extends {} = any, T extends Env = Env> {
     const __owl__ = this.__owl__;
 
     __owl__.status = STATUS.MOUNTED;
+    __owl__.currentFiber = null;
     this.mounted();
     if (__owl__.mountedCB) {
       __owl__.mountedCB();

src/component/fiber.ts

@@ -198,7 +198,6 @@ export class Fiber {
     // build patchQueue
     const patchQueue: Fiber[] = [];
     const doWork: (Fiber) => Fiber | null = function (f) {
-      f.component.__owl__.currentFiber = null;
       patchQueue.push(f);
       return f.child;
     };
@@ -256,6 +255,10 @@ export class Fiber {
           component.__owl__.pvnode!.elm = component.__owl__.vnode!.elm;
         }
       }
+      const compOwl = component.__owl__;
+      if (fiber === compOwl.currentFiber) {
+        compOwl.currentFiber = null;
+      }
     }
 
     // insert into the DOM (mount case)

src/config.ts

@@ -28,6 +28,8 @@ Object.defineProperty(config, "mode", {
 
 This is not suitable for production use.
 See https://github.com/odoo/owl/blob/master/doc/reference/config.md#mode for more information.`);
+    } else {
+      console.log(`Owl is now running in 'prod' mode.`);
     }
   },
 });

tests/animations.test.ts

@@ -420,29 +420,29 @@ describe("animations", () => {
 
     widget.state.flag = true;
 
-    await nextFrame();
+    await nextFrame(3);
     widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));
     expect(fixture.innerHTML).toBe('<div><span class="">blue</span></div>');
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
 
     widget.state.flag = false;
-    await nextFrame();
+    await nextFrame(3);
     expect(fixture.innerHTML).toBe(
       '<div><span class="chimay-leave-active chimay-leave-to" data-owl-key="__3__">blue</span></div>'
     );
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(1);
 
     widget.state.flag = true;
-    await nextFrame();
+    await nextFrame(3);
     expect(fixture.innerHTML).toBe(
       '<div><span class="chimay-enter-active chimay-enter-to" data-owl-key="__3__">blue</span></div>'
     );
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(2);
 
     widget.state.flag = false;
-    await nextFrame();
+    await nextFrame(3);
     widget.state.flag = true;
-    await nextFrame();
+    await nextFrame(3);
 
     expect(QWeb.utils.transitionInsert).toBeCalledTimes(3);
     widget.el!.querySelector("span")!.dispatchEvent(new Event("transitionend"));

tests/component/async.test.ts

@@ -1388,62 +1388,6 @@ describe("async rendering", () => {
     expect(fixture.innerHTML).toBe("<span>4</span>");
   });
 
-  test("calling render in destroy", async () => {
-    let a: any = null;
-    let c: any = null;
-
-    class C extends Component {
-      static template = xml`
-        <div>
-          <t t-esc="props.fromA"/>
-        </div>`;
-    }
-
-    let flag = false;
-    class B extends Component {
-      static template = xml`<C fromA="props.fromA"/>`;
-      static components = { C };
-
-      setup() {
-        c = this;
-      }
-
-      mounted() {
-        if (flag) {
-          this.render();
-        } else {
-          flag = true;
-        }
-      }
-      willUnmount() {
-        c.render();
-      }
-    }
-
-    class A extends Component {
-      static template = xml`<B t-key="key" fromA="state"/>`;
-      static components = { B };
-      state = "a";
-      key = 1;
-
-      setup() {
-        a = this;
-      }
-    }
-
-    const parent = new A();
-    await parent.mount(fixture);
-    expect(fixture.innerHTML).toBe("<div>a</div>");
-
-    a.state = "A";
-    a.key = 2;
-    await a.render();
-    // this nextTick is critical, otherwise jest may silently swallow errors
-    await nextTick();
-
-    expect(fixture.innerHTML).toBe("<div>A</div>");
-  });
-
   test("change state and call manually render: no unnecessary rendering", async () => {
     class Widget extends Component {
       static template = xml`<div><t t-esc="state.val"/></div>`;

tests/helpers.ts

@@ -41,9 +41,10 @@ export async function nextTick(): Promise<void> {
   await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
 }
 
-export async function nextFrame(): Promise<void> {
+export async function nextFrame(numberOfAnimationFrames: number = 2): Promise<void> {
-  await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
+  for (let i = 0; i < numberOfAnimationFrames; i++) {
-  await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
+    await new Promise((resolve) => scheduler.requestAnimationFrame(resolve));
+  }
 }
 
 export function makeTestFixture() {

tsconfig.json

@@ -13,8 +13,8 @@
   // "compileOnSave": false,                                    // Signals to the IDE to generate all files for a given tsconfig.json upon saving.
   "compilerOptions": {
                                                                 // Main options
-    "target": "es2017",                                         // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
+    "target": "esnext",                                         // Specify ECMAScript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'.
-    "module": "es6",                                         // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
+    "module": "esnext",                                         // Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'ESNext'.
     // "lib": ["esnext", "dom"],                                // Specify library files to be included in the compilation.
     // "allowJs": false,                                        // Allow javascript files to be compiled.
     // "checkJs": false,                                        // Report errors in .js files.