mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
Géry Debongnie
1a20cc57de
This commit tries to improve the interactions involving unmounted components, or components mounted in an htmelement which is detached from the main DOM, and rendering actions. The main example is mounting a component in detached div, to prepare all children. If we just mount the component, it will work as expected: the full component tree is rendered in memory, and ready to be really mounted at the desired target. However, if before doing that, we update the component and call render on it (for example, with a change in an observed state), then this rendering will be ignored, and therefore, the full subcomponent tree is not uptodate. This commit will also solve another issue in the compatibility layer in odoo: in the form renderer, we mount components with the adapter in a div, which is not yet attached to the DOM. We then manually call the mounted hook when on_attach_callback is called. This means that before this commit, any change to the components between the initial rendering and the call to mounted will be ignored. As a bonus, this commit has the effect of bringing closer the semantics of render and mount operations, which is certainly good. closes #823
51 lines
1.7 KiB
TypeScript
51 lines
1.7 KiB
TypeScript
/**
|
|
* We can only make one test per file, since the debug tool modify in place
|
|
* the owl object in a way that is difficult to undo.
|
|
*/
|
|
|
|
import { debugOwl } from "../../tools/debug";
|
|
import * as owl from "../../src/index";
|
|
|
|
import { Component, Env } from "../../src/component/component";
|
|
import { xml } from "../../src/tags";
|
|
import { makeTestFixture, makeTestEnv, nextTick } from "../helpers";
|
|
|
|
let fixture: HTMLElement = makeTestFixture();
|
|
let env: Env = makeTestEnv();
|
|
Component.env = env;
|
|
|
|
debugOwl(owl, { logScheduler: true });
|
|
|
|
test("log a specific message for render method calls if component is not mounted", async () => {
|
|
const steps: string[] = [];
|
|
const log = console.log;
|
|
console.log = (arg) => steps.push(arg);
|
|
|
|
class Parent extends Component {
|
|
static template = xml`<div><t t-esc="state.value"/></div>`;
|
|
state = owl.hooks.useState({ value: 1 });
|
|
}
|
|
|
|
const parent = new Parent(null, {});
|
|
await parent.mount(fixture);
|
|
parent.unmount();
|
|
parent.state.value = 2;
|
|
|
|
await nextTick();
|
|
expect(steps).toEqual([
|
|
"[OWL_DEBUG] Parent<id=1> constructor, props={}",
|
|
"[OWL_DEBUG] Parent<id=1> mount",
|
|
"[OWL_DEBUG] Parent<id=1> willStart",
|
|
"[OWL_DEBUG] scheduler: start running tasks queue",
|
|
"[OWL_DEBUG] Parent<id=1> rendering template",
|
|
"[OWL_DEBUG] Parent<id=1> mounted",
|
|
"[OWL_DEBUG] scheduler: stop running tasks queue",
|
|
"[OWL_DEBUG] Parent<id=1> willUnmount",
|
|
"[OWL_DEBUG] Parent<id=1> render (warning: component is not mounted)",
|
|
"[OWL_DEBUG] scheduler: start running tasks queue",
|
|
"[OWL_DEBUG] Parent<id=1> rendering template",
|
|
"[OWL_DEBUG] scheduler: stop running tasks queue",
|
|
]);
|
|
console.log = log;
|
|
});
|