Merge pull request #93 from SnowdogApps/feature/91

#91 - added shipping methods unit test

.travis.yml

@@ -6,3 +6,4 @@ cache:
     - node_modules
 script:
   - yarn lint
+  - yarn test

CHANGELOG.md

@@ -8,12 +8,15 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 
 ### Added
 - changelog file to start log changes (#72)
+- basic unit test for App, ProductsList, ShippingMethods components
+- proper unit test dependencies (vue/test-utils, jest) and configuration
 
 ### Changed
-- 
+- currency vue filter
+- presets in babelrc
 
 ### Removed
-- 
+-
 
 
 ## [0.2.0] - 2018-05-21

test/ShippingMethods.test.js

@@ -0,0 +1,72 @@
+import Vuex from 'vuex'
+import { shallowMount, createLocalVue } from '@vue/test-utils'
+import ShippingMethods from '../view/frontend/web/js/components/ShippingMethods.vue'
+import VeeValidate from 'vee-validate'
+
+const localVue = createLocalVue()
+localVue.use(Vuex)
+localVue.use(VeeValidate)
+
+localVue.filter('currency', function (price) {
+  const pattern = '$%s'
+  price = parseFloat(price).toFixed(2)
+  return pattern.replace('%s', price)
+})
+
+describe('ShippingMethods.test.js', () => {
+  let store
+  let mutations
+  let wrapper
+
+  const shippingMethod = {
+    amount: 5,
+    available: true,
+    base_amount: 5,
+    carrier_code: 'flatrate',
+    carrier_title: 'Flat Rate',
+    error_message: '',
+    method_code: 'flatrate',
+    method_title: 'Fixed',
+    price_excl_tax: 5,
+    price_incl_tax: 5
+  }
+
+  beforeEach(() => {
+    mutations = {
+      setItem: jest.fn()
+    }
+    store = new Vuex.Store({
+      mutations
+    })
+
+    wrapper = shallowMount(ShippingMethods, {
+      propsData: {
+        shippingMethods: [
+          shippingMethod
+        ]
+      },
+      store,
+      localVue
+    })
+  })
+
+  it('commits a setItem when a radiobutton is changed', () => {
+    wrapper
+      .find(`[data-testid="method-radiobutton-${shippingMethod.carrier_code}"]`)
+      .trigger('change')
+
+    expect(mutations.setItem.mock.calls).toHaveLength(1)
+    expect(mutations.setItem.mock.calls[0][1]).toEqual({
+      item: 'selectedShippingMethod',
+      value: shippingMethod
+    })
+  })
+
+  it('renders a shipping methods list return from props', () => {
+    expect(wrapper.contains('[data-testid="shipping-methods')).toBe(true)
+  })
+
+  it('has the expected html structure', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})

test/__snapshots__/ShippingMethods.test.js.snap

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShippingMethods.test.js has the expected html structure 1`] = `
+<div>
+  <h2>
+    
+    Shipping methods
+  
+  </h2>
+   
+  <div
+    data-testid="shipping-methods"
+  >
+    <div
+      class="input"
+      data-testid="shipping-method"
+    >
+      <input
+        data-testid="method-radiobutton-flatrate"
+        data-vv-as="Shipping method"
+        id="flatrate"
+        name="shipping-method"
+        type="radio"
+        value="[object Object]"
+      />
+       
+      <label
+        for="flatrate"
+      >
+        <span
+          class="label__text"
+        >
+          
+          Flat Rate - Fixed
+        
+        </span>
+         
+        <span
+          class="label__price"
+        >
+          
+          $5.00
+        
+        </span>
+      </label>
+    </div>
+     
+    <!---->
+  </div>
+</div>
+`;

view/frontend/web/js/components/ShippingMethods.vue

@@ -3,18 +3,23 @@
     <h2>
       Shipping methods
     </h2>
-    <template v-if="shippingMethods.length">
+    <div
+      v-if="shippingMethods.length"
+      data-testid="shipping-methods"
+    >
       <div
         v-for="method in shippingMethods"
         v-if="method.available"
-        :key="method.id"
-        :class="{'input--error': errors.has('shipping-method') }"
+        :key="method.carrier_code"
+        :class="['input', {'input--error': errors.has('shipping-method') }]"
+        data-testid="shipping-method"
       >
         <input
           v-validate="'required'"
           v-model="selectedShippingMethod"
           :value="method"
           :id="method.carrier_code"
+          :data-testid="`method-radiobutton-${method.carrier_code}`"
           type="radio"
           name="shipping-method"
           data-vv-as="Shipping method"
@@ -31,17 +36,17 @@
         </label>
       </div>
       <p
-        v-show="errors.has('shipping-method')"
+        v-if="errors.has('shipping-method')"
         class="input__message"
       >
         {{ errors.first('shipping-method') }}
       </p>
-    </template>
-    <template v-else>
+    </div>
+    <div v-else>
       <p>
         In this country we don't handle any shipping methods.
       </p>
-    </template>
+    </div>
   </div>
 </template>