chore: PR fixes

Author: nandi95

src/createDomEvent.ts

@@ -1,5 +1,34 @@
-// @ts-ignore No DefinitelyTyped package exists
+// @ts-ignore todo - No DefinitelyTyped package exists for this
 import eventTypes from 'dom-event-types'
+import { Key } from 'readline'
+
+const keyCodesByKeyName = {
+  backspace: 8,
+  tab: 9,
+  enter: 13,
+  esc: 27,
+  space: 32,
+  pageup: 33,
+  pagedown: 34,
+  end: 35,
+  home: 36,
+  left: 37,
+  up: 38,
+  right: 39,
+  down: 40,
+  insert: 45,
+  delete: 46
+} as const
+
+// modifiers to keep an eye on
+const ignorableKeyModifiers = ['stop', 'prevent', 'self', 'exact']
+const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta'] as const
+const mouseKeyModifiers = ['left', 'middle', 'right'] as const
+
+type KeyName = keyof typeof keyCodesByKeyName
+type Modifier =
+  | typeof systemKeyModifiers[number]
+  | typeof mouseKeyModifiers[number]
 
 interface TriggerOptions {
   code?: String
@@ -10,24 +39,19 @@ interface TriggerOptions {
 
 interface EventParams {
   eventType: string
-  modifiers: KeyNameArray
+  modifiers: KeyName[]
   options?: TriggerOptions
 }
 
-// modifiers to keep an eye on
-const ignorableKeyModifiers = ['stop', 'prevent', 'self', 'exact']
-const systemKeyModifiers = ['ctrl', 'shift', 'alt', 'meta']
-const mouseKeyModifiers = ['left', 'middle', 'right']
-
 /**
  * Groups modifiers into lists
  */
-function generateModifiers(modifiers: KeyNameArray, isOnClick: boolean) {
-  const keyModifiers: KeyNameArray = []
-  const systemModifiers: string[] = []
+function generateModifiers(modifiers: KeyName[], isOnClick: boolean) {
+  const keyModifiers: KeyName[] = []
+  const systemModifiers: Modifier[] = []
 
   for (let i = 0; i < modifiers.length; i++) {
-    const modifier = modifiers[i]
+    const modifier: KeyName | Modifier = modifiers[i]
 
     // addEventListener() options, e.g. .passive & .capture, that we dont need to handle
     if (ignorableKeyModifiers.includes(modifier)) {
@@ -36,10 +60,15 @@ function generateModifiers(modifiers: KeyNameArray, isOnClick: boolean) {
     // modifiers that require special conversion
     // if passed a left/right key modifier with onClick, add it here as well.
     if (
-      systemKeyModifiers.includes(modifier) ||
-      (mouseKeyModifiers.includes(modifier) && isOnClick)
+      systemKeyModifiers.includes(
+        modifier as Exclude<typeof modifier, KeyName>
+      ) ||
+      (mouseKeyModifiers.includes(
+        modifier as Exclude<typeof modifier, KeyName>
+      ) &&
+        isOnClick)
     ) {
-      systemModifiers.push(modifier)
+      systemModifiers.push(modifier as Modifier)
     } else {
       keyModifiers.push(modifier)
     }
@@ -51,25 +80,6 @@ function generateModifiers(modifiers: KeyNameArray, isOnClick: boolean) {
   }
 }
 
-export type KeyNameArray = Array<keyof typeof keyCodesByKeyName>
-export const keyCodesByKeyName = {
-  backspace: 8,
-  tab: 9,
-  enter: 13,
-  esc: 27,
-  space: 32,
-  pageup: 33,
-  pagedown: 34,
-  end: 35,
-  home: 36,
-  left: 37,
-  up: 38,
-  right: 39,
-  down: 40,
-  insert: 45,
-  delete: 46
-}
-
 function getEventProperties(eventParams: EventParams) {
   let { modifiers, options = {}, eventType } = eventParams
 
@@ -155,7 +165,7 @@ function createDOMEvent(eventString: String, options?: TriggerOptions) {
 
   const eventParams: EventParams = {
     eventType,
-    modifiers: modifiers as KeyNameArray,
+    modifiers: modifiers as KeyName[],
     options
   }
   const event: Event & TriggerOptions = createEvent(eventParams)
@@ -178,4 +188,4 @@ function createDOMEvent(eventString: String, options?: TriggerOptions) {
   return event
 }
 
-export { TriggerOptions, createDOMEvent }
+export { TriggerOptions, createDOMEvent, keyCodesByKeyName, KeyName }

src/domWrapper.ts

@@ -157,6 +157,8 @@ export class DOMWrapper<ElementType extends Element> {
       return
     }
 
+    // todo - review all non-null assertion operators in project
+    // search globally for `!.` and with regex `!$`
     element.selected = true
     let parentElement = element.parentElement!
 

src/emit.ts

@@ -5,7 +5,7 @@ import {
   ComponentInternalInstance
 } from 'vue'
 
-export type Events<T = unknown> = Record<number, Record<string, T[]>>
+type Events<T = unknown> = Record<number, Record<string, T[]>>
 
 const enum DevtoolsHooks {
   COMPONENT_EMIT = 'component:emit'
@@ -16,10 +16,10 @@ let events: Events
 export function emitted<T = unknown>(
   vm: ComponentPublicInstance,
   eventName?: string
-): undefined | Events<T>[number][string] | Events<T>[number] {
+): undefined | T[] | Record<string, T[]> {
   const cid = vm.$.uid
 
-  const vmEvents: Events<T>[number] = (events as Events<T>)[cid] || {}
+  const vmEvents: Record<string, T[]> = (events as Events<T>)[cid] || {}
   if (eventName) {
     return vmEvents ? vmEvents[eventName] : undefined
   }

src/mount.ts

@@ -268,8 +268,8 @@ export function mount(
         [name, slot]: [string, Slot]
       ): { [key: string]: Function } => {
         // case of an SFC getting passed
-        if (typeof slot === 'object' && 'render' in slot) {
-          acc[name] = slot.render!
+        if (typeof slot === 'object' && 'render' in slot && slot.render) {
+          acc[name] = slot.render
           return acc
         }
 

src/vueWrapper.ts

@@ -13,7 +13,6 @@ import { TriggerOptions } from './createDomEvent'
 import { find, matches } from './utils/find'
 import { mergeDeep, textContent } from './utils'
 import { emitted } from './emit'
-import type { Events } from './emit'
 
 export class VueWrapper<T extends ComponentPublicInstance> {
   private componentVM: T
@@ -62,26 +61,28 @@ export class VueWrapper<T extends ComponentPublicInstance> {
   classes(): string[]
   classes(className: string): boolean
   classes(className?: string): string[] | boolean {
-    return new DOMWrapper(this.element).classes(className!)
+    return className
+      ? new DOMWrapper(this.element).classes(className)
+      : new DOMWrapper(this.element).classes()
   }
 
   attributes(): { [key: string]: string }
   attributes(key: string): string
   attributes(key?: string): { [key: string]: string } | string {
-    return new DOMWrapper(this.element).attributes(key!)
+    return key
+      ? new DOMWrapper(this.element).attributes(key)
+      : new DOMWrapper(this.element).attributes()
   }
 
   exists() {
     return true
   }
 
-  emitted<T = unknown>(): Events<T>[number]
+  emitted<T = unknown>(): Record<string, T[]>
+  emitted<T = unknown>(eventName?: string): undefined | T[]
   emitted<T = unknown>(
     eventName?: string
-  ): undefined | Events<T>[number][string]
-  emitted<T = unknown>(
-    eventName?: string
-  ): undefined | Events<T>[number][string] | Events<T>[number] {
+  ): undefined | T[] | Record<string, T[]> {
     return emitted(this.vm, eventName)
   }
 

tests/isVisible.spec.ts

@@ -1,4 +1,5 @@
 import { mount } from '../src'
+import { defineComponent, ref } from 'vue'
 
 describe('isVisible', () => {
   const Comp = {
@@ -79,7 +80,7 @@ describe('isVisible', () => {
   })
 
   it('handles transition-group', async () => {
-    const Comp = {
+    const Comp = defineComponent({
       template: `
         <div id="list-demo">
           <button @click="add" id="add">Add</button>
@@ -91,22 +92,13 @@ describe('isVisible', () => {
           </transition-group>
         </div>
       `,
-      methods: {
-        add() {
-          // @ts-expect-error
-          this.items.push(2)
-        },
-        remove() {
-          // @ts-expect-error
-          this.items.splice(1) // back to [1]
-        }
-      },
-      data() {
-        return {
-          items: [1]
-        }
+      setup() {
+        const items = ref([1])
+        const add = () => items.value.push(2)
+        const remove = () => items.value.splice(1)
+        return { add, remove, items }
       }
-    }
+    })
     const wrapper = mount(Comp)
 
     expect(wrapper.html()).toContain('Item: 1')

tests/mountingOptions/data.spec.ts

@@ -1,21 +1,20 @@
-import { h } from 'vue'
+import { defineComponent, h } from 'vue'
 
 import { mount } from '../../src'
 
 describe('mounting options: data', () => {
   it('merges data from mounting options with component', () => {
-    const Comp = {
+    const Comp = defineComponent({
       data() {
         return {
           foo: 'foo',
           bar: 'bar'
         }
       },
-      render(): Function {
-        // @ts-expect-error
+      render() {
         return h('div', `Foo is ${this.foo} bar is ${this.bar}`)
       }
-    }
+    })
 
     const wrapper = mount(Comp, {
       data() {

tests/mountingOptions/mocks.spec.ts

@@ -1,4 +1,5 @@
 import { mount, RouterLinkStub } from '../../src'
+import { defineComponent } from 'vue'
 
 describe('mocks', () => {
   it('mocks a vuex store', async () => {
@@ -29,30 +30,27 @@ describe('mocks', () => {
   })
 
   it('mocks vue-router', async () => {
-    const Foo = {
+    const Foo = defineComponent({
       template: `
         <div>
           <RouterLink :to="url">Go to post: {{ id }}</RouterLink>
           <button @click="submit">Go</button>
         </div>
       `,
       computed: {
-        url(): string {
-          // @ts-expect-error
+        url() {
           return `/posts/${this.$route.params.id}`
         },
-        id(): number {
-          // @ts-expect-error
+        id() {
           return this.$route.params.id
         }
       },
       methods: {
         submit() {
-          // @ts-expect-error
           this.$router.push(`/posts/${this.id}`)
         }
       }
-    }
+    })
 
     const $router = {
       push: jest.fn()

tests/setData.spec.ts

@@ -20,7 +20,7 @@ describe('setData', () => {
   // See: https://github.com/vuejs/vue-test-utils/issues/1756
   // Making sure it does not regress here.
   it('triggers a watcher', async () => {
-    const Comp = {
+    const Comp = defineComponent({
       template: `<div />`,
       data() {
         return {
@@ -34,12 +34,11 @@ describe('setData', () => {
         myObject: {
           immediate: true,
           handler() {
-            // @ts-expect-error
             this.watchCounter += 1
           }
         }
       }
-    }
+    })
 
     const initial = 'value'
     const expected = 'something else'

tests/setProps.spec.ts

@@ -56,7 +56,7 @@ describe('setProps', () => {
   })
 
   it('triggers a watcher', async () => {
-    const Foo = {
+    const Foo = defineComponent({
       props: ['foo'],
       data() {
         return {
@@ -65,13 +65,12 @@ describe('setProps', () => {
       },
       watch: {
         foo(val: string) {
-          // @ts-expect-error
           this.bar = val
         }
       },
       template: `
         <div>{{ bar }}</div>`
-    }
+    })
     const wrapper = mount(Foo)
     expect(wrapper.html()).toContain('original-bar')