mirror of
https://github.com/odoo/owl.git
synced 2025-10-06 19:59:41 +07:00
up
This commit is contained in:
Nicolas Bayet
@@ -1,395 +0,0 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/><block-text-1/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['context'][ctx['props'].key].n;
|
||||
let d2 = ctx['state'].x;
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<p><block-child-0/></p>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ComponentC\`, {key: ctx['props'].key}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState concurrent renderings 3`] = `
|
||||
"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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`ComponentB\`, {key: ctx['context'].key}, key + \`__1\`, node, ctx);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState destroyed component before being mounted is inactive 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState destroyed component before being mounted is inactive 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].a;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState destroyed component is inactive 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2;
|
||||
if (ctx['state'].flag) {
|
||||
b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
}
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState destroyed component is inactive 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].a;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState one components can subscribe twice to same context 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj1'].a;
|
||||
let txt2 = ctx['contextObj2'].b;
|
||||
return block1([txt1, txt2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState parent and children subscribed to same context 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
let txt1 = ctx['contextObj'].b;
|
||||
return block1([txt1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState parent and children subscribed to same context 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].a;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState several nodes on different level use same context 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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/> <block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['contextObj'].a;
|
||||
let d2 = ctx['contextObj'].b;
|
||||
return block1([d1, d2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState several nodes on different level use same context 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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['contextObj'].b;
|
||||
return block1([d1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState several nodes on different level use same context 3`] = `
|
||||
"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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let d1 = ctx['contextObj'].a;
|
||||
let b2 = component(\`L3A\`, {}, key + \`__1\`, node, ctx);
|
||||
return block1([d1], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState several nodes on different level use same context 4`] = `
|
||||
"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, safeOutput } = helpers;
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let b2 = component(\`L2A\`, {}, key + \`__1\`, node, ctx);
|
||||
let b3 = component(\`L2B\`, {}, key + \`__2\`, node, ctx);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two components are updated in parallel 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
const b3 = comp2({}, key + \`__2\`, node, this, null);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two components are updated in parallel 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two components can subscribe to same context 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
const b3 = comp2({}, key + \`__2\`, node, this, null);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two components can subscribe to same context 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two independent components on different levels are updated in parallel 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
const comp2 = app.createComponent(\`Parent\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/><block-child-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
const b3 = comp2({}, key + \`__2\`, node, this, null);
|
||||
return block1([], [b2, b3]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two independent components on different levels are updated in parallel 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<span><block-text-0/></span>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState two independent components on different levels are updated in parallel 3`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
const comp1 = app.createComponent(\`Child\`, true, false, false, []);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
const b2 = comp1({}, key + \`__1\`, node, this, null);
|
||||
return block1([], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState useContext=useState hook is reactive, for one component 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState useless atoms should be deleted 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
let { prepareList, withKey } = helpers;
|
||||
const comp1 = app.createComponent(\`Quantity\`, true, false, false, [\\"id\\"]);
|
||||
|
||||
let block1 = createBlock(\`<div><block-child-0/> Total: <block-text-0/> Count: <block-text-1/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
ctx = Object.create(ctx);
|
||||
const [k_block2, v_block2, l_block2, c_block2] = prepareList(Object.keys(ctx['state']));;
|
||||
for (let i1 = 0; i1 < l_block2; i1++) {
|
||||
ctx[\`id\`] = k_block2[i1];
|
||||
const key1 = ctx['id'];
|
||||
c_block2[i1] = withKey(comp1({id: ctx['id']}, key + \`__1__\${key1}\`, node, this, null), key1);
|
||||
}
|
||||
ctx = ctx.__proto__;
|
||||
const b2 = list(c_block2);
|
||||
let txt1 = ctx['total'];
|
||||
let txt2 = Object.keys(ctx['state']).length;
|
||||
return block1([txt1, txt2], [b2]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState useless atoms should be deleted 2`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['state'].quantity;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
|
||||
exports[`Reactivity: useState very simple use, with initial value 1`] = `
|
||||
"function anonymous(app, bdom, helpers
|
||||
) {
|
||||
let { text, createBlock, list, multi, html, toggler, comment } = bdom;
|
||||
|
||||
let block1 = createBlock(\`<div><block-text-0/></div>\`);
|
||||
|
||||
return function template(ctx, node, key = \\"\\") {
|
||||
let txt1 = ctx['contextObj'].value;
|
||||
return block1([txt1]);
|
||||
}
|
||||
}"
|
||||
`;
|
||||
@@ -702,7 +702,7 @@ describe("props validation", () => {
|
||||
const app = new App(Parent, { test: true });
|
||||
await app.mount(fixture);
|
||||
expect(fixture.innerHTML).toBe("12");
|
||||
expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
|
||||
// expect(app.root!.subscriptions).toEqual([{ keys: ["otherValue"], target: obj }]);
|
||||
});
|
||||
|
||||
test("props are validated whenever component is updated", async () => {
|
||||
|
||||
@@ -2,12 +2,11 @@ import {
|
||||
Component,
|
||||
mount,
|
||||
onPatched,
|
||||
onWillRender,
|
||||
onWillPatch,
|
||||
onWillRender,
|
||||
onWillUnmount,
|
||||
useState,
|
||||
reactive,
|
||||
xml,
|
||||
toRaw,
|
||||
} from "../../src";
|
||||
import { makeTestFixture, nextTick, snapshotEverything, steps, useLogLifecycle } from "../helpers";
|
||||
|
||||
@@ -20,10 +19,36 @@ beforeEach(() => {
|
||||
});
|
||||
|
||||
describe("reactivity in lifecycle", () => {
|
||||
test("an external reactive object should be tracked", async () => {
|
||||
const obj1 = reactive({ value: 1 });
|
||||
const obj2 = reactive({ value: 100 });
|
||||
class TestSubComponent extends Component {
|
||||
obj2 = obj2;
|
||||
|
||||
static template = xml`<div>
|
||||
<t t-esc="obj2.value"/>
|
||||
</div>`;
|
||||
}
|
||||
class TestComponent extends Component {
|
||||
obj1 = obj1;
|
||||
static template = xml`<div>
|
||||
<t t-esc="obj1.value"/>
|
||||
<TestSubComponent/>
|
||||
</div>`;
|
||||
static components = { TestSubComponent };
|
||||
}
|
||||
await mount(TestComponent, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>1<div>100</div></div>");
|
||||
obj1.value = 2;
|
||||
obj2.value = 200;
|
||||
await nextTick();
|
||||
|
||||
expect(fixture.innerHTML).toBe("<div>2<div>200</div></div>");
|
||||
});
|
||||
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 });
|
||||
counter = reactive({ value: 42 });
|
||||
}
|
||||
const counter = await mount(Counter, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>42</div>");
|
||||
@@ -36,7 +61,7 @@ describe("reactivity in lifecycle", () => {
|
||||
let n = 0;
|
||||
class Comp extends Component {
|
||||
static template = xml`<div><t t-esc="state.a"/></div>`;
|
||||
state = useState({ a: 5, b: 7 });
|
||||
state = reactive({ a: 5, b: 7 });
|
||||
setup() {
|
||||
onWillRender(() => n++);
|
||||
}
|
||||
@@ -57,7 +82,7 @@ describe("reactivity in lifecycle", () => {
|
||||
test("can use a state hook on Map", async () => {
|
||||
class Counter extends Component {
|
||||
static template = xml`<div><t t-esc="counter.get('value')"/></div>`;
|
||||
counter = useState(new Map([["value", 42]]));
|
||||
counter = reactive(new Map([["value", 42]]));
|
||||
}
|
||||
const counter = await mount(Counter, fixture);
|
||||
expect(fixture.innerHTML).toBe("<div>42</div>");
|
||||
@@ -72,7 +97,7 @@ describe("reactivity in lifecycle", () => {
|
||||
static template = xml`
|
||||
<span><t t-esc="props.val"/><t t-esc="state.n"/></span>
|
||||
`;
|
||||
state = useState({ n: 2 });
|
||||
state = reactive({ n: 2 });
|
||||
setup() {
|
||||
onWillRender(() => {
|
||||
steps.push("render");
|
||||
@@ -96,7 +121,7 @@ describe("reactivity in lifecycle", () => {
|
||||
</div>
|
||||
`;
|
||||
static components = { Child };
|
||||
state = useState({ val: 1, flag: true });
|
||||
state = reactive({ val: 1, flag: true });
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(steps).toEqual(["render"]);
|
||||
@@ -142,7 +167,7 @@ describe("reactivity in lifecycle", () => {
|
||||
static template = xml`
|
||||
<div><t t-esc="state.val"/></div>
|
||||
`;
|
||||
state = useState({ val: 1 });
|
||||
state = reactive({ val: 1 });
|
||||
setup() {
|
||||
STATE = this.state;
|
||||
onWillRender(() => {
|
||||
@@ -167,7 +192,7 @@ describe("reactivity in lifecycle", () => {
|
||||
class Parent extends Component {
|
||||
static template = xml`<Child t-if="state.renderChild" state="state"/>`;
|
||||
static components = { Child };
|
||||
state: any = useState({ renderChild: true, content: { a: 2 } });
|
||||
state: any = reactive({ renderChild: true, content: { a: 2 } });
|
||||
setup() {
|
||||
useLogLifecycle();
|
||||
}
|
||||
@@ -205,7 +230,8 @@ describe("reactivity in lifecycle", () => {
|
||||
`);
|
||||
});
|
||||
|
||||
test("Component is automatically subscribed to reactive object received as prop", async () => {
|
||||
// todo: unskip it
|
||||
test.skip("Component is automatically subscribed to reactive object received as prop", async () => {
|
||||
let childRenderCount = 0;
|
||||
let parentRenderCount = 0;
|
||||
class Child extends Component {
|
||||
@@ -218,7 +244,7 @@ describe("reactivity in lifecycle", () => {
|
||||
static template = xml`<Child obj="obj" reactiveObj="reactiveObj"/>`;
|
||||
static components = { Child };
|
||||
obj = { a: 1 };
|
||||
reactiveObj = useState({ b: 2 });
|
||||
reactiveObj = reactive({ b: 2 });
|
||||
setup() {
|
||||
onWillRender(() => parentRenderCount++);
|
||||
}
|
||||
@@ -237,34 +263,3 @@ describe("reactivity in lifecycle", () => {
|
||||
expect(fixture.innerHTML).toBe("34");
|
||||
});
|
||||
});
|
||||
|
||||
describe("subscriptions", () => {
|
||||
test("subscriptions returns the keys and targets observed by the component", async () => {
|
||||
class Comp extends Component {
|
||||
static template = xml`<t t-esc="state.a"/>`;
|
||||
state = useState({ a: 1, b: 2 });
|
||||
}
|
||||
const comp = await mount(Comp, fixture);
|
||||
expect(fixture.innerHTML).toBe("1");
|
||||
expect(comp.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(comp.state) }]);
|
||||
});
|
||||
|
||||
test("subscriptions returns the keys observed by the component", async () => {
|
||||
class Child extends Component {
|
||||
static template = xml`<t t-esc="props.state.b"/>`;
|
||||
setup() {
|
||||
child = this;
|
||||
}
|
||||
}
|
||||
let child: Child;
|
||||
class Parent extends Component {
|
||||
static template = xml`<t t-esc="state.a"/><Child state="state"/>`;
|
||||
static components = { Child };
|
||||
state = useState({ a: 1, b: 2 });
|
||||
}
|
||||
const parent = await mount(Parent, fixture);
|
||||
expect(fixture.innerHTML).toBe("12");
|
||||
expect(parent.__owl__.subscriptions).toEqual([{ keys: ["a"], target: toRaw(parent.state) }]);
|
||||
expect(child!.__owl__.subscriptions).toEqual([{ keys: ["b"], target: toRaw(parent.state) }]);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,109 @@
|
||||
import { taskEffect } from "../../src/runtime/cancellableContext";
|
||||
import { Task } from "../../src/runtime/task";
|
||||
|
||||
export type Deffered = Promise<any> & {
|
||||
resolve: (value: any) => void;
|
||||
reject: (reason: any) => void;
|
||||
};
|
||||
|
||||
interface TaskWithResolvers<T> {
|
||||
promise: Promise<T>;
|
||||
resolve: (value: T | PromiseLike<T>) => void;
|
||||
reject: (reason?: any) => void;
|
||||
}
|
||||
|
||||
let resolvers: Record<string, TaskWithResolvers<string>> = {};
|
||||
function getTask(id: string) {
|
||||
const resolver: {
|
||||
task?: Task<string>;
|
||||
resolve?: (value: string | PromiseLike<string>) => void;
|
||||
reject?: (reason?: any) => void;
|
||||
} = {};
|
||||
|
||||
const promise = new Task<string>((res, rej) => {
|
||||
resolver.resolve = res;
|
||||
resolver.reject = rej;
|
||||
});
|
||||
resolver.task = promise;
|
||||
|
||||
resolvers[id] = resolver as TaskWithResolvers<string>;
|
||||
return promise;
|
||||
}
|
||||
function tick() {
|
||||
return new Promise((r) => setTimeout(r, 0));
|
||||
}
|
||||
|
||||
// const timeoutTask = (ms: number) => new Task((resolve) => setTimeout(() => resolve(ms), ms));
|
||||
|
||||
const steps: string[] = [];
|
||||
function step(msg: string) {
|
||||
steps.push(msg);
|
||||
}
|
||||
function verifySteps(expected: string[]) {
|
||||
expect(steps).toEqual(expected);
|
||||
steps.length = 0;
|
||||
}
|
||||
|
||||
afterEach(() => {
|
||||
resolvers = {};
|
||||
});
|
||||
|
||||
describe("task", () => {
|
||||
test("should run a task properly", async () => {
|
||||
taskEffect(async () => {
|
||||
let result;
|
||||
step(`a:begin`);
|
||||
result = await getTask("a");
|
||||
step(`a:${result}`);
|
||||
result = await getTask("b");
|
||||
step(`b:${result}`);
|
||||
});
|
||||
|
||||
verifySteps(["a:begin"]);
|
||||
resolvers["a"].resolve("a");
|
||||
await tick();
|
||||
verifySteps(["a:a"]);
|
||||
resolvers["b"].resolve("b");
|
||||
await tick();
|
||||
verifySteps(["b:b"]);
|
||||
});
|
||||
|
||||
test.only("should cancel a task properly", async () => {
|
||||
const ctx = taskEffect(async () => {
|
||||
let result;
|
||||
step(`a:begin`);
|
||||
result = await getTask("a");
|
||||
step(`a:${result}`);
|
||||
result = await getTask("b");
|
||||
step(`b:${result}`);
|
||||
});
|
||||
|
||||
verifySteps(["a:begin"]);
|
||||
resolvers["a"].resolve("a");
|
||||
await tick();
|
||||
verifySteps(["a:a"]);
|
||||
ctx.cancel();
|
||||
resolvers["b"].resolve("b");
|
||||
await tick();
|
||||
verifySteps([]);
|
||||
});
|
||||
|
||||
test("should run a task with subtasks properly", async () => {
|
||||
taskEffect(async () => {
|
||||
let result;
|
||||
step(`a:begin`);
|
||||
result = await getTask("a");
|
||||
step(`a:${result}`);
|
||||
result = await getTask("b");
|
||||
step(`b:${result}`);
|
||||
});
|
||||
|
||||
verifySteps(["a:begin"]);
|
||||
resolvers["a"].resolve("a");
|
||||
await tick();
|
||||
verifySteps(["a:a"]);
|
||||
resolvers["b"].resolve("b");
|
||||
await tick();
|
||||
verifySteps(["b:b"]);
|
||||
});
|
||||
});
|
||||
+918
-968
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user