From 321ba881a75e6decb80e9c854c08efd7f24a327b Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 12:59:01 -0800 Subject: [PATCH 1/7] fix: vuex integration (bahmutov/cypress-vue-unit-test#6) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- src/index.js | 43 +++++++++++++++++++++++++++++++++++++------ 1 file changed, 37 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 484ec4c..1483a37 100644 --- 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 => {
- ${vuex ? vuex : ''} + ${vuex || ''} ` @@ -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) } From ff428c0cfea4b77b1024e008e204feb90f7a8e21 Mon Sep 17 00:00:00 2001 From: Amir Rustamzadeh Date: Fri, 26 Jan 2018 13:06:54 -0800 Subject: [PATCH 2/7] fix: stale mapped getter `evenOrOdd` (bahmutov/cypress-vue-unit-test#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. --- components/Counter.vue | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Counter.vue b/components/Counter.vue index d670aca..bc353be 100644 --- a/components/Counter.vue +++ b/components/Counter.vue @@ -1,6 +1,6 @@