How can I test a click event is canceled with playwright

Question

I'm building a base level componenet(like a button) which can be removed when clicking in the closable icon in that compoenet, I want to test : There should be one click event emitted followed by one myClose event. If click is cancelled then myClose is not emitted and the componenet won't be removed from the DOM.So I wanted to make sure that the compoenent is removed from the DOM unless the click event is cancelled. How to do so with playwright e2e test?

I tried to make a sénario where I access to the icon with playwrite css selector , click it and expect that the event will be emitted just once and the componenet won't be removed but the test fail (ofcours because I didn't cancel the event click, how to cancel it in test?)

  test(`myTest`, async ({ page }) => {
    const content = 
      <my-button
        text="Button"
        type="closable"
      ></my-button>

    await setupPage(page, { content, addBrandFont: true })

    await page.evaluate(() => {
      const closableButton = document.querySelector('.my-button[type="closable"]')
      closableButton?.dispatchEvent(
        new CustomEvent('myClose', { cancelable: true }),
      )
    })
    await page.locator('css=my-button[type="closable"] .my-icon').click()

    await page.waitForSelector('.my-button[type="closable"]', {
      state: 'detached',
      timeout: 2000,
    })
    const closableButton = page.locator('my-button[type="closable"]')
    const myCloseSpy = await closableButton.spyOnEvent('myClose')

    expect(myCloseSpy).toHaveReceivedEventTimes(0)

    const isClosableButtonVisible = await page.isVisible(
      'my-button[type="closable"]',
    )
    expect(isClosableButtonVisible).toBeTruthy()
  })