[IMP] app: improve API, small refactoring

This commit is contained in:
Géry Debongnie
2021-12-20 17:32:32 +01:00
committed by Mathieu Duckerts-Antoine
parent f4da50d350
commit 0b1c4dd4ef
13 changed files with 112 additions and 87 deletions
@@ -1,29 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`app App supports env with getters/setters 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['env'].someVal;
let d2 = Object.keys(ctx['env'].services);
return block1([d1, d2]);
}
}"
`;
exports[`app destroy remove the widget from the DOM 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let block1 = createBlock(\`<div/>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
@@ -1060,6 +1060,19 @@ exports[`mount targets default mount option is 'last-child' 1`] = `
}"
`;
exports[`mount targets mount function: can mount a component (with default position='last-child') 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component, comment } = bdom;
let block1 = createBlock(\`<div>app</div>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`support svg components add proper namespace to svg 1`] = `
"function anonymous(bdom, helpers
) {
-53
View File
@@ -1,53 +0,0 @@
import { App, Component, xml } from "../../src";
import { status } from "../../src/component/status";
import { makeTestFixture, snapshotEverything, nextTick, elem } from "../helpers";
let fixture: HTMLElement;
snapshotEverything();
beforeEach(() => {
fixture = makeTestFixture();
});
describe("app", () => {
test("destroy remove the widget from the DOM", async () => {
class SomeComponent extends Component {
static template = xml`<div/>`;
}
const app = new App(SomeComponent);
const comp = await app.mount(fixture);
const el = elem(comp);
expect(document.contains(el)).toBe(true);
app.destroy();
expect(document.contains(el)).toBe(false);
expect(status(comp)).toBe("destroyed");
});
test("App supports env with getters/setters", async () => {
let someVal = "maggot";
const services: any = { serv1: "" };
const env = {
get someVal() {
return someVal;
},
services,
};
class SomeComponent extends Component {
static template = xml`<div><t t-esc="env.someVal" /> <t t-esc="Object.keys(env.services)" /></div>`;
}
const app = new App(SomeComponent);
app.configure({ env });
const comp = await app.mount(fixture);
expect(fixture.innerHTML).toBe("<div>maggot serv1</div>");
someVal = "brain";
services.serv2 = "";
comp.render();
await nextTick();
expect(fixture.innerHTML).toBe("<div>brain serv1,serv2</div>");
});
});
+12 -2
View File
@@ -41,7 +41,7 @@ describe("basics", () => {
static template = xml`<span><t t-esc="props.value"/></span>`;
}
const app = new App(Test, { value: 3 });
const app = new App(Test, { props: { value: 3 } });
const component = await app.mount(fixture);
expect(fixture.innerHTML).toBe("<span>3</span>");
@@ -125,7 +125,7 @@ describe("basics", () => {
}
}
const app = new App(Test, p);
const app = new App(Test, { props: p });
await app.mount(fixture);
});
@@ -819,6 +819,16 @@ describe("mount targets", () => {
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
});
test("mount function: can mount a component (with default position='last-child')", async () => {
class Root extends Component {
static template = xml`<div>app</div>`;
}
const span = document.createElement("span");
fixture.appendChild(span);
await mount(Root, fixture, { position: "last-child" });
expect(fixture.innerHTML).toBe("<span></span><div>app</div>");
});
test("default mount option is 'last-child'", async () => {
class Root extends Component {
static template = xml`<div>app</div>`;
+1 -1
View File
@@ -623,7 +623,7 @@ test("rendering component again in next microtick", async () => {
}
const env = { config: { flag: false } };
await new App(Parent).configure({ env }).mount(fixture);
await mount(Parent, fixture, { env });
expect(fixture.innerHTML).toBe("<div><button>Click</button></div>");
expect([
"Parent:setup",
+2 -2
View File
@@ -21,7 +21,7 @@ describe("env handling", () => {
class Test extends Component {
static template = xml`<div/>`;
}
const component = await new App(Test).configure({ env }).mount(fixture);
const component = await new App(Test, { env }).mount(fixture);
expect(Object.isFrozen(component.env)).toBeTruthy();
expect(component.env).toEqual({ foo: 42, bar: { value: 42 } });
expect(() => {
@@ -47,7 +47,7 @@ describe("env handling", () => {
static components = { Child };
}
await new App(Test).configure({ env }).mount(fixture);
await new App(Test, { env }).mount(fixture);
expect(child.env).toEqual(env);
});
});
@@ -1,4 +1,4 @@
import { App, Component, mount, useState, xml } from "../../src";
import { Component, mount, useState, xml } from "../../src";
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
let fixture: HTMLElement;
@@ -64,7 +64,7 @@ describe("basics", () => {
static components = { Child, OtherChild };
}
const env = { options: { flag: true } };
const parent = await new App(Parent).configure({ env }).mount(fixture);
const parent = await mount(Parent, fixture, { env });
expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
env.options.flag = false;
+4 -4
View File
@@ -176,7 +176,7 @@ describe("hooks", () => {
}
}
const env = { val: 1 };
await new App(Test).configure({ env }).mount(fixture);
await mount(Test, fixture, { env });
expect(fixture.innerHTML).toBe("<div>1</div>");
});
@@ -188,7 +188,7 @@ describe("hooks", () => {
}
}
const env = { val: 3 };
const component = await new App(Test).configure({ env }).mount(fixture);
const component = await mount(Test, fixture, { env });
expect(fixture.innerHTML).toBe("<div>3</div>");
expect(component.env).not.toHaveProperty("val2");
expect(component.env).toHaveProperty("val");
@@ -219,7 +219,7 @@ describe("hooks", () => {
return someVal;
},
};
const component = await new App(Test).configure({ env }).mount(fixture);
const component = await mount(Test, fixture, { env });
expect(fixture.innerHTML).toBe("<div>maggot brain</div>");
someVal = "brain";
someVal2 = "maggot";
@@ -252,7 +252,7 @@ describe("hooks", () => {
}
}
const env = { val: 3 };
await new App(Parent).configure({ env }).mount(fixture);
await mount(Parent, fixture, { env });
expect(fixture.innerHTML).toBe("3<div>5</div>");
});