How to test Stencil events and event handling with Puppeteer

my-component.e2e.ts

import { newE2EPage } from '@stencil/core/testing';

describe('my-component', () => {
  it('should fetch data from jsonplaceholder when it receives a todoComplete event', async () => {
    let requestURLs = [];
    const page = await newE2EPage();
    page.on('request', async (request) => {
      requestURLs.push(request.url());
    });
    await page.setContent('<my-component></my-component>');
    const element = await page.find('my-component');
    element.triggerEvent('todoCompleted');
    await page.waitForChanges();
    expect(requestURLs.pop()).toEqual('https://jsonplaceholder.typicode.com/todos/1');
  });
});

my-component.tsx

import { Component, Listen, Prop, State } from '@stencil/core';
import { format } from '../../utils/utils';

@Component({
  tag: 'my-component',
  shadow: true
})
export class MyComponent {
  @Prop() first: string;
  @Prop() middle: string;
  @Prop() last: string;
  @State() todo: any;
  @Listen('todoCompleted')
  todoCompletedHandler(event: CustomEvent) {
    fetch('https://jsonplaceholder.typicode.com/todos/1')
      .then(response => response.json())
      .then((json) => {
        this.todo = JSON.stringify(json, undefined, 4);
        console.log(event);
      });
  }

  render() {
    return (
      <div>
        Hello, World! I'm {this.getText()}
        <other-component />
        <pre>
          {this.todo}
        </pre>
      </div>
    );
  }

  private getText(): string {
    return format(this.first, this.middle, this.last);
  }
}

other-component.e2e.ts

import { newE2EPage } from '@stencil/core/testing';

describe('other-component', () => {
  it('should emit "todoCompleted" event on button click', async () => {
    const page = await newE2EPage();
    await page.setContent('<other-component></other-component>');
    const todoCompleted = await page.spyOnEvent('todoCompleted');
    const element = await page.find('other-component >>> button');
    element.click();
    await page.waitForChanges();
    // const event = await page.waitForEvent('todoCompleted');
    expect(todoCompleted).toHaveReceivedEventDetail({ prop1: 'val1' });
  });
});

other-component.tsx

import { Component, Event, EventEmitter } from '@stencil/core';

@Component({
  tag: 'other-component',
  shadow: true
})
export class OtherComponent {
  @Event({
    eventName: 'todoCompleted',
    bubbles: true,
  }) todoCompleted: EventEmitter;

  render() {
    return (
      <div>
        <button type="button" onClick={() => {this.todoCompletedHandler()}}>
          AAAaaaa...
        </button>
      </div>
    );
  }

  todoCompletedHandler () {
    this.todoCompleted.emit({
      prop1: 'val1',
    });
  }
}