From d34b00b1323c5511ad950c6a708614323eaf9de4 Mon Sep 17 00:00:00 2001
From: Alec Gibson <12036746+alecgibson@users.noreply.github.com>
Date: Fri, 23 Jul 2021 10:36:45 +0100
Subject: [PATCH] fix: revert default element typings to `HTMLElement`

The type definitions were updated to allow generic element typing in
https://github.com/vuejs/vue-test-utils/pull/1871

However, this "loosened" the default type from `HTMLElement` to
`Element. This was actually a breaking change.

For example, consumers may have had this test code:

```ts
wrapper.element.click()
```

But `click()` only exists on `HTMLElement`, not on `Element`, so test
compilation fails.

This change moves the default type back to `HTMLElement`. If we want to
loosen this requirement in the future, it should be considered a
breaking change.
---
 packages/test-utils/types/index.d.ts      | 6 +++---
 packages/test-utils/types/test/wrapper.ts | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/test-utils/types/index.d.ts b/packages/test-utils/types/index.d.ts
index d2ad4695c..30144e16d 100644
--- a/packages/test-utils/types/index.d.ts
+++ b/packages/test-utils/types/index.d.ts
@@ -75,7 +75,7 @@ interface BaseWrapper {
   selector: Selector | void
 }
 
-export interface Wrapper<V extends Vue | null, el extends Element = Element> extends BaseWrapper {
+export interface Wrapper<V extends Vue | null, el extends HTMLElement = HTMLElement> extends BaseWrapper {
   readonly vm: V
   readonly element: el
   readonly options: WrapperOptions
@@ -83,7 +83,7 @@ export interface Wrapper<V extends Vue | null, el extends Element = Element> ext
   get<R extends Vue> (selector: VueClass<R>): Wrapper<R>
   get<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
   get<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
-  get<el extends Element>(selector: string): Wrapper<Vue, el>
+  get<el extends HTMLElement>(selector: string): Wrapper<Vue, el>
   get (selector: RefSelector): Wrapper<Vue>
   get (selector: NameSelector): Wrapper<Vue>
 
@@ -96,7 +96,7 @@ export interface Wrapper<V extends Vue | null, el extends Element = Element> ext
   find<R extends Vue> (selector: VueClass<R>): Wrapper<R>
   find<R extends Vue> (selector: ComponentOptions<R>): Wrapper<R>
   find<Props = DefaultProps, PropDefs = PropsDefinition<Props>>(selector: FunctionalComponentOptions<Props, PropDefs>): Wrapper<Vue>
-  find<el extends Element>(selector: string): Wrapper<Vue, el>
+  find<el extends HTMLElement>(selector: string): Wrapper<Vue, el>
   find (selector: RefSelector): Wrapper<Vue>
   find (selector: NameSelector): Wrapper<Vue>
 
diff --git a/packages/test-utils/types/test/wrapper.ts b/packages/test-utils/types/test/wrapper.ts
index a19ed7959..845eafaea 100644
--- a/packages/test-utils/types/test/wrapper.ts
+++ b/packages/test-utils/types/test/wrapper.ts
@@ -69,6 +69,7 @@ found = wrapper.find({ name: 'my-button' })
 selector = found.selector
 
 wrapper.find<HTMLInputElement>('input').element.value
+wrapper.find('div').element.click()
 
 let array = wrapper.findAll('.bar')
 selector = array.selector