added component tester

Author: dipaksarkar

docs/.vuepress/components/PlayGround.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="grid gap-y-4 md:grid-cols-2 md:gap-x-8 items-center my-8">
-      <div class="grid">
+      <!-- <div class="grid">
         <div class="font-medium mb-2">Component</div>
         <VueNumber
           v-if="updated"
@@ -16,7 +16,7 @@
         <div class="mt-2">
           Number value: <code class="ml-2">{{ price }}</code>
         </div>
-      </div>
+      </div> -->
       <div class="grid">
         <div class="font-medium mb-2">Directive</div>
         <BaseInput
@@ -143,9 +143,9 @@ export default {
       price: 1234.5,
       priceDirective: 1234.5,
       config: {
-        decimal: '.',
-        separator: ',',
-        prefix: '$',
+        decimal: ',',
+        separator: '.',
+        prefix: 'Rs.',
         suffix: '',
         precision: 2,
         nullValue: '',
@@ -167,10 +167,6 @@ export default {
   methods: {
     onChange() {
       console.log('onChange', arguments)
-      // setTimeout(() => {
-      //   this.price = 1500.629
-      //   this.priceDirective = 1500.629
-      // }, 3000)
     },
     onInput() {
       console.log('onInput', arguments)

src/core.ts

@@ -83,6 +83,7 @@ export function getInputElement(el: HTMLElement | HTMLInputElement): CustomInput
  * Updates the cursor position to the right place after the masking rule was applied
  */
 export function updateCursor(el: HTMLInputElement, position: number) {
+  return false
   const setSelectionRange = (): any => {
     el.setSelectionRange(position, position)
   }

src/number-format.ts

@@ -97,11 +97,15 @@ export default class NumberFormat {
     const { reverseFill, decimal } = this.options
     if (reverseFill) {
       this.number = this.toFixed().replace('.', decimal)
+      console.log('reverseFill', this.number)
     } else if (typeof this.input === 'number') {
       this.number = this.parts(this.input.toString().replace('-', ''), '.').join(decimal)
+      console.log('number', this.number)
     } else {
       this.number = this.parts(this.numberOnly()).join(decimal)
+      console.log('else', this.numberRegExp, this.numberOnly(), this.number)
     }
+
     return this.number
   }
 

tests/vue-number-component.custom.spec.ts

@@ -0,0 +1,37 @@
+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 () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893,
+        decimal: ',',
+        separator: '.',
+        prefix: 'Rs.',
+        suffix: '%'
+      }
+    })
+
+    const input = wrapper.find('input')
+    // input.element.value = '200'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.maskedValue).toBe('Rs.123.456,893%')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.maskedValue).toBe('Rs.123.456,89%')
+
+    input.element.value = 1234.568
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.maskedValue).toBe('Rs.1.234,568%')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.maskedValue).toBe('Rs.1.234,57%')
+  })
+})

tests/vue-number-component.spec.ts

@@ -0,0 +1,33 @@
+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 () => {
+    const wrapper = mount(VueNumber, {
+      propsData: {
+        value: 123456.893
+      }
+    })
+
+    const input = wrapper.find('input')
+    // input.element.value = '200'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.maskedValue).toBe('123,456.893')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.maskedValue).toBe('123,456.89')
+
+    input.element.value = '1234.568'
+
+    await input.trigger('input')
+
+    expect(wrapper.vm.maskedValue).toBe('1,234.568')
+
+    await input.trigger('blur')
+
+    expect(wrapper.vm.maskedValue).toBe('1,234.57')
+  })
+})