wip: new merge function

Author: lmiller1990

src/mount.ts

@@ -160,34 +160,34 @@ export function mount(
   }
 
   // AppConfig
-  if (global?.config) {
+  if (global.config) {
     for (const [k, v] of Object.entries(global.config)) {
       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])
@@ -198,8 +198,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()
   }

src/utils.ts

@@ -2,29 +2,33 @@ import { GlobalMountOptions } from './types'
 
 const isString = (val: unknown): val is string => typeof val === 'string'
 
-// Deep merge function, adapted from from https://gist.github.com/ahtcx/0cd94e62691f539160b32ecda18af3d6
-// Merge a `source` object to a `target` recursively
-const merge = (target: object, source: object) => {
-  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
-  for (const key of Object.keys(source)) {
-    if (!target[key]) {
-      target[key] = source[key]
-    } else {
-      if (source[key] instanceof Object) {
-        Object.assign(source[key], merge(target[key], source[key]))
-      }
-    }
-  }
-
-  Object.assign(target || {}, source)
-}
-
 function mergeGlobalProperties(
   configGlobal: GlobalMountOptions = {},
   mountGlobal: GlobalMountOptions = {}
 ): GlobalMountOptions {
-  merge(configGlobal, mountGlobal)
-  return configGlobal
+  const {
+    mixins: configMixins = [],
+    plugins: configPlugins = [],
+    ...configRest
+  } = configGlobal
+  const {
+    mixins: mountMixins = [],
+    plugins: mountPlugins = [],
+    ...mountRest
+  } = mountGlobal
+  const mixins = [...configMixins, ...mountMixins]
+  const plugins = [...configPlugins, ...mountPlugins]
+
+  return {
+    mixins,
+    plugins,
+    components: { ...configRest.components, ...mountRest.components },
+    provide: { ...configRest.provide, ...mountRest.provide },
+    mocks: { ...configRest.mocks, ...mountRest.mocks },
+    config: { ...configRest.config, ...mountRest.config },
+    directives: { ...configRest.directives, ...mountRest.directives },
+    stubs: { ...configRest.stubs, ...mountRest.stubs }
+  }
 }
 
 export { isString, mergeGlobalProperties }

tests/config.spec.ts

@@ -1,4 +1,4 @@
-import { h } from 'vue'
+import { h, inject } from 'vue'
 import { config, mount } from '../src'
 import Hello from './components/Hello.vue'
 
@@ -108,6 +108,44 @@ describe('config', () => {
     })
   })
 
+  describe('provide', () => {
+    it('sets a provide everywhere', () => {
+      config.global.provide = {
+        theme: 'dark'
+      }
+      const Comp = {
+        setup() {
+          const theme = inject('theme')
+          return () => h('div', theme)
+        }
+      }
+
+      const wrapper = mount(Comp)
+      expect(wrapper.html()).toContain('dark')
+    })
+
+    it('overrides with a local provide', () => {
+      config.global.provide = {
+        theme: 'dark'
+      }
+      const Comp = {
+        setup() {
+          const theme = inject('theme')
+          return () => h('div', theme)
+        }
+      }
+
+      const wrapper = mount(Comp, {
+        global: {
+          provide: {
+            theme: 'light'
+          }
+        }
+      })
+      expect(wrapper.html()).toContain('light')
+    })
+  })
+
   describe('mixins', () => {
     const createdHook = jest.fn()
     const mixin = {
@@ -149,4 +187,58 @@ describe('config', () => {
       expect(createdHook).toHaveBeenCalledTimes(2)
     })
   })
+
+  describe('stubs', () => {
+    const Foo = {
+      name: 'Foo',
+      render() {
+        return h('div', 'real foo')
+      }
+    }
+
+    const Component = {
+      render() {
+        return h('div', h(Foo))
+      }
+    }
+
+    it('sets a stub globally', () => {
+      config.global.stubs = {
+        Foo: {
+          render() {
+            return h('div', 'foo stub')
+          }
+        }
+      }
+
+      const wrapper = mount(Component)
+
+      // once on root, once in the mounted component
+      expect(wrapper.html()).toContain('foo stub')
+    })
+
+    xit('overrides config stub with locally defined stub', () => {
+      config.global.stubs = {
+        Foo: {
+          render() {
+            return h('div', 'config foo stub')
+          }
+        }
+      }
+
+      const wrapper = mount(Component, {
+        global: {
+          stubs: {
+            Foo: {
+              render() {
+                return h('div', 'local foo stub')
+              }
+            }
+          }
+        }
+      })
+
+      expect(wrapper.html()).toContain('local foo stub')
+    })
+  })
 })

tests/shallowMount.spec.ts

@@ -26,7 +26,7 @@ describe('shallowMount', () => {
     )
   })
 
-  it('stubs all components, but allows providing custom stub', () => {
+  it.only('stubs all components, but allows providing custom stub', () => {
     const wrapper = mount(ComponentWithChildren, {
       shallow: true,
       global: {