Merge branch 'master' into lachlan/types

Author: lmiller1990

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/test-utils",
-  "version": "2.0.0-alpha.4",
+  "version": "2.0.0-alpha.6",
   "license": "MIT",
   "main": "dist/vue-test-utils.cjs.js",
   "browser": "dist/vue-test-utils.browser.js",
@@ -12,10 +12,6 @@
     "README.md",
     "dist/index.d.ts"
   ],
-  "dependencies": {
-    "dom-event-types": "^1.0.0",
-    "lodash": "^4.17.15"
-  },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.8.4",
@@ -26,11 +22,12 @@
     "@rollup/plugin-replace": "^2.3.2",
     "@types/estree": "^0.0.42",
     "@types/jest": "^24.9.1",
-    "@types/lodash": "^4.14.149",
     "@types/node": "12.12.35",
+    "@vue/compiler-dom": "^3.0.0-beta.12",
     "@vue/compiler-sfc": "^3.0.0-beta.12",
     "babel-jest": "^25.2.3",
     "babel-preset-jest": "^25.2.1",
+    "dom-event-types": "^1.0.0",
     "flush-promises": "^1.0.2",
     "husky": "^4.2.3",
     "jest": "^25.1.0",
@@ -48,6 +45,7 @@
     "vuex": "^4.0.0-beta.1"
   },
   "peerDependencies": {
+    "@vue/compiler-dom": "^3.0.0-beta.12",
     "@vue/compiler-sfc": "^3.0.0-beta.12",
     "vue": "^3.0.0-beta.12"
   },

rollup.config.js

