\`);
+
+ return function template(ctx, node, key = \\"\\") {
+ let d1 = [ctx, 'onClick'];
+ return block1([d1]);
+ }
+}"
+`;
+
+exports[`t-on t-on on destroyed components 2`] = `
+"function anonymous(bdom, helpers
+) {
+ let { text, createBlock, list, multi, html, toggler, component } = bdom;
+ let { withDefault, getTemplate, prepareList, withKey, zero, call, callSlot, capture, shallowEqual } = helpers;
+
+ let block1 = createBlock(\`
\`);
+
+ return function template(ctx, node, key = \\"\\") {
+ let b2;
+ if (ctx['state'].flag) {
+ b2 = component(\`Child\`, {}, key + \`__1\`, node, ctx);
+ }
+ return block1([], [b2]);
+ }
+}"
+`;
diff --git a/tests/components/basics.test.ts b/tests/components/basics.test.ts
index 4a86ad4e..cafe0584 100644
--- a/tests/components/basics.test.ts
+++ b/tests/components/basics.test.ts
@@ -718,7 +718,9 @@ describe("basics", () => {
await nextTick();
expect(Object.values(parent.__owl__.children)[0].component).toBe(child);
expect(status(child)).toBe("mounted");
- expect(fixture.innerHTML).toBe(`
hey
childtest`)
+ expect(fixture.innerHTML).toBe(
+ `
hey
childtest`
+ );
});
test("list of two sub components inside other nodes", async () => {
diff --git a/tests/components/lifecycle.test.ts b/tests/components/lifecycle.test.ts
index 796a82ca..6f8942e4 100644
--- a/tests/components/lifecycle.test.ts
+++ b/tests/components/lifecycle.test.ts
@@ -919,7 +919,9 @@ describe("lifecycle hooks", () => {
static template = xml`
`;
setup() {
created = true;
- onMounted(() => { mounted = true; })
+ onMounted(() => {
+ mounted = true;
+ });
}
}
class Parent extends Component {
diff --git a/tests/components/style_class.test.ts b/tests/components/style_class.test.ts
index 529c4f49..2f75798f 100644
--- a/tests/components/style_class.test.ts
+++ b/tests/components/style_class.test.ts
@@ -244,7 +244,7 @@ describe("style and class handling", () => {
state = useState({ d: true });
}
class Parent extends Component {
- static template = xml`
`
+ static template = xml`
`;
static components = { Child };
state = useState({ b: true });
child = useRef("child");
@@ -319,7 +319,7 @@ describe("style and class handling", () => {
expect(fixture.innerHTML).toBe(`
`);
- widget.state.style["font-size"] = "30px" ;
+ widget.state.style["font-size"] = "30px";
await nextTick();
expect(fixture.innerHTML).toBe(`
`);
@@ -341,7 +341,8 @@ describe("style and class handling", () => {
error = e;
}
expect(error).toBeDefined();
- const regexp = /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
+ const regexp =
+ /Cannot read properties of undefined \(reading 'crash'\)|Cannot read property 'crash' of undefined/g;
expect(error.message).toMatch(regexp);
expect(fixture.innerHTML).toBe("");
});
diff --git a/tests/components/t_on.test.ts b/tests/components/t_on.test.ts
new file mode 100644
index 00000000..f380cd9a
--- /dev/null
+++ b/tests/components/t_on.test.ts
@@ -0,0 +1,145 @@
+import { Component, mount, onMounted, useState, xml } from "../../src/index";
+import { makeTestFixture, nextTick, snapshotEverything } from "../helpers";
+import { status } from "../../src/component/status";
+
+snapshotEverything();
+
+let fixture: HTMLElement;
+
+beforeEach(() => {
+ fixture = makeTestFixture();
+});
+
+describe("t-on", () => {
+ test("t-on on destroyed components", async () => {
+ const steps: string[] = [];
+ let child;
+ class Child extends Component {
+ static template = xml`
`;
+ setup() {
+ onMounted(() => {
+ child = this;
+ });
+ }
+ onClick() {
+ steps.push("click");
+ }
+ }
+ class Parent extends Component {
+ static template = xml`
`;
+ static components = { Child };
+ state = useState({ flag: true });
+ }
+ const parent = await mount(Parent, fixture);
+ let el = (child as any).el as HTMLElement;
+ el.click();
+ expect(steps).toEqual(["click"]);
+ (parent as any).state.flag = false;
+ await nextTick();
+ expect(status(child as any)).toBe("destroyed");
+ el.click();
+ expect(steps).toEqual(["click"]);
+ });
+
+ test("t-on expression in t-foreach", async () => {
+ class Comp extends Component {
+ static template = xml`
+
+ `;
+ state = useState({ values: ["a", "b"] });
+ otherState = { vals: [] };
+ }
+ const comp = await mount(Comp, fixture);
+ expect(fixture.innerHTML).toBe(
+ "
"
+ );
+ expect(comp.otherState.vals).toStrictEqual([]);
+ const buttons = fixture.querySelectorAll("button");
+ buttons[0].click();
+ buttons[1].click();
+ expect(comp.otherState.vals).toStrictEqual(["a", "b"]);
+ });
+
+ test("t-on expression in t-foreach with t-set", async () => {
+ class Comp extends Component {
+ static template = xml`
+
+ `;
+ state = useState({ values: ["a", "b"] });
+ otherState = { vals: [] };
+ }
+ const comp = await mount(Comp, fixture);
+ expect(fixture.innerHTML).toBe(
+ "
"
+ );
+ expect(comp.otherState.vals).toStrictEqual([]);
+ const buttons = fixture.querySelectorAll("button");
+ buttons[0].click();
+ buttons[1].click();
+ expect(comp.otherState.vals).toStrictEqual(["a_nova_0", "b_nova_0_1"]);
+ });
+
+ test("t-on method call in t-foreach", async () => {
+ class Comp extends Component {
+ static template = xml`
+
+ `;
+ state = useState({ values: ["a", "b"] });
+ otherState = { vals: new Array
() };
+ addVal(val: string) {
+ this.otherState.vals.push(val);
+ }
+ }
+ const comp = await mount(Comp, fixture);
+ expect(fixture.innerHTML).toBe(
+ "0: a
1: b