mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
[IMP] tests: component mounting
We re-add some tests for component mounting.
This commit is contained in:
Mathieu Duckerts-Antoine
committed by
Aaron Bohy
Aaron Bohy
parent
ebd2e4324f
commit
a0b2551e4a
@@ -1,77 +1,75 @@
|
||||
describe.skip("reactivity in lifecycle", () => {
|
||||
test.skip("can use a state hook", async () => {
|
||||
/* class Counter extends Component {
|
||||
import {
|
||||
Component,
|
||||
mount,
|
||||
onPatched,
|
||||
onRender,
|
||||
onWillPatch,
|
||||
onWillUnmount,
|
||||
useState,
|
||||
} from "../../src";
|
||||
import { xml } from "../../src/tags";
|
||||
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
|
||||
|
||||
let fixture: HTMLElement;
|
||||
|
||||
snapshotEverything();
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = makeTestFixture();
|
||||
});
|
||||
|
||||
describe("reactivity in lifecycle", () => {
|
||||
test("can use a state hook", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`<div><t t-esc="counter.value"/></div>`;
|
||||
counter = useState({ value: 42 });
|
||||
}
|
||||
const counter = new Counter();
|
||||
await counter.mount(fixture);
|
||||
const counter = await mount(Counter, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>42</div>");
|
||||
counter.counter.value = 3;
|
||||
await nextTick();
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");*/
|
||||
expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
});
|
||||
|
||||
test("state changes in willUnmount do not trigger rerender", async () => {
|
||||
// const steps: string[] = [];
|
||||
// class Child extends Component {
|
||||
// static template = xml`
|
||||
// <span><t t-esc="props.val"/><t t-esc="state.n"/></span>
|
||||
// `;
|
||||
// state = useState({ n: 2 });
|
||||
// __render(f) {
|
||||
// steps.push("render");
|
||||
// return super.__render(f);
|
||||
// }
|
||||
// willPatch() {
|
||||
// steps.push("willPatch");
|
||||
// }
|
||||
// patched() {
|
||||
// steps.push("patched");
|
||||
// }
|
||||
// willUnmount() {
|
||||
// steps.push("willUnmount");
|
||||
// this.state.n = 3;
|
||||
// }
|
||||
// }
|
||||
// class Parent extends Component {
|
||||
// static template = xml`
|
||||
// <div>
|
||||
// <Child t-if="state.flag" val="state.val"/>
|
||||
// </div>
|
||||
// `;
|
||||
// static components = { Child };
|
||||
// state = useState({ val: 1, flag: true });
|
||||
// }
|
||||
// const widget = await mount(Parent, { target: fixture });
|
||||
// expect(steps).toEqual(["render"]);
|
||||
// expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
|
||||
// widget.state.flag = false;
|
||||
// await nextTick();
|
||||
// // we make sure here that no call to __render is done
|
||||
// expect(steps).toEqual(["render", "willUnmount"]);
|
||||
});
|
||||
|
||||
test("state changes in willUnmount will be applied on remount", async () => {
|
||||
// class TestWidget extends Component {
|
||||
// static template = xml`
|
||||
// <div><t t-esc="state.val"/></div>
|
||||
// `;
|
||||
// state = useState({ val: 1 });
|
||||
// willUnmount() {
|
||||
// this.state.val = 3;
|
||||
// }
|
||||
// }
|
||||
// const widget = new TestWidget();
|
||||
// await widget.mount(fixture);
|
||||
// expect(fixture.innerHTML).toBe("<div>1</div>");
|
||||
// widget.unmount();
|
||||
// expect(fixture.innerHTML).toBe("");
|
||||
// await nextTick(); // wait for changes to be detected before remounting
|
||||
// await widget.mount(fixture);
|
||||
// expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
// // we want to make sure that there are no remaining tasks left at this point.
|
||||
// expect(Component.scheduler.tasks.length).toBe(0);
|
||||
const steps: string[] = [];
|
||||
class Child extends Component {
|
||||
static template = xml`
|
||||
<span><t t-esc="props.val"/><t t-esc="state.n"/></span>
|
||||
`;
|
||||
state = useState({ n: 2 });
|
||||
setup() {
|
||||
onRender(() => {
|
||||
steps.push("render");
|
||||
});
|
||||
onWillPatch(() => {
|
||||
steps.push("willPatch");
|
||||
});
|
||||
onPatched(() => {
|
||||
steps.push("patched");
|
||||
});
|
||||
onWillUnmount(() => {
|
||||
steps.push("willUnmount");
|
||||
this.state.n = 3;
|
||||
});
|
||||
}
|
||||
}
|
||||
class Parent extends Component {
|
||||
static template = xml`
|
||||
<div>
|
||||
<Child t-if="state.flag" val="state.val"/>
|
||||
</div>
|
||||
`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1, flag: true });
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(steps).toEqual(["render"]);
|
||||
expect(fixture.innerHTML).toBe("<div><span>12</span></div>");
|
||||
parent.state.flag = false;
|
||||
await nextTick();
|
||||
// we make sure here that no call to __render is done
|
||||
expect(steps).toEqual(["render", "willUnmount"]);
|
||||
});
|
||||
|
||||
test("change state just before mounting component", async () => {
|
||||
@@ -103,89 +101,24 @@ describe.skip("reactivity in lifecycle", () => {
|
||||
});
|
||||
|
||||
test("change state while mounting component", async () => {
|
||||
// const steps: number[] = [];
|
||||
// class TestWidget extends Component {
|
||||
// static template = xml`
|
||||
// <div><t t-esc="state.val"/></div>
|
||||
// `;
|
||||
// state = useState({ val: 1 });
|
||||
// __render(f) {
|
||||
// steps.push(this.state.val);
|
||||
// return super.__render(f);
|
||||
// }
|
||||
// }
|
||||
// TestWidget.prototype.__render = jest.fn(TestWidget.prototype.__render);
|
||||
// TestWidget.prototype.__patch = jest.fn(TestWidget.prototype.__patch);
|
||||
// const widget = new TestWidget();
|
||||
// let prom = widget.mount(fixture);
|
||||
// widget.state.val = 2;
|
||||
// await prom;
|
||||
// expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
// expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(1);
|
||||
// // unmount and re-mount, as in this case, willStart won't be called, so it's
|
||||
// // slightly different
|
||||
// widget.unmount();
|
||||
// prom = widget.mount(fixture);
|
||||
// widget.state.val = 3;
|
||||
// await prom;
|
||||
// expect(fixture.innerHTML).toBe("<div>3</div>");
|
||||
// expect(TestWidget.prototype.__render).toHaveBeenCalledTimes(3);
|
||||
// expect(TestWidget.prototype.__patch).toHaveBeenCalledTimes(2);
|
||||
// expect(steps).toEqual([2, 2, 3]);
|
||||
});
|
||||
|
||||
test("change state and render while mounted in detached dom", async () => {
|
||||
// class App extends Component {
|
||||
// static template = xml`<div><t t-esc="state.val"/></div>`;
|
||||
// state = useState({ val: 1 });
|
||||
// }
|
||||
// const detachedDiv = document.createElement("div");
|
||||
// const app = await mount(App, { target: detachedDiv });
|
||||
// expect(detachedDiv.innerHTML).toBe("<div>1</div>");
|
||||
// app.state.val = 2;
|
||||
// await nextTick();
|
||||
// expect(detachedDiv.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
|
||||
test("destroy and change state after mounted in detached dom", async () => {
|
||||
// class App extends Component {
|
||||
// static template = xml`<div><t t-esc="state.val"/></div>`;
|
||||
// state = useState({ val: 1 });
|
||||
// }
|
||||
// const detachedDiv = document.createElement("div");
|
||||
// const app = await mount(App, { target: detachedDiv });
|
||||
// expect(detachedDiv.innerHTML).toBe("<div>1</div>");
|
||||
// app.destroy();
|
||||
// app.state.val = 2;
|
||||
// await nextTick();
|
||||
// expect(detachedDiv.innerHTML).toBe("");
|
||||
});
|
||||
|
||||
test("change state while component is unmounted", async () => {
|
||||
// let child;
|
||||
// class Child extends Component {
|
||||
// static template = xml`<span t-esc="state.val"/>`;
|
||||
// state = useState({
|
||||
// val: "C1",
|
||||
// });
|
||||
// constructor(parent, props) {
|
||||
// super(parent, props);
|
||||
// child = this;
|
||||
// }
|
||||
// }
|
||||
// class Parent extends Component {
|
||||
// static components = { Child };
|
||||
// static template = xml`<div><t t-esc="state.val"/><Child/></div>`;
|
||||
// state = useState({ val: "P1" });
|
||||
// }
|
||||
// const parent = new Parent();
|
||||
// await parent.mount(fixture);
|
||||
// expect(fixture.innerHTML).toBe("<div>P1<span>C1</span></div>");
|
||||
// parent.unmount();
|
||||
// expect(fixture.innerHTML).toBe("");
|
||||
// parent.state.val = "P2";
|
||||
// child.state.val = "C2";
|
||||
// await parent.mount(fixture);
|
||||
// expect(fixture.innerHTML).toBe("<div>P2<span>C2</span></div>");
|
||||
const steps: any[] = [];
|
||||
let STATE;
|
||||
class Comp extends Component {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.val"/></div>
|
||||
`;
|
||||
state = useState({ val: 1 });
|
||||
setup() {
|
||||
STATE = this.state;
|
||||
onRender(() => {
|
||||
steps.push(this.state.val);
|
||||
});
|
||||
}
|
||||
}
|
||||
const prom = mount(Comp, fixture);
|
||||
(STATE as any).val = 2;
|
||||
await prom;
|
||||
expect(steps).toEqual([2]);
|
||||
expect(fixture.innerHTML).toBe("<div>2</div>");
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user