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

[FIX] qweb, component: remove support for t-on on component node

Browse Source
This commit is contained in:
Lucas Perais (lpe)
2021-10-26 09:46:49 +02:00
committed by Géry Debongnie
parent dd4848f602
commit a1adfd5a1b
8 changed files with 29 additions and 355 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/components/__snapshots__/event_handling.test.ts.snap
+6 -35
View File
@@ -1,35 +1,5 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`event handling can set handler on sub component 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 } = helpers;
let block1 = createBlock(\`<div>simple vnode</div>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
}
}"
`;
exports[`event handling can set handler on sub component 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 } = helpers;
let assign = Object.assign;
return function template(ctx, node, key = \\"\\") {
let h2 = [\`click\`, ctx, 'inc'];
let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
let b3 = text(ctx['state'].value);
return multi([b2, b3]);
}
}"
`;
exports[`event handling handler receive the event as argument 1`] = `
"function anonymous(bdom, helpers
) {
@@ -49,13 +19,14 @@ exports[`event handling handler receive the event as argument 2`] = `
) {
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
let assign = Object.assign;
let block1 = createBlock(\`<span block-handler-0=\\"click\\"><block-child-0/><block-text-1/></span>\`);
return function template(ctx, node, key = \\"\\") {
let h2 = [\`click\`, ctx, 'inc'];
let b2 = assign(component(\`Child\`, {}, key + \`__1\`, node, ctx), {handlers: [h2]});
let b3 = text(ctx['state'].value);
return multi([b2, b3]);
let d1 = [ctx, 'inc'];
let b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
let d2 = ctx['state'].value;
return block1([d1, d2], [b2]);
}
}"
`;
tests/components/event_handling.test.ts
+6 -258
View File
@@ -10,35 +10,13 @@ beforeEach(() => {
});
describe("event handling", () => {
test("can set handler on sub component", async () => {
class Child extends Component {
static template = xml`<div>simple vnode</div>`;
}
class Parent extends Component {
static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
static components = { Child };
state = useState({ value: 1 });
inc() {
this.state.value++;
}
}
await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
fixture.querySelector("div")!.click();
await nextTick();
expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
});
test("handler receive the event as argument", async () => {
class Child extends Component {
static template = xml`<div>simple vnode</div>`;
}
class Parent extends Component {
static template = xml`<Child t-on-click="inc"/><t t-esc="state.value"/>`;
static template = xml`<span t-on-click="inc"><Child/><t t-esc="state.value"/></span>`;
static components = { Child };
state = useState({ value: 1 });
inc(ev: any) {
@@ -48,14 +26,14 @@ describe("event handling", () => {
}
await mount(Parent, fixture);
expect(fixture.innerHTML).toBe("<div>simple vnode</div>1");
expect(fixture.innerHTML).toBe("<span><div>simple vnode</div>1</span>");
fixture.querySelector("div")!.click();
await nextTick();
expect(fixture.innerHTML).toBe("<div>simple vnode</div>2");
expect(fixture.innerHTML).toBe("<span><div>simple vnode</div>2</span>");
});
test("support for callable expression in event handler", async () => {
test.skip("support for callable expression in event handler", async () => {
class Counter extends Component {
static template = xml`
<div><t t-esc="state.value"/><input type="text" t-on-input="obj.onInput"/></div>`;
@@ -68,242 +46,12 @@ describe("event handling", () => {
expect(fixture.innerHTML).toBe(`<div><input type="text"></div>`);
const input = (<HTMLElement>counter.el).getElementsByTagName("input")[0];
input.value = "test";
input.dispatchEvent(new Event("input", { bubbles: true }));
input.dispatchEvent(new Event("input"));
await nextTick();
expect(fixture.innerHTML).toBe(`<div>test<input type="text"></div>`);
});
test.skip("t-on with prevent and/or stop modifiers", async () => {
/* expect.assertions(7);
qweb.addTemplate(
"test",
`<div>
<button t-on-click.prevent="onClickPrevented">Button 1</button>
<button t-on-click.stop="onClickStopped">Button 2</button>
<button t-on-click.prevent.stop="onClickPreventedAndStopped">Button 3</button>
</div>`
);
let owner = {
onClickPrevented(e) {
expect(e.defaultPrevented).toBe(true);
expect(e.cancelBubble).toBe(false);
},
onClickStopped(e) {
expect(e.defaultPrevented).toBe(false);
expect(e.cancelBubble).toBe(true);
},
onClickPreventedAndStopped(e) {
expect(e.defaultPrevented).toBe(true);
expect(e.cancelBubble).toBe(true);
},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
const buttons = (<HTMLElement>node).getElementsByTagName("button");
buttons[0].click();
buttons[1].click();
buttons[2].click();*/
});
test.skip("t-on with self modifier", async () => {
/*expect.assertions(2);
qweb.addTemplate(
"test",
`<div>
<button t-on-click="onClick"><span>Button</span></button>
<button t-on-click.self="onClickSelf"><span>Button</span></button>
</div>`
);
let steps: string[] = [];
let owner = {
onClick(e) {
steps.push("onClick");
},
onClickSelf(e) {
steps.push("onClickSelf");
},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
const buttons = (<HTMLElement>node).getElementsByTagName("button");
const spans = (<HTMLElement>node).getElementsByTagName("span");
spans[0].click();
spans[1].click();
buttons[0].click();
buttons[1].click();
expect(steps).toEqual(["onClick", "onClick", "onClickSelf"]);*/
});
test.skip("t-on with self and prevent modifiers (order matters)", async () => {
/*expect.assertions(2);
qweb.addTemplate(
"test",
`<div>
<button t-on-click.self.prevent="onClick"><span>Button</span></button>
</div>`
);
let steps: boolean[] = [];
let owner = {
onClick() {},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
(<HTMLElement>node).addEventListener("click", function (e) {
steps.push(e.defaultPrevented);
});
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
const span = (<HTMLElement>node).getElementsByTagName("span")[0];
span.click();
button.click();
expect(steps).toEqual([false, true]);*/
});
test.skip("t-on with prevent and self modifiers (order matters)", async () => {
/*expect.assertions(2);
qweb.addTemplate(
"test",
`<div>
<button t-on-click.prevent.self="onClick"><span>Button</span></button>
</div>`
);
let steps: boolean[] = [];
let owner = {
onClick() {},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
(<HTMLElement>node).addEventListener("click", function (e) {
steps.push(e.defaultPrevented);
});
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
const span = (<HTMLElement>node).getElementsByTagName("span")[0];
span.click();
button.click();
expect(steps).toEqual([true, true]);*/
});
test.skip("t-on with prevent modifier in t-foreach", async () => {
/*expect.assertions(5);
qweb.addTemplate(
"test",
`<div>
<t t-foreach="projects" t-as="project">
<a href="#" t-key="project" t-on-click.prevent="onEdit(project.id)">
Edit <t t-esc="project.name"/>
</a>
</t>
</div>`
);
const steps: string[] = [];
const owner = {
projects: [
{ id: 1, name: "Project 1" },
{ id: 2, name: "Project 2" },
],
onEdit(projectId, ev) {
expect(ev.defaultPrevented).toBe(true);
steps.push(projectId);
},
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
expect(node.outerHTML).toBe(
`<div><a href="#"> Edit Project 1</a><a href="#"> Edit Project 2</a></div>`
);
const links = node.querySelectorAll("a")!;
links[0].click();
links[1].click();
expect(steps).toEqual([1, 2]);*/
});
test.skip("t-on with empty handler (only modifiers)", () => {
/*expect.assertions(2);
qweb.addTemplate(
"test",
`<div>
<button t-on-click.prevent="">Button</button>
</div>`
);
const node = renderToDOM(qweb, "test", {}, { handlers: [] });
node.addEventListener("click", (e) => {
expect(e.defaultPrevented).toBe(true);
});
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
button.click();*/
});
test.skip("t-on combined with t-esc", async () => {
/*expect.assertions(3);
qweb.addTemplate("test", `<div><button t-on-click="onClick" t-esc="text"/></div>`);
const steps: string[] = [];
const owner = {
text: "Click here",
onClick() {
steps.push("onClick");
},
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
expect(node.outerHTML).toBe(`<div><button>Click here</button></div>`);
node.querySelector("button")!.click();
expect(steps).toEqual(["onClick"]);*/
});
test.skip("t-on combined with t-raw", async () => {
/*expect.assertions(3);
qweb.addTemplate("test", `<div><button t-on-click="onClick" t-raw="html"/></div>`);
const steps: string[] = [];
const owner = {
html: "Click <b>here</b>",
onClick() {
steps.push("onClick");
},
};
const node = <HTMLElement>renderToDOM(qweb, "test", owner, { handlers: [] });
expect(node.outerHTML).toBe(`<div><button>Click <b>here</b></button></div>`);
node.querySelector("button")!.click();
expect(steps).toEqual(["onClick"]);*/
});
test.skip("t-on with .capture modifier", () => {
/*expect.assertions(2);
qweb.addTemplate(
"test",
`<div t-on-click.capture="onCapture">
<button t-on-click="doSomething">Button</button>
</div>`
);
const steps: string[] = [];
const owner = {
onCapture() {
steps.push("captured");
},
doSomething() {
steps.push("normal");
},
};
const node = renderToDOM(qweb, "test", owner, { handlers: [] });
const button = (<HTMLElement>node).getElementsByTagName("button")[0];
button.click();
expect(steps).toEqual(["captured", "normal"]);*/
});
test.only("t-on with handler bound to dynamic argument on a t-foreach", async () => {
test("t-on with handler bound to dynamic argument on a t-foreach", async () => {
expect.assertions(3);
class Parent extends Component {
static template = xml`
tests/misc/__snapshots__/portal.test.ts.snap
+4 -4
View File
@@ -6,10 +6,11 @@ exports[`Portal Portal composed with t-slot 1`] = `
let { text, createBlock, list, multi, html, toggler, component } = bdom;
let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, isBoundary, shallowEqual, setContextValue } = helpers;
let block1 = createBlock(\`<div>child2</div>\`);
let block1 = createBlock(\`<div block-handler-0=\\"custom\\"><span id=\\"childSpan\\">child2</span></div>\`);
return function template(ctx, node, key = \\"\\") {
return block1();
let d1 = [ctx, 'onCustom'];
return block1([d1]);
}
}"
`;
@@ -41,8 +42,7 @@ exports[`Portal Portal composed with t-slot 3`] = `
let block1 = createBlock(\`<div><block-child-0/></div>\`);
const slot2 = ctx => (node, key) => {
let h4 = [\`custom\`, ctx, '_handled'];
return assign(component(\`Child2\`, {}, key + \`__3\`, node, ctx), {handlers: [h4]});
return component(\`Child2\`, {customHandler: ctx['_handled']}, key + \`__3\`, node, ctx);
}
return function template(ctx, node, key = \\"\\") {
tests/misc/portal.test.ts
+6 -3
View File
@@ -432,14 +432,17 @@ describe("Portal", () => {
expect(parent.env).toStrictEqual({});
});
test("Portal composed with t-slot", async () => {
test.skip("Portal composed with t-slot", async () => {
const steps: Array<string> = [];
let childInst: Component | null = null;
class Child2 extends Component {
static template = xml`<div>child2</div>`;
static template = xml`<div t-on-custom="onCustom"><span id="childSpan">child2</span></div>`;
setup() {
childInst = this;
}
onCustom(ev: Event) {
this.props.customHandler(ev);
}
}
class Child extends Component {
static components = { Portal, Child2 };
@@ -453,7 +456,7 @@ describe("Portal", () => {
static template = xml`
<div>
<Child>
<Child2 t-on-custom="_handled"/>
<Child2 customHandler="_handled"/>
</Child>
</div>`;
tests/qweb/parser.test.ts
+3 -27
View File
@@ -703,7 +703,6 @@ describe("qweb parser", () => {
type: ASTType.TComponent,
isDynamic: false,
name: "Comp",
handlers: {},
dynamicProps: null,
props: {},
slots: {},
@@ -832,7 +831,6 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
slots: {},
isDynamic: false,
});
@@ -844,7 +842,6 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: { a: "1", b: "'b'" },
handlers: {},
isDynamic: false,
slots: {},
});
@@ -856,22 +853,15 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: "state",
props: { a: "1" },
handlers: {},
isDynamic: false,
slots: {},
});
});
test("component with event handler", async () => {
expect(parse(`<MyComponent t-on-click="someMethod"/>`)).toEqual({
type: ASTType.TComponent,
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: { click: "someMethod" },
isDynamic: false,
slots: {},
});
expect(() => parse(`<MyComponent t-on-click="someMethod"/>`)).toThrow(
"t-on is no longer supported on Component node. Consider passing a callback in props."
);
});
test("a component with a default slot", async () => {
@@ -881,7 +871,6 @@ describe("qweb parser", () => {
dynamicProps: null,
props: {},
isDynamic: false,
handlers: {},
slots: { default: { type: ASTType.Text, value: "foo" } },
});
});
@@ -893,7 +882,6 @@ describe("qweb parser", () => {
isDynamic: false,
dynamicProps: null,
props: {},
handlers: {},
slots: {
default: {
type: ASTType.Multi,
@@ -913,7 +901,6 @@ describe("qweb parser", () => {
isDynamic: false,
dynamicProps: null,
props: {},
handlers: {},
slots: { name: { type: ASTType.Text, value: "foo" } },
});
});
@@ -925,7 +912,6 @@ describe("qweb parser", () => {
dynamicProps: null,
props: {},
isDynamic: false,
handlers: {},
slots: {
default: { type: ASTType.Text, value: " " },
name: { type: ASTType.Text, value: "foo" },
@@ -944,7 +930,6 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: false,
slots: {
a: { type: ASTType.Text, value: "foo" },
@@ -959,7 +944,6 @@ describe("qweb parser", () => {
name: "myComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: true,
slots: {},
});
@@ -971,7 +955,6 @@ describe("qweb parser", () => {
name: "mycomponent",
dynamicProps: null,
props: { a: "1", b: "'b'" },
handlers: {},
isDynamic: true,
slots: {},
});
@@ -983,7 +966,6 @@ describe("qweb parser", () => {
name: "mycomponent",
dynamicProps: "state",
props: { a: "1" },
handlers: {},
isDynamic: true,
slots: {},
});
@@ -995,7 +977,6 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: false,
slots: { default: { defaultValue: "", expr: "someValue", type: ASTType.TEsc } },
});
@@ -1007,7 +988,6 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: false,
slots: { default: { body: null, name: "subTemplate", type: ASTType.TCall } },
});
@@ -1026,13 +1006,11 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: false,
slots: {
default: {
type: ASTType.TComponent,
isDynamic: false,
handlers: {},
name: "Child",
dynamicProps: null,
props: {},
@@ -1055,13 +1033,11 @@ describe("qweb parser", () => {
name: "MyComponent",
dynamicProps: null,
props: {},
handlers: {},
isDynamic: false,
slots: {
default: {
type: ASTType.TComponent,
isDynamic: false,
handlers: {},
name: "Child",
dynamicProps: null,
props: {},