Set an object as Property of a component from e2e-tests

[ThiAmm]

Stencil version:

 @stencil/core@^2.0.0

I'm submitting a:
[ x ] bug report
[ ] feature request

As set out on the doc page for the Prop decorator, one can have a service as a Prop:

export class TodoList {
  @Prop() myhttpservice: MyHttpService;
  @Prop() color: string;
  componentWillLoad(){
    myhttpservice.loadData().then((data : string ) => {this.color = data});
  }
}

As explained in section E2E Testing Recipes on the doc page for End-to-end testing, i set the properties as follows:

await page.setContent(`<to-do-list></to-do-list>`);

await page.$eval('to-do-list', (elm: any) => {
  elm.color= 'Marty';
  elm.myhttpservice= {
    loadData(): Promise<string>{
      return new Promise(
        function(resolve, reject) {
          resolve("test");
        }
      );
    }
  };
});
await page.waitForChanges();

However, this approach means that myhttpservice is null in componentWillLoad and componentWillRender after await page.setContent('<to-do-list></to-do-list>');, as expected, since the properties are not set.
Setting the property via page.$eval triggers a rerender, but componentWillLoad is not triggered, as expected.

In order to test that the httpservice sets the color, i want to trigger the method componentWillLoad.
Setting the property in setContent means that the property color is set in componentWillLoad, but the property myhttpservice is still null.

await page.setContent(`<to-do-list myhttpservice='${{
    loadData(): Promise<string>{
      return new Promise(
        function(resolve, reject) {
          resolve("test");
        }
      );
    }
  }}' color="${'Marty'}" ></app-vertreter-anzeigen>`);

Expected behavior:
Object set as Properties in setContent are not null in componentWillLoad.
Steps to reproduce:

export class TodoList {
  @Prop() color: string;
  @Prop() myhttpservice: MyHttpService;
}
  componentWillLoad(){
    console.log(color== null);
    console.log(myhttpservice == null);
  }

E2E-Test-Snippet:

await page.setContent(`<to-do-list myhttpservice='${{
    loadData(): Promise<string>{
      return new Promise(
        function(resolve, reject) {
          resolve("test");
        }
      );
    }
  }}' color="${'Marty'}" ></app-vertreter-anzeigen>`);

This will print:

false
true

while expected

false
false

[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.

I think what you bring up would be a great avenue to cover in the E2E test docs. In my experience, I would set your mock up in a spec test, which would speed up the execution, and let you work with an instance of the class directly, so you can use the lifecycle hooks like componentWillLoad.

Check out Jest's mock docs here: https://jestjs.io/docs/26.x/mock-functions

We will tag this for expanded documentation on the Stencil site.