spyOnEvent has wrong event.detail data if a custom event emits a Map or a dom element.

[pr3tori4n]

Stencil version:

@stencil/core@1.3.2

I'm submitting a:

[x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior:
when using page.spyOnEvent() to spy on a custom stencil emitted event, if data was passed from the event, the spy's event.detail is incorrect.

Expected behavior:
When validating the event.detail from the spys event object, the data should match what the component passes.

Steps to reproduce:

1. Create a component that emits a custom event when something is clicked on. Have that custom event either pass a reference to a dom element, or a javascript Map.
2. Setup an e2e test that triggers a click on that element, and spys on that event using e2eElement.spyOnEvent()
3. try and run an expect on that event's details, such as expect(spy.lastEvent.detail).toBe or toHaveReceivedEventDetail.
4. Notice that the event detail data is incorrect if it's not a primitive data type.

Related code:

// component
const bar = document.querySelector('foo-element');
const selectedValues = new Map('foo', bar);
this.fooEvent.emit(selectedValues);

// e2e test
const toggleSpy = await picker.spyOnEvent("fooEvent");
await something.click();
expect(toggleSpy.lastEvent.detail.has('foo').toBe(true);

Other information:

stencil/src/testing/puppeteer/puppeteer-declarations.ts

Line 105 in c6bd82d

spyOnEvent(eventName: string, selector?: 'window' | 'document'): Promise<d.EventSpy>;

[manucorporat]

it's not trivial to move complex objects from browser to node, notice that the tests ar running in node, but your app is running in the browser using puppeteer.

[pr3tori4n]

@manucorporat That's fair. I've been able to achieve some goals relying on page.waitForEvent() and page.evaluate(). It might be worth documenting this limitation and pointing folks to possible solutions.

[pr3tori4n]

Maybe spyOnEvent could be amended to accept a callback function that uses page.evaluate under the hood? That way a user can perform operations on an object in the page scope, then pass that back to node for assertion.

[TRMW]

I am also encountering this issue. I agree that it would be nice to at least document this behavior.

FWIW, I am seeing the value "s-p": Array [] for all DOM node and array values contained in an event detail.

[rdlabo]

me too. I use evaluateHandle instead of spyOnEvent . But can't get event.detail data.

const result = page.evaluateHandle( () => {
  return new Promise(resolve => {
    const inputfield = document.querySelector('blf-inputfield');
    inputfield.addEventListener('blfInput', (event) => {
      resolve(event)
    });
  })
});await page.waitForChanges();
result.then(d => d.jsonValue().then(s => console.log(s)));

@pr3tori4n Can I get sample code if you have a solution?

[Trendy]

This bug seems to be affecting me as well, but in a different way.

I have a component that emits a custom event, let's call it tabAcitivated.
That event has an element in the event details.

this.tabAcitived.emit({ index, tab});

My test is like so:

//...
const tabs = await page.find('tab-bar');
const activatedEvent = await tabs.spyOnEvent('tabActivated');

await tabs.callMethod('activateTab', 0);
await page.waitForChanges();

expect(activatedEvent).toHaveReceivedEventTimes(1);

My test will fail, saying the event was never received. Removing the DOM element from the event details allows the tests to pass.