fix: function names (#580)

* Revert "refactor: refactor stub-components.js (#544)"

This reverts commit db5e07e.

* Revert "refactor: refactor add-slots.js (#556)"

This reverts commit ce9e1bf.

* delete packages/test-utils/src/shallow.js

* add functions

* add type SlotValue

* add test

* fix slotValue

* fix validateEnvironment

* add test

* fix lint

* Update slots.spec.js

Author: 38elements

flow/vue.flow.js

@@ -4,3 +4,4 @@
 
 declare type Component = Object // eslint-disable-line no-undef
 declare type VNode = Object // eslint-disable-line no-undef
+declare type SlotValue = Component | string | Array<Component> | Array<string>

packages/create-instance/add-slots.js

@@ -1,18 +1,21 @@
 // @flow
 
 import { compileToFunctions } from 'vue-template-compiler'
+import { throwError } from 'shared/util'
 import { validateSlots } from './validate-slots'
-import { toArray } from 'shared/util'
 
-function isSingleHTMLTag (template: string) {
-  if (!template.startsWith('<') || !template.endsWith('>')) {
+function isSingleElement (slotValue: string): boolean {
+  const _slotValue = slotValue.trim()
+  if (_slotValue[0] !== '<' || _slotValue[_slotValue.length - 1] !== '>') {
     return false
   }
-  const _document = new window.DOMParser().parseFromString(template, 'text/html')
+  const domParser = new window.DOMParser()
+  const _document = domParser.parseFromString(slotValue, 'text/html')
   return _document.body.childElementCount === 1
 }
 
-function createElementFromAdvancedString (slotValue, vm) {
+// see https://github.com/vuejs/vue-test-utils/pull/274
+function createVNodes (vm: Component, slotValue: string) {
   const compiledResult = compileToFunctions(`<div>${slotValue}{{ }}</div>`)
   const _staticRenderFns = vm._renderProxy.$options.staticRenderFns
   vm._renderProxy.$options.staticRenderFns = compiledResult.staticRenderFns
@@ -21,23 +24,54 @@ function createElementFromAdvancedString (slotValue, vm) {
   return elem
 }
 
-function createElement (slotValue: string | Object, vm) {
+function validateEnvironment (): void {
+  if (!compileToFunctions) {
+    throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
+  }
+  if (typeof window === 'undefined') {
+    throwError('the slots string option does not support strings in server-test-uitls.')
+  }
+  if (window.navigator.userAgent.match(/PhantomJS/i)) {
+    throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
+  }
+}
+
+function addSlotToVm (vm: Component, slotName: string, slotValue: SlotValue): void {
+  let elem
   if (typeof slotValue === 'string') {
-    slotValue = slotValue.trim()
-    if (isSingleHTMLTag(slotValue)) {
-      return vm.$createElement(compileToFunctions(slotValue))
+    validateEnvironment()
+    if (isSingleElement(slotValue)) {
+      elem = vm.$createElement(compileToFunctions(slotValue))
     } else {
-      return createElementFromAdvancedString(slotValue, vm)
+      elem = createVNodes(vm, slotValue)
     }
   } else {
-    return vm.$createElement(slotValue)
+    elem = vm.$createElement(slotValue)
+  }
+  if (Array.isArray(elem)) {
+    if (Array.isArray(vm.$slots[slotName])) {
+      vm.$slots[slotName] = [...vm.$slots[slotName], ...elem]
+    } else {
+      vm.$slots[slotName] = [...elem]
+    }
+  } else {
+    if (Array.isArray(vm.$slots[slotName])) {
+      vm.$slots[slotName].push(elem)
+    } else {
+      vm.$slots[slotName] = [elem]
+    }
   }
 }
 
 export function addSlots (vm: Component, slots: Object): void {
   validateSlots(slots)
-  Object.keys(slots).forEach(name => {
-    vm.$slots[name] = toArray(slots[name])
-      .map(slotValue => createElement(slotValue, vm))
+  Object.keys(slots).forEach((key) => {
+    if (Array.isArray(slots[key])) {
+      slots[key].forEach((slotValue) => {
+        addSlotToVm(vm, key, slotValue)
+      })
+    } else {
+      addSlotToVm(vm, key, slots[key])
+    }
   })
 }

packages/create-instance/validate-slots.js

@@ -1,26 +1,23 @@
 // @flow
 
-import { throwError, toArray, isObject } from 'shared/util'
-import { compileToFunctions } from 'vue-template-compiler'
+import { throwError } from 'shared/util'
+
+function isValidSlot (slot: any): boolean {
+  return Array.isArray(slot) || (slot !== null && typeof slot === 'object') || typeof slot === 'string'
+}
 
 export function validateSlots (slots: Object): void {
-  Object.keys(slots).forEach(key => {
-    toArray(slots[key]).forEach(slotValue => {
-      if (!isObject(slotValue) && typeof slotValue !== 'string') {
-        throwError('slots[key] must be a Component, string or an array of Components')
-      }
+  slots && Object.keys(slots).forEach((key) => {
+    if (!isValidSlot(slots[key])) {
+      throwError('slots[key] must be a Component, string or an array of Components')
+    }
 
-      if (typeof slotValue === 'string') {
-        if (!compileToFunctions) {
-          throwError('vueTemplateCompiler is undefined, you must pass components explicitly if vue-template-compiler is undefined')
-        }
-        if (typeof window === 'undefined') {
-          throwError('the slots string option does not support strings in server-test-uitls.')
-        }
-        if (window.navigator.userAgent.match(/PhantomJS/i)) {
-          throwError('the slots option does not support strings in PhantomJS. Please use Puppeteer, or pass a component.')
+    if (Array.isArray(slots[key])) {
+      slots[key].forEach((slotValue) => {
+        if (!isValidSlot(slotValue)) {
+          throwError('slots[key] must be a Component, string or an array of Components')
         }
-      }
-    })
+      })
+    }
   })
 }

packages/shared/compile-template.js

@@ -3,13 +3,14 @@
 import { compileToFunctions } from 'vue-template-compiler'
 
 export function compileTemplate (component: Component) {
-  Object.keys(component.components || {}).forEach((c) => {
-    const cmp = component.components[c]
-    if (!cmp.render) {
-      compileTemplate(cmp)
-    }
-  })
-
+  if (component.components) {
+    Object.keys(component.components).forEach((c) => {
+      const cmp = component.components[c]
+      if (!cmp.render) {
+        compileTemplate(cmp)
+      }
+    })
+  }
   if (component.extends) {
     compileTemplate(component.extends)
   }