updated test unit

Author: dipaksarkar

.eslintignore

@@ -1,3 +1,2 @@
 docs
 dist
-tests

tests/component/component.custom.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import VueNumber from '../../src/component.vue'
 
-describe('VueNumber', () => {
-  test('should emit input event with the new value on input', async () => {
+describe('VueNumber custom config', () => {
+  test('should emit input event with the new maskedValue on input', async () => {
     const wrapper = mount(VueNumber, {
       propsData: {
         value: 123456.893,
@@ -33,4 +33,36 @@ describe('VueNumber', () => {
 
     expect(wrapper.vm.maskedValue).toBe('Rs.1.234,57%')
   })
+
+  test('should emit input event with the new unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893,
+        decimal: ',',
+        separator: '.',
+        prefix: 'Rs.',
+        suffix: '%'
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    input.element.value = 1234.568
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+  })
 })

tests/component/component.minimumFractionDigits.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import VueNumber from '../../src/component.vue'
 
-describe('VueNumber', () => {
-  test('should emit input event with minimum fraction digits', async () => {
+describe('VueNumber with minimum fraction digits', () => {
+  test('should emit input event with the new maskedValue on input', async () => {
     const wrapper = mount(VueNumber, {
       propsData: {
         value: 123456.893,
@@ -30,4 +30,33 @@ describe('VueNumber', () => {
 
     expect(wrapper.vm.maskedValue).toBe('1,234.50')
   })
+
+  test('should emit input event with the new unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893,
+        minimumFractionDigits: 2
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    input.element.value = '1234.5'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.5')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.5')
+  })
 })

tests/component/component.range.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import VueNumber from '../../src/component.vue'
 
-describe('VueNumber', () => {
-  test('should emit input event within range', async () => {
+describe('VueNumber within range', () => {
+  test('should emit input event with the new maskedValue on input', async () => {
     const wrapper = mount(VueNumber, {
       propsData: {
         value: 1.893,
@@ -35,4 +35,38 @@ describe('VueNumber', () => {
 
     expect(wrapper.vm.maskedValue).toBe('12.57')
   })
+
+  test('should emit input event with the new unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 1.893,
+        min: 0,
+        max: 50
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1.89')
+
+    input.element.value = '1234.568'
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('50')
+
+    input.element.value = '-1234.568'
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('0')
+
+    input.element.value = '12.568'
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('12.57')
+  })
 })

tests/component/component.reverseFill.spec.ts

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import VueNumber from '../../src/component.vue'
 
-describe('VueNumber', () => {
-  test('should emit input event with reverse fill', async () => {
+describe('VueNumber reverse fill', () => {
+  test('should emit input event with the new maskedValue on input', async () => {
     const wrapper = mount(VueNumber, {
       propsData: {
         value: 123456.893,
@@ -30,4 +30,33 @@ describe('VueNumber', () => {
 
     expect(wrapper.vm.maskedValue).toBe('12,345.68')
   })
+
+  test('should emit input event with the new unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893,
+        reverseFill: true
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    input.element.value = '1234568'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('12345.68')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('12345.68')
+  })
 })

tests/component/component.spec.ts

@@ -2,7 +2,16 @@ import { mount } from '@vue/test-utils'
 import VueNumber from '../../src/component.vue'
 
 describe('VueNumber', () => {
-  test('should emit input event with the new value on input', async () => {
+  it('renders an input element', () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: '123'
+      }
+    })
+    expect(wrapper.contains('input')).toBe(true)
+  })
+
+  test('should emit input event with the new maskedValue on input', async () => {
     const wrapper = mount(VueNumber, {
       propsData: {
         value: 123456.893
@@ -29,4 +38,32 @@ describe('VueNumber', () => {
 
     expect(wrapper.vm.maskedValue).toBe('1,234.57')
   })
+
+  test('should emit input event with the new unmaskedValue on input', async () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('123456.89')
+
+    input.element.value = '1234.568'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.unmaskedValue).toBe('1234.57')
+  })
 })

tests/directive/directive.custom.spec.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  it('should emit input event with the new value on input', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" v-model="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 123456.893,
+          options: {
+            decimal: ',',
+            separator: '.',
+            prefix: 'Rs.',
+            suffix: '%'
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(input.element.value).toBe('Rs.123.456,893%')
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('Rs.123.456,89%')
+
+    input.element.value = 1234.568
+
+    await input.trigger('input')
+
+    expect(input.element.value).toBe('Rs.1.234,568%')
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('Rs.1.234,57%')
+  })
+})

tests/directive/directive.minimumFractionDigits.spec.ts

@@ -0,0 +1,41 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  test('should emit input event with minimum fraction digits', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" v-model="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 123456.893,
+          options: {
+            minimumFractionDigits: 2
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+
+    await input.trigger('input')
+
+    expect(input.element.value).toBe('123,456.893')
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('123,456.89')
+
+    input.element.value = '1234.5'
+
+    await input.trigger('input')
+
+    expect(input.element.value).toBe('1,234.5')
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('1,234.50')
+  })
+})

tests/directive/directive.range.spec.ts

@@ -0,0 +1,44 @@
+import { mount } from '@vue/test-utils'
+import directive from '../../src/directive'
+
+describe('v-number directive', () => {
+  it('should emit input event within range', async () => {
+    const wrapper = mount({
+      template: `<input v-number="options" type="text" v-model="value" />`,
+      directives: {
+        number: directive
+      },
+      data() {
+        return {
+          value: 1.53,
+          options: {
+            min: 0,
+            max: 50
+          }
+        }
+      }
+    })
+
+    const input = wrapper.find('input')
+    await input.trigger('input')
+
+    expect(input.element.value).toBe('1.53')
+
+    input.element.value = '1234.529'
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('50')
+
+    input.element.value = '-1234.568'
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('0')
+
+    input.element.value = '12.568'
+
+    await input.trigger('blur')
+
+    expect(input.element.value).toBe('12.57')
+  })
+})