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

refactor widget test suite

Browse Source
This commit is contained in:
Géry Debongnie
2019-01-25 15:28:21 +01:00
parent 9fc7cf0c68
commit c3221663a9
1 changed files with 95 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/static/tests/widget.test.ts
+95 -104
View File
@@ -2,80 +2,92 @@ import { Widget, WEnv } from "../src/ts/core/widget";
import { idGenerator } from "../src/ts/core/utils"; import { idGenerator } from "../src/ts/core/utils";
import { QWeb } from "../src/ts/core/qweb_vdom"; import { QWeb } from "../src/ts/core/qweb_vdom";
interface Type<T> extends Function { //------------------------------------------------------------------------------
new (...args: any[]): T; // Setup and helpers
} //------------------------------------------------------------------------------
type TestEnv = WEnv; // We create before each test:
type TestWidget = Widget<TestEnv>; // - fixture: a div, appended to the DOM, intended to be the target of dom
// manipulations. Note that it is removed after each test.
// - env: a WEnv, necessary to create new widgets
function makeWidget(W: Type<TestWidget>): TestWidget { let fixture: HTMLElement;
const env: WEnv = { let env: WEnv;
beforeEach(() => {
fixture = document.createElement("div");
document.body.appendChild(fixture);
env = {
qweb: new QWeb(), qweb: new QWeb(),
getID: idGenerator() getID: idGenerator()
}; };
const w = new W(env); });
return w;
}
async function click(el: HTMLElement) { afterEach(() => {
el.click(); fixture.remove();
});
function nextTick(): Promise<void> {
return Promise.resolve(); return Promise.resolve();
} }
const template = ` //------------------------------------------------------------------------------
<div><t t-esc="state.counter"/><button t-on-click="inc">Inc</button></div> // Tests
`; //------------------------------------------------------------------------------
class Counter extends Widget<TestEnv> {
name = "counter";
template = template;
state = {
counter: 0
};
inc() {
this.updateState({ counter: this.state.counter + 1 });
}
}
describe("basic widget properties", () => { describe("basic widget properties", () => {
test("has no el after creation", async () => { test("has no el after creation", async () => {
const widget = makeWidget(Widget); const widget = new Widget(env);
expect(widget.el).toBe(null); expect(widget.el).toBe(null);
}); });
test("can be mounted", async () => { test("can be mounted", async () => {
const widget = makeWidget(Widget); const widget = new Widget(env);
const target = document.createElement("div"); await widget.mount(fixture);
await widget.mount(target); expect(fixture.innerHTML).toBe("<div></div>");
expect(target.innerHTML).toBe("<div></div>");
}); });
test("can be clicked on and updated", async () => { test("can be clicked on and updated", async () => {
const counter = makeWidget(Counter); const template = `
<div><t t-esc="state.counter"/><button t-on-click="inc">Inc</button></div>
`;
class Counter extends Widget<WEnv> {
name = "counter";
template = template;
state = {
counter: 0
};
inc() {
this.updateState({ counter: this.state.counter + 1 });
}
}
const counter = new Counter(env);
const target = document.createElement("div"); const target = document.createElement("div");
await counter.mount(target); await counter.mount(target);
expect(target.innerHTML).toBe("<div>0<button>Inc</button></div>"); expect(target.innerHTML).toBe("<div>0<button>Inc</button></div>");
await click((<HTMLElement>counter.el).getElementsByTagName("button")[0]); const button = (<HTMLElement>counter.el).getElementsByTagName("button")[0];
await button.click();
await nextTick();
expect(target.innerHTML).toBe("<div>1<button>Inc</button></div>"); expect(target.innerHTML).toBe("<div>1<button>Inc</button></div>");
}); });
test("widget style and classname", async () => { test("widget style and classname", async () => {
class StyledWidget extends Widget<TestEnv> { class StyledWidget extends Widget<WEnv> {
template = `<div style="font-weight:bold;" class="some-class">world</div>`; template = `<div style="font-weight:bold;" class="some-class">world</div>`;
} }
const widget = makeWidget(StyledWidget); const widget = new StyledWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
await widget.mount(target); expect(fixture.innerHTML).toBe(
expect(target.innerHTML).toBe(
`<div style="font-weight:bold;" class="some-class">world</div>` `<div style="font-weight:bold;" class="some-class">world</div>`
); );
}); });
test("updateState before first render does not trigger a render", async () => { test("updateState before first render does not trigger a render", async () => {
let renderCalls = 0; let renderCalls = 0;
class TestW extends Widget<TestEnv> { class TestW extends Widget<WEnv> {
async willStart() { async willStart() {
this.updateState({}); this.updateState({});
} }
@@ -84,8 +96,8 @@ describe("basic widget properties", () => {
return super.render(); return super.render();
} }
} }
const widget = makeWidget(TestW); const widget = new TestW(env);
await widget.mount(document.createElement("div")); await widget.mount(fixture);
expect(renderCalls).toBe(1); expect(renderCalls).toBe(1);
}); });
}); });
@@ -93,25 +105,24 @@ describe("basic widget properties", () => {
describe("lifecycle hooks", () => { describe("lifecycle hooks", () => {
test("willStart hook is called", async () => { test("willStart hook is called", async () => {
let willstart = false; let willstart = false;
class HookWidget extends Widget<TestEnv> { class HookWidget extends Widget<WEnv> {
async willStart() { async willStart() {
willstart = true; willstart = true;
} }
} }
const widget = makeWidget(HookWidget); const widget = new HookWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
await widget.mount(target);
expect(willstart).toBe(true); expect(willstart).toBe(true);
}); });
test("mounted hook is not called if not in DOM", async () => { test("mounted hook is not called if not in DOM", async () => {
let mounted = false; let mounted = false;
class HookWidget extends Widget<TestEnv> { class HookWidget extends Widget<WEnv> {
async mounted() { async mounted() {
mounted = true; mounted = true;
} }
} }
const widget = makeWidget(HookWidget); const widget = new HookWidget(env);
const target = document.createElement("div"); const target = document.createElement("div");
await widget.mount(target); await widget.mount(target);
expect(mounted).toBe(false); expect(mounted).toBe(false);
@@ -119,45 +130,38 @@ describe("lifecycle hooks", () => {
test("mounted hook is called if mounted in DOM", async () => { test("mounted hook is called if mounted in DOM", async () => {
let mounted = false; let mounted = false;
class HookWidget extends Widget<TestEnv> { class HookWidget extends Widget<WEnv> {
async mounted() { async mounted() {
mounted = true; mounted = true;
} }
} }
const widget = makeWidget(HookWidget); const widget = new HookWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
document.body.appendChild(target);
await widget.mount(target);
expect(mounted).toBe(true); expect(mounted).toBe(true);
target.remove();
}); });
test("willStart hook is called on subwidget", async () => { test("willStart hook is called on subwidget", async () => {
expect.assertions(1);
let ok = false; let ok = false;
class ParentWidget extends Widget<TestEnv> { class ParentWidget extends Widget<WEnv> {
name = "a"; name = "a";
template = `<div><t t-widget="child"/></div>`; template = `<div><t t-widget="child"/></div>`;
widgets = { child: ChildWidget }; widgets = { child: ChildWidget };
} }
class ChildWidget extends Widget<TestEnv> { class ChildWidget extends Widget<WEnv> {
async willStart() { async willStart() {
ok = true; ok = true;
} }
} }
const widget = makeWidget(ParentWidget); const widget = new ParentWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
document.body.appendChild(target);
await widget.mount(target);
expect(ok).toBe(true); expect(ok).toBe(true);
target.remove();
}); });
test("mounted hook is called on subwidgets, in proper order", async () => { test("mounted hook is called on subwidgets, in proper order", async () => {
expect.assertions(4); expect.assertions(4);
let parentMounted = false; let parentMounted = false;
let childMounted = false; let childMounted = false;
class ParentWidget extends Widget<TestEnv> { class ParentWidget extends Widget<WEnv> {
name = "a"; name = "a";
template = `<div><t t-widget="child"/></div>`; template = `<div><t t-widget="child"/></div>`;
widgets = { child: ChildWidget }; widgets = { child: ChildWidget };
@@ -166,41 +170,38 @@ describe("lifecycle hooks", () => {
parentMounted = true; parentMounted = true;
} }
} }
class ChildWidget extends Widget<TestEnv> { class ChildWidget extends Widget<WEnv> {
mounted() { mounted() {
expect(document.body.contains(this.el)).toBe(true); expect(document.body.contains(this.el)).toBe(true);
expect(parentMounted).toBe(true); expect(parentMounted).toBe(true);
childMounted = true; childMounted = true;
} }
} }
const widget = makeWidget(ParentWidget); const widget = new ParentWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
document.body.appendChild(target);
await widget.mount(target);
expect(childMounted).toBe(true); expect(childMounted).toBe(true);
target.remove();
}); });
test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => { test("willStart, mounted on subwidget rendered after main is mounted in some other position", async () => {
expect.assertions(3); expect.assertions(3);
let hookCounter = 0; let hookCounter = 0;
class ParentWidget extends Widget<TestEnv> { class ParentWidget extends Widget<WEnv> {
name = "a"; name = "a";
state = { ok: false }; state = { ok: false };
template = ` template = `
<div> <div>
<t t-if="state.ok"> <t t-if="state.ok">
<t t-widget="child"/> <t t-widget="child"/>
</t> </t>
<t t-else="1"> <t t-else="1">
<div/> <div/>
</t> </t>
</div>`; // the t-else part in this template is important. This is </div>`; // the t-else part in this template is important. This is
// necessary to have a situation that could confuse the vdom // necessary to have a situation that could confuse the vdom
// patching algorithm // patching algorithm
widgets = { child: ChildWidget }; widgets = { child: ChildWidget };
} }
class ChildWidget extends Widget<TestEnv> { class ChildWidget extends Widget<WEnv> {
async willStart() { async willStart() {
hookCounter++; hookCounter++;
} }
@@ -209,14 +210,11 @@ describe("lifecycle hooks", () => {
hookCounter++; hookCounter++;
} }
} }
const widget = makeWidget(ParentWidget); const widget = new ParentWidget(env);
const target = document.createElement("div"); await widget.mount(fixture);
document.body.appendChild(target);
await widget.mount(target);
expect(hookCounter).toBe(0); // sub widget not created yet expect(hookCounter).toBe(0); // sub widget not created yet
await widget.updateState({ ok: true }); await widget.updateState({ ok: true });
expect(hookCounter).toBe(2); expect(hookCounter).toBe(2);
target.remove();
}); });
test("mounted hook is correctly called on subwidgets created in mounted hook", async done => { test("mounted hook is correctly called on subwidgets created in mounted hook", async done => {
@@ -226,34 +224,30 @@ describe("lifecycle hooks", () => {
// being visited, so the mount action of the parent could cause a mount // being visited, so the mount action of the parent could cause a mount
// action of the new child widget, even though it is not ready yet. // action of the new child widget, even though it is not ready yet.
expect.assertions(1); expect.assertions(1);
const target = document.createElement("div"); const target = document.createElement("div");
document.body.appendChild(target); document.body.appendChild(target);
class ParentWidget extends Widget<TestEnv> { class ParentWidget extends Widget<WEnv> {
name = "a"; name = "a";
mounted() { mounted() {
const child = new ChildWidget(this); const child = new ChildWidget(this);
child.mount(this.el!); child.mount(this.el!);
} }
} }
class ChildWidget extends Widget<TestEnv> { class ChildWidget extends Widget<WEnv> {
mounted() { mounted() {
expect(this.el).toBeTruthy(); expect(this.el).toBeTruthy();
target.remove();
done(); done();
} }
} }
const widget = new ParentWidget(env);
const widget = makeWidget(ParentWidget);
await widget.mount(target); await widget.mount(target);
}); });
}); });
describe("destroy method", () => { describe("destroy method", () => {
test("destroy remove the widget from the DOM", async () => { test("destroy remove the widget from the DOM", async () => {
const widget = makeWidget(Widget); const widget = new Widget(env);
const target = document.body; await widget.mount(fixture);
await widget.mount(target);
expect(document.contains(widget.el)).toBe(true); expect(document.contains(widget.el)).toBe(true);
widget.destroy(); widget.destroy();
expect(document.contains(widget.el)).toBe(false); expect(document.contains(widget.el)).toBe(false);
@@ -261,32 +255,29 @@ describe("destroy method", () => {
}); });
describe("composition", () => { describe("composition", () => {
class WidgetA extends Widget<TestEnv> { class WidgetA extends Widget<WEnv> {
name = "a"; name = "a";
template = `<div>Hello<t t-widget="b"/></div>`; template = `<div>Hello<t t-widget="b"/></div>`;
widgets = { b: WidgetB }; widgets = { b: WidgetB };
} }
class WidgetB extends Widget<WEnv> {
class WidgetB extends Widget<TestEnv> {
template = `<div>world</div>`; template = `<div>world</div>`;
} }
test("a widget with a sub widget", async () => { test("a widget with a sub widget", async () => {
const widget = makeWidget(WidgetA); const widget = new WidgetA(env);
const target = document.createElement("div"); await widget.mount(fixture);
await widget.mount(target); expect(fixture.innerHTML).toBe("<div>Hello<div>world</div></div>");
expect(target.innerHTML).toBe("<div>Hello<div>world</div></div>");
}); });
test("t-refs on widget are widgets", async () => { test("t-refs on widget are widgets", async () => {
class WidgetC extends Widget<TestEnv> { class WidgetC extends Widget<WEnv> {
name = "a"; name = "a";
template = `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`; template = `<div>Hello<t t-ref="mywidgetb" t-widget="b"/></div>`;
widgets = { b: WidgetB }; widgets = { b: WidgetB };
} }
const widget = makeWidget(WidgetC); const widget = new WidgetC(env);
const target = document.createElement("div"); await widget.mount(fixture);
await widget.mount(target);
expect(widget.refs.mywidgetb instanceof WidgetB).toBe(true); expect(widget.refs.mywidgetb instanceof WidgetB).toBe(true);
}); });
}); });