NextERP/owl
2
0
Fork 0
mirror of https://github.com/odoo/owl.git synced 2025-10-06 19:59:41 +07:00
Code Issues Packages Projects Releases Wiki Activity
Files
dbee8f50d15839f9d6988b1c87ad1607469c30e9
owl/tests/components/concurrency.test.ts
T
Lucas Perais (lpe) dbee8f50d1 [FIX] components: cascading render after microtaskTick (makeChildFiber) 
Co-authored-by: Samuel Degueldre <sad@odoo.com>
Co-authored-by: François Georis <fge@odoo.com>
2022-01-19 09:23:17 +01:00

3288 lines
84 KiB
TypeScript
Raw Blame History

import {
App,
Component,
mount,
onMounted,
onWillStart,
onWillUnmount,
onWillUpdateProps,
useState,
xml,
} from "../../src";
import { Fiber } from "../../src/component/fibers";
import { Scheduler } from "../../src/component/scheduler";
import { status } from "../../src/component/status";
import {
makeDeferred,
makeTestFixture,
nextMicroTick,
nextTick,
snapshotEverything,
useLogLifecycle,
} from "../helpers";
let fixture: HTMLElement;
snapshotEverything();
beforeEach(() => {
fixture = makeTestFixture();
});
// following code is there to prevent memory leaks in the scheduled tasks
let lastScheduler: Scheduler;
const addFiber = Scheduler.prototype.addFiber;
Scheduler.prototype.addFiber = function (fiber: Fiber) {
lastScheduler = this;
return addFiber.call(this, fiber);
};
afterEach(() => {
if (lastScheduler && lastScheduler.tasks.size > 0) {
throw new Error("we got a memory leak...");
}
});
describe("async rendering", () => {
test("destroying a widget before start is over", async () => {
let def = makeDeferred();
let w: any = null;
class W extends Component {
static template = xml`<div/>`;
setup() {
useLogLifecycle();
expect(status(this)).toBe("new");
w = this;
onWillStart(() => def);
}
}
const app = new App(W);
app.mount(fixture);
expect(status(w)).toBe("new");
app.destroy();
expect(status(w)).toBe("destroyed");
def.resolve();
await nextTick();
expect(status(w)).toBe("destroyed");
expect(["W:setup", "W:willStart", "W:willDestroy"]).toBeLogged();
});
});
test("destroying/recreating a subwidget with different props (if start is not over)", async () => {
let def = makeDeferred();
let n = 0;
class Child extends Component {
static template = xml`<span>child:<t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
n++;
onWillStart(() => def);
}
}
class W extends Component {
static template = xml`
<div>
<t t-if="state.val > 1"><Child val="state.val"/></t>
</div>`;
static components = { Child };
state = useState({ val: 1 });
setup() {
useLogLifecycle();
}
}
const w = await mount(W, fixture);
expect(["W:setup", "W:willStart", "W:willRender", "W:rendered", "W:mounted"]).toBeLogged();
expect(n).toBe(0);
w.state.val = 2;
await nextMicroTick();
await nextMicroTick();
expect(n).toBe(1);
expect(["W:willRender", "Child:setup", "Child:willStart", "W:rendered"]).toBeLogged();
w.state.val = 3;
await nextMicroTick();
await nextMicroTick();
expect(n).toBe(2);
expect([
"W:willRender",
"Child:willDestroy",
"Child:setup",
"Child:willStart",
"W:rendered",
]).toBeLogged();
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>child:3</span></div>");
expect(Object.values(w.__owl__.children).length).toBe(1);
expect([
"Child:willRender",
"Child:rendered",
"W:willPatch",
"Child:mounted",
"W:patched",
]).toBeLogged();
});
test("creating two async components, scenario 1", async () => {
let defA = makeDeferred();
let defB = makeDeferred();
let nbRenderings: number = 0;
class ChildA extends Component {
static template = xml`<span><t t-esc="getValue()"/></span>`;
setup() {
useLogLifecycle();
onWillStart(() => defA);
}
getValue() {
nbRenderings++;
return "a";
}
}
class ChildB extends Component {
static template = xml`<span>b</span>`;
setup() {
useLogLifecycle();
onWillStart(() => defB);
}
}
class Parent extends Component {
static template = xml`
<t t-if="state.flagA"><ChildA /></t>
<t t-if="state.flagB"><ChildB /></t>`;
static components = { ChildA, ChildB };
state = useState({ flagA: false, flagB: false });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Parent:rendered",
"Parent:mounted",
]).toBeLogged();
expect(fixture.innerHTML).toBe("");
parent.state.flagA = true;
await nextTick();
expect(["Parent:willRender", "ChildA:setup", "ChildA:willStart", "Parent:rendered"]).toBeLogged();
expect(fixture.innerHTML).toBe("");
parent.state.flagB = true;
await nextTick();
expect(fixture.innerHTML).toBe("");
expect([
"Parent:willRender",
"ChildA:willDestroy",
"ChildA:setup",
"ChildA:willStart",
"ChildB:setup",
"ChildB:willStart",
"Parent:rendered",
]).toBeLogged();
defB.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("");
expect(nbRenderings).toBe(0);
expect(["ChildB:willRender", "ChildB:rendered"]).toBeLogged();
defA.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<span>a</span><span>b</span>");
expect(nbRenderings).toBe(1);
expect([
"ChildA:willRender",
"ChildA:rendered",
"Parent:willPatch",
"ChildB:mounted",
"ChildA:mounted",
"Parent:patched",
]).toBeLogged();
});
test("creating two async components, scenario 2", async () => {
let defA = makeDeferred();
let defB = makeDeferred();
class ChildA extends Component {
static template = xml`<span>a<t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defA);
}
}
class ChildB extends Component {
static template = xml`<span>b<t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
onWillStart(() => defB);
}
}
class Parent extends Component {
static template = xml`
<div>
<ChildA val="state.valA"/>
<t t-if="state.flagB"><ChildB val="state.valB"/></t>
</div>`;
static components = { ChildA, ChildB };
state = useState({ valA: 1, valB: 2, flagB: false });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"ChildA:setup",
"ChildA:willStart",
"Parent:rendered",
"ChildA:willRender",
"ChildA:rendered",
"ChildA:mounted",
"Parent:mounted",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
parent.state.valA = 2;
await nextTick();
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
parent.state.flagB = true;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
expect([
"Parent:willRender",
"ChildA:willUpdateProps",
"ChildB:setup",
"ChildB:willStart",
"Parent:rendered",
]).toBeLogged();
defB.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
expect(["ChildB:willRender", "ChildB:rendered"]).toBeLogged();
defA.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a2</span><span>b2</span></div>");
expect([
"ChildA:willRender",
"ChildA:rendered",
"Parent:willPatch",
"ChildA:willPatch",
"ChildB:mounted",
"ChildA:patched",
"Parent:patched",
]).toBeLogged();
});
test("creating two async components, scenario 3 (patching in the same frame)", async () => {
let defA = makeDeferred();
let defB = makeDeferred();
class ChildA extends Component {
static template = xml`<span>a<t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defA);
}
}
class ChildB extends Component {
static template = xml`<span>b<t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
onWillStart(() => defB);
}
}
class Parent extends Component {
static template = xml`
<div>
<ChildA val="state.valA"/>
<t t-if="state.flagB"><ChildB val="state.valB"/></t>
</div>`;
static components = { ChildA, ChildB };
state = useState({ valA: 1, valB: 2, flagB: false });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"ChildA:setup",
"ChildA:willStart",
"Parent:rendered",
"ChildA:willRender",
"ChildA:rendered",
"ChildA:mounted",
"Parent:mounted",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
parent.state.valA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
parent.state.flagB = true;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
expect([
"Parent:willRender",
"ChildA:willUpdateProps",
"ChildB:setup",
"ChildB:willStart",
"Parent:rendered",
]).toBeLogged();
defB.resolve();
expect(fixture.innerHTML).toBe("<div><span>a1</span></div>");
expect([]).toBeLogged();
defA.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>a2</span><span>b2</span></div>");
expect([
"ChildB:willRender",
"ChildB:rendered",
"ChildA:willRender",
"ChildA:rendered",
"Parent:willPatch",
"ChildA:willPatch",
"ChildB:mounted",
"ChildA:patched",
"Parent:patched",
]).toBeLogged();
});
test("update a sub-component twice in the same frame", async () => {
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
class ChildA extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
setup() {
onWillUpdateProps(() => defs[index++]);
useLogLifecycle();
}
}
class Parent extends Component {
static template = xml`<div><ChildA val="state.valA"/></div>`;
static components = { ChildA };
state = useState({ valA: 1 });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"ChildA:setup",
"ChildA:willStart",
"Parent:rendered",
"ChildA:willRender",
"ChildA:rendered",
"ChildA:mounted",
"Parent:mounted",
]).toBeLogged();
parent.state.valA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
parent.state.valA = 3;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
defs[0].resolve();
await Promise.resolve();
defs[1].resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
expect([
"ChildA:willRender",
"ChildA:rendered",
"Parent:willPatch",
"ChildA:willPatch",
"ChildA:patched",
"Parent:patched",
]).toBeLogged();
});
test("update a sub-component twice in the same frame, 2", async () => {
class ChildA extends Component {
static template = xml`<span><t t-esc="val()"/></span>`;
setup() {
useLogLifecycle();
}
val() {
return this.props.val;
}
}
class Parent extends Component {
static template = xml`<div><ChildA val="state.valA"/></div>`;
static components = { ChildA };
state = useState({ valA: 1 });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"ChildA:setup",
"ChildA:willStart",
"Parent:rendered",
"ChildA:willRender",
"ChildA:rendered",
"ChildA:mounted",
"Parent:mounted",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
parent.state.valA = 2;
await nextMicroTick();
await nextMicroTick();
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
await nextMicroTick();
// For an unknown reason, this test fails on windows without the next microtick. It works
// in linux and osx, but fails on at least this machine.
// I do not see anything harmful in waiting an extra tick. But it is annoying to not
// know what is different.
await nextMicroTick();
expect(["ChildA:willRender", "ChildA:rendered"]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
parent.state.valA = 3;
await nextMicroTick();
await nextMicroTick();
expect(["Parent:willRender", "ChildA:willUpdateProps", "Parent:rendered"]).toBeLogged();
await nextMicroTick();
// same as above
await nextMicroTick();
expect(["ChildA:willRender", "ChildA:rendered"]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>3</span></div>");
expect(["Parent:willPatch", "ChildA:willPatch", "ChildA:patched", "Parent:patched"]).toBeLogged();
});
test("properly behave when destroyed/unmounted while rendering ", async () => {
const def = makeDeferred();
class SubChild extends Component {
static template = xml`<div/>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => {
return def;
});
}
}
class Child extends Component {
static template = xml`<div><SubChild /></div>`;
static components = { SubChild };
setup() {
useLogLifecycle();
}
}
class Parent extends Component {
static template = xml`
<div><t t-if="state.flag"><Child val="state.val"/></t></div>`;
static components = { Child };
state = useState({ flag: true, val: "Framboise Lindemans" });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><div><div></div></div></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"SubChild:setup",
"SubChild:willStart",
"Child:rendered",
"SubChild:willRender",
"SubChild:rendered",
"SubChild:mounted",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
// this change triggers a rendering of the parent. This rendering is delayed,
// because child is now waiting for def to be resolved
parent.state.val = "Framboise Girardin";
await nextTick();
expect(fixture.innerHTML).toBe("<div><div><div></div></div></div>");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"SubChild:willUpdateProps",
"Child:rendered",
]).toBeLogged();
// with this, we remove child, and subchild, even though it is not finished
// rendering from previous changes
parent.state.flag = false;
await nextTick();
expect(fixture.innerHTML).toBe("<div></div>");
expect([
"Parent:willRender",
"Parent:rendered",
"Parent:willPatch",
"Child:willUnmount",
"SubChild:willUnmount",
"SubChild:willDestroy",
"Child:willDestroy",
"Parent:patched",
]).toBeLogged();
// we now resolve def, so the child rendering is now complete.
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div></div>");
expect([]).toBeLogged();
});
test("rendering component again in next microtick", async () => {
class Child extends Component {
static template = xml`<div>Child</div>`;
setup() {
useLogLifecycle();
}
}
class Parent extends Component {
static template = xml`
<div>
<button t-on-click="onClick">Click</button>
<t t-if="env.config.flag"><Child/></t>
</div>`;
static components = { Child };
setup() {
useLogLifecycle();
}
async onClick() {
this.env.config.flag = true;
this.render();
await Promise.resolve();
this.render();
}
}
const env = { config: { flag: false } };
await mount(Parent, fixture, { env });
expect(fixture.innerHTML).toBe("<div><button>Click</button></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Parent:rendered",
"Parent:mounted",
]).toBeLogged();
fixture.querySelector("button")!.click();
await nextTick();
expect(fixture.innerHTML).toBe("<div><button>Click</button><div>Child</div></div>");
expect([
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Parent:willRender",
"Child:willDestroy",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:mounted",
"Parent:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 1", async () => {
const def = makeDeferred();
let stateB: any = null;
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="someValue()"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => def);
}
someValue() {
return this.props.fromB;
}
}
ComponentC.prototype.someValue = jest.fn(ComponentC.prototype.someValue);
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
static components = { ComponentC };
state = useState({ fromB: "b" });
setup() {
stateB = this.state;
useLogLifecycle();
}
}
class ComponentA extends Component {
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
static components = { ComponentB };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
stateB.fromB = "c";
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
expect(ComponentC.prototype.someValue).toBeCalledTimes(1);
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>2c</span></p></div>");
expect(ComponentC.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:willPatch",
"ComponentC:patched",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 2", async () => {
// this test asserts that a rendering initiated before another one, and that
// ends after it, is re-mapped to that second rendering
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
let stateB: any = null;
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromB"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defs[index++]);
}
}
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
static components = { ComponentC };
state = useState({ fromB: "b" });
setup() {
useLogLifecycle();
stateB = this.state;
}
}
class ComponentA extends Component {
static template = xml`<div><t t-esc="state.fromA"/><ComponentB fromA="state.fromA"/></div>`;
static components = { ComponentB };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div>1<p><span>1b</span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div>1<p><span>1b</span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
stateB.fromB = "c";
await nextTick();
expect(fixture.innerHTML).toBe("<div>1<p><span>1b</span></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
defs[1].resolve(); // resolve rendering initiated in B
await nextTick();
expect(fixture.innerHTML).toBe("<div>2<p><span>2c</span></p></div>");
expect([
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:willPatch",
"ComponentC:patched",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
defs[0].resolve(); // resolve rendering initiated in A
await nextTick();
expect(fixture.innerHTML).toBe("<div>2<p><span>2c</span></p></div>");
expect([]).toBeLogged();
});
test("concurrent renderings scenario 2bis", async () => {
const defs = [makeDeferred(), makeDeferred()];
let index = 0;
let stateB: any = null;
class ComponentC extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromB"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defs[index++]);
}
}
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" fromB="state.fromB" /></p>`;
static components = { ComponentC };
state = useState({ fromB: "b" });
setup() {
useLogLifecycle();
stateB = this.state;
}
}
class ComponentA extends Component {
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
static components = { ComponentB };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
stateB.fromB = "c";
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
]).toBeLogged();
defs[0].resolve(); // resolve rendering initiated in A
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>1b</span></p></div>"); // TODO: is this what we want?? 2b could be ok too
expect([]).toBeLogged();
defs[1].resolve(); // resolve rendering initiated in B
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>2c</span></p></div>");
expect([
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:willPatch",
"ComponentC:patched",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 3", async () => {
const defB = makeDeferred();
const defsD = [makeDeferred(), makeDeferred()];
let index = 0;
let stateC: any = null;
class ComponentD extends Component {
static template = xml`<i><t t-esc="props.fromA"/><t t-esc="someValue()"/></i>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defsD[index++]);
}
someValue() {
return this.props.fromC;
}
}
ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
class ComponentC extends Component {
static template = xml`<span><ComponentD fromA="props.fromA" fromC="state.fromC" /></span>`;
static components = { ComponentD };
state = useState({ fromC: "c" });
setup() {
useLogLifecycle();
stateC = this.state;
}
}
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" /></p>`;
static components = { ComponentC };
setup() {
useLogLifecycle();
onWillUpdateProps(() => defB);
}
}
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentD:setup",
"ComponentD:willStart",
"ComponentC:rendered",
"ComponentD:willRender",
"ComponentD:rendered",
"ComponentD:mounted",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
stateC.fromC = "d";
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
]).toBeLogged();
defB.resolve(); // resolve rendering initiated in A (still blocked in D)
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
]).toBeLogged();
defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
await nextTick();
expect(ComponentD.prototype.someValue).toBeCalledTimes(1);
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([]).toBeLogged();
defsD[1].resolve(); // completely resolve rendering initiated in A
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentD:willRender",
"ComponentD:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:willPatch",
"ComponentD:willPatch",
"ComponentD:patched",
"ComponentC:patched",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 4", async () => {
const defB = makeDeferred();
const defsD = [makeDeferred(), makeDeferred()];
let index = 0;
let stateC: any = null;
class ComponentD extends Component {
static template = xml`<i><t t-esc="props.fromA"/><t t-esc="someValue()"/></i>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defsD[index++]);
}
someValue() {
return this.props.fromC;
}
}
ComponentD.prototype.someValue = jest.fn(ComponentD.prototype.someValue);
class ComponentC extends Component {
static template = xml`<span><ComponentD fromA="props.fromA" fromC="state.fromC" /></span>`;
static components = { ComponentD };
state = useState({ fromC: "c" });
setup() {
useLogLifecycle();
stateC = this.state;
}
}
class ComponentB extends Component {
static template = xml`<p><ComponentC fromA="props.fromA" /></p>`;
static components = { ComponentC };
setup() {
useLogLifecycle();
onWillUpdateProps(() => defB);
}
}
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentD:setup",
"ComponentD:willStart",
"ComponentC:rendered",
"ComponentD:willRender",
"ComponentD:rendered",
"ComponentD:mounted",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
stateC.fromC = "d";
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
]).toBeLogged();
defB.resolve(); // resolve rendering initiated in A (still blocked in D)
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>1c</i></span></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:willUpdateProps",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
]).toBeLogged();
defsD[1].resolve(); // completely resolve rendering initiated in A
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentD:willRender",
"ComponentD:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:willPatch",
"ComponentD:willPatch",
"ComponentD:patched",
"ComponentC:patched",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
defsD[0].resolve(); // resolve rendering initiated in C (should be ignored)
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span><i>2d</i></span></p></div>");
expect(ComponentD.prototype.someValue).toBeCalledTimes(2);
expect([]).toBeLogged();
});
test("concurrent renderings scenario 5", async () => {
const defsB = [makeDeferred(), makeDeferred()];
let index = 0;
class ComponentB extends Component {
static template = xml`<p><t t-esc="someValue()" /></p>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defsB[index++]);
}
someValue() {
return this.props.fromA;
}
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
component.state.fromA = 3;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
defsB[0].resolve(); // resolve first re-rendering (should be ignored)
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(1);
expect([]).toBeLogged();
defsB[1].resolve(); // resolve second re-rendering
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>3</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 6", async () => {
const defsB = [makeDeferred(), makeDeferred()];
let index = 0;
class ComponentB extends Component {
static template = xml`<p><t t-esc="someValue()" /></p>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => defsB[index++]);
}
someValue() {
return this.props.fromA;
}
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
component.state.fromA = 3;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1</p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
defsB[1].resolve(); // resolve second re-rendering
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>3</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
defsB[0].resolve(); // resolve first re-rendering (should be ignored)
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>3</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(2);
expect([]).toBeLogged();
});
test("concurrent renderings scenario 7", async () => {
class ComponentB extends Component {
static template = xml`<p><t t-esc="props.fromA" /><t t-esc="someValue()" /></p>`;
state = useState({ fromB: "b" });
setup() {
useLogLifecycle();
onWillUpdateProps(() => {
this.state.fromB = "c";
});
}
someValue() {
return this.state.fromB;
}
}
ComponentB.prototype.someValue = jest.fn(ComponentB.prototype.someValue);
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p>1b</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(1);
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>2c</p></div>");
expect(ComponentB.prototype.someValue).toBeCalledTimes(2);
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 8", async () => {
const def = makeDeferred();
let stateB: any = null;
class ComponentB extends Component {
static template = xml`<p><t t-esc="props.fromA" /><t t-esc="state.fromB" /></p>`;
state = useState({ fromB: "b" });
setup() {
useLogLifecycle();
stateB = this.state;
onWillUpdateProps(() => def);
}
}
class ComponentA extends Component {
static components = { ComponentB };
static template = xml`<div><ComponentB fromA="state.fromA"/></div>`;
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p>1b</p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1b</p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
stateB.fromB = "c";
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>1b</p></div>");
expect([]).toBeLogged();
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><p>2c</p></div>");
expect([
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 9", async () => {
// Here is the global idea of this scenario:
// A
// / \
// B C
// |
// D
// A state is updated, triggering a whole re-rendering
// B is async, and blocked
// C (and D) are rendered
// C state is updated, producing a re-rendering of C and D
// this last re-rendering of C should be correctly re-mapped to the whole
// re-rendering
const def = makeDeferred();
let stateC: any = null;
class ComponentD extends Component {
static template = xml`<span><t t-esc="props.fromA"/><t t-esc="props.fromC"/></span>`;
setup() {
useLogLifecycle();
}
}
class ComponentC extends Component {
static template = xml`<p><ComponentD fromA="props.fromA" fromC="state.fromC" /></p>`;
static components = { ComponentD };
state = useState({ fromC: "b1" });
setup() {
stateC = this.state;
useLogLifecycle();
}
}
class ComponentB extends Component {
static template = xml`<b><t t-esc="props.fromA"/></b>`;
setup() {
onWillUpdateProps(() => def);
useLogLifecycle();
}
}
class ComponentA extends Component {
static template = xml`
<div>
<t t-esc="state.fromA"/>
<ComponentB fromA="state.fromA"/>
<ComponentC fromA="state.fromA"/>
</div>`;
static components = { ComponentB, ComponentC };
state = useState({ fromA: "a1" });
setup() {
useLogLifecycle();
}
}
const component = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div>a1<b>a1</b><p><span>a1b1</span></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentD:setup",
"ComponentD:willStart",
"ComponentC:rendered",
"ComponentD:willRender",
"ComponentD:rendered",
"ComponentD:mounted",
"ComponentC:mounted",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
component.state.fromA = "a2";
await nextTick();
expect(fixture.innerHTML).toBe("<div>a1<b>a1</b><p><span>a1b1</span></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentC:willUpdateProps",
"ComponentA:rendered",
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
"ComponentD:willRender",
"ComponentD:rendered",
]).toBeLogged();
stateC.fromC = "b2";
await nextTick();
expect(fixture.innerHTML).toBe("<div>a1<b>a1</b><p><span>a1b1</span></p></div>");
expect([
"ComponentC:willRender",
"ComponentD:willUpdateProps",
"ComponentC:rendered",
"ComponentD:willRender",
"ComponentD:rendered",
]).toBeLogged();
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div>a2<b>a2</b><p><span>a2b2</span></p></div>");
expect([
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentA:willPatch",
"ComponentC:willPatch",
"ComponentD:willPatch",
"ComponentB:willPatch",
"ComponentB:patched",
"ComponentD:patched",
"ComponentC:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 10", async () => {
// Here is the global idea of this scenario:
// A
// |
// B <- async willUpdateProps
// ----- <- conditional (initialy false)
// |
// C <- async willStart
// Render A and B normally
// Change the condition on B to trigger a re-rendering with C (async willStart)
// Change the state on A to trigger a global re-rendering, which is blocked
// in B (async willUpdateProps)
// Resolve the willStart of C: the first re-rendering has been cancelled by
// the global re-rendering, but handlers waiting for the rendering promise to
// resolve might execute and we don't want them to crash/do anything
const defB = makeDeferred();
const defC = makeDeferred();
let stateB: any = null;
let rendered = 0;
class ComponentC extends Component {
static template = xml`<span><t t-esc="value"/></span>`;
setup() {
useLogLifecycle();
onWillStart(() => defC);
}
get value() {
rendered++;
return this.props.value;
}
}
class ComponentB extends Component {
static template = xml`<p><ComponentC t-if="state.hasChild" value="props.value"/></p>`;
state = useState({ hasChild: false });
static components = { ComponentC };
setup() {
useLogLifecycle();
stateB = this.state;
onWillUpdateProps(() => defB);
}
}
class ComponentA extends Component {
static template = xml`<div><ComponentB value="state.value"/></div>`;
static components = { ComponentB };
state = useState({ value: 1 });
setup() {
useLogLifecycle();
}
}
const componentA = await mount(ComponentA, fixture);
expect(fixture.innerHTML).toBe("<div><p></p></div>");
expect([
"ComponentA:setup",
"ComponentA:willStart",
"ComponentA:willRender",
"ComponentB:setup",
"ComponentB:willStart",
"ComponentA:rendered",
"ComponentB:willRender",
"ComponentB:rendered",
"ComponentB:mounted",
"ComponentA:mounted",
]).toBeLogged();
stateB.hasChild = true;
await nextTick();
expect(fixture.innerHTML).toBe("<div><p></p></div>");
expect([
"ComponentB:willRender",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
]).toBeLogged();
componentA.state.value = 2;
defC.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><p></p></div>");
expect([
"ComponentA:willRender",
"ComponentB:willUpdateProps",
"ComponentA:rendered",
]).toBeLogged();
defB.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><p><span>2</span></p></div>");
expect(rendered).toBe(1);
expect([
"ComponentB:willRender",
"ComponentC:willDestroy",
"ComponentC:setup",
"ComponentC:willStart",
"ComponentB:rendered",
"ComponentC:willRender",
"ComponentC:rendered",
"ComponentA:willPatch",
"ComponentB:willPatch",
"ComponentC:mounted",
"ComponentB:patched",
"ComponentA:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 11", async () => {
// This scenario is the following: we have a component being updated (by props),
// and then rendered (render method), but before the willUpdateProps resolves.
// We check that in that case, the return value of the render method is a promise
// that is resolved when the component is completely rendered (so, properly
// remapped to the promise of the ambient rendering)
const def = makeDeferred();
let child: any = null;
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/>|<t t-esc="val"/></span>`;
val = 3;
setup() {
useLogLifecycle();
onWillUpdateProps(() => {
child = this;
return def;
});
}
}
class Parent extends Component {
static template = xml`<div><Child val="state.valA"/></div>`;
static components = { Child };
state = useState({ valA: 1 });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><span>1|3</span></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
parent.state.valA = 2;
await nextTick();
setTimeout(() => {
def.resolve();
}, 20);
child.val = 5;
child.render();
await def;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>2|5</span></div>");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:willPatch",
"Child:patched",
"Parent:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 12", async () => {
// In this scenario, we have a parent component that will be re-rendered
// several times simultaneously:
// - once in a tick: it will create a new fiber, render it, but will have
// to wait for its child (blocking) to be completed
// - twice in the next tick: it will twice reuse the same fiber (as it is
// rendered but not completed yet)
const def = makeDeferred();
class Child extends Component {
static template = xml`<span><t t-esc="props.val"/></span>`;
setup() {
useLogLifecycle();
onWillUpdateProps(() => def);
}
}
let rendered = 0;
class Parent extends Component {
static template = xml`<div><Child val="val"/></div>`;
static components = { Child };
state = useState({ val: 1 });
setup() {
useLogLifecycle();
}
get val() {
rendered++;
return this.state.val;
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(rendered).toBe(1);
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
parent.state.val = 2;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(rendered).toBe(2);
expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
parent.state.val = 3;
parent.state.val = 4;
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(rendered).toBe(3);
expect(["Parent:willRender", "Child:willUpdateProps", "Parent:rendered"]).toBeLogged();
def.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div><span>4</span></div>");
expect(rendered).toBe(3);
expect([
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:willPatch",
"Child:patched",
"Parent:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 13", async () => {
let lastChild: any = null;
class Child extends Component {
static template = xml`<span><t t-esc="state.val"/></span>`;
state = useState({ val: 0 });
setup() {
useLogLifecycle();
onMounted(() => {
if (lastChild) {
lastChild.state.val = 0;
}
lastChild = this;
this.state.val = 1;
});
}
}
class Parent extends Component {
static template = xml`
<div>
<Child/>
<Child t-if="state.bool"/>
</div>`;
static components = { Child };
state = useState({ bool: false });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><span>0</span></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
"Child:willRender",
"Child:rendered",
]).toBeLogged();
await nextTick(); // wait for changes triggered in mounted to be applied
expect(fixture.innerHTML).toBe("<div><span>1</span></div>");
expect(["Child:willPatch", "Child:patched"]).toBeLogged();
parent.state.bool = true;
await nextTick(); // wait for this change to be applied
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:willPatch",
"Child:mounted",
"Child:patched",
"Parent:patched",
"Child:willRender",
"Child:rendered",
"Child:willRender",
"Child:rendered",
]).toBeLogged();
await nextTick(); // wait for changes triggered in mounted to be applied
expect(fixture.innerHTML).toBe("<div><span>0</span><span>1</span></div>");
expect(["Child:willPatch", "Child:patched", "Child:willPatch", "Child:patched"]).toBeLogged();
});
test("concurrent renderings scenario 14", async () => {
let b: B | undefined = undefined;
let c: C | undefined = undefined;
class C extends Component {
static template = xml`
<p>
<span t-esc="props.fromA"/>
<span t-esc="props.fromB"/>
<span t-esc="state.fromC"/>
</p>`;
state = useState({ fromC: 3 });
setup() {
useLogLifecycle();
c = this;
}
}
class B extends Component {
static template = xml`<p><C fromB="state.fromB" fromA="props.fromA"/></p>`;
static components = { C };
setup() {
useLogLifecycle();
b = this;
}
state = useState({ fromB: 2 });
}
class A extends Component {
static template = xml`<p><B fromA="state.fromA"/></p>`;
static components = { B };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const a = await mount(A, fixture);
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect([
"A:setup",
"A:willStart",
"A:willRender",
"B:setup",
"B:willStart",
"A:rendered",
"B:willRender",
"C:setup",
"C:willStart",
"B:rendered",
"C:willRender",
"C:rendered",
"C:mounted",
"B:mounted",
"A:mounted",
]).toBeLogged();
// trigger a re-rendering of the whole tree
a.state.fromA += 10;
// wait enough for the whole tree to be re-rendered, but not patched yet
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect([
"A:willRender",
"B:willUpdateProps",
"A:rendered",
"B:willRender",
"C:willUpdateProps",
"B:rendered",
]).toBeLogged();
// trigger a re-rendering from C, which will remap its new fiber
c!.state.fromC += 10;
// trigger a re-rendering from B, which will remap its new fiber as well
b!.state.fromB += 10;
await nextTick();
// at this point, all re-renderings should have been done correctly, and
// the root fiber (A) counter should have been reset to 0, so the DOM should
// have been patched with the updated version of each component
expect(fixture.innerHTML).toBe(
"<p><p><p><span>11</span><span>12</span><span>13</span></p></p></p>"
);
expect([
"C:willRender",
"C:rendered",
"B:willRender",
"C:willUpdateProps",
"B:rendered",
"C:willRender",
"C:rendered",
"A:willPatch",
"B:willPatch",
"C:willPatch",
"C:patched",
"B:patched",
"A:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 15", async () => {
let b: B | undefined = undefined;
let c: C | undefined = undefined;
class C extends Component {
static template = xml`
<p>
<span t-esc="props.fromA"/>
<span t-esc="props.fromB"/>
<span t-esc="state.fromC"/>
</p>`;
state = useState({ fromC: 3 });
setup() {
useLogLifecycle();
c = this;
}
}
class B extends Component {
static template = xml`<p><C fromB="state.fromB" fromA="props.fromA"/></p>`;
static components = { C };
setup() {
useLogLifecycle();
b = this;
}
state = useState({ fromB: 2 });
}
class A extends Component {
static template = xml`<p><B fromA="state.fromA"/></p>`;
static components = { B };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const app = new App(A);
const a = await app.mount(fixture);
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect([
"A:setup",
"A:willStart",
"A:willRender",
"B:setup",
"B:willStart",
"A:rendered",
"B:willRender",
"C:setup",
"C:willStart",
"B:rendered",
"C:willRender",
"C:rendered",
"C:mounted",
"B:mounted",
"A:mounted",
]).toBeLogged();
// trigger a re-rendering of the whole tree
a.state.fromA += 10;
// wait enough for the whole tree to be re-rendered, but not patched yet
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect([
"A:willRender",
"B:willUpdateProps",
"A:rendered",
"B:willRender",
"C:willUpdateProps",
"B:rendered",
]).toBeLogged();
// trigger a re-rendering from C, which will remap its new fiber
c!.state.fromC += 10;
// trigger a re-rendering from B, which will remap its new fiber as well
b!.state.fromB += 10;
// simulate a flush (nothing should have changed as no fiber should have its
// counter to 0)
app.scheduler.flush();
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect([]).toBeLogged();
// wait a bit and simulate another flush (we expect nothing to change as well)
await nextMicroTick();
app.scheduler.flush();
expect(fixture.innerHTML).toBe("<p><p><p><span>1</span><span>2</span><span>3</span></p></p></p>");
expect(["C:willRender", "C:rendered"]).toBeLogged();
await nextTick();
expect(fixture.innerHTML).toBe(
"<p><p><p><span>11</span><span>12</span><span>13</span></p></p></p>"
);
expect([
"B:willRender",
"C:willUpdateProps",
"B:rendered",
"C:willRender",
"C:rendered",
"A:willPatch",
"B:willPatch",
"C:willPatch",
"C:patched",
"B:patched",
"A:patched",
]).toBeLogged();
});
test("concurrent renderings scenario 16", async () => {
let b: B | undefined = undefined;
let c: C | undefined = undefined;
class D extends Component {
static template = xml`D`;
setup() {
useLogLifecycle();
onWillStart(async () => {
await nextTick();
await nextTick();
});
}
}
class C extends Component {
static template = xml`
<t t-esc="props.fromA"/>:<t t-esc="props.fromB"/>:<t t-esc="state.fromC"/>:
<D t-if="state.fromC === 13"/>`;
static components = { D };
state = { fromC: 3 }; // not reactive
setup() {
useLogLifecycle();
c = this;
}
}
class B extends Component {
static template = xml`<C fromB="state.fromB" fromA="props.fromA"/>`;
static components = { C };
setup() {
useLogLifecycle();
b = this;
}
state = { fromB: 2 };
}
class A extends Component {
static template = xml`<B fromA="state.fromA"/>`;
static components = { B };
state = useState({ fromA: 1 });
setup() {
useLogLifecycle();
}
}
const a = await mount(A, fixture);
expect(fixture.innerHTML).toBe("1:2:3: ");
expect([
"A:setup",
"A:willStart",
"A:willRender",
"B:setup",
"B:willStart",
"A:rendered",
"B:willRender",
"C:setup",
"C:willStart",
"B:rendered",
"C:willRender",
"C:rendered",
"C:mounted",
"B:mounted",
"A:mounted",
]).toBeLogged();
// trigger a re-rendering of the whole tree
a.state.fromA += 10;
// wait enough for the whole tree to be re-rendered, but not patched yet
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
expect(fixture.innerHTML).toBe("1:2:3: ");
expect([
"A:willRender",
"B:willUpdateProps",
"A:rendered",
"B:willRender",
"C:willUpdateProps",
"B:rendered",
"C:willRender",
"C:rendered",
]).toBeLogged();
// trigger a re-rendering from C, which will remap its new fiber
c!.state.fromC += 10;
c!.render();
await nextMicroTick();
// trigger a re-rendering from B, which will remap its new fiber as well
b!.state.fromB += 10;
b!.render();
await nextTick();
expect([
"C:willRender",
"D:setup",
"D:willStart",
"C:rendered",
"B:willRender",
"C:willUpdateProps",
"B:rendered",
"C:willRender",
"D:willDestroy",
"D:setup",
"D:willStart",
"C:rendered",
]).toBeLogged();
// at this point, C rendering is still pending, and nothing should have been
// updated yet.
expect(fixture.innerHTML).toBe("1:2:3: ");
await nextTick();
await nextTick();
expect(fixture.innerHTML).toBe("11:12:13: D");
expect([
"D:willRender",
"D:rendered",
"A:willPatch",
"B:willPatch",
"C:willPatch",
"D:mounted",
"C:patched",
"B:patched",
"A:patched",
]).toBeLogged();
});
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() {
useLogLifecycle();
c = this;
onMounted(() => {
if (flag) {
this.render();
} else {
flag = true;
}
});
onWillUnmount(() => {
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 app = new App(A);
await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div>a</div>");
expect(["B:setup", "B:willStart", "B:willRender", "B:rendered", "B:mounted"]).toBeLogged();
a.state = "A";
a.key = 2;
a.render();
await nextTick();
// this nextTick is critical, otherwise jest may silently swallow errors
await nextTick();
expect([
"B:setup",
"B:willStart",
"B:willRender",
"B:rendered",
"B:willUnmount",
"B:willDestroy",
"B:mounted",
"B:willRender",
"B:rendered",
"B:willPatch",
"B:patched",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div>A</div>");
});
test("change state and call manually render: no unnecessary rendering", async () => {
let numberOfRender = 0;
class Test extends Component {
static template = xml`<div><t t-esc="value"/></div>`;
state = useState({ val: 1 });
setup() {
useLogLifecycle();
}
get value() {
numberOfRender++;
return this.state.val;
}
}
const test = await mount(Test, fixture);
expect([
"Test:setup",
"Test:willStart",
"Test:willRender",
"Test:rendered",
"Test:mounted",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div>1</div>");
expect(numberOfRender).toBe(1);
test.state.val = 2;
test.render();
await nextTick();
expect(fixture.innerHTML).toBe("<div>2</div>");
expect(numberOfRender).toBe(2);
expect(["Test:willRender", "Test:rendered", "Test:willPatch", "Test:patched"]).toBeLogged();
});
test("changing state before first render does not trigger a render", async () => {
let renders = 0;
class TestW extends Component {
static template = xml`<div t-esc="value"/>`;
state = useState({ drinks: 1 });
setup() {
useLogLifecycle();
this.state.drinks++;
onWillStart(() => {
this.state.drinks++;
});
}
get value() {
renders++;
return this.state.drinks;
}
}
await mount(TestW, fixture);
expect([
"TestW:setup",
"TestW:willStart",
"TestW:willRender",
"TestW:rendered",
"TestW:mounted",
]).toBeLogged();
await nextTick();
expect(renders).toBe(1);
expect(fixture.innerHTML).toBe("<div>3</div>");
expect([]).toBeLogged();
});
test("changing state before first render does not trigger a render (with parent)", async () => {
let renders = 0;
class TestW extends Component {
static template = xml`<div t-esc="value"/>`;
state = useState({ drinks: 1 });
setup() {
useLogLifecycle();
this.state.drinks++;
onWillStart(() => {
this.state.drinks++;
});
}
get value() {
renders++;
return this.state.drinks;
}
}
class Parent extends Component {
static components = { TestW };
static template = xml`<div><TestW t-if="state.flag"/></div>`;
setup() {
useLogLifecycle();
}
state = useState({ flag: false });
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Parent:rendered",
"Parent:mounted",
]).toBeLogged();
parent.state.flag = true;
await nextTick();
expect(fixture.innerHTML).toBe("<div><div>3</div></div>");
expect(renders).toBe(1);
expect([
"Parent:willRender",
"TestW:setup",
"TestW:willStart",
"Parent:rendered",
"TestW:willRender",
"TestW:rendered",
"Parent:willPatch",
"TestW:mounted",
"Parent:patched",
]).toBeLogged();
});
test("two renderings initiated between willPatch and patched", async () => {
let parent: any = null;
class Panel extends Component {
static template = xml`<abc><t t-esc="props.val"/><t t-esc="mounted" /></abc>`;
mounted: any;
setup() {
useLogLifecycle();
onMounted(() => {
this.mounted = "Mounted";
parent.render();
});
onWillUnmount(() => parent.render());
}
}
// Main root component
class Parent extends Component {
static template = xml`<div><Panel t-key="'panel_' + state.panel" val="state.panel" t-if="state.flag"/></div>`;
static components = { Panel };
state = useState({ panel: "Panel1", flag: true });
setup() {
useLogLifecycle();
parent = this;
}
}
await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div><abc>Panel1</abc></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Panel:setup",
"Panel:willStart",
"Parent:rendered",
"Panel:willRender",
"Panel:rendered",
"Panel:mounted",
"Parent:mounted",
"Parent:willRender",
"Panel:willUpdateProps",
"Parent:rendered",
]).toBeLogged();
await nextTick();
expect([
"Panel:willRender",
"Panel:rendered",
"Parent:willPatch",
"Panel:willPatch",
"Panel:patched",
"Parent:patched",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div><abc>Panel1Mounted</abc></div>");
parent.state.panel = "Panel2";
await nextTick();
expect(fixture.innerHTML).toBe("<div><abc>Panel2</abc></div>");
expect([
"Parent:willRender",
"Panel:setup",
"Panel:willStart",
"Parent:rendered",
"Panel:willRender",
"Panel:rendered",
"Parent:willPatch",
"Panel:willUnmount",
"Panel:willDestroy",
"Panel:mounted",
"Parent:patched",
"Parent:willRender",
"Panel:willUpdateProps",
"Parent:rendered",
]).toBeLogged();
await nextTick();
expect(fixture.innerHTML).toBe("<div><abc>Panel2Mounted</abc></div>");
expect([
"Panel:willRender",
"Panel:rendered",
"Parent:willPatch",
"Panel:willPatch",
"Panel:patched",
"Parent:patched",
]).toBeLogged();
parent.state.flag = false;
await nextTick();
expect(fixture.innerHTML).toBe("<div></div>");
expect([
"Parent:willRender",
"Parent:rendered",
"Parent:willPatch",
"Panel:willUnmount",
"Panel:willDestroy",
"Parent:patched",
"Parent:willRender",
"Parent:rendered",
]).toBeLogged();
await nextTick();
expect(fixture.innerHTML).toBe("<div></div>");
expect(["Parent:willPatch", "Parent:patched"]).toBeLogged();
});
test("parent and child rendered at exact same time", async () => {
let child: any = null;
class Child extends Component {
static template = xml`<t t-esc="props.value"/>`;
setup() {
child = this;
useLogLifecycle();
}
}
class Parent extends Component {
static template = xml`<Child value="state.value"/>`;
static components = { Child };
state = { value: 0 };
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("0");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
parent.state.value = 1;
parent.render();
child.render();
await nextTick();
expect(fixture.innerHTML).toBe("1");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:willPatch",
"Child:patched",
"Parent:patched",
]).toBeLogged();
});
test("delay willUpdateProps", async () => {
let promise: any = null;
let child: any;
class Child extends Component {
static template = xml`<t t-esc="props.value"/>_<t t-esc="state.int" />`;
state: any;
setup() {
useLogLifecycle();
child = this;
this.state = useState({ int: 0 });
onWillUpdateProps(async () => {
await promise;
this.state.int++;
});
}
}
class Parent extends Component {
static template = xml`<Child value="state.value"/>`;
static components = { Child };
state = { value: 0 };
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("0_0");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
promise = makeDeferred();
const prom1 = promise;
parent.state.value = 1;
child.render(); // trigger a root rendering first
parent.render();
await nextTick();
expect(fixture.innerHTML).toBe("0_0");
expect([
"Child:willRender",
"Child:rendered",
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
]).toBeLogged();
promise = makeDeferred();
const prom2 = promise;
parent.state.value = 2;
parent.render();
await nextTick();
expect(fixture.innerHTML).toBe("0_0");
prom2.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("2_1");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Parent:willPatch",
"Child:willPatch",
"Child:patched",
"Parent:patched",
]).toBeLogged();
prom1.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("2_2");
expect(["Child:willRender", "Child:rendered", "Child:willPatch", "Child:patched"]).toBeLogged();
});
test("delay willUpdateProps with rendering grandchild", async () => {
// This test is a bit tricky, a Parent and one of his grandchildren render while another of the parent's
// grandchildren is awaiting its willUpdateProps.
// Technically RootFibers will be downgraded in ChildFibers, keeping the same container RootFiber.
// This case happens when Parent and ReaciveChild react together to a change in a reactive state/
let promise: any = null;
let child: any;
let reactiveChild: any;
// Delayed willUpdateProps
class DelayedChild extends Component {
static template = xml`<t t-esc="props.value"/>_<t t-esc="state.int" />`;
state: any;
setup() {
useLogLifecycle();
child = this;
this.state = useState({ int: 0 });
onWillUpdateProps(async () => {
await promise;
this.state.int++;
});
}
}
// A sibling of the delayed component, we will trigger a render on it manually
class ReactiveChild extends Component {
static template = xml`<div />`;
setup() {
reactiveChild = this;
useLogLifecycle();
}
}
// The parent of everybody, we also manually trigger render on it.
class Parent extends Component {
static template = xml`<DelayedChild value="props.state.value"/><ReactiveChild />`;
static components = { DelayedChild, ReactiveChild };
setup() {
useLogLifecycle();
}
}
class GrandParent extends Component {
static template = xml`<Parent state="state"/>`;
static components = { Parent };
state = { value: 0 };
}
const parent = await mount(GrandParent, fixture);
expect(fixture.innerHTML).toBe("0_0<div></div>");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"DelayedChild:setup",
"DelayedChild:willStart",
"ReactiveChild:setup",
"ReactiveChild:willStart",
"Parent:rendered",
"DelayedChild:willRender",
"DelayedChild:rendered",
"ReactiveChild:willRender",
"ReactiveChild:rendered",
"ReactiveChild:mounted",
"DelayedChild:mounted",
"Parent:mounted",
]).toBeLogged();
promise = makeDeferred();
const prom1 = promise;
parent.state.value = 1;
child.render(); // trigger a root rendering first
parent.render();
reactiveChild.render();
await nextTick();
expect(fixture.innerHTML).toBe("0_0<div></div>");
expect([
"DelayedChild:willRender",
"DelayedChild:rendered",
"Parent:willUpdateProps",
"ReactiveChild:willRender",
"ReactiveChild:rendered",
"Parent:willRender",
"DelayedChild:willUpdateProps",
"ReactiveChild:willUpdateProps",
"Parent:rendered",
"ReactiveChild:willRender",
"ReactiveChild:rendered",
]).toBeLogged();
promise = makeDeferred();
const prom2 = promise;
child.render(); // trigger a root rendering first
parent.state.value = 2;
parent.render();
reactiveChild.render();
await nextTick();
expect(fixture.innerHTML).toBe("0_0<div></div>");
expect([
"Parent:willUpdateProps",
"ReactiveChild:willRender",
"ReactiveChild:rendered",
"Parent:willRender",
"DelayedChild:willUpdateProps",
"ReactiveChild:willUpdateProps",
"Parent:rendered",
"ReactiveChild:willRender",
"ReactiveChild:rendered",
]).toBeLogged();
prom2.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("2_1<div></div>");
expect([
"DelayedChild:willRender",
"DelayedChild:rendered",
"Parent:willPatch",
"ReactiveChild:willPatch",
"DelayedChild:willPatch",
"DelayedChild:patched",
"ReactiveChild:patched",
"Parent:patched",
]).toBeLogged();
prom1.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("2_2<div></div>");
expect([
"DelayedChild:willRender",
"DelayedChild:rendered",
"DelayedChild:willPatch",
"DelayedChild:patched",
]).toBeLogged();
});
test("two sequential renderings before an animation frame", async () => {
class Child extends Component {
static template = xml`<t t-esc="props.value"/>`;
setup() {
useLogLifecycle();
}
}
class Parent extends Component {
static template = xml`<Child value="state.value"/>`;
static components = { Child };
state = useState({ value: 0 });
setup() {
useLogLifecycle();
}
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("0");
expect([
"Parent:setup",
"Parent:willStart",
"Parent:willRender",
"Child:setup",
"Child:willStart",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
"Child:mounted",
"Parent:mounted",
]).toBeLogged();
parent.state.value = 1;
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
expect(fixture.innerHTML).toBe("0");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
]).toBeLogged();
parent.state.value = 2;
// enough microticks to wait for render + willupdateprops
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
await nextMicroTick();
expect(fixture.innerHTML).toBe("0");
expect([
"Parent:willRender",
"Child:willUpdateProps",
"Parent:rendered",
"Child:willRender",
"Child:rendered",
]).toBeLogged();
await nextTick();
// we check here that the willPatch and patched hooks are called only once
expect(["Parent:willPatch", "Child:willPatch", "Child:patched", "Parent:patched"]).toBeLogged();
});
test("t-key on dom node having a component", async () => {
let def: any;
class Child extends Component {
static template = xml`<t t-esc="props.key" />`;
setup() {
onWillStart(() => def);
useLogLifecycle(this.props.key);
}
}
class Parent extends Component {
key = 1;
myComp = Child;
static template = xml`<div t-key="key"><t t-component="myComp" key="key" /></div>`;
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div>1</div>");
def = makeDeferred();
parent.key = 2;
parent.render();
await nextTick();
expect([
"Child (1):setup",
"Child (1):willStart",
"Child (1):willRender",
"Child (1):rendered",
"Child (1):mounted",
"Child (2):setup",
"Child (2):willStart",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div>1</div>");
parent.key = 3;
parent.render();
const prevDef = def;
def = undefined;
parent.key = 3;
parent.render();
prevDef.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div>3</div>");
expect([
"Child (3):setup",
"Child (3):willStart",
"Child (3):willRender",
"Child (3):rendered",
"Child (1):willUnmount",
"Child (1):willDestroy",
"Child (2):willDestroy",
"Child (3):mounted",
]).toBeLogged();
});
test("t-key on dynamic async component (toggler is never patched)", async () => {
let def: any;
class Child extends Component {
static template = xml`<div t-esc="props.key" />`;
setup() {
onWillStart(() => def);
useLogLifecycle(this.props.key);
}
}
class Parent extends Component {
key = 1;
myComp = Child;
static template = xml`<t t-component="myComp" t-key="key" key="key" />`;
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div>1</div>");
def = makeDeferred();
parent.key = 2;
parent.render();
await nextTick();
expect([
"Child (1):setup",
"Child (1):willStart",
"Child (1):willRender",
"Child (1):rendered",
"Child (1):mounted",
"Child (2):setup",
"Child (2):willStart",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div>1</div>");
parent.key = 3;
parent.render();
const prevDef = def;
def = undefined;
parent.key = 3;
parent.render();
prevDef.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div>3</div>");
expect([
"Child (3):setup",
"Child (3):willStart",
"Child (3):willRender",
"Child (3):rendered",
"Child (1):willUnmount",
"Child (1):willDestroy",
"Child (2):willDestroy",
"Child (3):mounted",
]).toBeLogged();
});
test("t-foreach with dynamic async component", async () => {
let def: any;
class Child extends Component {
static template = xml`<div t-esc="props.key" />`;
setup() {
onWillStart(() => def);
useLogLifecycle(this.props.key);
}
}
class Parent extends Component {
list: any = [[1]];
myComp = Child;
static template = xml`<t t-foreach="list" t-as="arr" t-key="arr_index">
<t t-if="arr" t-component="myComp" key="arr[0]" />
</t>`;
}
const parent = await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div>1</div>");
def = makeDeferred();
parent.list = [, [2]];
parent.render();
await nextTick();
expect([
"Child (1):setup",
"Child (1):willStart",
"Child (1):willRender",
"Child (1):rendered",
"Child (1):mounted",
"Child (2):setup",
"Child (2):willStart",
]).toBeLogged();
expect(fixture.innerHTML).toBe("<div>1</div>");
parent.list = [, , [3]];
parent.render();
const prevDef = def;
def = undefined;
parent.render();
prevDef.resolve();
await nextTick();
expect(fixture.innerHTML).toBe("<div>3</div>");
expect([
"Child (3):setup",
"Child (3):willStart",
"Child (3):willRender",
"Child (3):rendered",
"Child (1):willUnmount",
"Child (1):willDestroy",
"Child (2):willDestroy",
"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 };
// class ChildChild extends Component {
// static template = xml`
// <div>
// child child: <t t-esc="state.cc"/>
// </div>`;
// state = state;
// shouldUpdate() {
// return false;
// }
// }
// class Child extends Component {
// static components = { ChildChild };
// static template = xml`
// <div>
// child
// <ChildChild/>
// </div>`;
// shouldUpdate() {
// return false;
// }
// }
// let parent: any;
// class Parent extends Component {
// static components = { Child };
// static template = xml`
// <div>
// parent: <t t-esc="state.p"/>
// <Child/>
// </div>`;
// state = state;
// constructor(a, b) {
// super(a, b);
// parent = this;
// }
// shouldUpdate() {
// return false;
// }
// }
// class App extends Component {
// static components = { Parent };
// static template = xml`
// <div>
// <Parent/>
// </div>`;
// }
// var div = document.createElement("div");
// fixture.appendChild(div);
// const app = new App();
// await app.mount(fixture);
// expect(fixture.innerHTML).toBe(
// "<div></div><div><div> parent: 1<div> child <div> child child: 10</div></div></div></div>"
// );
// app.mount(div);
// // wait for rendering from second mount to go through parent
// await Promise.resolve();
// await Promise.resolve();
// state.cc++;
// state.p++;
// parent.render();
// await nextTick();
// expect(fixture.innerHTML).toBe(
// "<div><div><div> parent: 2<div> child <div> child child: 11</div></div></div></div></div>"
// );
// });
// test.skip("components with shouldUpdate=false, part 2", async () => {
// const state = { p: 1, cc: 10 };
// let shouldUpdate = true;
// class ChildChild extends Component {
// static template = xml`
// <div>
// child child: <t t-esc="state.cc"/>
// </div>`;
// state = state;
// shouldUpdate() {
// return shouldUpdate;
// }
// }
// class Child extends Component {
// static components = { ChildChild };
// static template = xml`
// <div>
// child
// <ChildChild/>
// </div>`;
// shouldUpdate() {
// return shouldUpdate;
// }
// }
// let parent: any;
// class Parent extends Component {
// static components = { Child };
// static template = xml`
// <div>
// parent: <t t-esc="state.p"/>
// <Child/>
// </div>`;
// state = state;
// constructor(a, b) {
// super(a, b);
// parent = this;
// }
// shouldUpdate() {
// return shouldUpdate;
// }
// }
// class App extends Component {
// static components = { Parent };
// static template = xml`
// <div>
// <Parent/>
// </div>`;
// }
// const app = new App();
// await app.mount(fixture);
// expect(fixture.innerHTML).toBe(
// "<div><div> parent: 1<div> child <div> child child: 10</div></div></div></div>"
// );
// state.cc++;
// state.p++;
// app.render();
// // wait for rendering to go through child
// await Promise.resolve();
// await Promise.resolve();
// await Promise.resolve();
// shouldUpdate = false;
// parent.render();
// await nextTick();
// expect(fixture.innerHTML).toBe(
// "<div><div> parent: 2<div> child <div> child child: 11</div></div></div></div>"
// );
// });
// });
Reference in New Issue View Git Blame Copy Permalink