refactor: Moved install method out of Formulario class

src/Formulario.ts

@@ -1,20 +1,14 @@
-import { VueConstructor } from 'vue'
-
 import merge from '@/utils/merge'
 import validationRules from '@/validation/rules'
 import validationMessages from '@/validation/messages'
 
-import FormularioForm from '@/FormularioForm.vue'
-import FormularioGrouping from '@/FormularioGrouping.vue'
-import FormularioInput from '@/FormularioInput.vue'
-
 import {
     ValidationContext,
     CheckRuleFn,
     CreateMessageFn,
 } from '@/validation/validator'
 
-interface FormularioOptions {
+export interface FormularioOptions {
     validationRules?: any;
     validationMessages?: Record<string, Function>;
 }
@@ -27,19 +21,9 @@ export default class Formulario {
     public validationRules: Record<string, CheckRuleFn> = {}
     public validationMessages: Record<string, Function> = {}
 
-    constructor () {
+    constructor (options?: FormularioOptions) {
         this.validationRules = validationRules
         this.validationMessages = validationMessages
-    }
-
-    /**
-     * Install vue formulario, and register it’s components.
-     */
-    install (Vue: VueConstructor, options?: FormularioOptions): void {
-        Vue.prototype.$formulario = this
-        Vue.component('FormularioForm', FormularioForm)
-        Vue.component('FormularioGrouping', FormularioGrouping)
-        Vue.component('FormularioInput', FormularioInput)
 
         this.extend(options || {})
     }

src/index.ts

@@ -1,3 +1,27 @@
-import Formulario from '@/Formulario.ts'
+import Formulario, { FormularioOptions } from '@/Formulario.ts'
+import { VueConstructor } from 'vue'
+import FormularioForm from '@/FormularioForm.vue'
+import FormularioGrouping from '@/FormularioGrouping.vue'
+import FormularioInput from '@/FormularioInput.vue'
 
-export default new Formulario()
+export default {
+    install (Vue: VueConstructor, options?: FormularioOptions): void {
+        Vue.component('FormularioForm', FormularioForm)
+        Vue.component('FormularioGrouping', FormularioGrouping)
+        Vue.component('FormularioInput', FormularioInput)
+
+        Vue.mixin({
+            beforeCreate () {
+                const o = this.$options as Record<string, any>
+
+                if (typeof o.formulario === 'function') {
+                    this.$formulario = o.formulario()
+                } else if (o.parent && o.parent.$formulario) {
+                    this.$formulario = o.parent.$formulario
+                } else {
+                    this.$formulario = new Formulario(options)
+                }
+            }
+        })
+    },
+}

test/unit/Formulario.test.js

@@ -1,18 +1,62 @@
-import Formulario from '@/index.ts'
+import { createLocalVue, mount } from '@vue/test-utils'
+import Formulario from '@/Formulario.ts'
+import plugin from '@/index.ts'
 
 describe('Formulario', () => {
     it('Installs on vue instance', () => {
-        const registry = []
+        const localVue = createLocalVue()
-        function Vue () {}
+
-        Vue.component = function (name, instance) {
+        localVue.use(plugin)
-            registry.push(name)
+
+        expect(localVue.component('FormularioForm')).toBeTruthy()
+        expect(localVue.component('FormularioGrouping')).toBeTruthy()
+        expect(localVue.component('FormularioInput')).toBeTruthy()
+
+        const wrapper = mount({ template: '<div />', }, { localVue })
+
+        expect(wrapper.vm.$formulario).toBeInstanceOf(Formulario)
+    })
+
+    it ('Pushes Formulario instance to child a component', () => {
+        const localVue = createLocalVue()
+
+        localVue.use(plugin)
+        localVue.component('TestComponent', {
+            render (h) {
+                return h('div')
             }
-        Formulario.install(Vue)
+        })
-        expect(Vue.prototype.$formulario).toBe(Formulario)
+
-        expect(registry).toEqual([
+        const wrapper = mount({
-            'FormularioForm',
+            render (h) {
-            'FormularioGrouping',
+                return h('div', [h('TestComponent', { ref: 'test'  })])
-            'FormularioInput',
+            },
-        ])
+        }, { localVue })
+
+        expect(wrapper.vm.$formulario === wrapper.vm.$refs.test.$formulario).toBe(true)
+    })
+
+    it ('Does not pushes Formulario instance to a child component, if it has its own', () => {
+        const localVue = createLocalVue()
+
+        localVue.use(plugin)
+        // noinspection JSCheckFunctionSignatures
+        localVue.component('TestComponent', {
+            formulario () {
+                return new Formulario()
+            },
+
+            render (h) {
+                return h('div')
+            },
+        })
+
+        const wrapper = mount({
+            render (h) {
+                return h('div', [h('TestComponent', { ref: 'test'  })])
+            },
+        }, { localVue })
+
+        expect(wrapper.vm.$formulario === wrapper.vm.$refs.test.$formulario).toBe(false)
     })
 })