bug: E2EElement.triggerEvent omits event details functions

[candiotti-ca]

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Stencil Version

4.7.0

Current Behavior

Hi, I have a little component that listents to an event:

@Component({
  tag: 'e2e-events-ticket'
})
export class E2eEventsTicket {
  handleFileUploaded(event:CustomEvent):void{
    console.log('[COMPONENT] is file array fn exists', !!event.detail.arrayBuffer);
  }

  render() {
    return (
      <Host>
        <file-upload onFileUploaded={event => this.handleFileUploaded(event)} />
      </Host>
    );
  }
}

file-upload is a component that contains a <input type=file/> and follows the event when a user chooses a file. In runtime, it works like a charm, but I can't test it:

describe('e2e-events-ticket', () => {
  it('should work', async () => {
    const page = await newE2EPage();
    await page.setContent('<e2e-events-ticket></e2e-events-ticket>');

    const fileImportComponent = await page.find('e2e-events-ticket').then(el => el.find('file-upload'));
    expect(fileImportComponent).toBeTruthy();

    const mockFile = {
      arrayBuffer: () => Promise.resolve(new Uint32Array([1, 2]) as ArrayBuffer),
      name: 'filename'
    };
    console.log('[TEST] is file array fn exists', !!mockFile.arrayBuffer);

    fileImportComponent.triggerEvent('fileUploaded', { detail: mockFile });
    await page.waitForChanges();
  });
});

I trigger an event whose detail is an object {name: string; arrayBuffer: () => Promise<ArrayBuffer>} ; but on my component side, I only receive {name: string;}, as if the details object methods are omitted!

Here's the logs:

  ● Console

    console.log
      [TEST] is file array fn exists true

      at Object.<anonymous> (src/components/e2e-events-ticket/e2e-events-ticket.e2e.ts:23:13)

    console.log
      [COMPONENT] is file array fn exists false 
      Location: http://localhost:3345/build/e2e-events-ticket.entry.js:7:16

      at t (node_modules/@stencil/core/testing/index.js:15048:67)
          at Array.map (<anonymous>)
          at Array.map (<anonymous>)

Expected Behavior

The details object to contain the defined methods

System Info

System: node 21.7.3
    Platform: linux (5.15.146.1-microsoft-standard-WSL2)
   CPU Model: 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz (16 cpus)
    Compiler: /home/titi/create-stencil/node_modules/@stencil/core/compiler/stencil.js
       Build: 1712585430
     Stencil: 4.15.0 🎖
  TypeScript: 5.4.4
      Rollup: 2.56.3
      Parse5: 7.1.2
      jQuery: 4.0.0-pre
      Terser: 5.30.0

Steps to Reproduce

npm i && npm run test-e2e-event

Code Reproduction URL

https://github.com/candiotti-ca/create-stencil

Additional Information

No response

[christian-bromann]

Thanks for reporting @candiotti-ca!

I looked into you provided example and was able to reproduce it. It seems that the object passed into the components event listener (handleFileUploaded) is a JSHandle and not the serialized object. I recommend to try initialize the CustomEvent on the browser side within an evaluate callback. I will ingest this into our backlog to evaluate how we can improve this interface to either forbid complex types such as array buffer or enhance the functionality to support these use cases.