test: add 100% coverage. modify form test. update version

guastallaigor · Jul 21, 2020 · 59d9ed4 · 59d9ed4
1 parent b9d854e
commit 59d9ed4
Show file tree

Hide file tree

Showing 4 changed files with 135 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-paycard",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "private": false,
   "description": "Credit card component made with Vue.js",
   "homepage": "https://github.com/guastallaigor/vue-paycard#readme",
@@ -93,7 +93,7 @@
     "preset": "@vue/cli-plugin-unit-jest",
     "coverageDirectory": "./coverage/",
     "collectCoverage": true,
-    "coveragePathIgnorePatterns": ["/node_modules/", "/form.vue/", "/src/assets/"]
+    "coveragePathIgnorePatterns": ["/node_modules/", "/tests/", "/src/assets/"]
   },
   "gitHooks": {
     "pre-commit": "lint-staged"

diff --git a/src/components/VuePaycard.vue b/src/components/VuePaycard.vue
@@ -307,10 +307,11 @@ export default {
         })
         element[event]('blur', () => {
           this.isCardFlipped = !element.id === this.inputFields.cardCvv
-          setTimeout(() => {
+          const timeout = setTimeout(() => {
             if (!self.isFocused) {
               self.currentFocus = null
             }
+            clearTimeout(timeout)
           }, 300)
           self.isFocused = false
         })

diff --git a/tests/unit/form.vue b/tests/unit/form.vue
@@ -1,9 +1,7 @@
 <template>
   <div class="card-form">
     <div class="card-list">
-      <VuePaycard
-        :valueFields="valueFields"
-      />
+      <VuePaycard :valueFields="valueFields" />
       <div class="card-form__inner">
         <div class="card-input">
           <label for="cardNumber" class="card-input__label">Card Number</label>
@@ -134,6 +132,13 @@ export default {
       cardMonth: null,
       cardYear: null,
       cardCvv: null
+    },
+    inputFields: {
+      cardNumber: 'v-card-number',
+      cardName: 'v-card-name',
+      cardMonth: 'v-card-month',
+      cardYear: 'v-card-year',
+      cardCvv: 'v-card-cvv'
     }
   }),
   computed: {

diff --git a/tests/unit/vue-paycard.spec.js b/tests/unit/vue-paycard.spec.js
@@ -1,10 +1,11 @@
-import { mount, enableAutoDestroy } from '@vue/test-utils'
+import { mount, enableAutoDestroy, createLocalVue, shallowMount } from '@vue/test-utils'
 import VuePaycard from '../../src/components/VuePaycard'
-// import Form from './form.vue'
+import Form from './form.vue'
 
 enableAutoDestroy(afterEach)
 
 describe('When I create the VuePaycard component', () => {
+  const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms))
   const transitionStub = () => ({
     render: function(h) {
       return this.$options._renderChildren
@@ -18,6 +19,126 @@ describe('When I create the VuePaycard component', () => {
       }
     })
   }
+  const createDefaultForm = () => {
+    const valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
+    const localVue = createLocalVue()
+    const wrapperPaycard = shallowMount(VuePaycard, {
+      propsData: { valueFields },
+      localVue
+    })
+    const div = document.createElement('div')
+    div.id = 'form-test'
+    document.body.appendChild(div)
+    return mount(Form, {
+      AsyncComponent: wrapperPaycard,
+      localVue,
+      propsData: {
+        valueFields
+      },
+      stubs: {
+        transition: transitionStub()
+      },
+      attachTo: div
+    })
+  }
+
+  it('should add focus and blur listeners to card number/name input of the outside form', async () => {
+    const array = ['v-card-number', 'v-card-name']
+    for (let index = 0; index < array.length; index++) {
+      const id = array[index];
+      const wrapperForm = createDefaultForm()
+      const paycardData = wrapperForm.vm.$children[0].$data
+      expect(paycardData.currentFocus).toBeNull()
+      expect(paycardData.isFocused).toBeFalsy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+      expect(paycardData.focusElementStyle).toBeNull()
+      await timeout(300)
+      wrapperForm.find(`#${id}`).trigger('focus')
+      await wrapperForm.vm.$nextTick()
+      expect(paycardData.focusElementStyle).toBeDefined()
+      expect(paycardData.currentFocus).toBe(id)
+      expect(paycardData.isFocused).toBeTruthy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+      wrapperForm.find(`#${id}`).trigger('blur')
+      await wrapperForm.vm.$nextTick()
+      expect(paycardData.currentFocus).toBe(id)
+      expect(paycardData.isFocused).toBeFalsy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+    }
+  })
+
+  it('should add focus and blur listeners to card month/year input of the outside form', async () => {
+    const array = ['v-card-month', 'v-card-year']
+    for (let index = 0; index < array.length; index++) {
+      const id = array[index];
+      const wrapperForm = createDefaultForm()
+      const paycardData = wrapperForm.vm.$children[0].$data
+      expect(paycardData.currentFocus).toBeNull()
+      expect(paycardData.isFocused).toBeFalsy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+      expect(paycardData.focusElementStyle).toBeNull()
+      await timeout(300)
+      wrapperForm.find(`#${id}`).trigger('focus')
+      await wrapperForm.vm.$nextTick()
+      expect(paycardData.focusElementStyle).toBeDefined()
+      expect(paycardData.currentFocus).toBe('cardDate')
+      expect(paycardData.isFocused).toBeTruthy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+      wrapperForm.find(`#${id}`).trigger('blur')
+      await wrapperForm.vm.$nextTick()
+      expect(paycardData.currentFocus).toBe('cardDate')
+      expect(paycardData.isFocused).toBeFalsy()
+      expect(paycardData.isCardFlipped).toBeFalsy()
+    }
+  })
+
+  it('should add focus and blur listeners to card cvv input of the outside form', async () => {
+    const id = 'v-card-cvv';
+    const wrapperForm = createDefaultForm()
+    const paycardData = wrapperForm.vm.$children[0].$data
+    expect(paycardData.currentFocus).toBeNull()
+    expect(paycardData.isFocused).toBeFalsy()
+    expect(paycardData.isCardFlipped).toBeFalsy()
+    expect(paycardData.focusElementStyle).toBeNull()
+    await timeout(300)
+    wrapperForm.find(`#${id}`).trigger('focus')
+    await wrapperForm.vm.$nextTick()
+    expect(paycardData.focusElementStyle).toBeDefined()
+    expect(paycardData.currentFocus).toBe(id)
+    expect(paycardData.isFocused).toBeTruthy()
+    expect(paycardData.isCardFlipped).toBeTruthy()
+    wrapperForm.find(`#${id}`).trigger('blur')
+    await wrapperForm.vm.$nextTick()
+    expect(paycardData.currentFocus).toBe(id)
+    expect(paycardData.isFocused).toBeFalsy()
+    expect(paycardData.isCardFlipped).toBeFalsy()
+  })
+
+  it('should clear currentFocus if blur event from form input is called', async () => {
+    const id = 'v-card-number';
+    const wrapperForm = createDefaultForm()
+    const paycardData = wrapperForm.vm.$children[0].$data
+    expect(paycardData.isFocused).toBeFalsy()
+    wrapperForm.find(`#${id}`).trigger('blur')
+    await wrapperForm.vm.$nextTick()
+    expect(paycardData.isFocused).toBeFalsy()
+    await timeout(301)
+    expect(paycardData.currentFocus).toBeNull()
+  })
+
+  it('should clear isFocused if blur event from form input is called', async () => {
+    const id = 'v-card-number';
+    const wrapperForm = createDefaultForm()
+    const paycardData = wrapperForm.vm.$children[0].$data
+    expect(paycardData.isFocused).toBeFalsy()
+    wrapperForm.find(`#${id}`).trigger('blur')
+    await wrapperForm.vm.$nextTick()
+    expect(paycardData.isFocused).toBeFalsy()
+    // * this test needs improvement because of this manual set
+    paycardData.isFocused = true
+    await timeout(301)
+    expect(paycardData.currentFocus).toBeNull()
+  })
 
   it('should be able to mask numbers if the isCardNumberMasked prop is true', () => {
     // * for now, only the last four digits will be shown
@@ -379,24 +500,6 @@ describe('When I create the VuePaycard component', () => {
     console.error = consoleLog
   })
 
-  // ! WIP
-  // it('should add focus and blur listeners to input form fields', async () => {
-    // const valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
-    // const wrapper =  mount(VuePaycard, {
-    //   parentComponent: Form,
-    //   propsData: {
-    //     valueFields
-    //   },
-    //   stubs: {
-    //     transition: transitionStub()
-    //   },
-    //   attachTo: document.body
-    // })
-    // expect(wrapper.vm.$parent.$options.name).toBe('Form')
-    // wrapper.vm.changePlaceholder()
-    // await wrapper.vm.$nextTick()
-  // })
-
   it('should match default component snapshot', () => {
     const valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
     const wrapper = createPaycard({ valueFields })