Merge branch 'master' into master

Author: HerringtonDarkholme

docs/API.md

@@ -187,23 +187,37 @@ export default {}
 ```
 
 ```js
-test('installs a plugin via `plugins`', () => {
+test('installs plugins via `plugins`', () => {
   const installed = jest.fn()
   class Plugin {
     static install() {
       installed()
     }
   }
+
+  const installedWithOptions = jest.fn()
+  class PluginWithOptions {
+    static install(_app: App, ...args) {
+      installedWithOptions(...args)
+    }
+  }
+
   const Component = {
-    render() { return h('div') }
+    render() {
+      return h('div')
+    }
   }
   mount(Component, {
     global: {
-      plugins: [Plugin]
+      plugins: [Plugin, [PluginWithOptions, 'argument 1', 'another argument']]
     }
   })
 
   expect(installed).toHaveBeenCalled()
+  expect(installedWithOptions).toHaveBeenCalledWith(
+    'argument 1',
+    'another argument'
+  )
 })
 ```
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue/test-utils",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.6",
   "license": "MIT",
   "main": "dist/vue-test-utils.cjs.js",
   "browser": "dist/vue-test-utils.browser.js",
@@ -23,7 +23,7 @@
     "@types/estree": "^0.0.42",
     "@types/jest": "^24.9.1",
     "@types/node": "12.12.35",
-    "@vue/compiler-sfc": "^3.0.0-rc.5",
+    "@vue/compiler-sfc": "^3.0.0-rc.12",
     "babel-jest": "^25.2.3",
     "babel-preset-jest": "^25.2.1",
     "dom-event-types": "^1.0.0",
@@ -38,13 +38,13 @@
     "ts-jest": "^25.0.0",
     "tsd": "0.11.0",
     "typescript": "^3.7.5",
-    "vue": "^3.0.0-rc.5",
+    "vue": "^3.0.0-rc.12",
     "vue-jest": "vuejs/vue-jest#next",
     "vue-router": "^4.0.0-alpha.14",
     "vuex": "^4.0.0-beta.1"
   },
   "peerDependencies": {
-    "vue": "^3.0.0-rc.5"
+    "vue": "^3.0.0-rc.12"
   },
   "author": {
     "name": "Lachlan Miller",

src/config.ts

@@ -1,6 +1,6 @@
+import { ComponentPublicInstance } from 'vue'
 import { GlobalMountOptions } from './types'
 import { VueWrapper } from './vueWrapper'
-import { ComponentPublicInstance } from 'vue'
 
 interface GlobalConfigOptions {
   global: GlobalMountOptions
@@ -19,7 +19,7 @@ interface Plugin {
 }
 
 class Pluggable {
-  installedPlugins = [] as Array<Plugin>
+  installedPlugins: Plugin[] = []
 
   install(
     handler: (
@@ -55,7 +55,12 @@ class Pluggable {
 }
 
 export const config: GlobalConfigOptions = {
-  global: {},
+  global: {
+    stubs: {
+      transition: true,
+      'transition-group': true
+    }
+  },
   plugins: {
     VueWrapper: new Pluggable(),
     DOMWrapper: new Pluggable()

src/domWrapper.ts

@@ -3,6 +3,7 @@ import { nextTick } from 'vue'
 import { createWrapperError } from './errorWrapper'
 import { TriggerOptions, createDOMEvent } from './createDomEvent'
 import { config } from './config'
+import { isElementVisible } from './utils/isElementVisible'
 
 export class DOMWrapper<ElementType extends Element> {
   element: ElementType
@@ -39,6 +40,10 @@ export class DOMWrapper<ElementType extends Element> {
     return true
   }
 
+  isVisible() {
+    return isElementVisible(this.element)
+  }
+
   text() {
     return this.element.textContent?.trim()
   }

src/emitMixin.ts

@@ -10,7 +10,23 @@ export const attachEmitListener = () => {
         events[event]
           ? (events[event] = [...events[event], [...args]])
           : (events[event] = [[...args]])
+
+        // Vue will warn you if you emit an event that is not declared in `emits` and
+        // if the parent is not listening for that event.
+        // since we intercept the event, we are never listening for it explicitly on the
+        // Parent component. Swallow those events then restore the console.warn.
+        // TODO: find out if this is doable using `app.config.warnHandler` (does not appear
+        // work right now). https://github.com/vuejs/vue-test-utils-next/issues/197
+        const consoleWarnSave = console.warn
+        console.warn = (msg: string, ...rest: unknown[]) => {
+          if (msg.includes('[Vue warn]: Component emitted event')) {
+            return
+          } else {
+            consoleWarnSave(msg, ...rest)
+          }
+        }
         originalEmit(event, ...args)
+        console.warn = consoleWarnSave
         return [event, ...args]
       }
     }

src/mount.ts

@@ -14,7 +14,6 @@ import {
   ExtractPropTypes,
   Component,
   WritableComputedOptions,
-  ComponentOptionsBase,
   ComponentPropsOptions,
   AppConfig,
   VNodeProps,
@@ -23,7 +22,7 @@ import {
 
 import { config } from './config'
 import { GlobalMountOptions } from './types'
-import { mergeGlobalProperties } from './utils'
+import { mergeGlobalProperties, isFunctionalComponent } from './utils'
 import { processSlot } from './utils/compileSlots'
 import { createWrapper, VueWrapper } from './vueWrapper'
 import { attachEmitListener } from './emitMixin'
@@ -35,7 +34,7 @@ import {
 } from './constants'
 import { stubComponents } from './stubs'
 
-type Slot = VNode | string | { render: Function } | Function
+type Slot = VNode | string | { render: Function } | Function | Component
 
 type SlotDictionary = {
   [key: string]: Slot
@@ -48,6 +47,8 @@ interface MountingOptions<Props, Data = {}> {
     ? Partial<Data>
     : never
   props?: Props
+  /** @deprecated */
+  propsData?: Props
   attrs?: Record<string, unknown>
   slots?: SlotDictionary & {
     default?: Slot
@@ -174,7 +175,7 @@ export function mount<
     C,
     M,
     E,
-    VNodeProps & ExtractPropTypes<PropsOptions, false>
+    VNodeProps & ExtractPropTypes<PropsOptions>
   >
 >
 
@@ -259,6 +260,7 @@ export function mount(
   // Vue's reactivity system will cause a rerender.
   const props = reactive({
     ...options?.attrs,
+    ...options?.propsData,
     ...options?.props,
     ref: MOUNT_COMPONENT_REF
   })
@@ -312,7 +314,13 @@ export function mount(
 
   // use and plugins from mounting options
   if (global.plugins) {
-    for (const use of global.plugins) app.use(use)
+    for (const plugin of global.plugins) {
+      if (Array.isArray(plugin)) {
+        app.use(plugin[0], ...plugin.slice(1))
+        continue
+      }
+      app.use(plugin)
+    }
   }
 
   // use any mixins from mounting options
@@ -342,17 +350,22 @@ export function mount(
   app.mixin(attachEmitListener())
 
   // stubs
-  if (global.stubs || options?.shallow) {
-    stubComponents(global.stubs, options?.shallow)
-  } else {
-    transformVNodeArgs()
-  }
+  // even if we are using `mount`, we will still
+  // stub out Transition and Transition Group by default.
+  stubComponents(global.stubs, options?.shallow)
 
   // mount the app!
   const vm = app.mount(el)
 
   const App = vm.$refs[MOUNT_COMPONENT_REF] as ComponentPublicInstance
-  return createWrapper(app, App, setProps)
+  return createWrapper(
+    app,
+    App,
+    {
+      isFunctionalComponent: isFunctionalComponent(originalComponent)
+    },
+    setProps
+  )
 }
 
 export const shallowMount: typeof mount = (component: any, options?: any) => {

src/stubs.ts

@@ -1,5 +1,7 @@
 import {
   transformVNodeArgs,
+  Transition,
+  TransitionGroup,
   h,
   ComponentPublicInstance,
   Slots,
@@ -34,6 +36,17 @@ const createStub = ({ name, props }: StubOptions): ComponentOptions => {
   return defineComponent({ name: name || anonName, render, props })
 }
 
+const createTransitionStub = ({
+  name,
+  props
+}: StubOptions): ComponentOptions => {
+  const render = (ctx: ComponentPublicInstance) => {
+    return h(name, {}, ctx.$slots)
+  }
+
+  return defineComponent({ name, render, props })
+}
+
 const resolveComponentStubByName = (
   componentName: string,
   stubs: Record<any, any>
@@ -78,6 +91,28 @@ export function stubComponents(
   transformVNodeArgs((args, instance: ComponentInternalInstance | null) => {
     const [nodeType, props, children, patchFlag, dynamicProps] = args
     const type = nodeType as VNodeTypes
+
+    // stub transition by default via config.global.stubs
+    if (type === Transition && stubs['transition']) {
+      return [
+        createTransitionStub({ name: 'transition-stub', props: undefined }),
+        undefined,
+        children
+      ]
+    }
+
+    // stub transition-group by default via config.global.stubs
+    if (type === TransitionGroup && stubs['transition-group']) {
+      return [
+        createTransitionStub({
+          name: 'transition-group-stub',
+          props: undefined
+        }),
+        undefined,
+        children
+      ]
+    }
+
     // args[0] can either be:
     // 1. a HTML tag (div, span...)
     // 2. An object of component options, such as { name: 'foo', render: [Function], props: {...} }

src/types.ts

@@ -20,12 +20,17 @@ export type FindComponentSelector = RefSelector | NameSelector | string
 export type FindAllComponentsSelector = NameSelector | string
 
 export type GlobalMountOptions = {
-  plugins?: Plugin[]
-  config?: Omit<AppConfig, 'isNativeTag'> // isNativeTag is readonly, so we omit it
+  plugins?: (Plugin | [Plugin, ...any[]])[]
+  config?: Partial<Omit<AppConfig, 'isNativeTag'>> // isNativeTag is readonly, so we omit it
   mixins?: ComponentOptions[]
   mocks?: Record<string, any>
   provide?: Record<any, any>
   components?: Record<string, Component | object>
   directives?: Record<string, Directive>
   stubs?: Record<any, any>
+  renderStubDefaultSlot?: boolean
+}
+
+export interface VueWrapperMeta {
+  isFunctionalComponent: boolean
 }

src/utils.ts

@@ -1,5 +1,6 @@
 import { GlobalMountOptions } from './types'
 import { AppConfig } from 'vue'
+
 function mergeStubs(target: Record<string, any>, source: GlobalMountOptions) {
   if (source.stubs) {
     if (Array.isArray(source.stubs)) {
@@ -12,7 +13,7 @@ function mergeStubs(target: Record<string, any>, source: GlobalMountOptions) {
   }
 }
 
-function mergeGlobalProperties(
+export function mergeGlobalProperties(
   configGlobal: GlobalMountOptions = {},
   mountGlobal: GlobalMountOptions = {}
 ): GlobalMountOptions {
@@ -36,4 +37,6 @@ function mergeGlobalProperties(
   }
 }
 
-export { mergeGlobalProperties }
+export function isFunctionalComponent(component: any) {
+  return typeof component === 'function'
+}

src/utils/compileSlots.ts

@@ -1,7 +1,8 @@
 import { compile } from '@vue/compiler-dom'
 import * as vue from 'vue'
 
-export function processSlot(template = '', Vue = vue) {
+export function processSlot(source = '', Vue = vue) {
+  let template = source.trim()
   const hasWrappingTemplate = template && template.startsWith('<template')
 
   // allow content without `template` tag, for easier testing