E2e tests for Lifecycle some events don't work, Spec tests sometimes fail too.

[simongrimes]

Stencil version:

 @stencil/core@1.1.7 

I'm submitting a:
[*] 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:
Testing events fired during the stencil lifecycle is not always possible.

In End to End tests I’ve not been able to find a way to capture events fired from the following lifecycle methods (note, I’ve not tested them all):

• connectedCallback()
• componentWillLoad()
• componentDidLoad()
• componentWillRender()

Possibly this is because the events fire before the spys are attached, but there does not appear to be a way in e2e tests to attach the other way around. Setting the page content after setting the spys removes the existing spys.

Using the Spec test you can spy on these events mostly, but I’ve had issues with componentDidLoad though.

In Spec tests you can add Event Listeners before setting the page content.

Expected behavior:
For proper end to end testing we would need to be able to capture events in the e2e tests.

I would also expect componentDidLoad to work in both e2e and spec tests.

Steps to reproduce:
Small demo showing the issues here: https://github.com/simongrimes/lifecycle-demo

https://github.com/simongrimes/lifecycle-demo/blob/master/src/components/lifecycle-demo/lifecycle-demo.spec.ts demonstrates the spec tests capturing most of the events (the componentDidLoad fails).

https://github.com/simongrimes/lifecycle-demo/blob/master/src/components/lifecycle-demo/lifecycle-demo.e2e.ts demonstrates the e2e tests failing to capture the lifecycle events, but capturing an event fired by a button click.

Both files have been left in a running state, unrem the tests to see them fail.

As the events fire they also log with console.log so you can verify that they lifecycle events have fired manually.

Other information:

• Related to: test using page.spyOnEvent( 'customEventName' ) doesn't work #1216
• https://stenciljs.com/docs/component-lifecycle

[cnavarroestrella]

I suspect that componentDidLoad might not be getting called at all in the e2e tests. I've tried straight up waiting for 10 seconds before looking for an element being written to the shadow DOM on componentDidLoad, but it's not there. I've also tried manually firing an event on document on componentDidLoad and waiting on it with page.waitForEvent and it never returns.

[splitinfinities]

Hey there, thank you for the patience getting back to you. The new team is getting started and we're working through the backlog now.

We do not support Stencil versions less than v2, and you seem to be using an older version of Stencil. If you can upgrade to the latest version and let me know if this issue still exists, I would appreciate it.

Let me know if you need anything else!

[simongrimes]

Thanks @splitinfinities; been a while since I looked at thins and I can't even remember my use case :)

I tried a quick update to 2.0.1 and I was seeing similar fails (assuming my comments were correct); I'll try and find time to have a proper look into it soon.

[bkjohnson]

@splitinfinities My team is on Stencil 2.10 and we're experiencing this issue. Here is the component code we're trying to test:

  componentDidLoad() {
    // auto-expand accordion if the window hash matches the ID
    if (this.el.id && this.el.id === window.location.hash.slice(1)) {
      const currentTarget = this.expandButton;
      if (currentTarget) {
        currentTarget.click();
      }
    }
  }

And here is one of the ways we've tried to test it:

  it('fires a custom event when the location hash matches the accordion id', async () => {
    const page = await newE2EPage({ url: '/#testing' });

    await page.setContent(
      '<va-accordion-item id="testing" header="The header">Content inside</va-accordion-item>',
    );
    const accordionItemToggled = await page.spyOnEvent('accordionItemToggled');
    await page.waitForChanges();

    expect(accordionItemToggled).toHaveReceivedEventTimes(1);
  });

We've also tried testing for certain DOM attribute values rather than events firing and that hasn't been any better.

I've been able to confirm that componentDidLoad is running by putting a console.log in there, but we've had this test be very flaky on us. Sometimes the event will fire and sometimes it won't. I've also tried hardcoding a delay with await page.waitForTimeout() as well as page.waitForEvent() and this doesn't seem to help at all. Do you have any idea why we're experiencing this, or what we can do to resolve it?