chore: code review and type improvements

Author: dobromir-hristov

src/constants.ts

@@ -1 +1,3 @@
 export const MOUNT_ELEMENT_ID = 'app'
+export const MOUNT_COMPONENT_REF = 'VTU_COMPONENT'
+export const MOUNT_PARENT_NAME = 'VTU_ROOT'

src/emitMixin.ts

@@ -1,7 +1,7 @@
-import { getCurrentInstance, App } from 'vue'
+import { getCurrentInstance } from 'vue'
 
-export const attachEventListener = (vm: App) => {
-  const emitMixin = {
+export const attachEmitListener = () => {
+  return {
     beforeCreate() {
       let events: Record<string, unknown[]> = {}
       this.__emitted = events
@@ -15,6 +15,4 @@ export const attachEventListener = (vm: App) => {
       }
     }
   }
-
-  vm.mixin(emitMixin)
 }

src/mount.ts

@@ -14,9 +14,13 @@ import {
 } from 'vue'
 
 import { createWrapper, VueWrapper } from './vue-wrapper'
-import { attachEventListener } from './emitMixin'
+import { attachEmitListener } from './emitMixin'
 import { createDataMixin } from './dataMixin'
-import { MOUNT_ELEMENT_ID } from './constants'
+import {
+  MOUNT_COMPONENT_REF,
+  MOUNT_ELEMENT_ID,
+  MOUNT_PARENT_NAME
+} from './constants'
 import { stubComponents } from './stubs'
 
 type Slot = VNode | string | { render: Function }
@@ -82,11 +86,11 @@ export function mount<T extends ComponentPublicInstance>(
 
   // we define props as reactive so that way when we update them with `setProps`
   // Vue's reactivity system will cause a rerender.
-  const props = reactive({ ...options?.props, ref: 'VTU_COMPONENT' })
+  const props = reactive({ ...options?.props, ref: MOUNT_COMPONENT_REF })
 
   // create the wrapper component
   const Parent = defineComponent({
-    name: 'VTU_COMPONENT',
+    name: MOUNT_PARENT_NAME,
     render() {
       return h(component, props, slots)
     }
@@ -145,7 +149,7 @@ export function mount<T extends ComponentPublicInstance>(
   }
 
   // add tracking for emitted events
-  attachEventListener(vm)
+  vm.mixin(attachEmitListener())
 
   // stubs
   if (options?.global?.stubs) {
@@ -156,6 +160,6 @@ export function mount<T extends ComponentPublicInstance>(
 
   // mount the app!
   const app = vm.mount(el)
-  const App = app.$refs['VTU_COMPONENT'] as ComponentPublicInstance
+  const App = app.$refs[MOUNT_COMPONENT_REF] as T
   return createWrapper<T>(App, setProps)
 }

src/vue-wrapper.ts

@@ -88,18 +88,16 @@ export class VueWrapper<T extends ComponentPublicInstance>
     return result
   }
 
-  findComponent(selector: FindComponentSelector): VueWrapper | ErrorWrapper {
+  findComponent(selector: FindComponentSelector): VueWrapper<T> | ErrorWrapper {
     if (typeof selector === 'object' && 'ref' in selector) {
-      return createWrapper(
-        this.vm.$refs[selector.ref] as ComponentPublicInstance
-      )
+      return createWrapper(this.vm.$refs[selector.ref] as T)
     }
     const result = find(this.vm.$.subTree, selector)
     if (!result.length) return new ErrorWrapper({ selector })
     return createWrapper(result[0])
   }
 
-  findAllComponents(selector: FindAllComponentsSelector): VueWrapper[] {
+  findAllComponents(selector: FindAllComponentsSelector): VueWrapper<T>[] {
     return find(this.vm.$.subTree, selector).map((c) => createWrapper(c))
   }
 

tests/findAllComponents.spec.ts

@@ -1,18 +1,19 @@
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
+import { defineComponent } from 'vue'
 
-const compC = {
+const compC = defineComponent({
   name: 'ComponentC',
   template: '<div class="C">C</div>'
-}
-const compB = {
+})
+const compB = defineComponent({
   template: '<div class="B">TextBefore<comp-c/>TextAfter<comp-c/></div>',
   components: { compC }
-}
-const compA = {
+})
+const compA = defineComponent({
   template: '<div class="A"><comp-b ref="b"/><hello ref="b"/></div>',
   components: { compB, Hello }
-}
+})
 
 describe('findAllComponents', () => {
   it('finds all deeply nested vue components', () => {

tests/findComponent.spec.ts

@@ -1,18 +1,19 @@
+import { defineComponent } from 'vue'
 import { mount } from '../src'
 import Hello from './components/Hello.vue'
 
-const compC = {
+const compC = defineComponent({
   name: 'ComponentC',
   template: '<div class="C">C</div>'
-}
+})
 
-const compD = {
+const compD = defineComponent({
   name: 'ComponentD',
   template: '<comp-c class="c-as-root-on-d" />',
   components: { compC }
-}
+})
 
-const compB = {
+const compB = defineComponent({
   name: 'component-b',
   template: `
     <div class="B">
@@ -23,16 +24,17 @@ const compB = {
       <comp-d id="compD" />
     </div>`,
   components: { compC, compD }
-}
-const compA = {
+})
+
+const compA = defineComponent({
   template: `
     <div class="A">
       <comp-b />
       <hello ref="b" />
       <div class="domElement" />
     </div>`,
   components: { compB, Hello }
-}
+})
 
 describe('findComponent', () => {
   it('does not find plain dom elements', () => {