How to test stenciljs nested components

Question

I have a stenciljs component embedded inside another stenciljs component

<parent-component>
  <child-component attrz="x">
  </child-component>
</parent-component>

The child-component is only rendered when the parent-component receives a hover event with an attribute 'attrz' set programmatically. I set up the component in either spec.js or e2e.js and issue a hover event and then wait for changes.

e.g.:

  const page = await newE2EPage();
  await page.setContent(`<parent-component></parent-component>`);
  const el = await page.find('parent-component');
  await el.hover();
  await page.waitForChanges();

However, I cannot see this attribute in either spec.js or e2e.js tests. Also it seems that neither spec.js nor e2e.js actually renders the child-component.

So my question is there any way I can test child components in stenciljs?

Answer 1

You can access properties through the getProperty() function of E2EElement. So assuming that the rest of your test looks something like:

const child = await page.find('child-component');

You can test the 'attrz' property using:

expect(await child.getProperty('attrz')).toEqual('x');

You do not need the use reflect-to-attr in components to test properties.

Answer 2

This is also possible to test using newSpecPage on unit tests.

const child = page.root.querySelector('child-component');

Now just reference the attrz property value directly on the child:

expect(child.attrz).toEqual('x');