Unit tests don't support DOM API

[rafehi]

Stencil version:

 @stencil/core@1.7.5

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

Current behavior:
The Stencil unit tests - specifically, SpecPage does not support the DOM API.

Expected behavior:
When creating a component using newSpecPage, I expect that the component will have access to the DOM API.

Steps to reproduce:

For the given component:
@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Element() el: HTMLElement;
  
  componentDidLoad() {  
    console.log(this.el.shadowRoot.getElementById('test'));
  }

  render() {    
    return <div id="test">Hello, World</div>;
  }
}

The following test fails:

describe('MyComponent', () => {
  let page: SpecPage;

  it('builds', async () => {
    await newSpecPage({
      components: [MyComponent],
      html: `<my-component></my-component>`
    });
    const component = new MyComponent();
    expect(component).toBeTruthy();    
  });
});

Because getElementById is not defined on MockElement'.

Other information:
While querySelector can be used as a workaround, in general test will break in other places, especially when using 3rd party components that rely on the DOM API.

While I could use E2E tests, they're currently impractical. It takes a minute to re-run a test after a single change due to needing to rebuild all web components.

[rafehi]

@manucorporat , appreciate the quick commit, though not sure this addresses the broader problem? It fixes it for that one function, however there are functions that still aren't exposed/implemented (e.g. appendChild, removeChild).

[manucorporat]

The DOM api is huge, mock-doc does a best effort trying to mock most of the DOM apis, if you find any api that is not implemented, please open an issue or a PR. appendChild() and removeChild() should be there

[rafehi]

That's very sensible. It seems the actual issue I'm running into is that the querySelector implementation might not support CSS combinators (child selector in my case). I'll dive into it and see if I can rectify.