stencil

stencil copied to clipboard

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Stencil Version

2.15.2

Current Behavior

When running unit tests and the HTMLUListElement is used in either your testcode or tested code, it will throw an error that the HTMLUListElement is not defined.

Expected Behavior

HTMLUListElement is supported by both NodeJS and browsers so I expect this to work. I also noted that all elements have the constructor MockHTMLElement and I expect elements to have their correct types.

Steps to Reproduce

Run the reproduction application test or run the following test example to reproduce:

it('HTMLUListElement is not defined', async () => {
    const unorderedList = document.createElement('ul');
    console.log(unorderedList instanceof HTMLUListElement);
});

Code Reproduction URL

https://github.com/erwinheitzman/stencil-htmlulistelement

Additional Information

I feel that it is likely related to the environment that Stencil runs it's tests in or related to a mock.

No response

HTMLUListElement is supported by both NodeJS ...

What do you mean by supported by NodeJS here? Node is an independent js environment detached from a browser, therefore without a DOM and therefore without a native HTMLUListElement instance.

Perhaps in another 'pretend' dom this test will work (see jsdom), but at the moment this is how MockDoc (stencil's 'pretend' dom) is designed to work.

I'd suggest your bug report should probably be a feature request.

You can ignore the NodeJS mention really, the most important part is that the MockDoc assigns the the MockHTMLElement while instead there should probably be a MockHTMLUListElement and a similar version for all the supported elements.

For reference I am talking about this: https://developer.mozilla.org/en-US/docs/Web/API/HTMLUListElement

This is widely supported and since our Stencil code has a snippet like:

if (element instanceof HTMLUListElement) {
  // do stuff
}

We are not able to unit test this functionality even though the code is valid.

Regarding it being a bug or a feature request, I believe that this isn't working while the usecase is completely valid as it belongs to the web standards and isn't something new. Therefor I'm curious as to why you feel that this is more of a request then a bug.

If you feel that it is indeed a feature request then I'll change the issue to a feature request if I can and if I can't then I ask you to change this accordingly if this is indeed the case.

@erwinheitzman I know this probably isn't what you wanna hear, but can't you use element.tagName === 'UL' instead?

Having said that, I do wish there was a way to opt into a full implementation (i.e jsdom) for testing. While this use case is trivial to work around (imho), there are other cases where it requires a significant amount of mocking.

MockDock has been designed with SSR in mind and as such does not implement all the parts of the DOM, but during testing, having a full implementation is far more useful than than the speed MockDoc provides.

@theo-staizen I think it's a great suggestion, however I will have to discuss with the team if the suggested change will be implemented or not.

Thanks for the detailed summary and reproduction case @erwinheitzman! It's true at this time that Mock Doc does not support this use case. We're aware that Mock Doc has a few holes in its implementation when it comes to testing, which doesn't provide a great out of the box experience. I'm going to label this so that it gets ingested into our backlog for the team to discuss further.

The fix for this issue has been released as a part of today's Stencil 4.9.0 release.