fix: improve typings of find/get/findAll

[cexbrayat]

It currently returns an Element whereas VTU v1 returned an HTMLElement (allowing to access more properties).

https://github.com/vuejs/vue-test-utils/blob/dev/packages/test-utils/types/index.d.ts#L78

[afontcu]

Looks good!

Quick question: Would it work if we use find to return a SVG element? I think its type is SVGElement, so I'm not so sure. Disclaimer: I'm by no means a typescript expert! 😇

[lmiller1990]

Right, that's why I think element is more correct - that's what querySelector returns. And find is generic so people can hint at what they are expecting. Eg find<SVGLineElement>('line') will work as expected with correct intellisense.

The types in beta were written by hand, now we have "native" types for things like querySelector isn't it ideal to use those?

[cexbrayat]

Fair point! I didn't think about SVGElement.

But It made me think, and we can do way better in fact. I pushed a new commit, PTAL @afontcu @lmiller1990 .

This commit allows to have a better type inference of find, get and findAll methods.
For example, wrapper.find('input').element is now inferred as a HTMLInputElement | undefined. It also works with SVG element: wrapper.get('line').element is inferred as a SVGLineElement. For ambiguous selectors, we fallback to the generic element type: wrapper.get('#other').element is inferred as Element.

[lmiller1990]

Had not seen the HTMLElementTagNameMap type... very cool. Thanks for fixing up the TS for us!

[cexbrayat]

Yep it's pretty cool! Thank you for merging it 🙂

Do you plan to release another alpha? It would be great to test-drive all our fixes/improvements.