Merge pull request #56 from vuejs/feature/stubs

feat: stubs mounting option

Author: lmiller1990

.github/workflows/ci.yml

@@ -24,9 +24,9 @@ jobs:
       uses: actions/setup-node@v1
       with:
         node-version: ${{ matrix.node-version }}
-    - run: npm install
-    - run: npm run lint
-    - run: npm run build
-    - run: npm test
+    - run: yarn install
+    - run: yarn lint
+    - run: yarn test
+    - run: yarn build
       env:
         CI: true

package.json

@@ -11,12 +11,17 @@
     "dist",
     "README.md"
   ],
+  "dependencies": {
+    "lodash": "^4.17.15"
+  },
   "devDependencies": {
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.8.4",
     "@babel/types": "^7.8.3",
+    "@rollup/plugin-node-resolve": "^7.1.3",
     "@types/estree": "^0.0.42",
     "@types/jest": "^24.9.1",
+    "@types/lodash": "^4.14.149",
     "@vue/compiler-sfc": "^3.0.0-alpha.12",
     "babel-jest": "^25.2.3",
     "babel-preset-jest": "^25.2.1",

rollup.config.js

@@ -1,4 +1,5 @@
 import ts from 'rollup-plugin-typescript2'
+import resolve from '@rollup/plugin-node-resolve'
 
 import pkg from './package.json'
 
@@ -19,8 +20,15 @@ function createEntry(options) {
 
   const config = {
     input,
-    external: ['vue'],
-    plugins: [],
+    external: [
+      'vue', 
+      'lodash/mergeWith',
+      'lodash/camelCase',
+      'lodash/upperFirst',
+      'lodash/kebabCase',
+      'lodash/flow'
+    ],
+    plugins: [resolve()],
     output: {
       banner,
       file: 'dist/vue-test-utils.other.js',

src/mount.ts

@@ -5,6 +5,7 @@ import {
   defineComponent,
   VNodeNormalizedChildren,
   ComponentOptions,
+  transformVNodeArgs,
   Plugin,
   Directive,
   Component,
@@ -15,6 +16,7 @@ import { createWrapper } from './vue-wrapper'
 import { createEmitMixin } from './emitMixin'
 import { createDataMixin } from './dataMixin'
 import { MOUNT_ELEMENT_ID } from './constants'
+import { stubComponents } from './stubs'
 
 type Slot = VNode | string | { render: Function }
 
@@ -29,6 +31,7 @@ interface MountingOptions {
     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>
@@ -72,6 +75,7 @@ export function mount(originalComponent: any, options?: MountingOptions) {
 
   // create the wrapper component
   const Parent = defineComponent({
+    name: 'VTU_COMPONENT',
     render() {
       return h(component, props, slots)
     }
@@ -133,6 +137,13 @@ export function mount(originalComponent: any, options?: MountingOptions) {
   const { emitMixin, events } = createEmitMixin()
   vm.mixin(emitMixin)
 
+  // stubs
+  if (options?.global?.stubs) {
+    stubComponents(options.global.stubs)
+  } else {
+    transformVNodeArgs()
+  }
+
   // mount the app!
   const app = vm.mount(el)
 

src/stubs.ts

@@ -0,0 +1,80 @@
+import { transformVNodeArgs, h } from 'vue'
+
+import { pascalCase, kebabCase } from './utils'
+
+interface IStubOptions {
+  name?: string
+}
+
+// TODO: figure out how to type this
+type VNodeArgs = any[]
+
+export const createStub = (options: IStubOptions) => {
+  const tag = options.name ? `${options.name}-stub` : 'anonymous-stub'
+  const render = () => h(tag)
+
+  return { name: tag, render }
+}
+
+const resolveComponentStubByName = (
+  componentName: string,
+  stubs: Record<any, any>
+) => {
+  const componentPascalName = pascalCase(componentName)
+  const componentKebabName = kebabCase(componentName)
+
+  for (const [stubKey, value] of Object.entries(stubs)) {
+    if (
+      stubKey === componentPascalName ||
+      stubKey === componentKebabName ||
+      stubKey === componentName
+    ) {
+      return value
+    }
+  }
+}
+
+const isHTMLElement = (args: VNodeArgs) =>
+  Array.isArray(args) && typeof args[0] === 'string'
+
+const isCommentOrFragment = (args: VNodeArgs) => typeof args[0] === 'symbol'
+
+const isParent = (args: VNodeArgs) =>
+  typeof args[0] === 'object' && args[0]['name'] === 'VTU_COMPONENT'
+
+const isComponent = (args: VNodeArgs) => typeof args[0] === 'object'
+
+export function stubComponents(stubs: Record<any, any>) {
+  transformVNodeArgs((args) => {
+    // args[0] can either be:
+    // 1. a HTML tag (div, span...)
+    // 2. An object of component options, such as { name: 'foo', render: [Function], props: {...} }
+    // Depending what it is, we do different things.
+    if (isHTMLElement(args) || isCommentOrFragment(args) || isParent(args)) {
+      return args
+    }
+
+    if (isComponent(args)) {
+      const name = args[0]['name']
+      if (!name) {
+        return args
+      }
+
+      const stub = resolveComponentStubByName(name, stubs)
+
+      // we return a stub by matching Vue's `h` function
+      // where the signature is h(Component, props)
+      // case 1: default stub
+      if (stub === true) {
+        return [createStub({ name }), {}]
+      }
+
+      // case 2: custom implementation
+      if (typeof stub === 'object') {
+        return [stubs[name], {}]
+      }
+    }
+
+    return args
+  })
+}

src/utils.ts

@@ -0,0 +1,8 @@
+import camelCase from 'lodash/camelCase'
+import upperFirst from 'lodash/upperFirst'
+import kebabCase from 'lodash/kebabCase'
+import flow from 'lodash/flow'
+
+const pascalCase = flow(camelCase, upperFirst)
+
+export { kebabCase, pascalCase }