test: improve test case on $el (#7922)

Author: himself65

packages/vue-compat/__tests__/compiler.spec.ts

@@ -32,6 +32,7 @@ test('COMPILER_IS_ON_ELEMENT', () => {
     }
   }).$mount()
 
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.outerHTML).toBe(`<div>text</div>`)
   expect(CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT).toHaveBeenWarned()
 })
@@ -48,6 +49,7 @@ test('COMPILER_IS_ON_ELEMENT (dynamic)', () => {
     }
   }).$mount()
 
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.outerHTML).toBe(`<div>text</div>`)
   expect(CompilerDeprecationTypes.COMPILER_IS_ON_ELEMENT).toHaveBeenWarned()
 })
@@ -70,9 +72,10 @@ test('COMPILER_V_BIND_SYNC', async () => {
     }
   }).$mount()
 
+  expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
   expect(vm.$el.textContent).toBe(`0`)
 
-  triggerEvent(vm.$el, 'click')
+  triggerEvent(vm.$el as Element, 'click')
   await nextTick()
   expect(vm.$el.textContent).toBe(`1`)
 
@@ -83,6 +86,8 @@ test('COMPILER_V_BIND_PROP', () => {
   const vm = new Vue({
     template: `<div :id.prop="'foo'"/>`
   }).$mount()
+
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.id).toBe('foo')
   expect(CompilerDeprecationTypes.COMPILER_V_BIND_PROP).toHaveBeenWarned()
 })
@@ -91,6 +96,7 @@ test('COMPILER_V_BIND_OBJECT_ORDER', () => {
   const vm = new Vue({
     template: `<div id="foo" v-bind="{ id: 'bar', class: 'baz' }" />`
   }).$mount()
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.id).toBe('foo')
   expect(vm.$el.className).toBe('baz')
   expect(
@@ -112,7 +118,8 @@ test('COMPILER_V_ON_NATIVE', () => {
     }
   }).$mount()
 
-  triggerEvent(vm.$el, 'click')
+  expect(vm.$el).toBeInstanceOf(HTMLButtonElement)
+  triggerEvent(vm.$el as HTMLButtonElement, 'click')
   expect(spy).toHaveBeenCalledTimes(1)
   expect(CompilerDeprecationTypes.COMPILER_V_ON_NATIVE).toHaveBeenWarned()
 })
@@ -128,6 +135,8 @@ test('COMPILER_NATIVE_TEMPLATE', () => {
   const vm = new Vue({
     template: `<div><template><div/></template></div>`
   }).$mount()
+
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.innerHTML).toBe(`<div></div>`)
   expect(CompilerDeprecationTypes.COMPILER_NATIVE_TEMPLATE).toHaveBeenWarned()
 })
@@ -144,6 +153,7 @@ test('COMPILER_INLINE_TEMPLATE', () => {
     }
   }).$mount()
 
-  expect(vm.$el.outerHTML).toBe(`<div>123</div>`)
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
+  expect(vm.$el?.outerHTML).toBe(`<div>123</div>`)
   expect(CompilerDeprecationTypes.COMPILER_INLINE_TEMPLATE).toHaveBeenWarned()
 })

packages/vue-compat/__tests__/componentAsync.spec.ts

@@ -30,6 +30,8 @@ describe('COMPONENT_ASYNC', () => {
       template: `<div><comp/></div>`,
       components: { comp }
     }).$mount()
+
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe(`<!---->`)
 
     resolve({ template: 'foo' })
@@ -49,6 +51,7 @@ describe('COMPONENT_ASYNC', () => {
       template: `<div><comp/></div>`,
       components: { comp }
     }).$mount()
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe(`<!---->`)
     await timeout(0)
     expect(vm.$el.innerHTML).toBe(`foo`)
@@ -69,6 +72,8 @@ describe('COMPONENT_ASYNC', () => {
       template: `<div><comp/></div>`,
       components: { comp }
     }).$mount()
+
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe(`<!---->`)
     await timeout(0)
     expect(vm.$el.innerHTML).toBe(`foo`)

packages/vue-compat/__tests__/filters.spec.ts

@@ -43,6 +43,7 @@ describe('FILTERS', () => {
         msg: 'hi'
       })
     }).$mount()
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('HI')
     expect(deprecationData[DeprecationTypes.FILTERS].message).toHaveBeenWarned()
     expect(CompilerDeprecationTypes.COMPILER_FILTERS).toHaveBeenWarned()

