feat: enhanced Vuex Counter example and test spec

To thoroughly demonstrate Vuex support after the refactoring in commit e8773383, Counter.vue now:
- Utilizes all Vuex mapping functions.
- Can properly use computed mapped getters in its template. This was an issue after cypress-io#13.
- Set count state via an input field to demonstrate mapped mutations. Two tests have been added to the spec for this new input field.

Close cypress-io#6

Author: amirrustam

components/Counter.vue

@@ -1,24 +1,31 @@
 <template>
   <div>
-    Clicked: {{ $store.state.count }} times, count is {{ $store.getters.evenOrOdd }}.
+    Clicked: {{ count }} times, count is {{ evenOrOdd }}.<br>
     <button @click="increment">+</button>
     <button @click="decrement">-</button>
     <button @click="incrementIfOdd">Increment if odd</button>
     <button @click="incrementAsync">Increment async</button>
+    <br><br>
+    <span>Set Count: </span>
+    <input type="number" :value="count" @input="set($event.target.value || 0)">
   </div>
 </template>
 
 <script>
-import { mapGetters, mapActions } from 'vuex'
+import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
 export default {
-  computed: mapGetters([
-    'evenOrOdd'
-  ]),
-  methods: mapActions([
-    'increment',
-    'decrement',
-    'incrementIfOdd',
-    'incrementAsync'
-  ])
+  computed: {
+    ...mapState(['count']),
+    ...mapGetters(['evenOrOdd'])
+  },
+  methods: {
+    ...mapMutations(['set']),
+    ...mapActions([
+      'increment',
+      'decrement',
+      'incrementIfOdd',
+      'incrementAsync'
+    ])
+  }
 }
 </script>

components/store.js

@@ -14,6 +14,9 @@ const state = {
 // mutations must be synchronous and can be recorded by plugins
 // for debugging purposes.
 const mutations = {
+  set (state, value) {
+    state.count = value
+  },
   increment (state) {
     state.count++
   },

cypress.json

@@ -1,6 +1,6 @@
 {
   "viewportWidth": 300,
-  "viewportHeight": 100,
+  "viewportHeight": 120,
   "videoRecording": false,
   "projectId": "134ej7"
 }

cypress/integration/counter-vuex-spec.js

@@ -7,20 +7,24 @@ import mountVue from '../..'
 
 /* eslint-env mocha */
 describe('Vuex Counter', () => {
+
+  // configure component
   const extensions = {
     plugins: [Vuex],
     components: {
-      counter: Counter
-    },
+      Counter
+    }
   }
+
+  // define component template
   const template = '<counter />'
-  beforeEach(mountVue({template, store}, {extensions}))
 
-  const getCount = () =>
-    Cypress.vue.$store.state.count
+  // define count get and set helpers
+  const getCount = () => Cypress.vue.$store.state.count
+  const setCount = value => Cypress.vue.$store.commit('set', value)
 
-  const setCount = value =>
-    Cypress.vue.$set(Cypress.vue.$store.state, 'count', value)
+  // initialize a fresh Vue app before each test
+  beforeEach(mountVue({template, store}, {extensions}))
 
   it('starts with zero', () => {
     cy.contains('0 times')
@@ -37,15 +41,30 @@ describe('Vuex Counter', () => {
   })
 
   it('increments the counter if count is odd', () => {
-    setCount(3)
+    setCount(3)  // start with an odd number
     cy.contains('odd')
-    cy.contains('button', 'Increment if odd').click()
+    cy.contains('button', 'Increment if odd').as('btn').click()
+    cy.contains('even')
+    cy.get('@btn').click()
     cy.contains('even')
   })
 
   it('asynchronously increments counter', () => {
     const count = getCount()
+    // increment mutation is delayed by 1 second
+    // Cypress waits 4 seconds by default
     cy.contains('button', 'Increment async').click()
     cy.contains(`${count + 1} times`)
   })
+
+  it('count is zero when input is cleared', () => {
+    cy.get('input').type(`{selectall}{backspace}`)
+    cy.contains('0 times')
+  }),
+
+  it('set count via input field', () => {
+    const count = 42
+    cy.get('input').type(`{selectall}{backspace}${count}`)
+    cy.contains(`${count} times`)
+  })
 })