Stencil: Testing: newSpecPage() should be able to handle object properties

[guidoknoll]

Stencil version:

 @stencil/[email protected]

I'm submitting a:

[ ] bug report
[x] feature request
[ ] support request

Current behavior:

When trying to pass object properties to the tested component in an unit test, it can only be passed after the generation of a new spec page like this:

const config: WidgetConfiguration = {
    "language": "de",
    "retailPartner": "",
    ...
}

const page = await newSpecPage({
       components: [ProductListing],
       html: `<product-listing></<product-listing>`
});

page.rootInstance.config = config;
await page.waitForChanges();

If you need such a property in a lifecycle function like _componentWillLoad()_ it is undefined and you get an error.

public componentWillLoad() {
    if (this.config) {
      this.apiService = new ApiService(this.config.apiPath);
      this.fetchProducts();
    } else {
      throw new Error('Configuration must be provided!');
    }
 }

Expected behavior:

It should be possible to pass complex properties like objects to and web component during an unit test when creating ja new spec page.

Other information:

A option called _properties_ for the _newSpecPage()_ function could pass an array of properties to the root component of the spec page.

[manucorporat]

It is possible!

const page = await newSpecPage({
       components: [ProductListing],
       template: () => (
         <product-listing config={config}></<product-listing>
       )
});

in this case you are not testing html, but the component created using JSX (which allows complex prop passing), html is only html-attributes.

[guidoknoll]

Thank you for the quick answer! I little bit more documentation on this would be cool for the future :)

[markcellus]

I agree there should be some documentation around this. It doesn't look like there's any.