[IMP] env: env is now frozen, useSubEnv does not affect user env

This commit is contained in:
Bruno Boi
2021-11-15 13:10:09 +01:00
committed by Aaron Bohy
parent 201f06c187
commit 3fa1bb62f6
13 changed files with 164 additions and 73 deletions
@@ -1132,7 +1132,7 @@ exports[`rendering component again in next microtick 2`] = `
let b2;
const v1 = ctx['onClick'];
let d1 = [v1, ctx];
if (ctx['env'].flag) {
if (ctx['env'].config.flag) {
b2 = component(\`Child\`, {}, key + \`__2\`, node, ctx);
}
return block1([d1], [b2]);
@@ -63,10 +63,10 @@ exports[`basics can select a sub widget 3`] = `
return function template(ctx, node, key = \\"\\") {
let b2,b3;
if (ctx['env'].flag) {
if (ctx['env'].options.flag) {
b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
}
if (!ctx['env'].flag) {
if (!ctx['env'].options.flag) {
b3 = component(\`OtherChild\`, {}, key + \`__2\`, node, ctx);
}
return multi([b2, b3]);
@@ -66,6 +66,21 @@ exports[`hooks can use onWillStart, onWillUpdateProps 2`] = `
}"
`;
exports[`hooks can use sub env 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['env'].val;
return block1([d1]);
}
}"
`;
exports[`hooks can use useComponent 1`] = `
"function anonymous(bdom, helpers
) {
@@ -80,6 +95,21 @@ exports[`hooks can use useComponent 1`] = `
}"
`;
exports[`hooks can use useEnv 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['env'].val;
return block1([d1]);
}
}"
`;
exports[`hooks mounted callbacks should be called in reverse order from willUnmount callbacks 1`] = `
"function anonymous(bdom, helpers
) {
@@ -95,6 +125,35 @@ exports[`hooks mounted callbacks should be called in reverse order from willUnmo
}"
`;
exports[`hooks parent and child env 1`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
let block1 = createBlock(\`<div><block-text-0/></div>\`);
return function template(ctx, node, key = \\"\\") {
let d1 = ctx['env'].val;
return block1([d1]);
}
}"
`;
exports[`hooks parent and child env 2`] = `
"function anonymous(bdom, helpers
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue, toNumber } = helpers;
return function template(ctx, node, key = \\"\\") {
let b2 = text(ctx['env'].val);
let b3 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
return multi([b2, b3]);
}
}"
`;
exports[`hooks two different call to willPatch/patched should work 1`] = `
"function anonymous(bdom, helpers
) {
+4 -3
View File
@@ -587,7 +587,7 @@ test("rendering component again in next microtick", async () => {
static template = xml`
<div>
<button t-on-click="onClick">Click</button>
<t t-if="env.flag"><Child/></t>
<t t-if="env.config.flag"><Child/></t>
</div>`;
static components = { Child };
@@ -595,14 +595,15 @@ test("rendering component again in next microtick", async () => {
useLogLifecycle(steps);
}
async onClick() {
this.env.flag = true;
this.env.config.flag = true;
this.render();
await Promise.resolve();
this.render();
}
}
await mount(Parent, fixture);
const env = { config: { flag: false } };
await new App(Parent).configure({ env }).mount(fixture);
expect(fixture.innerHTML).toBe("<div><button>Click</button></div>");
fixture.querySelector("button")!.click();
await nextTick();
+18 -16
View File
@@ -8,17 +8,6 @@ beforeEach(() => {
});
describe("env handling", () => {
test("keeps a reference to env", async () => {
const env = {};
class Test extends Component {
static template = xml`<div/>`;
}
const app = new App(Test);
app.configure({ env });
const component = await app.mount(fixture);
expect(component.env).toBe(env);
});
test("has an env by default", async () => {
class Test extends Component {
static template = xml`<div/>`;
@@ -27,8 +16,23 @@ describe("env handling", () => {
expect(component.env).toEqual({});
});
test("env is shallow frozen", async () => {
const env = { foo: 42, bar: { value: 42 } };
class Test extends Component {
static template = xml`<div/>`;
}
const component = await new App(Test).configure({ env }).mount(fixture);
expect(Object.isFrozen(component.env)).toBeTruthy();
expect(component.env).toEqual({ foo: 42, bar: { value: 42 } });
expect(() => {
component.env.foo = 23;
}).toThrow(/Cannot assign to read only property 'foo' of object/);
component.env.bar.value = 23;
expect(component.env).toEqual({ foo: 42, bar: { value: 23 } });
});
test("parent env is propagated to child components", async () => {
const env = {};
const env = { foo: 42, bar: { value: 42 } };
let child: any = null;
class Child extends Component {
@@ -43,9 +47,7 @@ describe("env handling", () => {
static components = { Child };
}
const app = new App(Test);
app.configure({ env });
await app.mount(fixture);
expect(child.env).toBe(env);
await new App(Test).configure({ env }).mount(fixture);
expect(child.env).toEqual(env);
});
});
@@ -58,19 +58,17 @@ describe("basics", () => {
class Parent extends Component {
static template = xml`
<t>
<t t-if="env.flag"><Child /></t>
<t t-if="!env.flag"><OtherChild /></t>
<t t-if="env.options.flag"><Child /></t>
<t t-if="!env.options.flag"><OtherChild /></t>
</t>
`;
static components = { Child, OtherChild };
}
const env = { flag: true };
const app = new App(Parent);
app.configure({ env });
const parent = await app.mount(fixture);
const env = { options: { flag: true } };
const parent = await new App(Parent).configure({ env }).mount(fixture);
expect(fixture.innerHTML).toBe("<span>CHILD 1</span>");
env.flag = false;
env.options.flag = false;
await parent.render();
expect(fixture.innerHTML).toBe("<div>CHILD 2</div>");
});
+18 -15
View File
@@ -5,6 +5,8 @@ import {
useRef,
useState,
useComponent,
useEnv,
useSubEnv,
onMounted,
onPatched,
onWillStart,
@@ -12,7 +14,7 @@ import {
onWillPatch,
xml,
onWillUnmount,
} from "../../src";
} from "../../src/index";
import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
let fixture: HTMLElement;
@@ -163,27 +165,30 @@ describe("hooks", () => {
});
});
test.skip("can use useEnv", async () => {
expect.assertions(2);
test("can use useEnv", async () => {
expect.assertions(3);
class Test extends Component {
static template = xml`<div><t t-esc="env.val"/></div>`;
setup() {
//expect(useEnv()).toBe(this.env);
expect(useEnv()).toBe(this.env);
}
}
await mount(Test, fixture);
const env = { val: 1 };
await new App(Test).configure({ env }).mount(fixture);
expect(fixture.innerHTML).toBe("<div>1</div>");
});
test.skip("can use sub env", async () => {
test("use sub env does not pollute user env", async () => {
class Test extends Component {
static template = xml`<div><t t-esc="env.val"/></div>`;
setup() {
//useSubEnv({ val: 3 });
useSubEnv({ val2: 1 });
}
}
const component = await mount(Test, fixture);
const env = { val: 3 };
const component = await new App(Test).configure({ env }).mount(fixture);
expect(fixture.innerHTML).toBe("<div>3</div>");
expect(component.env).not.toHaveProperty("val");
expect(component.env).not.toHaveProperty("val2");
expect(component.env).toHaveProperty("val");
});
@@ -198,22 +203,20 @@ describe("hooks", () => {
await mount(Test, fixture);
});
test.skip("parent and child env", async () => {
test("parent and child env", async () => {
class Child extends Component {
static template = xml`<div><t t-esc="env.val"/></div>`;
super() {
//useSubEnv({ val: 5 });
}
}
class Parent extends Component {
static template = xml`<t t-esc="env.val"/><Child/>`;
static components = { Child };
setup() {
//useSubEnv({ val: 3 });
useSubEnv({ val: 5 });
}
}
mount(Parent, fixture);
const env = { val: 3 };
await new App(Parent).configure({ env }).mount(fixture);
expect(fixture.innerHTML).toBe("3<div>5</div>");
});