fix: Vuex integration and add Counter example tests (#13)

amirrustam · bahmutov · commit 3e1cfeb8ad2b · 2018-01-27T21:28:32.000-05:00
* fix: vuex integration (#6) The inner Vue instance within Vuex Store must be refeshed by `resetStoreVM` to restore reactivity of the store state. This doesn’t fix stale mapped getters within components. That’s a separate WIP issue. * fix: stale mapped getter `evenOrOdd` (#6) Current mapped vuex getters within components become stale. To have a working Counter example, the computed mapped `evenOrOdd` is accessed directly via `$store`. This will be changed back once the stale mapped getter issue (WIP) is fixed. * feat: added example tests for Counter component Added tests to cover all the features within the component. Fixes #6 * minor: following better practices
diff --git a/components/Counter.vue b/components/Counter.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="app">
-    Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
+  <div>
+    Clicked: {{ $store.state.count }} times, count is {{ $store.getters.evenOrOdd }}.
     <button @click="increment">+</button>
     <button @click="decrement">-</button>
     <button @click="incrementIfOdd">Increment if odd</button>
diff --git a/cypress/integration/counter-vuex-spec.js b/cypress/integration/counter-vuex-spec.js
@@ -2,19 +2,50 @@
 // https://github.com/vuejs/vuex/tree/dev/examples/counter
 import Counter from '../../components/Counter.vue'
 import store from '../../components/store'
-const mountVue = require('../..')
+import Vuex from 'vuex'
+import mountVue from '../..'
 
 /* eslint-env mocha */
 describe('Vuex Counter', () => {
-  const extensions = {    
+  const extensions = {
+    plugins: [Vuex],
     components: {
       counter: Counter
     },
   }
   const template = '<counter />'
   beforeEach(mountVue({template, store}, {extensions}))
 
+  const getCount = () =>
+    Cypress.vue.$store.state.count
+
+  const setCount = value =>
+    Cypress.vue.$set(Cypress.vue.$store.state, 'count', value)
+
   it('starts with zero', () => {
-    cy.contains('button', '0')
+    cy.contains('0 times')
+  })
+
+  it('increments the counter on click of "+"', () => {
+    cy.contains('button', '+').click()
+    cy.contains('1 times')
+  })
+
+  it('decrements the counter on click of "-"', () => {
+    cy.contains('button', '-').click()
+    cy.contains('0 times')
+  })
+
+  it('increments the counter if count is odd', () => {
+    setCount(3)
+    cy.contains('odd')
+    cy.contains('button', 'Increment if odd').click()
+    cy.contains('even')
+  })
+
+  it('asynchronously increments counter', () => {
+    const count = getCount()
+    cy.contains('button', 'Increment async').click()
+    cy.contains(`${count + 1} times`)
   })
 })
diff --git a/src/index.js b/src/index.js
@@ -45,8 +45,7 @@ const deleteCachedConstructors = component => {
 const getVuePath = options =>
   options.vue || options.vuePath || '../node_modules/vue/dist/vue.js'
 
-const getVuexPath = options =>
-  options.vuex || options.vuexPath
+const getVuexPath = options => options.vuex || options.vuexPath
 
 const getPageHTML = options => {
   if (options.html) {
@@ -91,7 +90,7 @@ const getPageHTML = options => {
       <body>
         <div id="app"></div>
         <script src="${vue}"></script>
-        ${vuex ? vuex : ''}
+        ${vuex || ''}
       </body>
     </html>
   `
@@ -136,6 +135,36 @@ const isOptions = object => Object.keys(object).every(isOptionName)
 
 const isConstructor = object => object && object._compiled
 
+const hasStore = ({ store }) => store && store._vm
+
+const forEachValue = (obj, fn) => {
+  Object.keys(obj).forEach(key => fn(obj[key], key))
+}
+
+const resetStoreVM = (Vue, { store }) => {
+  // bind store public getters
+  store.getters = {}
+  const wrappedGetters = store._wrappedGetters
+  const computed = {}
+  forEachValue(wrappedGetters, (fn, key) => {
+    // use computed to leverage its lazy-caching mechanism
+    computed[key] = () => fn(store)
+    Object.defineProperty(store.getters, key, {
+      get: () => store._vm[key],
+      enumerable: true // for local getters
+    })
+  })
+
+  store._watcherVM = new Vue()
+  store._vm = new Vue({
+    data: {
+      $$state: store._vm._data.$$state
+    },
+    computed
+  })
+  return store
+}
+
 // the double function allows mounting a component quickly
 // beforeEach(mountVue(component, options))
 const mountVue = (component, optionsOrProps = {}) => () => {
@@ -159,6 +188,10 @@ const mountVue = (component, optionsOrProps = {}) => () => {
     .window({ log: false })
     .its('Vue')
     .then(Vue => {
+      // refresh inner Vue instance of Vuex store
+      if (hasStore(component)) {
+        component.store = resetStoreVM(Vue, component)
+      }
       installMixins(Vue, options)
       installPlugins(Vue, options)
       registerGlobalComponents(Vue, options)
@@ -169,9 +202,7 @@ const mountVue = (component, optionsOrProps = {}) => () => {
         Cypress.vue = new Cmp(props).$mount('#app')
         copyStyles(Cmp)
       } else {
-        debugger
-        // Cypress.vue = new Vue(component).$mount('#app')
-        const allOptions = Object.assign({}, component, {el: '#app'})
+        const allOptions = Object.assign({}, component, { el: '#app' })
         Cypress.vue = new Vue(allOptions)
         copyStyles(component)
       }
