Merge branch 'master' into feat/options.attachto

# Conflicts:
#	rollup.config.js
#	src/mount.ts
#	src/utils.ts

Author: pikax

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/test-utils",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "license": "MIT",
   "main": "dist/vue-test-utils.cjs.js",
   "browser": "dist/vue-test-utils.esm.js",
@@ -13,6 +13,7 @@
     "dist/index.d.ts"
   ],
   "dependencies": {
+    "dom-event-types": "^1.0.0",
     "lodash": "^4.17.15"
   },
   "devDependencies": {

rollup.config.js

@@ -21,13 +21,14 @@ function createEntry(options) {
   const config = {
     input,
     external: [
-      'vue', 
+      'vue',
       'lodash/mergeWith',
       'lodash/camelCase',
       'lodash/upperFirst',
       'lodash/kebabCase',
+      'lodash/flow',
       'lodash/isString',
-      'lodash/flow'
+      'dom-event-types'
     ],
     plugins: [resolve()],
     output: {
@@ -38,7 +39,7 @@ function createEntry(options) {
   }
 
   if (format === 'es') {
-    config.output.file = isBrowser ? pkg.browser : pkg.module 
+    config.output.file = isBrowser ? pkg.browser : pkg.module
   }
   if (format === 'cjs') {
     config.output.file = pkg.main

src/config.ts

@@ -0,0 +1,5 @@
+import { GlobalMountOptions } from './types'
+
+export const config: { global: GlobalMountOptions } = {
+  global: {}
+}

src/create-dom-event.ts

@@ -0,0 +1,98 @@
+import eventTypes from 'dom-event-types'
+
+interface TriggerOptions {
+  code?: String
+  key?: String
+  keyCode?: Number
+  [custom: string]: any
+}
+
+interface EventParams {
+  eventType: string
+  modifier: string
+  meta: any
+  options?: TriggerOptions
+}
+
+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) {
+  const { modifier, meta, options } = eventParams
+  const keyCode =
+    keyCodesByKeyName[modifier] ||
+    (options && (options.keyCode || options.code))
+
+  return {
+    ...options, // What the user passed in as the second argument to #trigger
+    bubbles: meta.bubbles,
+    meta: meta.cancelable,
+    // Any derived options should go here
+    keyCode,
+    code: keyCode
+  }
+}
+
+function createEvent(eventParams: EventParams) {
+  const { eventType, meta } = eventParams
+  const metaEventInterface = window[meta.eventInterface]
+
+  const SupportedEventInterface =
+    typeof metaEventInterface === 'function' ? metaEventInterface : window.Event
+
+  const eventProperties = getEventProperties(eventParams)
+
+  const event = new SupportedEventInterface(
+    eventType,
+    // event properties can only be added when the event is instantiated
+    // custom properties must be added after the event has been instantiated
+    eventProperties
+  )
+
+  return event
+}
+
+function createDOMEvent(eventString: String, options?: TriggerOptions) {
+  const [eventType, modifier] = eventString.split('.')
+  const meta = eventTypes[eventType] || {
+    eventInterface: 'Event',
+    cancelable: true,
+    bubbles: true
+  }
+
+  const eventParams: EventParams = { eventType, modifier, meta, options }
+  const event: Event = createEvent(eventParams)
+  const eventPrototype = Object.getPrototypeOf(event)
+
+  options &&
+    Object.keys(options).forEach((key) => {
+      const propertyDescriptor = Object.getOwnPropertyDescriptor(
+        eventPrototype,
+        key
+      )
+      const canSetProperty = !(
+        propertyDescriptor && propertyDescriptor.set === undefined
+      )
+      if (canSetProperty) {
+        event[key] = options[key]
+      }
+    })
+  return event
+}
+
+export { TriggerOptions, createDOMEvent }

src/dom-wrapper.ts

@@ -3,6 +3,8 @@ import { nextTick } from 'vue'
 import { WrapperAPI } from './types'
 import { ErrorWrapper } from './error-wrapper'
 
+import { TriggerOptions, createDOMEvent } from './create-dom-event'
+
 export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
   element: ElementType
 
@@ -41,26 +43,47 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
     return this.element.outerHTML
   }
 
-  find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper {
-    const result = this.element.querySelector<T>(selector)
+  find<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]> | ErrorWrapper
+  find<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]> | ErrorWrapper
+  find<T extends Element>(selector: string): DOMWrapper<T> | ErrorWrapper
+  find(selector: string): DOMWrapper<Element> | ErrorWrapper {
+    const result = this.element.querySelector(selector)
     if (result) {
-      return new DOMWrapper<T>(result)
+      return new DOMWrapper(result)
     }
 
     return new ErrorWrapper({ selector })
   }
 
-  get<T extends Element>(selector: string): DOMWrapper<T> {
-    const result = this.find<T>(selector)
+  get<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]>
+  get<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]>
+  get<T extends Element>(selector: string): DOMWrapper<T>
+  get(selector: string): DOMWrapper<Element> {
+    const result = this.find(selector)
     if (result instanceof ErrorWrapper) {
       throw new Error(`Unable to find ${selector} within: ${this.html()}`)
     }
 
     return result
   }
 
-  findAll<T extends Element>(selector: string): DOMWrapper<T>[] {
-    return Array.from(this.element.querySelectorAll<T>(selector)).map(
+  findAll<K extends keyof HTMLElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<HTMLElementTagNameMap[K]>[]
+  findAll<K extends keyof SVGElementTagNameMap>(
+    selector: K
+  ): DOMWrapper<SVGElementTagNameMap[K]>[]
+  findAll<T extends Element>(selector: string): DOMWrapper<T>[]
+  findAll(selector: string): DOMWrapper<Element>[] {
+    return Array.from(this.element.querySelectorAll(selector)).map(
       (x) => new DOMWrapper(x)
     )
   }
@@ -134,12 +157,38 @@ export class DOMWrapper<ElementType extends Element> implements WrapperAPI {
     return new DOMWrapper(parentElement).trigger('change')
   }
 
-  async trigger(eventString: string) {
-    const evt = document.createEvent('Event')
-    evt.initEvent(eventString)
+  async trigger(eventString: string, options?: TriggerOptions) {
+    if (options && options['target']) {
+      throw Error(
+        `[vue-test-utils]: you cannot set the target value of an event. See the notes section ` +
+          `of the docs for more details—` +
+          `https://vue-test-utils.vuejs.org/api/wrapper/trigger.html`
+      )
+    }
+
+    const isDisabled = () => {
+      const validTagsToBeDisabled = [
+        'BUTTON',
+        'COMMAND',
+        'FIELDSET',
+        'KEYGEN',
+        'OPTGROUP',
+        'OPTION',
+        'SELECT',
+        'TEXTAREA',
+        'INPUT'
+      ]
+      const hasDisabledAttribute = this.attributes().disabled !== undefined
+      const elementCanBeDisabled = validTagsToBeDisabled.includes(
+        this.element.tagName
+      )
+
+      return hasDisabledAttribute && elementCanBeDisabled
+    }
 
-    if (this.element) {
-      this.element.dispatchEvent(evt)
+    if (this.element && !isDisabled()) {
+      const event = createDOMEvent(eventString, options)
+      this.element.dispatchEvent(event)
     }
 
     return nextTick

src/error-wrapper.ts

@@ -36,6 +36,10 @@ export class ErrorWrapper {
     throw this.wrapperError('find')
   }
 
+  get(): never {
+    throw this.wrapperError('get')
+  }
+
   findAll(): never {
     throw this.wrapperError('findAll')
   }
@@ -48,6 +52,10 @@ export class ErrorWrapper {
     throw this.wrapperError('setValue')
   }
 
+  props() {
+    throw this.wrapperError('props')
+  }
+
   text() {
     throw this.wrapperError('text')
   }

src/index.ts

@@ -1,4 +1,5 @@
 import { mount } from './mount'
 import { RouterLinkStub } from './components/RouterLinkStub'
+import { config } from './config'
 
-export { mount, RouterLinkStub }
+export { mount, RouterLinkStub, config }

src/mount.ts

@@ -4,11 +4,7 @@ import {
   VNode,
   defineComponent,
   VNodeNormalizedChildren,
-  ComponentOptions,
   transformVNodeArgs,
-  Plugin,
-  Directive,
-  Component,
   reactive,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
@@ -17,6 +13,9 @@ import {
   ExtractPropTypes
 } from 'vue'
 
+import { config } from './config'
+import { GlobalMountOptions } from './types'
+import { mergeGlobalProperties, isString } from './utils'
 import { createWrapper, VueWrapper } from './vue-wrapper'
 import { attachEmitListener } from './emitMixin'
 import { createDataMixin } from './dataMixin'
@@ -26,7 +25,6 @@ import {
   MOUNT_PARENT_NAME
 } from './constants'
 import { stubComponents } from './stubs'
-import { isString } from './utils'
 
 type Slot = VNode | string | { render: Function }
 
@@ -37,17 +35,7 @@ interface MountingOptions<Props> {
     default?: Slot
     [key: string]: Slot
   }
-  global?: {
-    plugins?: Plugin[]
-    mixins?: ComponentOptions[]
-    mocks?: Record<string, any>
-    stubs?: Record<any, any>
-    provide?: Record<any, any>
-    // TODO how to type `defineComponent`? Using `any` for now.
-    components?: Record<string, Component | object>
-    directives?: Record<string, Directive>
-  }
-  stubs?: Record<string, any>
+  global?: GlobalMountOptions
   attachTo?: HTMLElement | string
 }
 
@@ -152,11 +140,13 @@ export function mount(
   // create the app
   const app = createApp(Parent)
 
+  const global = mergeGlobalProperties(config.global, options?.global)
+
   // global mocks mixin
-  if (options?.global?.mocks) {
+  if (global?.mocks) {
     const mixin = {
       beforeCreate() {
-        for (const [k, v] of Object.entries(options.global?.mocks)) {
+        for (const [k, v] of Object.entries(global.mocks)) {
           this[k] = v
         }
       }
@@ -166,30 +156,30 @@ export function mount(
   }
 
   // use and plugins from mounting options
-  if (options?.global?.plugins) {
-    for (const use of options?.global?.plugins) app.use(use)
+  if (global?.plugins) {
+    for (const use of global.plugins) app.use(use)
   }
 
   // use any mixins from mounting options
-  if (options?.global?.mixins) {
-    for (const mixin of options?.global?.mixins) app.mixin(mixin)
+  if (global?.mixins) {
+    for (const mixin of global.mixins) app.mixin(mixin)
   }
 
-  if (options?.global?.components) {
-    for (const key of Object.keys(options?.global?.components))
-      app.component(key, options.global.components[key])
+  if (global?.components) {
+    for (const key of Object.keys(global.components))
+      app.component(key, global.components[key])
   }
 
-  if (options?.global?.directives) {
-    for (const key of Object.keys(options?.global?.directives))
-      app.directive(key, options.global.directives[key])
+  if (global?.directives) {
+    for (const key of Object.keys(global.directives))
+      app.directive(key, global.directives[key])
   }
 
   // provide any values passed via provides mounting option
-  if (options?.global?.provide) {
-    for (const key of Reflect.ownKeys(options.global.provide)) {
+  if (global?.provide) {
+    for (const key of Reflect.ownKeys(global.provide)) {
       // @ts-ignore: https://github.com/microsoft/TypeScript/issues/1863
-      app.provide(key, options.global.provide[key])
+      app.provide(key, global.provide[key])
     }
   }