test: add two more tests and computed/attr for this tests

guastallaigor · Jul 19, 2020 · 46db9fd · 46db9fd
1 parent 1023671
commit 46db9fd
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 8 deletions.
diff --git a/src/components/VuePaycard.vue b/src/components/VuePaycard.vue
@@ -11,7 +11,7 @@
         class="card-item__focus"
         ref="focusElement"
       ></div>
-      <div class="card-item__cover">
+      <div class="card-item__cover" :aria-label="imageCover">
         <img
           v-if="currentCardBackground"
           :src="currentCardBackground"
@@ -28,7 +28,7 @@
                 v-if="cardType"
                 :src="getCreditCardImage"
                 :key="cardType"
-                alt="Card brand image"
+                :alt="`${cardType} brand image`"
                 class="card-item__typeImg"
               />
             </transition>
@@ -130,7 +130,7 @@
       </div>
     </div>
     <div class="card-item__side -back">
-      <div class="card-item__cover">
+      <div class="card-item__cover" :aria-label="imageCover">
         <img
           v-if="currentCardBackground"
           :src="currentCardBackground"
@@ -236,7 +236,6 @@ export default {
     cardType () {
       const number = this.valueFields.cardNumber
       let re = new RegExp('^4')
-
       if (number.match(re)) return 'visa'
 
       re = new RegExp('^(34|37)')
@@ -262,10 +261,20 @@ export default {
 
       return ''
     },
+    imageCover () {
+      return !this.hasRandomBackgrounds && parseInt(this.backgroundImage)
+        ? 'Image cover'
+        : ''
+    },
+    isBackgroundImageFromAssets() {
+      const numberImage = parseInt(this.backgroundImage)
+
+      return Number.isFinite(numberImage) && parseInt(numberImage) < 26 && parseInt(numberImage) > 0
+    },
     currentCardBackground () {
       const numberImage = parseInt(this.backgroundImage)
 
-      if (Number.isFinite(numberImage) && parseInt(numberImage) < 26 && parseInt(numberImage) > 0) {
+      if (this.isBackgroundImageFromAssets) {
         return require(`../assets/images/${numberImage}.jpg`)
       }
 

diff --git a/tests/unit/__snapshots__/vue-paycard.spec.js.snap b/tests/unit/__snapshots__/vue-paycard.spec.js.snap
@@ -4,7 +4,7 @@ exports[`When I create the VuePaycard component should match default component s
 <div class="card-item">
   <div class="card-item__side -front">
     <div class="card-item__focus"></div>
-    <div class="card-item__cover">
+    <div aria-label="" class="card-item__cover">
       <!---->
     </div>
     <div class="card-item__wrapper">
@@ -66,7 +66,7 @@ exports[`When I create the VuePaycard component should match default component s
     </div>
   </div>
   <div class="card-item__side -back">
-    <div class="card-item__cover">
+    <div aria-label="" class="card-item__cover">
       <!---->
     </div>
     <div class="card-item__band"></div>

diff --git a/tests/unit/vue-paycard.spec.js b/tests/unit/vue-paycard.spec.js
@@ -1,6 +1,8 @@
-import { mount } from '@vue/test-utils'
+import { mount, enableAutoDestroy } from '@vue/test-utils'
 import VuePaycard from '../../src/components/VuePaycard'
 
+enableAutoDestroy(afterEach)
+
 describe('When I create the VuePaycard component', () => {
   const transitionStub = () => ({
     render: function(h) {
@@ -269,6 +271,67 @@ describe('When I create the VuePaycard component', () => {
     expect(wrapper.exists()).toBeFalsy()
   })
 
+  it('should check for each card type/brand', async () => {
+    // *  this test needs improvement since require is not working properly, so it's checking the alt property
+    let valueFields = { cardName: '', cardNumber: '4111 1111 1111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    let wrapper = createPaycard({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    let img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('visa')
+    valueFields = { cardName: '', cardNumber: '3437 516165 16516', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('amex')
+    valueFields = { cardName: '', cardNumber: '5151 1111 1111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('mastercard')
+    valueFields = { cardName: '', cardNumber: '6011 1111 1111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('discover')
+    valueFields = { cardName: '', cardNumber: '6211 1111 1111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('unionpay')
+    valueFields = { cardName: '', cardNumber: '9792 1111 1111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('troy')
+    valueFields = { cardName: '', cardNumber: '3051 111111 1111', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('dinersclub')
+    valueFields = { cardName: '', cardNumber: '3528 9151 6515 6156', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.attributes().alt).toContain('jcb')
+    valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
+    await wrapper.setProps({ valueFields })
+    expect(wrapper.exists()).toBeTruthy()
+    img = wrapper.find('.card-item__typeImg')
+    expect(img.exists()).toBeFalsy()
+  })
+
+  it('should check for background covers from assets', () => {
+    // *  this test needs improvement since require is not working properly, so it's checking the aria-label property
+    const valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
+    const wrapper = createPaycard({ valueFields, backgroundImage: 1, hasRandomBackgrounds: false })
+    expect(wrapper.exists()).toBeTruthy()
+    const covers = wrapper.findAll('.card-item__cover')
+    expect(covers.at(0).exists()).toBeTruthy()
+    expect(covers.at(0).attributes()['aria-label']).toBe('Image cover')
+    expect(covers.at(1).exists()).toBeTruthy()
+    expect(covers.at(1).attributes()['aria-label']).toBe('Image cover')
+  })
+
   it('should match default component snapshot', () => {
     const valueFields = { cardName: '', cardNumber: '', cardMonth: '', cardYear: '', cardCvv: '' }
     const wrapper = createPaycard({ valueFields })