Test Custom Elements

[copperspeed]

Hi - Is there a special way you need to test custom elements?

[treshugart]

The only real gotcha is that you need to wait for mutations to occur:

• microtask with native MutationObserver support
• macrotask when not

I've found the best way to do this is to just use a setTimeout() to wait, but that can get messy. @WebReflection, is it worth maybe adding a flush() method to provide sync upgrading like in the @webcomponents/custom-elements polyfill? They're moving to patching methods instead of using mutation observers, but not sure if that's something you're looking at.;

We are maintaining https://github.com/skatejs/bore for making testing easier. It automates flushing in the @webcomponents polyfill, and as a result you get automatic sync operation. If this implemented a flush() method, it could also use that.

[WebReflection]

is it worth maybe adding a flush() method to provide sync upgrading like in the @webcomponents/custom-elements polyfill?

it's not standard so ... nope. Depending of what you need to test, it might be asynchronous anyway, like it is connectedCallback or attributeChangedCallback, triggered after the element has been fully upgraded to a CE one.

This is not strictly related to the polyfill implementation, it's how CE are initialized. Once upon a time (V0) we had createdCallback which also was asynchronous and that would've been the right place to test your CE.

A setTimeout, as well as a Promise, should schedule late enough to not have problems. Yet every test should be likely asynchronous.

I hope I've answered your question.