Use idiomatic Vue event binding to improve/expand event support (#799)

pearofducks · lozjackson · commit 55edd7a1c79c · 2018-07-24T21:09:41.000+01:00
diff --git a/vue/src/vueTextMask.js b/vue/src/vueTextMask.js
@@ -7,18 +7,17 @@ export default {
       domProps: {
         value: this.value
       },
-      on: {
+      attrs: this.$attrs,
+      on: Object.assign({...this.$listeners}, {
         input: (event) => this.updateValue(event.target.value),
-        focus: (event) => this.emitEvent(event),
-        blur: (event) => this.emitEvent(event),
-        keypress: (event) => this.emitEvent(event),
-        click: (event) => this.emitEvent(event)
-      }
+      })
     })
   },
 
   name: 'masked-input',
 
+  inheritAttrs: false,
+
   props: {
     value: {
       type: String,
@@ -85,10 +84,6 @@ export default {
       this.textMaskInputElement.update(value)
       this.$emit('input', this.$refs.input.value)
     },
-
-    emitEvent(event) {
-      this.$emit(event.type, event)
-    }
   },
 
   watch: {
diff --git a/vue/test/vueTextMask.spec.js b/vue/test/vueTextMask.spec.js
@@ -1,5 +1,5 @@
 import packageJson from '../package.json'
-import Vue from 'vue'
+import Vue from 'vue/dist/vue.js'
 
 const VueTextMask = (isVerify()) ?
   require(`../${packageJson.main}`) :
@@ -17,6 +17,24 @@ function mountComponent(Component, propsData) {
   return new Ctor({propsData}).$mount()
 }
 
+const eventTest = Vue.extend({
+  template: `<div>
+    <masked-input
+      ref="maskedInput"
+      type="text"
+      name="test"
+      :mask="[/\d/,/\d/,/\d/]"
+      @focus="callback('focus')"
+      @blur="callback('blur')"
+      @keypress="callback('keypress')">
+    </masked-input>
+  </div>`,
+  components: {maskedInput},
+  methods: {
+    callback(e) { },
+  },
+})
+
 describe('inputMask', () => {
   it('renders', () => {
     const vm = mountComponent(maskedInput, {
@@ -219,18 +237,15 @@ describe('inputMask', () => {
   })
 
   it('emits focus and blur events for parent components', () => {
-    const vm = mountComponent(maskedInput, {
-      value: '123',
-      mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
-    })
+    const vm = mountComponent(eventTest)
 
-    vm.emitEvent = sinon.spy()
+    vm.callback = sinon.spy()
 
-    vm.$el.focus()
-    vm.$el.blur()
-    expect(vm.emitEvent.callCount).to.equal(2)
-    expect(vm.emitEvent.getCall(0).args[0].type).to.equal('focus')
-    expect(vm.emitEvent.getCall(1).args[0].type).to.equal('blur')
+    vm.$refs.maskedInput.$el.focus()
+    vm.$refs.maskedInput.$el.blur()
+    expect(vm.callback.callCount).to.equal(2)
+    expect(vm.callback.getCall(0).args[0]).to.equal('focus')
+    expect(vm.callback.getCall(1).args[0]).to.equal('blur')
   })
 
   it('does not emit "input" event after component mount', () => {
@@ -248,22 +263,19 @@ describe('inputMask', () => {
   })
 
   it('emits keypress event for parent components', () => {
-    const vm = mountComponent(maskedInput, {
-      value: '123',
-      mask: ['(', /[1-9]/, /\d/, /\d/, ')', ' ', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/]
-    })
+    const vm = mountComponent(eventTest)
 
-    vm.emitEvent = sinon.spy()
+    vm.callback = sinon.spy()
 
     const e = new window.KeyboardEvent('keypress', {
       key: 'e',
       bubbles: true,
       cancelable: true
     })
-    vm.$el.dispatchEvent(e)
+    vm.$refs.maskedInput.$el.dispatchEvent(e)
 
-    expect(vm.emitEvent.callCount).to.equal(1)
-    expect(vm.emitEvent.getCall(0).args[0].type).to.equal('keypress')
+    expect(vm.callback.callCount).to.equal(1)
+    expect(vm.callback.getCall(0).args[0]).to.equal('keypress')
   })
 })
 
