[ct]: sometimes SvelteComponent.$on() is not in sync

In a regular scenario it seems that custom event is not dispatched in sync with the test execution and after searching in Playwright repo and Svelte repo, i don’t know how to understand this.

https://github.com/microsoft/playwright/blob/693ed9b19e03f7d29ef188e8b71d6f9485093c8b/packages/playwright-ct-svelte/registerSource.mjs#L104

The value of result in the test sometimes is null:

I need to do a trick and “await” for the result binding a global var inside the component:

¿await locator("...").click() is not really waiting to the callback finnish when is a well declared Promise? Here is the trick with global var. Previously, there is a dispatcher('end', result).

[yury-s]

Not sure if possible but it would be great if we don’t have to think about awaiting at all. Maybe with a retry mechanism?

You can already achieve that with poll:

await expect.poll(() =>messages).toEqual(['clicked']);

Unfortunately there is no generic mechanism that would automatically wait for the desired effects of a user action. Closing this issue as there are several solutions for the problem.

[sand4rt]

Not sure if possible but it would be great if we don’t have to think about awaiting at all. Maybe with a retry mechanism? Made a simpler version of the problem:

// Button.svelte
<script lang="ts">
  import { createEventDispatcher } from "svelte";
  const dispatch = createEventDispatcher();

  async function handleClick() {
    await new Promise(r => setTimeout(r, 5000)); // sleep 5 seconds
    dispatch("click");
  }
</script>
 
<button on:click={handleClick}>Submit</button>

// tests.spec.ts
test('emit an async event when the button is clicked', async ({ mount }) => {
  const messages: string[] = []
  const component = await mount(Button, {
    on: {
      click: () => {
        messages.push('clicked')
      }
    }
  })
  await component.click();
  expect(messages).toEqual(['clicked']) // fails because we need to await handleClick
})