Merge pull request #276 from vuejs/fix-plugins

fix: ensure plugins receive options correctly

Author: lmiller1990

src/config.ts

@@ -13,15 +13,21 @@ interface GlobalConfigOptions {
 }
 
 interface Plugin<Instance> {
-  handler: (instance: Instance) => Record<string, any>
+  handler: (
+    instance: Instance,
+    options: Record<string, any>
+  ) => Record<string, any>
   options: Record<string, any>
 }
 
 class Pluggable<Instance = DOMWrapper<Element>> {
   installedPlugins: Plugin<Instance>[] = []
 
   install(
-    handler: (instance: Instance) => Record<string, any>,
+    handler: (
+      instance: Instance,
+      options?: Record<string, any>
+    ) => Record<string, any>,
     options: Record<string, any> = {}
   ) {
     if (typeof handler !== 'function') {
@@ -32,7 +38,9 @@ class Pluggable<Instance = DOMWrapper<Element>> {
   }
 
   extend(instance: Instance) {
-    const invokeSetup = (plugin: Plugin<Instance>) => plugin.handler(instance) // invoke the setup method passed to install
+    const invokeSetup = ({ handler, options }: Plugin<Instance>) => {
+      return handler(instance, options) // invoke the setup method passed to install
+    }
     const bindProperty = ([property, value]: [string, any]) => {
       ;(instance as any)[property] =
         typeof value === 'function' ? value.bind(instance) : value

src/vueWrapper.ts

@@ -25,7 +25,6 @@ export class VueWrapper<T extends ComponentPublicInstance> {
     this.rootVM = vm?.$root
     this.componentVM = vm as T
     this.__setProps = setProps
-    // plugins hook
     config.plugins.VueWrapper.extend(this)
   }
 

tests/features/plugins.spec.ts

@@ -7,72 +7,88 @@ declare module '../../src/vueWrapper' {
     width(): number
     $el: Element
     myMethod(): void
+    greet: (name: string) => string
   }
 }
 
 const textValue = `I'm the innerHTML`
 const mountComponent = () => mount({ template: `<h1>${textValue}</h1>` })
 
-describe('Plugin', () => {
-  describe('#install method', () => {
-    beforeEach(() => {
-      config.plugins.VueWrapper.reset()
-    })
-
-    it('extends wrappers with the return values from the install function', () => {
-      const width = 230
-      const plugin = () => ({ width })
-      config.plugins.VueWrapper.install(plugin)
-      const wrapper = mountComponent()
-      expect(wrapper).toHaveProperty('width', width)
-    })
+describe('Plugin#install', () => {
+  beforeEach(() => {
+    config.plugins.VueWrapper.reset()
+  })
 
-    it('receives the wrapper inside the plugin setup', () => {
-      const plugin = (wrapper: VueWrapper<ComponentPublicInstance>) => {
-        return {
-          $el: wrapper.element // simple aliases
+  it('accepts options', () => {
+    function PluginWithOptions(
+      wrapper: VueWrapper<ComponentPublicInstance>,
+      options: Record<string, string>
+    ) {
+      return {
+        greet: (name: string) => {
+          return `${options.msg}, ${name}`
         }
       }
-      config.plugins.VueWrapper.install(plugin)
-      const wrapper = mountComponent()
-      expect(wrapper.$el.innerHTML).toEqual(textValue)
-    })
+    }
+    config.plugins.VueWrapper.install(PluginWithOptions, { msg: 'Hello' })
 
-    it('supports functions', () => {
-      const myMethod = jest.fn()
-      const plugin = () => ({ myMethod })
-      config.plugins.VueWrapper.install(plugin)
-      mountComponent().myMethod()
-      expect(myMethod).toHaveBeenCalledTimes(1)
-    })
+    const wrapper = mountComponent()
+    expect(wrapper.greet('Lachlan')).toBe('Hello, Lachlan')
+  })
 
-    describe('error states', () => {
-      beforeAll(() => {
-        jest.spyOn(console, 'error').mockImplementation(() => {})
-      })
+  it('extends wrappers with the return values from the install function', () => {
+    const width = 230
+    const plugin = () => ({ width })
+    config.plugins.VueWrapper.install(plugin)
+    const wrapper = mountComponent()
+    expect(wrapper).toHaveProperty('width', width)
+  })
 
-      afterAll(() => {
-        // @ts-ignore
-        console.error.mockRestore()
-      })
+  it('receives the wrapper inside the plugin setup', () => {
+    const plugin = (wrapper: VueWrapper<ComponentPublicInstance>) => {
+      return {
+        $el: wrapper.element // simple aliases
+      }
+    }
+    config.plugins.VueWrapper.install(plugin)
+    const wrapper = mountComponent()
+    expect(wrapper.$el.innerHTML).toEqual(textValue)
+  })
 
-      const plugins = [
-        () => false,
-        () => true,
-        () => [],
-        true,
-        false,
-        'property',
-        120
-      ]
+  it('supports functions', () => {
+    const myMethod = jest.fn()
+    const plugin = () => ({ myMethod })
+    config.plugins.VueWrapper.install(plugin)
+    mountComponent().myMethod()
+    expect(myMethod).toHaveBeenCalledTimes(1)
+  })
 
-      it.each(plugins)(
-        'Calling install with %p is handled gracefully',
-        (plugin) => {
-          config.plugins.VueWrapper.install(plugin as any)
-          expect(() => mountComponent()).not.toThrow()
-        }
-      )
+  describe('error states', () => {
+    beforeAll(() => {
+      jest.spyOn(console, 'error').mockImplementation(() => {})
+    })
+
+    afterAll(() => {
+      // @ts-ignore
+      console.error.mockRestore()
     })
+
+    const plugins = [
+      () => false,
+      () => true,
+      () => [],
+      true,
+      false,
+      'property',
+      120
+    ]
+
+    it.each(plugins)(
+      'Calling install with %p is handled gracefully',
+      (plugin) => {
+        config.plugins.VueWrapper.install(plugin as any)
+        expect(() => mountComponent()).not.toThrow()
+      }
+    )
   })
 })