Fix Vuex integration and add Counter example tests

[amirrustam]

Current fix for #6

[bahmutov]

Wow I cannot check now but it is ... working???

…

Sent from my iPhone

On Jan 26, 2018, at 16:29, Amir Rustamzadeh ***@***.***> wrote: Current fix for cypress-io/cypress-vue-unit-test#6 You can view, comment on, or merge this pull request online at: #13 Commit Summary fix: vuex integration (cypress-io/cypress-vue-unit-test#6) fix: stale mapped getter `evenOrOdd` (cypress-io/cypress-vue-unit-test#6) feat: added example tests for Counter component File Changes M components/Counter.vue (4) M cypress/integration/counter-vuex-spec.js (38) M src/index.js (43) Patch Links: https://github.com/bahmutov/cypress-vue-unit-test/pull/13.patch https://github.com/bahmutov/cypress-vue-unit-test/pull/13.diff — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub, or mute the thread.

[amirrustam]

@bahmutov I've made some great progress on this. The Vuex store not being reactive had to do with how Vuex manages its internal state.

When creating a store with Vuex.Store({ ... }), a Vue instance (_vm) is initialized within the Store instance to make its internal state reactive:

// vuex/src/store.js
store._vm = new Vue({
    data: {
      $$state: state
    },
    computed
  })

We create our Store instance with a different Vue "bundle" than the one we include with a script tag within the component iframe. This essentially makes that inner Vue instance go stale.

The inner state will still change after button clicks that trigger mutations, but the watchers that look for state changes to add DOM manipulations to Vue's queueing system no longer work in this scenario.

So we need to use the global Vue within the component iframe to initialize the Store's inner Vue instance. When we run mountVue, we check for a store within the provided component, if it has one, then we reset this store's _vm with the Vue on the iframe window. This fixes the reactivity problem.

I've added tests for all the buttons within the Counter component:

There is still one last lingering issue (amirrustam#1), and the computed mapped getters on a component can go stale. So in templates instead of using {{ evenOrOdd }}, I have to do {{ $store.getters.evenOrOdd }}, because the latest value of evenOrOdd is not always reflected in its computed prop. Obviously this is not ideal, and I'm working on fixing this. This was just my first stab at the issue, and I have a couple of hunches!

I want Vue.js users to have a great experience with Cypress, and to use Cypress for all their tests. So I want to improve component unit-testing for them as much as possible.

[bahmutov]

I will merge this in - I was thinking about the global flag ... is this related to the two iframes? Maybe we can reflect the property from app iframe back into spec iframe to solve this.

[bahmutov]

I merged this because I think this improves the total experience, thanks a log for great work @amirrustam

[amirrustam]

@bahmutov we think the same. I did something similar earlier today, and it got everything fully working. I was going to commit and push it when I get home. Await my next pull request :)