@@ -26,8 +26,6 @@ function createEntry(options) {
     external: [
       'vue',
       '@vue/compiler-dom',
-      'lodash/mergeWith',
-      'lodash/isString'
     ],
     plugins: [
       replace({
@@ -43,30 +41,24 @@ function createEntry(options) {
       globals: {
         vue: 'Vue',
         '@vue/compiler-dom': 'VueCompilerDOM',
-        'lodash/mergeWith': '_.mergeWith',
-        'lodash/isString': '_.isString',
       }
     }
   }
 
-  if (['es', 'cjs'].includes(format)) {
-    config.external.push('dom-event-types')
-  }
-
   if (format === 'es') {
-    config.output.file = isBrowser ? pkg.browser : pkg.module
+    config.output.file = pkg.module
   }
   if (format === 'cjs') {
     config.output.file = pkg.main
   }
-  console.log('file is', config.output.file)
+  console.log(`Building ${format}: ${config.output.file}`)
 
   config.plugins.push(
     ts({
       check: format === 'es' && isBrowser,
       tsconfigOverride: {
         compilerOptions: {
-          declaration: format === 'es' && isBrowser,
+          declaration: format === 'es',
           target: 'es5', // not sure what this should be?
           module: format === 'cjs' ? 'es2015' : 'esnext'
         },
@@ -80,7 +72,6 @@ function createEntry(options) {
 
 export default [
   createEntry({ format: 'es', input: 'src/index.ts', isBrowser: false }),
-  createEntry({ format: 'es', input: 'src/index.ts', isBrowser: true }),
   createEntry({ format: 'iife', input: 'src/index.ts', isBrowser: true }),
   createEntry({ format: 'cjs', input: 'src/index.ts', isBrowser: false }),
 ]

src/create-dom-event.ts

@@ -1,4 +1,4 @@
-import * as eventTypes from 'dom-event-types'
+import eventTypes from 'dom-event-types'
 
 interface TriggerOptions {
   code?: String

src/dom-wrapper.ts

@@ -10,20 +10,23 @@ export class DOMWrapper<ElementType extends Element> {
     this.element = element
   }
 
-  classes(className?: string) {
+  classes(): string[]
+  classes(className: string): boolean
+  classes(className?: string): string[] | boolean {
     const classes = this.element.classList
 
     if (className) return classes.contains(className)
 
     return Array.from(classes)
   }
 
-  attributes(key?: string) {
-    const attributes = this.element.attributes
-    const attributeMap = {}
-    for (let i = 0; i < attributes.length; i++) {
-      const att = attributes.item(i)
-      attributeMap[att.localName] = att.value
+  attributes(): { [key: string]: string }
+  attributes(key: string): string
+  attributes(key?: string): { [key: string]: string } | string {
+    const attributes = Array.from(this.element.attributes)
+    const attributeMap: Record<string, string> = {}
+    for (const attribute of attributes) {
+      attributeMap[attribute.localName] = attribute.value
     }
 
     return key ? attributeMap[key] : attributeMap

src/mount.ts

@@ -6,17 +6,20 @@ import {
   VNodeNormalizedChildren,
   transformVNodeArgs,
   reactive,
+  FunctionalComponent,
   ComponentPublicInstance,
   ComponentOptionsWithObjectProps,
   ComponentOptionsWithArrayProps,
   ComponentOptionsWithoutProps,
   ExtractPropTypes,
-  Component
+  Component,
+  AppConfig,
+  VNodeProps
 } from 'vue'
 
 import { config } from './config'
 import { GlobalMountOptions } from './types'
-import { mergeGlobalProperties, isString } from './utils'
+import { mergeGlobalProperties } from './utils'
 import { processSlot } from './utils/compileSlots'
 import { createWrapper, VueWrapper } from './vue-wrapper'
 import { attachEmitListener } from './emitMixin'
@@ -27,7 +30,6 @@ import {
   MOUNT_PARENT_NAME
 } from './constants'
 import { stubComponents } from './stubs'
-import { parse } from '@vue/compiler-dom'
 
 type Slot = VNode | string | { render: Function } | Function
 
@@ -53,6 +55,11 @@ type ExtractComponent<T> = T extends { new (): infer PublicInstance }
   ? PublicInstance
   : any
 
+// Functional component
+export function mount<TestedComponent extends FunctionalComponent>(
+  originalComponent: TestedComponent,
+  options?: MountingOptions<any>
+): VueWrapper<ComponentPublicInstance>
 // Component declared with defineComponent
 export function mount<TestedComponent extends ComponentPublicInstance>(
   originalComponent: { new (): TestedComponent } & Component,
@@ -80,50 +87,68 @@ export function mount(
   originalComponent: any,
   options?: MountingOptions<any>
 ): VueWrapper<any> {
-  const component = { ...originalComponent }
+  // normalise the incoming component
+  const component =
+    typeof originalComponent === 'function'
+      ? defineComponent({
+          setup: (_, { attrs, slots }) => () =>
+            h(originalComponent, attrs, slots)
+        })
+      : { ...originalComponent }
 
   const el = document.createElement('div')
   el.id = MOUNT_ELEMENT_ID
 
   if (options?.attachTo) {
-    const to = isString(options.attachTo)
-      ? document.querySelector(options.attachTo)
-      : options.attachTo
-
-    if (!to) {
-      throw new Error(
-        `Unable to find the element matching the selector ${options.attachTo} given as the \`attachTo\` option`
-      )
+    let to: Element | null
+    if (typeof options.attachTo === 'string') {
+      to = document.querySelector(options.attachTo)
+      if (!to) {
+        throw new Error(
+          `Unable to find the element matching the selector ${options.attachTo} given as the \`attachTo\` option`
+        )
+      }
+    } else {
+      to = options.attachTo
     }
+
     to.appendChild(el)
   }
 
   // handle any slots passed via mounting options
   const slots: VNodeNormalizedChildren =
     options?.slots &&
-    Object.entries(options.slots).reduce((acc, [name, slot]) => {
-      // case of an SFC getting passed
-      if (typeof slot === 'object' && 'render' in slot) {
-        acc[name] = slot.render
-        return acc
-      }
+    Object.entries(options.slots).reduce(
+      (
+        acc: { [key: string]: Function },
+        [name, slot]: [string, Slot]
+      ): { [key: string]: Function } => {
+        // case of an SFC getting passed
+        if (typeof slot === 'object' && 'render' in slot) {
+          acc[name] = slot.render
+          return acc
+        }
 
-      if (typeof slot === 'function') {
-        acc[name] = slot
-        return acc
-      }
+        if (typeof slot === 'function') {
+          acc[name] = slot
+          return acc
+        }
 
-      if (typeof slot === 'object') {
-        acc[name] = () => slot
-        return acc
-      }
+        if (typeof slot === 'object') {
+          acc[name] = () => slot
+          return acc
+        }
+
+        if (typeof slot === 'string') {
+          // slot is most probably a scoped slot string or a plain string
+          acc[name] = (props: VNodeProps) => h(processSlot(slot), props)
+          return acc
+        }
 
-      if (typeof slot === 'string') {
-        // slot is most probably a scoped slot string or a plain string
-        acc[name] = (props) => h(processSlot(slot), props)
         return acc
-      }
-    }, {})
+      },
+      {}
+    )
 
   // override component data with mounting options data
   if (options?.data) {
@@ -142,6 +167,9 @@ export function mount(
     ref: MOUNT_COMPONENT_REF
   })
 
+  const global = mergeGlobalProperties(config.global, options?.global)
+  component.components = { ...component.components, ...global.components }
+
   // create the wrapper component
   const Parent = defineComponent({
     name: MOUNT_PARENT_NAME,
@@ -160,14 +188,15 @@ export function mount(
 
   // create the app
   const app = createApp(Parent)
-  const global = mergeGlobalProperties(config.global, options?.global)
 
   // global mocks mixin
   if (global?.mocks) {
     const mixin = {
       beforeCreate() {
-        for (const [k, v] of Object.entries(global.mocks)) {
-          this[k] = v
+        for (const [k, v] of Object.entries(
+          global.mocks as { [key: string]: any }
+        )) {
+          ;(this as any)[k] = v
         }
       }
     }
@@ -176,34 +205,37 @@ export function mount(
   }
 
   // AppConfig
-  if (global?.config) {
-    for (const [k, v] of Object.entries(global.config)) {
+  if (global.config) {
+    for (const [k, v] of Object.entries(global.config) as [
+      keyof Omit<AppConfig, 'isNativeTag'>,
+      any
+    ][]) {
       app.config[k] = v
     }
   }
 
   // use and plugins from mounting options
-  if (global?.plugins) {
+  if (global.plugins) {
     for (const use of global.plugins) app.use(use)
   }
 
   // use any mixins from mounting options
-  if (global?.mixins) {
+  if (global.mixins) {
     for (const mixin of global.mixins) app.mixin(mixin)
   }
 
-  if (global?.components) {
+  if (global.components) {
     for (const key of Object.keys(global.components))
       app.component(key, global.components[key])
   }
 
-  if (global?.directives) {
+  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 (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, global.provide[key])
@@ -214,8 +246,8 @@ export function mount(
   app.mixin(attachEmitListener())
 
   // stubs
-  if (options?.global?.stubs || options?.shallow) {
-    stubComponents(options?.global?.stubs, options?.shallow)
+  if (global.stubs || options?.shallow) {
+    stubComponents(global.stubs, options?.shallow)
   } else {
     transformVNodeArgs()
   }
@@ -227,9 +259,6 @@ export function mount(
   return createWrapper(app, App, setProps)
 }
 
-export function shallowMount(
-  originalComponent,
-  options?: MountingOptions<any>
-) {
-  return mount(originalComponent, { ...options, shallow: true })
+export const shallowMount: typeof mount = (component: any, options?: any) => {
+  return mount(component, { ...options, shallow: true })
 }

src/stubs.ts

@@ -1,5 +1,5 @@
 import { transformVNodeArgs, h, createVNode } from 'vue'
-import { hyphenate } from '@vue/shared'
+import { hyphenate } from './utils/vueShared'
 import { MOUNT_COMPONENT_REF, MOUNT_PARENT_NAME } from './constants'
 import { config } from './config'
 import { matchName } from './utils/matchName'

src/types.ts

@@ -21,7 +21,7 @@ export type FindAllComponentsSelector = NameSelector | string
 
 export type GlobalMountOptions = {
   plugins?: Plugin[]
-  config?: AppConfig
+  config?: Omit<AppConfig, 'isNativeTag'> // isNativeTag is readonly, so we omit it
   mixins?: ComponentOptions[]
   mocks?: Record<string, any>
   provide?: Record<any, any>