Remember initial mutations

cypress/integration/components-tab.js

@@ -1,6 +1,6 @@
 import { suite } from '../utils/suite'
 
-const baseInstanceCount = 9
+const baseInstanceCount = 10
 
 suite('components tab', () => {
   it('should detect instances inside shadow DOM', () => {

cypress/integration/vuex-edit.js

@@ -3,8 +3,10 @@ import { suite } from '../utils/suite'
 suite('vuex edit', () => {
   it('should edit state using the decrease button', () => {
     cy.get('.vuex-tab').click()
+    cy.get('[data-id="load-vuex-state"]').click()
+
     // using the decrease button
-    cy.get('.data-field').eq(0)
+    cy.get('.state .data-field').eq(0)
       .find('.actions .vue-ui-button').eq(1)
       .click({ force: true })
       .click({ force: true })
@@ -17,7 +19,7 @@ suite('vuex edit', () => {
 
   it('should edit state using the increase button', () => {
     // using the increase button
-    cy.get('.data-field').eq(0).click()
+    cy.get('.state .data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(2)
       .click({ force: true })
       .click({ force: true })
@@ -30,7 +32,7 @@ suite('vuex edit', () => {
 
   it('should edit state using the edit input', () => {
     // using the edit input
-    cy.get('.data-field').eq(0).click()
+    cy.get('.state .data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(0).click({ force: true })
     cy.get('.edit-input').type('12')
     cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
@@ -40,8 +42,8 @@ suite('vuex edit', () => {
       get('#counter p').contains('12')
     })
 
-    // change count back to 0
-    cy.get('.data-field').eq(0).click()
+    // change count back to 1
+    cy.get('.state .data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(0).click({ force: true })
     cy.get('.edit-input').type('0')
     cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()

cypress/integration/vuex-tab.js

@@ -10,15 +10,15 @@ suite('vuex tab', () => {
       get('#counter p').contains('1')
     })
     cy.get('.vuex-tab').click()
-    cy.get('.history .entry').should('have.length', 4)
+    cy.get('.history .entry').should('have.length', 5)
     cy.get('[data-id="load-vuex-state"]').click()
     cy.get('.recording-vuex-state').should('not.be.visible')
     cy.get('.loading-vuex-state').should('not.be.visible')
     cy.get('.vuex-state-inspector').then(el => {
       expect(el.text()).to.include('type:"DECREMENT"')
       expect(el.text()).to.include('count:1')
     })
-    cy.get('.history .entry').eq(3).should('have.class', 'inspected').should('have.class', 'active')
+    cy.get('.history .entry').eq(4).should('have.class', 'inspected').should('have.class', 'active')
   })
 
   it('should filter state & getters', () => {
@@ -41,7 +41,7 @@ suite('vuex tab', () => {
     cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
 
     cy.get('.left .search input').clear().type('/dec)/i')
-    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 4)
     cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
     cy.get('.history .entry[data-active="true"].active').should('have.length', 1)
 
@@ -65,19 +65,19 @@ suite('vuex tab', () => {
   })
 
   it('should time-travel', () => {
-    cy.get('.history .entry[data-index="2"] .entry-actions .action-time-travel').click({ force: true })
-    cy.get('.history .entry[data-index="2"]')
+    cy.get('.history .entry[data-index="3"] .entry-actions .action-time-travel').click({ force: true })
+    cy.get('.history .entry[data-index="3"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('2')
     })
 
-    cy.get('.history .entry[data-index="1"] .mutation-type').click({ force: true })
-    cy.get('.history .entry[data-index="1"]')
+    cy.get('.history .entry[data-index="2"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="2"]')
       .should('have.class', 'inspected')
       .should('not.have.class', 'active')
-    cy.get('.history .entry[data-index="2"]')
+    cy.get('.history .entry[data-index="3"]')
       .should('not.have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('.recording-vuex-state').should('not.be.visible')
@@ -90,11 +90,11 @@ suite('vuex tab', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('2')
     })
-    cy.get('.history .entry[data-index="1"] .entry-actions .action-time-travel').click({ force: true })
-    cy.get('.history .entry[data-index="1"]')
+    cy.get('.history .entry[data-index="2"] .entry-actions .action-time-travel').click({ force: true })
+    cy.get('.history .entry[data-index="2"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
-    cy.get('.history .entry[data-index="2"]')
+    cy.get('.history .entry[data-index="3"]')
       .should('not.have.class', 'inspected')
       .should('not.have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
@@ -112,8 +112,8 @@ suite('vuex tab', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('1')
     })
-    cy.get('.history .entry[data-index="0"] .entry-actions .action-time-travel').click({ force: true })
-    cy.get('.history .entry[data-index="0"]')
+    cy.get('.history .entry[data-index="1"] .entry-actions .action-time-travel').click({ force: true })
+    cy.get('.history .entry[data-index="1"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
@@ -122,10 +122,10 @@ suite('vuex tab', () => {
   })
 
   it('should revert', () => {
-    cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true })
-    cy.get('.history .entry[data-index="3"]').find('.action-revert').click({ force: true })
-    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
-    cy.get('.history .entry[data-index="2"]')
+    cy.get('.history .entry[data-index="4"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="4"]').find('.action-revert').click({ force: true })
+    cy.get('.history .entry[data-active="true"]').should('have.length', 4)
+    cy.get('.history .entry[data-index="3"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('.vuex-state-inspector').then(el => {
@@ -137,8 +137,7 @@ suite('vuex tab', () => {
   })
 
   it('should commit', () => {
-    cy.get('.history .entry[data-index="2"] .mutation-type').click({ force: true })
-    cy.get('.history .entry[data-index="2"] .action-commit').click({ force: true })
+    cy.get('.history .entry[data-index="3"] .action-commit').click({ force: true })
     cy.get('.history .entry[data-active="true"]').should('have.length', 1)
     cy.get('.history .entry[data-index="0"]')
       .should('have.class', 'inspected')
@@ -152,20 +151,23 @@ suite('vuex tab', () => {
   })
 
   it('should display getters', () => {
-    cy.get('.vuex-state-inspector').then(el => {
-      expect(el.text()).to.include('isPositive:true')
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('2')
+      cy.get('.key').contains('isPositive').parent().contains('true')
     })
     cy.get('#target').iframe().then(({ get }) => {
       get('.decrement')
         .click({ force: true })
         .click({ force: true })
         .click({ force: true })
+      get('#counter p').contains('-1')
     })
     cy.get('.history .entry[data-index="3"]').click({ force: true })
     cy.get('.recording-vuex-state').should('not.be.visible')
     cy.get('.loading-vuex-state').should('not.be.visible')
-    cy.get('.vuex-state-inspector').then(el => {
-      expect(el.text()).to.include('isPositive:false')
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('-1')
+      cy.get('.key').contains('isPositive').parent().contains('false')
     })
   })
 
@@ -178,7 +180,7 @@ suite('vuex tab', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('.increment').click({ force: true })
     })
-    cy.get('.history .entry').should('have.length', 4)
+    cy.get('.history .entry').should('have.length', 5)
   })
 
   it('should copy vuex state', () => {

shells/dev/target/Init.vue

@@ -0,0 +1,20 @@
+<template>
+  <div id="init">
+    <p>Inited: {{ inited }}</p>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  computed: {
+    ...mapState({
+      inited: state => state.inited
+    })
+  },
+  created() {
+    this.$store.commit('TEST_INIT')
+  }
+}
+</script>

shells/dev/target/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import store from './store'
 import Target from './Target.vue'
 import Other from './Other.vue'
+import Init from './Init.vue'
 import Counter from './Counter.vue'
 import VuexObject from './VuexObject.vue'
 import NativeTypes from './NativeTypes.vue'
@@ -39,7 +40,8 @@ new Vue({
       h(Events, { key: 'foo' }),
       h(NativeTypes, { key: new Date() }),
       h(Router, { key: [] }),
-      h(VuexObject)
+      h(VuexObject),
+      h(Init)
     ])
   }
 }).$mount('#app')

shells/dev/target/store.js

@@ -5,6 +5,7 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    inited: 0,
     count: 0,
     date: new Date(),
     set: new Set(),
@@ -21,6 +22,7 @@ export default new Vuex.Store({
     }
   },
   mutations: {
+    TEST_INIT: state => state.inited++,
     INCREMENT: state => state.count++,
     DECREMENT: state => state.count--,
     UPDATE_DATE: state => {