[testing-helpers] Allow to inject wrapper element in fixture

Currently there’s no way to customize the creation of wrapper element used as parent to the template.

A use case is testing an element that uses the dependency injection technique described by Polymer dev here and here. It relies on a parent element that listen to an event dispatched in the connectedCallback

An actual example of testing is here. app-header element depends on a context provided by a parent element. Currently there’s no way to properly test it.

This is something i can work if approved

[blikblum]

by making the updateComplete of you class to include all it’s children

1. Changing the implementation of the component (with complexity increase and performance penalty) just to allow testing does not sound good

2. Even considering the above, context provider elements does not deals with children rendering at all

As a user you create the fixture and therefore you should also know if the element needs some more time then the default…

Yes, the solution is to await the rendering for the child element like below:

const wrapper = await fixture(html`
  <my-context .data=${...}>
       <my-el></my-el>
  </my-context>
`;

const el = wrapper.querySelector('my-el');
await el.updateComplete

With the following caveats

• adds yet more boilerplate and the whole reason of testing-helpers is to avoid them
• the test must be aware how my-el is implemented (skatejs / lit / stencil)
• it makes harder to visualize what component you are testing. Compare with the below:

const el = await fixture(html`<my-el></my-el>`, { parent: contextEl });

Finally, the code required to implement the ability to define the the wrapper/parent is moving one line in one place (the remaining code just pass options argument down the call stack).

Its less than the required code to implement one test case with the proposed solution

[LarsDenBakker]

Allowing setting the wrapper element does seem like a simple solution as well given the complexities. @daKmoR what do you think?