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

[IMP] owl: add a new mount method

Browse Source
This commit is contained in:
Géry Debongnie
2020-10-27 14:41:09 +01:00
committed by aab-odoo
parent d615ffd81b
commit cb07c99d40
17 changed files with 191 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/component/component.test.ts
+19 -20
View File
@@ -1,4 +1,4 @@
import { Component, Env } from "../../src/component/component";
import { Component, Env, mount } from "../../src/component/component";
import { EventBus } from "../../src/core/event_bus";
import { useRef, useState } from "../../src/hooks";
import { QWeb } from "../../src/qweb/qweb";
@@ -69,18 +69,23 @@ describe("basic widget properties", () => {
class SomeWidget extends Component {
static template = xml`<div>content</div>`;
}
const widget = new SomeWidget();
widget.mount(fixture);
await nextTick();
await mount(SomeWidget, { target: fixture });
expect(fixture.innerHTML).toBe("<div>content</div>");
});
test("can be mounted with props", async () => {
class SomeWidget extends Component {
static template = xml`<div><t t-esc="props.content"/></div>`;
}
await mount(SomeWidget, { target: fixture, props: { content: "foo" } });
expect(fixture.innerHTML).toBe("<div>foo</div>");
});
test("can be mounted on a documentFragment", async () => {
class SomeWidget extends Component {
static template = xml`<div>content</div>`;
}
const widget = new SomeWidget();
await widget.mount(document.createDocumentFragment());
const widget = await mount(SomeWidget, { target: document.createDocumentFragment() });
expect(fixture.innerHTML).toBe("");
await widget.mount(fixture);
expect(fixture.innerHTML).toBe("<div>content</div>");
@@ -90,10 +95,9 @@ describe("basic widget properties", () => {
class SomeWidget extends Component {
static template = xml`<div>content</div>`;
}
const widget = new SomeWidget();
let error;
try {
await widget.mount(null as any);
await mount(SomeWidget, { target: null as any });
} catch (e) {
error = e;
}
@@ -107,10 +111,9 @@ describe("basic widget properties", () => {
class SomeWidget extends Component {
static template = xml`<t/>`;
}
const widget = new SomeWidget();
let error;
try {
await widget.mount(fixture);
await mount(SomeWidget, { target: fixture });
} catch (e) {
error = e;
}
@@ -137,8 +140,7 @@ describe("basic widget properties", () => {
});
}
const counter = new Counter();
counter.mount(fixture);
const counter = await mount(Counter, { target: fixture });
await nextTick();
expect(fixture.innerHTML).toBe("<div>0<button>Inc</button></div>");
const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
@@ -156,8 +158,7 @@ describe("basic widget properties", () => {
static components = { Child };
}
const parent = new Parent();
await parent.mount(fixture);
await mount(Parent, { target: fixture });
expect(env.qweb.templates[Parent.template].fn.toString()).toMatchSnapshot();
expect(fixture.innerHTML).toBe("<div><span></span></div>");
});
@@ -171,9 +172,8 @@ describe("basic widget properties", () => {
});
}
const counter = new Counter();
const target = document.createElement("div");
await counter.mount(target);
const counter = await mount(Counter, { target: target });
expect(target.innerHTML).toBe("<div>0<button>Inc</button></div>");
const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
button.click();
@@ -188,8 +188,7 @@ describe("basic widget properties", () => {
<div style="font-weight:bold;" class="some-class">world</div>
`;
}
const widget = new StyledWidget();
await widget.mount(fixture);
await mount(StyledWidget, { target: fixture });
expect(fixture.innerHTML).toBe(`<div style="font-weight:bold;" class="some-class">world</div>`);
});
@@ -212,8 +211,8 @@ describe("basic widget properties", () => {
steps.push("patched");
}
}
const widget = new TestW();
await widget.mount(fixture);
await mount(TestW, { target: fixture });
expect(steps).toEqual(["__render", "mounted"]);
});
tests/component/un_mounting.test.ts
+9 -17
View File
@@ -1,4 +1,4 @@
import { Component, Env } from "../../src/component/component";
import { Component, Env, mount } from "../../src/component/component";
import { useState } from "../../src/hooks";
import { xml } from "../../src/tags";
import { makeDeferred, makeTestEnv, makeTestFixture, nextTick, nextMicroTick } from "../helpers";
@@ -37,8 +37,7 @@ describe("mount targets", () => {
div.innerHTML = `<p>pre-existing</p>`;
fixture.appendChild(div);
const app = new App();
await app.mount(div, { position: "self" });
const app = await mount(App, { target: div, position: "self" });
expect(fixture.innerHTML).toBe(
`<div class="arbitrary custom"><p>pre-existing</p>app<p>another tag</p></div>`
@@ -66,10 +65,9 @@ describe("mount targets", () => {
const div = document.createElement("div");
fixture.appendChild(div);
const app = new App();
let error;
try {
await app.mount(div, { position: "self" });
await mount(App, { target: div, position: "self" });
} catch (e) {
error = e;
}
@@ -84,8 +82,7 @@ describe("mount targets", () => {
const span = document.createElement("span");
fixture.appendChild(span);
const app = new App();
await app.mount(fixture, { position: "first-child" });
await mount(App, { target: fixture, position: "first-child" });
expect(fixture.innerHTML).toBe("<div>app</div><span></span>");
});
@@ -96,8 +93,7 @@ describe("mount targets", () => {
const span = document.createElement("span");
fixture.appendChild(span);
const app = new App();
await app.mount(fixture, { position: "last-child" });
await mount(App, { target: fixture, position: "last-child" });
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
});
@@ -108,8 +104,7 @@ describe("mount targets", () => {
const span = document.createElement("span");
fixture.appendChild(span);
const app = new App();
await app.mount(fixture);
await mount(App, { target: fixture });
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
});
});
@@ -133,8 +128,7 @@ describe("unmounting and remounting", () => {
}
}
const w = new MyWidget();
await w.mount(fixture);
const w = await mount(MyWidget, { target: fixture });
expect(fixture.innerHTML).toBe("<div>Hey</div>");
expect(steps).toEqual(["willstart", "mounted"]);
@@ -162,8 +156,7 @@ describe("unmounting and remounting", () => {
}
}
const w = new MyWidget();
await w.mount(fixture);
const w = await mount(MyWidget, { target: fixture });
await w.mount(fixture);
expect(fixture.innerHTML).toBe("<div>Hey</div>");
expect(steps).toEqual(["willstart", "mounted"]);
@@ -203,8 +196,7 @@ describe("unmounting and remounting", () => {
state = useState({ val: 1, flag: true });
}
const widget = new Parent();
await widget.mount(fixture);
const widget = await mount(Parent, { target: fixture });
expect(steps).toEqual(["render"]);
expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
widget.state.flag = false;