packages/vue-compat/__tests__/global.spec.ts

@@ -1,4 +1,4 @@
-import { vi } from 'vitest'
+import { expect, vi } from 'vitest'
 import Vue from '@vue/compat'
 import { effect, isReactive } from '@vue/reactivity'
 import { h, nextTick } from '@vue/runtime-core'
@@ -122,6 +122,7 @@ describe('GLOBAL_EXTEND', () => {
       template: '<div><foo></foo><bar></bar></div>',
       components: { foo, bar }
     }).$mount()
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.innerHTML).toBe('<span>foo</span><span>bar</span>')
   })
 
@@ -221,6 +222,7 @@ describe('GLOBAL_EXTEND', () => {
     const b = new B({
       template: '<div><aa></aa><bb></bb></div>'
     }).$mount()
+    expect(b.$el).toBeInstanceOf(HTMLDivElement)
     expect(b.$el.innerHTML).toBe('<div>A</div><div>B</div>')
   })
 
@@ -388,6 +390,7 @@ describe('GLOBAL_PRIVATE_UTIL', () => {
       },
       template: `<div>{{ foo }}</div>`
     }).$mount() as any
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.textContent).toBe('1')
     vm.foo = 2
     await nextTick()
@@ -455,7 +458,7 @@ test('post-facto global asset registration should affect apps created via create
     template: '<foo/>'
   })
   Vue.component('foo', { template: 'foo' })
-  const vm = app.mount(document.createElement('div')) as any
+  const vm = app.mount(document.createElement('div'))
   expect(vm.$el.textContent).toBe('foo')
   delete singletonApp._context.components.foo
 })

packages/vue-compat/__tests__/instance.spec.ts

@@ -319,6 +319,7 @@ test('INSTANCE_ATTR_CLASS_STYLE', () => {
     }
   }).$mount()
 
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.outerHTML).toBe(
     `<div class="foo" style="color: red;"><div id="ok"></div></div>`
   )

packages/vue-compat/__tests__/misc.spec.ts

@@ -44,6 +44,7 @@ test('mode as function', () => {
     template: `<div><foo/><bar/></div>`
   }).$mount()
 
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.innerHTML).toBe(`<div>foo</div><div>bar</div>`)
 })
 
@@ -120,6 +121,7 @@ test('V_ON_KEYCODE_MODIFIER', () => {
     template: `<input @keyup.1="spy">`,
     methods: { spy }
   }).$mount()
+  expect(vm.$el).toBeInstanceOf(HTMLInputElement)
   triggerEvent(vm.$el, 'keyup', e => {
     e.key = '_'
     e.keyCode = 1
@@ -192,6 +194,7 @@ test('ATTR_FALSE_VALUE', () => {
   const vm = new Vue({
     template: `<div :id="false" :foo="false"/>`
   }).$mount()
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.hasAttribute('id')).toBe(false)
   expect(vm.$el.hasAttribute('foo')).toBe(false)
   expect(
@@ -210,6 +213,8 @@ test('ATTR_ENUMERATED_COERCION', () => {
   const vm = new Vue({
     template: `<div :draggable="null" :spellcheck="0" contenteditable="foo" />`
   }).$mount()
+
+  expect(vm.$el).toBeInstanceOf(HTMLDivElement)
   expect(vm.$el.getAttribute('draggable')).toBe('false')
   expect(vm.$el.getAttribute('spellcheck')).toBe('true')
   expect(vm.$el.getAttribute('contenteditable')).toBe('true')

packages/vue-compat/__tests__/renderFn.spec.ts

@@ -230,7 +230,7 @@ describe('compat: render function', () => {
         )
       }
     }).$mount()
-
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div class="foo" id="bar">hello</div>`)
     expect(
       deprecationData[DeprecationTypes.RENDER_FUNCTION].message
@@ -249,6 +249,7 @@ describe('compat: render function', () => {
         return createVNode('div', null, c.a)
       }
     }).$mount()
+    expect(vm.$el).toBeInstanceOf(HTMLDivElement)
     expect(vm.$el.outerHTML).toBe(`<div>hello</div>`)
   })
 })