test: fix e2e

vuejs · Aug 1, 2018 · 91b6a0d · 91b6a0d
1 parent 39481b9
commit 91b6a0d
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 54 deletions.
diff --git a/cypress/integration/events.tab.js → cypress/integration/events-tab.js b/cypress/integration/events.tab.js → cypress/integration/events-tab.js
@@ -25,11 +25,11 @@ suite('events tab', () => {
 
   it('should search events', () => {
     cy.get('.left .search input').clear().type('event')
-    cy.get('.history .entry').should('have.length', 3)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
     cy.get('.left .search input').clear().type('<eventchild1>')
-    cy.get('.history .entry').should('have.length', 1)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 1)
     cy.get('.left .search input').clear()
     cy.get('.button.reset').click()
-    cy.get('.history .entry').should('have.length', 0)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 0)
   })
 })
diff --git a/cypress/integration/vuex.tab.js → cypress/integration/vuex-tab.js b/cypress/integration/vuex.tab.js → cypress/integration/vuex-tab.js
@@ -11,11 +11,14 @@ suite('vuex tab', () => {
     })
     cy.get('.vuex-tab').click()
     cy.get('.history .entry').should('have.length', 4)
+    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:nth-child(4)').should('have.class', 'inspected').should('have.class', 'active')
+    cy.get('.history .entry').eq(3).should('have.class', 'inspected').should('have.class', 'active')
   })
 
   it('should filter state & getters', () => {
@@ -28,28 +31,30 @@ suite('vuex tab', () => {
 
   it('should filter history', () => {
     cy.get('.left .search input').clear().type('inc')
-    cy.get('.history .entry').should('have.length', 3)
-    cy.get('.history .entry.inspected').should('have.length', 1)
-    cy.get('.history .entry.active').should('have.length', 0)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 2)
+    cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+    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').should('have.length', 2)
-    cy.get('.history .entry.inspected').should('have.length', 1)
-    cy.get('.history .entry.active').should('have.length', 0)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 1)
+    cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+    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').should('have.length', 4)
-    cy.get('.history .entry.inspected').should('have.length', 1)
-    cy.get('.history .entry.active').should('have.length', 1)
+    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
+    cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
+    cy.get('.history .entry[data-active="true"].active').should('have.length', 1)
 
     cy.get('.left .search input').clear()
   })
 
   it('should inspect state', () => {
-    cy.get('.history .entry:nth-child(3) .mutation-type').click()
-    cy.get('.history .entry:nth-child(3)')
+    cy.get('.history .entry .mutation-type').eq(2).click()
+    cy.get('.history .entry').eq(2)
       .should('have.class', 'inspected')
       .should('not.have.class', 'active')
+    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:"INCREMENT"')
       expect(el.text()).to.include('count:2')
@@ -60,42 +65,45 @@ suite('vuex tab', () => {
   })
 
   it('should time-travel', () => {
-    cy.get('.history .entry:nth-child(3) .entry-actions .action:nth-child(3)').click({ force: true })
-    cy.get('.history .entry:nth-child(3)')
+    cy.get('.history .entry[data-index="2"] .entry-actions .action:nth-child(3)').click({ force: true })
+    cy.get('.history .entry[data-index="2"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('2')
     })
 
-    cy.get('.history .entry:nth-child(2) .mutation-type').click({ force: true })
-    cy.get('.history .entry:nth-child(2)')
+    cy.get('.history .entry[data-index="1"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="1"]')
       .should('have.class', 'inspected')
       .should('not.have.class', 'active')
-    cy.get('.history .entry:nth-child(3)')
+    cy.get('.history .entry[data-index="2"]')
       .should('not.have.class', 'inspected')
       .should('have.class', 'active')
+    cy.get('.recording-vuex-state').should('not.be.visible')
+    cy.get('.loading-vuex-state').should('not.be.visible')
+    cy.get('.recording-vuex-state').should('not.be.visible')
     cy.get('.vuex-state-inspector').then(el => {
       expect(el.text()).to.include('type:"INCREMENT"')
       expect(el.text()).to.include('count:1')
     })
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('2')
     })
-    cy.get('.history .entry:nth-child(2) .entry-actions .action:nth-child(3)').click({ force: true })
-    cy.get('.history .entry:nth-child(2)')
+    cy.get('.history .entry[data-index="1"] .entry-actions .action:nth-child(3)').click({ force: true })
+    cy.get('.history .entry[data-index="1"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
-    cy.get('.history .entry:nth-child(3)')
+    cy.get('.history .entry[data-index="2"]')
       .should('not.have.class', 'inspected')
       .should('not.have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('1')
     })
 
     // Base state
-    cy.get('.history .entry:nth-child(1) .mutation-type').click({ force: true })
-    cy.get('.history .entry:nth-child(1)')
+    cy.get('.history .entry[data-index="0"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="0"]')
       .should('have.class', 'inspected')
       .should('not.have.class', 'active')
     cy.get('.vuex-state-inspector').then(el => {
@@ -104,8 +112,8 @@ suite('vuex tab', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('1')
     })
-    cy.get('.history .entry:nth-child(1) .entry-actions .action:nth-child(1)').click({ force: true })
-    cy.get('.history .entry:nth-child(1)')
+    cy.get('.history .entry[data-index="0"] .entry-actions .action:nth-child(1)').click({ force: true })
+    cy.get('.history .entry[data-index="0"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('#target').iframe().then(({ get }) => {
@@ -114,10 +122,10 @@ suite('vuex tab', () => {
   })
 
   it('should revert', () => {
-    cy.get('.history .entry:nth-child(4) .mutation-type').click({ force: true })
-    cy.get('.history .entry:nth-child(4) .action:nth-child(2)').click({ force: true })
-    cy.get('.history .entry').should('have.length', 3)
-    cy.get('.history .entry:nth-child(3)')
+    cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="3"]').find('.action:nth-child(2)').click({ force: true })
+    cy.get('.history .entry[data-active="true"]').should('have.length', 3)
+    cy.get('.history .entry[data-index="2"]')
       .should('have.class', 'inspected')
       .should('have.class', 'active')
     cy.get('.vuex-state-inspector').then(el => {
@@ -129,10 +137,10 @@ suite('vuex tab', () => {
   })
 
   it('should commit', () => {
-    cy.get('.history .entry:nth-child(3) .mutation-type').click({ force: true })
-    cy.get('.history .entry:nth-child(3) .action:nth-child(1)').click({ force: true })
-    cy.get('.history .entry').should('have.length', 1)
-    cy.get('.history .entry:nth-child(1)')
+    cy.get('.history .entry[data-index="2"] .mutation-type').click({ force: true })
+    cy.get('.history .entry[data-index="2"] .action:nth-child(1)').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')
       .should('have.class', 'active')
     cy.get('.vuex-state-inspector').then(el => {
@@ -153,7 +161,9 @@ suite('vuex tab', () => {
         .click({ force: true })
         .click({ force: true })
     })
-    cy.get('.history .entry:nth-child(4)').click({ force: true })
+    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')
     })

diff --git a/shells/dev/target/Counter.vue b/shells/dev/target/Counter.vue
@@ -6,7 +6,7 @@
 
     <br>
 
-    <button class="increment" @click="doLotMutations">Do a lot of mutations</button>
+    <button @click="doLotMutations">Do a lot of mutations</button>
 
     <p>Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}</p>
   </div>

diff --git a/src/devtools/index.js b/src/devtools/index.js
@@ -140,7 +140,10 @@ function initApp (shell) {
 
     bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
       snapshotsCache.set(index, snapshot)
-      store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
+      store.commit('vuex/RECEIVE_STATE', snapshot)
+      if (store.state.vuex.inspectedIndex === index) {
+        store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
+      }
 
       if (VuexResolve.travel) {
         VuexResolve.travel(snapshot)

diff --git a/src/devtools/views/events/EventsHistory.vue b/src/devtools/views/events/EventsHistory.vue
@@ -53,10 +53,11 @@
       >
         No events found<span v-if="!enabled"><br>(Recording is paused)</span>
       </div>
-      <template slot-scope="{ item: event, index }">
+      <template slot-scope="{ item: event, index, active }">
         <div
           class="entry list-item"
           :class="{ active: inspectedIndex === index }"
+          :data-active="active"
           @click="inspect(filteredEvents.indexOf(event))"
         >
           <span class="event-name">{{ event.eventName }}</span>
@@ -146,7 +147,7 @@ export default {
       },
       set (filter) {
         this.$store.commit('events/UPDATE_FILTER', filter)
-        this.$store.commit('events/INSPECT', -1)
+        this.$store.dispatch('events/inspect', filter ? -1 : this.events.length - 1)
       }
     },
 

diff --git a/src/devtools/views/vuex/VuexHistory.vue b/src/devtools/views/vuex/VuexHistory.vue
@@ -56,9 +56,11 @@
         'high-density': highDensity
       }"
     >
-      <template slot-scope="{ item: entry, index }">
+      <template slot-scope="{ item: entry, index, active }">
         <div
-          v-if="index <= 0"
+          v-if="!entry.mutation"
+          :data-active="active"
+          :data-index="index"
           :class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }"
           class="entry list-item"
           @click="inspect(null)"
@@ -91,7 +93,9 @@
         </div>
         <div
           v-else
-          :class="{ inspected: isInspected(index), active: isActive(index) }"
+          :data-active="active"
+          :data-index="index"
+          :class="{ inspected: isInspected(index, entry), active: isActive(index, entry) }"
           class="entry list-item"
           @click="inspect(entry)"
         >
@@ -120,7 +124,7 @@
               <span>Revert</span>
             </a>
             <a
-              v-if="!isActive(index)"
+              v-if="!isActive(index, entry)"
               v-tooltip="'Time Travel to This State'"
               class="action"
               @click.stop="timeTravelTo(entry)"
@@ -139,11 +143,11 @@
             {{ entry.timestamp | formatTime }}
           </span>
           <span
-            v-if="isActive(index)"
+            v-if="isActive(index, entry)"
             class="label active"
           >active</span>
           <span
-            v-if="isInspected(index)"
+            v-if="isInspected(index, entry)"
             class="label inspected"
           >inspected</span>
         </div>
@@ -234,7 +238,7 @@ export default {
       },
       set (filter) {
         this.$store.dispatch('vuex/updateFilter', filter)
-        this.$store.commit('vuex/INSPECT', -1)
+        this.$store.dispatch('vuex/inspect', filter ? -1 : this.history.length - 1)
       }
     },
 
@@ -255,11 +259,13 @@ export default {
       'updateFilter'
     ]),
 
-    isActive (index) {
+    isActive (index, entry) {
+      if (this.filter) return this.activeIndex === this.filteredHistory.indexOf(entry)
       return this.activeIndex === index - 1
     },
 
-    isInspected (index) {
+    isInspected (index, entry) {
+      if (this.filter) return this.inspectedIndex === this.filteredHistory.indexOf(entry)
       return this.inspectedIndex === index - 1
     },
 

diff --git a/src/devtools/views/vuex/VuexStateInspector.vue b/src/devtools/views/vuex/VuexStateInspector.vue
@@ -59,7 +59,7 @@
 
       <div
         v-if="$shared.snapshotLoading"
-        class="state-info"
+        class="state-info loading-vuex-state"
       >
         <div class="label">Loading state...</div>
 
@@ -69,7 +69,7 @@
       </div>
       <div
         v-else-if="isOnlyMutationPayload"
-        class="state-info"
+        class="state-info recording-vuex-state"
       >
         <div class="label">
           <VueIcon
@@ -81,6 +81,7 @@
 
         <div>
           <VueButton
+            data-id="load-vuex-state"
             @click="loadState()"
           >
             Load state

diff --git a/src/devtools/views/vuex/module.js b/src/devtools/views/vuex/module.js
@@ -16,7 +16,8 @@ const state = {
   filter: '',
   filterRegex: ANY_RE,
   filterRegexInvalid: false,
-  inspectedState: null
+  inspectedState: null,
+  lastReceivedState: null
 }
 
 const mutations = {
@@ -35,7 +36,7 @@ const mutations = {
   },
 
   'COMMIT_ALL' (state) {
-    state.base = state.inspectedState
+    state.base = state.lastReceivedState
     state.lastCommit = Date.now()
     reset(state)
   },
@@ -45,7 +46,7 @@ const mutations = {
   },
 
   'COMMIT' (state, index) {
-    state.base = state.inspectedState
+    state.base = state.lastReceivedState
     state.lastCommit = Date.now()
     state.history = state.history.slice(index + 1)
     state.history.forEach(({ mutation }, index) => {
@@ -67,6 +68,10 @@ const mutations = {
     state.inspectedState = value
   },
 
+  'RECEIVE_STATE' (state, value) {
+    state.lastReceivedState = value
+  },
+
   'TIME_TRAVEL' (state, index) {
     state.activeIndex = index
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,7 @@ @@
         <br>
-        <button class="increment" @click="doLotMutations">Do a lot of mutations</button>
+        <button @click="doLotMutations">Do a lot of mutations</button>
         <p>Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}</p>
       </div>
@@ Expand Down @@