test: increase test coverage

Author: RonaldJerez

src/component.vue

@@ -24,11 +24,22 @@ import directive from './directive'
 export default {
   name: 'InputFacade',
   props: {
+    /**
+     * A function to format the value after applying the mask. The function will receive an
+     * object with the masked and unmasked value. The result of this function will determine
+     * what happens with the value.
+     * <br />
+     * If a string is returned, then that string will pass through the masker function once more and its value
+     * will be set to the input.  If false (boolean) is returned, the input will be rejected and the
+     * previous value will be restored.  Otherwise the facade logic will continue as usual.
+     * @since v1.3
+     */
+    formatter: Function,
     /**
      * Vue's v-model .lazy modifier does not currently work with custom components. If you wish to have your v-model
      * updated only during the change event instead of on input, enable this property. <b>Note: This works by supressing
      * input events and only emitting a single input event at the same time as the change event.</b>
-     * @since v1.2
+     * @since v1.3
      */
     lazy: {
       type: Boolean,
@@ -45,20 +56,9 @@ export default {
       type: Boolean,
       default: false
     },
-    /**
-     * A function to format the value after applying the mask. The function will receive an
-     * object with the masked and unmasked value. The result of this function will determine
-     * what happens with the value.
-     * <br />
-     * If a string is returned, then that string will pass through the masker function once more and its value
-     * will be set to the input.  If false (boolean) is returned, the input will be rejected and the
-     * previous value will be restored.  Otherwise the facade logic will continue as usual.
-     * @since v1.2
-     */
-    formatter: Function,
     /**
      * If the mask starts with static characters, show them in the field initially before typing anything.
-     * @since v1.2
+     * @since v1.3
      */
     prepend: {
       type: Boolean,

tests/component.test.js

@@ -50,7 +50,7 @@ describe('Component', () => {
     expect(wrapper.vm.maskedValue).toBe('(444)555')
   })
 
-  test('When lazy is set to true, should only input onChange', async () => {
+  test('When lazy is set to true, should only emit input onChange', async () => {
     // default settings
     const wrapper = createWrapper({ lazy: true })
     const input = wrapper.find('input')
@@ -60,6 +60,16 @@ describe('Component', () => {
 
     input.trigger('change')
     expect(wrapper.emitted().input).toBeTruthy()
+    expect(wrapper.emitted().change).toBeTruthy()
+  })
+
+  test('When lazy is set to false, should not emit input on change', async () => {
+    // default settings
+    const wrapper = createWrapper({ lazy: false })
+    const input = wrapper.find('input')
+
+    input.trigger('change')
+    expect(wrapper.emitted().input).toBeFalsy()
   })
 
   test('Adding a format function should call that function on input', async () => {

tests/directive.test.js

@@ -6,8 +6,9 @@ describe('Directive', () => {
   let wrapper
   const inputListener = jest.fn()
 
-  const buildWrapper = ({ template, mask = '##.##', value = '', ...rest } = {}) => {
-    if (!template) template = `<input v-facade="mask" value="${value}" @input="inputListener" />`
+  const buildWrapper = ({ template, mask = '##.##', modifiers, value = '', ...rest } = {}) => {
+    const directive = modifiers ? `v-facade.${modifiers}` : 'v-facade'
+    if (!template) template = `<input ${directive}="mask" value="${value}" @input="inputListener" />`
 
     const component = {
       template,
@@ -67,26 +68,37 @@ describe('Directive', () => {
     expect(wrapper.element.unmaskedValue).toBe('1122')
   })
 
-  test('Should honor short modifier', async () => {
-    buildWrapper({
-      template: `<input v-facade.short="mask" value="12" @input="inputListener" />`
-    })
-    expect(wrapper.element.value).toBe('12')
-
-    wrapper.element.value = '1234'
-    wrapper.find('input').trigger('input')
-
-    expect(wrapper.element.value).toBe('12.34')
-    expect(wrapper.element.unmaskedValue).toBe('1234')
-  })
-
   test('Should not update the cursor position if not the active element', () => {
     buildWrapper({ value: 'ABCDE' })
 
     jest.spyOn(wrapper.element, 'setSelectionRange')
     expect(wrapper.element.setSelectionRange).not.toBeCalled()
   })
 
+  describe('Directive Modifiers', () => {
+    test('Should honor short modifier', async () => {
+      buildWrapper({ modifiers: 'short', value: '12' })
+      expect(wrapper.element.value).toBe('12')
+  
+      wrapper.element.value = '1234'
+      wrapper.find('input').trigger('input')
+  
+      expect(wrapper.element.value).toBe('12.34')
+      expect(wrapper.element.unmaskedValue).toBe('1234')
+    })
+
+    test('Should honor prepend modifier', async () => {
+      buildWrapper({ modifiers: 'prepend', mask: '+1 ###', value: '' })
+      expect(wrapper.element.value).toBe('+1 ')
+
+      wrapper.element.value = '777'
+      wrapper.find('input').trigger('input')
+
+      expect(wrapper.element.value).toBe('+1 777')
+      expect(wrapper.element.unmaskedValue).toBe('777')
+    })
+  })
+
   describe('Cursor updates', () => {
     let element