const { Component, mount, useState, xml } = owl;

const dispatchMouseEnter = (el) => {
    const mouseEnterEvent = new MouseEvent("mouseenter", { bubbles: false });
    el.dispatchEvent(mouseEnterEvent);
};

let handled = 0;

class App extends Component {
    static template = xml`
        <main class="App">
            <button t-on-click="() => state.synthetic = !state.synthetic">
                Toggle synthetic
            </button>
            <ul>
                <t t-foreach="[1, 2, 3]" t-as="i" t-key="i">
                    <t t-if="state.synthetic">
                        <li t-on-mouseenter.synthetic="inc" t-esc="i" />
                    </t>
                    <t t-else="">
                        <li t-on-mouseenter="inc" t-esc="i" />
                    </t>
                </t>
            </ul>
        </main>
    `;
    
    state = useState({ synthetic: false });
    
    inc() {
        handled++;
    }
}

await mount(App, document.body, { dev: true });

dispatchMouseEnter(document.querySelector("li"));

if (handled === 1) {
    console.log("First event handled");
} else {
    console.error("First event not handled");
}

document.querySelector("button").click();
await new Promise((r) => setTimeout(r, 100));

dispatchMouseEnter(document.querySelector("li"));


if (handled === 2) {
    console.log("Second event handled");
} else {
    console.error("Second event not handled");
}