Make example with Vuex

[bahmutov]

Make example with Vuex that extends Vue and use data store from a component. This looks like a good code example https://github.com/vuejs/vuex/tree/dev/examples/counter

[bahmutov]

Would help with https://github.com/bahmutov/array-explorer/issues/2

[amirrustam]

@bahmutov If you're not still working on this I can take stab it. I noticed the test was failing due the component not getting rendered at all. The issue was with Vuex not being installed on the root Vue instance, and also the test was testing for a non-existent button. Since Vuex is plugin I added it to the options:

import Vuex from 'vuex'

//...

const extensions = {
  plugins: [Vuex],
  components: {
    counter: Counter
  },
}
const template = '<counter />'
beforeEach(mountVue({template, store}, { extensions }))

I confirmed that Cypress.vue.$store exists, and the component renders now. However, {{$store.state.count}} within the template does not update reactively when the state is changed.

I also noticed the currently disabled/undocumented vuex and vuexPath options which could be relevant.

I was just looking at things quickly, but I'll come back and work it on some work when I get the chance, and if you find it helpful.

[bahmutov]

Absolutely, @amirrustam take a stab at it. Basically I understand that our problem is loading components in test iframe, but then mounting them in app iframe. I had same issue with RouterLink when using vue-router in these tests https://github.com/bahmutov/vue-hackernews-2.0

See file https://github.com/bahmutov/vue-hackernews-2.0/blob/master/cypress/integration/item-spec.js specifically.

[amirrustam]

@bahmutov We both arrived at the same conclusion (iframes!) here. I'll be happy to look into this, should be interesting.