How to create elements of a particular instance for testing?

[vabatta]

I have a function which runs in the browser with the following signature:

type NodeLike = Pick<Node, 'textContent' | 'isConnected'>
type InputLike = Pick<HTMLInputElement, 'value'> | Pick<HTMLTextAreaElement, 'value'>

export async function maskNodeConcurrently<T extends NodeLike | NodeLike & InputLike>(node: T) {...}

In the code, I use instanceof to check if the passed Node is input like - hence having value.

if (node instanceof HTMLInputElement || node instanceof HTMLTextAreaElement)
	node.value = masked

But this code would fail in the happy-dom test as the IElement created would not be an instance of the class (const input = document.createElement('input')).

What is a suggested approach to test it?

[vabatta]

I think in general the issue is related to typings, it seems that most of the types that come from happy-dom do not sufficiently overlap/implement the typings bundled with Typescript and requires a lot of types hacks to make it working.

[capricorn86]

Thank you for reporting @vabatta! 🙂

I think that this can be considered a bug. We should look over how typings are handled within Happy DOM. Feel free to convert it to a bug if you want.

For now maybe you can just cast it to HTMLInputElement or use the Typescript DOM typings?

Example 1:

const node = <HTMLInputElement>document.createElement('input'));

Example 2:

/// <reference lib="dom" />

const node = document.createElement('input'));