working on Vuex example for #6

bahmutov · bahmutov · commit 7f1db65e8ab1 · 2018-01-01T23:24:39.000-05:00
diff --git a/components/Counter.vue b/components/Counter.vue
@@ -0,0 +1,24 @@
+<template>
+  <div id="app">
+    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
+    <button @click="increment">+</button>
+    <button @click="decrement">-</button>
+    <button @click="incrementIfOdd">Increment if odd</button>
+    <button @click="incrementAsync">Increment async</button>
+  </div>
+</template>
+
+<script>
+import { mapGetters, mapActions } from 'vuex'
+export default {
+  computed: mapGetters([
+    'evenOrOdd'
+  ]),
+  methods: mapActions([
+    'increment',
+    'decrement',
+    'incrementIfOdd',
+    'incrementAsync'
+  ])
+}
+</script>
diff --git a/components/store.js b/components/store.js
@@ -0,0 +1,57 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+Vue.use(Vuex)
+
+// root state object.
+// each Vuex instance is just a single state tree.
+const state = {
+  count: 0
+}
+
+// mutations are operations that actually mutates the state.
+// each mutation handler gets the entire state tree as the
+// first argument, followed by additional payload arguments.
+// mutations must be synchronous and can be recorded by plugins
+// for debugging purposes.
+const mutations = {
+  increment (state) {
+    state.count++
+  },
+  decrement (state) {
+    state.count--
+  }
+}
+
+// actions are functions that cause side effects and can involve
+// asynchronous operations.
+const actions = {
+  increment: ({ commit }) => commit('increment'),
+  decrement: ({ commit }) => commit('decrement'),
+  incrementIfOdd ({ commit, state }) {
+    if ((state.count + 1) % 2 === 0) {
+      commit('increment')
+    }
+  },
+  incrementAsync ({ commit }) {
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        commit('increment')
+        resolve()
+      }, 1000)
+    })
+  }
+}
+
+// getters are functions
+const getters = {
+  evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
+}
+
+// A Vuex instance is created by combining the state, mutations, actions,
+// and getters.
+export default new Vuex.Store({
+  state,
+  getters,
+  actions,
+  mutations
+})
diff --git a/cypress/integration/counter-vuex-spec.js b/cypress/integration/counter-vuex-spec.js
@@ -0,0 +1,20 @@
+// testing Vuex component
+// https://github.com/vuejs/vuex/tree/dev/examples/counter
+import Counter from '../../components/Counter.vue'
+import store from '../../components/store'
+const mountVue = require('../..')
+
+/* eslint-env mocha */
+describe('Vuex Counter', () => {
+  const extensions = {    
+    components: {
+      counter: Counter
+    },
+  }
+  const template = '<counter />'
+  beforeEach(mountVue({template, store}, {extensions}))
+
+  it('starts with zero', () => {
+    cy.contains('button', '0')
+  })
+})
diff --git a/package.json b/package.json
@@ -88,7 +88,8 @@
     "standard": "10.0.3",
     "vue": "2.5.13",
     "vue-loader": "13.6.1",
-    "vue-template-compiler": "2.5.13"
+    "vue-template-compiler": "2.5.13",
+    "vuex": "3.0.1"
   },
   "standard": {
     "globals": [
diff --git a/src/index.js b/src/index.js
@@ -45,11 +45,18 @@ const deleteCachedConstructors = component => {
 const getVuePath = options =>
   options.vue || options.vuePath || '../node_modules/vue/dist/vue.js'
 
+const getVuexPath = options =>
+  options.vuex || options.vuexPath
+
 const getPageHTML = options => {
   if (options.html) {
     return options.html
   }
   const vue = getVuePath(options)
+  let vuex = getVuexPath(options)
+  if (vuex) {
+    vuex = `<script src="${vuex}"></script>`
+  }
 
   // note: add "base" tag to force loading static assets
   // from the server, not from the "spec" file URL
@@ -84,6 +91,7 @@ const getPageHTML = options => {
       <body>
         <div id="app"></div>
         <script src="${vue}"></script>
+        ${vuex ? vuex : ''}
       </body>
     </html>
   `
@@ -161,7 +169,10 @@ const mountVue = (component, optionsOrProps = {}) => () => {
         Cypress.vue = new Cmp(props).$mount('#app')
         copyStyles(Cmp)
       } else {
-        Cypress.vue = new Vue(component).$mount('#app')
+        debugger
+        // Cypress.vue = new Vue(component).$mount('#app')
+        const allOptions = Object.assign({}, component, {el: '#app'})
+        Cypress.vue = new Vue(allOptions)
         copyStyles(component)
       }
 
