Skip to content

Commit 7588800

Browse files
author
Guillaume Chau
committed
test: fix e2e
1 parent 39481b9 commit 7588800

File tree

8 files changed

+74
-53
lines changed

8 files changed

+74
-53
lines changed

‎cypress/integration/events.tab.js renamed to ‎cypress/integration/events-tab.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,11 @@ suite('events tab', () => {
2525

2626
it('should search events', () => {
2727
cy.get('.left .search input').clear().type('event')
28-
cy.get('.history .entry').should('have.length', 3)
28+
cy.get('.history .entry[data-active="true"]').should('have.length', 3)
2929
cy.get('.left .search input').clear().type('<eventchild1>')
30-
cy.get('.history .entry').should('have.length', 1)
30+
cy.get('.history .entry[data-active="true"]').should('have.length', 1)
3131
cy.get('.left .search input').clear()
3232
cy.get('.button.reset').click()
33-
cy.get('.history .entry').should('have.length', 0)
33+
cy.get('.history .entry[data-active="true"]').should('have.length', 0)
3434
})
3535
})

‎cypress/integration/vuex.tab.js renamed to ‎cypress/integration/vuex-tab.js

Lines changed: 38 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,13 @@ suite('vuex tab', () => {
1111
})
1212
cy.get('.vuex-tab').click()
1313
cy.get('.history .entry').should('have.length', 4)
14+
cy.get('[data-id="load-vuex-state"]').click()
15+
cy.get('.loading-vuex-state').should('not.be.visible')
1416
cy.get('.vuex-state-inspector').then(el => {
1517
expect(el.text()).to.include('type:"DECREMENT"')
1618
expect(el.text()).to.include('count:1')
1719
})
18-
cy.get('.history .entry:nth-child(4)').should('have.class', 'inspected').should('have.class', 'active')
20+
cy.get('.history .entry').eq(3).should('have.class', 'inspected').should('have.class', 'active')
1921
})
2022

2123
it('should filter state & getters', () => {
@@ -28,28 +30,29 @@ suite('vuex tab', () => {
2830

2931
it('should filter history', () => {
3032
cy.get('.left .search input').clear().type('inc')
31-
cy.get('.history .entry').should('have.length', 3)
32-
cy.get('.history .entry.inspected').should('have.length', 1)
33-
cy.get('.history .entry.active').should('have.length', 0)
33+
cy.get('.history .entry[data-active="true"]').should('have.length', 2)
34+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
35+
cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
3436

3537
cy.get('.left .search input').clear().type('/dec/i')
36-
cy.get('.history .entry').should('have.length', 2)
37-
cy.get('.history .entry.inspected').should('have.length', 1)
38-
cy.get('.history .entry.active').should('have.length', 0)
38+
cy.get('.history .entry[data-active="true"]').should('have.length', 1)
39+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
40+
cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
3941

4042
cy.get('.left .search input').clear().type('/dec)/i')
41-
cy.get('.history .entry').should('have.length', 4)
42-
cy.get('.history .entry.inspected').should('have.length', 1)
43-
cy.get('.history .entry.active').should('have.length', 1)
43+
cy.get('.history .entry[data-active="true"]').should('have.length', 3)
44+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
45+
cy.get('.history .entry[data-active="true"].active').should('have.length', 1)
4446

4547
cy.get('.left .search input').clear()
4648
})
4749

4850
it('should inspect state', () => {
49-
cy.get('.history .entry:nth-child(3) .mutation-type').click()
50-
cy.get('.history .entry:nth-child(3)')
51+
cy.get('.history .entry .mutation-type').eq(2).click()
52+
cy.get('.history .entry').eq(2)
5153
.should('have.class', 'inspected')
5254
.should('not.have.class', 'active')
55+
cy.get('.loading-vuex-state').should('not.be.visible')
5356
cy.get('.vuex-state-inspector').then(el => {
5457
expect(el.text()).to.include('type:"INCREMENT"')
5558
expect(el.text()).to.include('count:2')
@@ -60,42 +63,43 @@ suite('vuex tab', () => {
6063
})
6164

6265
it('should time-travel', () => {
63-
cy.get('.history .entry:nth-child(3) .entry-actions .action:nth-child(3)').click({ force: true })
64-
cy.get('.history .entry:nth-child(3)')
66+
cy.get('.history .entry[data-index="2"] .entry-actions .action:nth-child(3)').click({ force: true })
67+
cy.get('.history .entry[data-index="2"]')
6568
.should('have.class', 'inspected')
6669
.should('have.class', 'active')
6770
cy.get('#target').iframe().then(({ get }) => {
6871
get('#counter p').contains('2')
6972
})
7073

71-
cy.get('.history .entry:nth-child(2) .mutation-type').click({ force: true })
72-
cy.get('.history .entry:nth-child(2)')
74+
cy.get('.history .entry[data-index="1"] .mutation-type').click({ force: true })
75+
cy.get('.history .entry[data-index="1"]')
7376
.should('have.class', 'inspected')
7477
.should('not.have.class', 'active')
75-
cy.get('.history .entry:nth-child(3)')
78+
cy.get('.history .entry[data-index="2"]')
7679
.should('not.have.class', 'inspected')
7780
.should('have.class', 'active')
81+
cy.get('.loading-vuex-state').should('not.be.visible')
7882
cy.get('.vuex-state-inspector').then(el => {
7983
expect(el.text()).to.include('type:"INCREMENT"')
8084
expect(el.text()).to.include('count:1')
8185
})
8286
cy.get('#target').iframe().then(({ get }) => {
8387
get('#counter p').contains('2')
8488
})
85-
cy.get('.history .entry:nth-child(2) .entry-actions .action:nth-child(3)').click({ force: true })
86-
cy.get('.history .entry:nth-child(2)')
89+
cy.get('.history .entry[data-index="1"] .entry-actions .action:nth-child(3)').click({ force: true })
90+
cy.get('.history .entry[data-index="1"]')
8791
.should('have.class', 'inspected')
8892
.should('have.class', 'active')
89-
cy.get('.history .entry:nth-child(3)')
93+
cy.get('.history .entry[data-index="2"]')
9094
.should('not.have.class', 'inspected')
9195
.should('not.have.class', 'active')
9296
cy.get('#target').iframe().then(({ get }) => {
9397
get('#counter p').contains('1')
9498
})
9599

96100
// Base state
97-
cy.get('.history .entry:nth-child(1) .mutation-type').click({ force: true })
98-
cy.get('.history .entry:nth-child(1)')
101+
cy.get('.history .entry[data-index="0"] .mutation-type').click({ force: true })
102+
cy.get('.history .entry[data-index="0"]')
99103
.should('have.class', 'inspected')
100104
.should('not.have.class', 'active')
101105
cy.get('.vuex-state-inspector').then(el => {
@@ -104,8 +108,8 @@ suite('vuex tab', () => {
104108
cy.get('#target').iframe().then(({ get }) => {
105109
get('#counter p').contains('1')
106110
})
107-
cy.get('.history .entry:nth-child(1) .entry-actions .action:nth-child(1)').click({ force: true })
108-
cy.get('.history .entry:nth-child(1)')
111+
cy.get('.history .entry[data-index="0"] .entry-actions .action:nth-child(1)').click({ force: true })
112+
cy.get('.history .entry[data-index="0"]')
109113
.should('have.class', 'inspected')
110114
.should('have.class', 'active')
111115
cy.get('#target').iframe().then(({ get }) => {
@@ -114,10 +118,10 @@ suite('vuex tab', () => {
114118
})
115119

116120
it('should revert', () => {
117-
cy.get('.history .entry:nth-child(4) .mutation-type').click({ force: true })
118-
cy.get('.history .entry:nth-child(4) .action:nth-child(2)').click({ force: true })
119-
cy.get('.history .entry').should('have.length', 3)
120-
cy.get('.history .entry:nth-child(3)')
121+
cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true })
122+
cy.get('.history .entry[data-index="3"]').find('.action:nth-child(2)').click({ force: true })
123+
cy.get('.history .entry[data-active="true"]').should('have.length', 3)
124+
cy.get('.history .entry[data-index="2"]')
121125
.should('have.class', 'inspected')
122126
.should('have.class', 'active')
123127
cy.get('.vuex-state-inspector').then(el => {
@@ -129,10 +133,10 @@ suite('vuex tab', () => {
129133
})
130134

131135
it('should commit', () => {
132-
cy.get('.history .entry:nth-child(3) .mutation-type').click({ force: true })
133-
cy.get('.history .entry:nth-child(3) .action:nth-child(1)').click({ force: true })
134-
cy.get('.history .entry').should('have.length', 1)
135-
cy.get('.history .entry:nth-child(1)')
136+
cy.get('.history .entry[data-index="2"] .mutation-type').click({ force: true })
137+
cy.get('.history .entry[data-index="2"] .action:nth-child(1)').click({ force: true })
138+
cy.get('.history .entry[data-active="true"]').should('have.length', 1)
139+
cy.get('.history .entry[data-index="0"]')
136140
.should('have.class', 'inspected')
137141
.should('have.class', 'active')
138142
cy.get('.vuex-state-inspector').then(el => {
@@ -153,7 +157,8 @@ suite('vuex tab', () => {
153157
.click({ force: true })
154158
.click({ force: true })
155159
})
156-
cy.get('.history .entry:nth-child(4)').click({ force: true })
160+
cy.get('.history .entry[data-index="3"]').click({ force: true })
161+
cy.get('.loading-vuex-state').should('not.be.visible')
157162
cy.get('.vuex-state-inspector').then(el => {
158163
expect(el.text()).to.include('isPositive:false')
159164
})

‎shells/dev/target/Counter.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
<br>
88

9-
<button class="increment" @click="doLotMutations">Do a lot of mutations</button>
9+
<button @click="doLotMutations">Do a lot of mutations</button>
1010

1111
<p>Your counter is {{ $store.getters.isPositive ? 'positive' : 'negative' }}</p>
1212
</div>

‎src/devtools/index.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,10 @@ function initApp (shell) {
140140

141141
bridge.on('vuex:inspected-state', ({ index, snapshot }) => {
142142
snapshotsCache.set(index, snapshot)
143-
store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
143+
store.commit('vuex/RECEIVE_STATE', snapshot)
144+
if (store.state.vuex.inspectedIndex === index) {
145+
store.commit('vuex/UPDATE_INSPECTED_STATE', snapshot)
146+
}
144147

145148
if (VuexResolve.travel) {
146149
VuexResolve.travel(snapshot)

‎src/devtools/views/events/EventsHistory.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,10 +53,11 @@
5353
>
5454
No events found<span v-if="!enabled"><br>(Recording is paused)</span>
5555
</div>
56-
<template slot-scope="{ item: event, index }">
56+
<template slot-scope="{ item: event, index, active }">
5757
<div
5858
class="entry list-item"
5959
:class="{ active: inspectedIndex === index }"
60+
:data-active="active"
6061
@click="inspect(filteredEvents.indexOf(event))"
6162
>
6263
<span class="event-name">{{ event.eventName }}</span>
@@ -146,7 +147,7 @@ export default {
146147
},
147148
set (filter) {
148149
this.$store.commit('events/UPDATE_FILTER', filter)
149-
this.$store.commit('events/INSPECT', -1)
150+
this.$store.dispatch('events/inspect', filter ? -1 : this.events.length - 1)
150151
}
151152
},
152153

‎src/devtools/views/vuex/VuexHistory.vue

Lines changed: 15 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,11 @@
5656
'high-density': highDensity
5757
}"
5858
>
59-
<template slot-scope="{ item: entry, index }">
59+
<template slot-scope="{ item: entry, index, active }">
6060
<div
61-
v-if="index <= 0"
61+
v-if="!entry.mutation"
62+
:data-active="active"
63+
:data-index="index"
6264
:class="{ active: activeIndex === -1, inspected: inspectedIndex === -1 }"
6365
class="entry list-item"
6466
@click="inspect(null)"
@@ -91,7 +93,9 @@
9193
</div>
9294
<div
9395
v-else
94-
:class="{ inspected: isInspected(index), active: isActive(index) }"
96+
:data-active="active"
97+
:data-index="index"
98+
:class="{ inspected: isInspected(index, entry), active: isActive(index, entry) }"
9599
class="entry list-item"
96100
@click="inspect(entry)"
97101
>
@@ -120,7 +124,7 @@
120124
<span>Revert</span>
121125
</a>
122126
<a
123-
v-if="!isActive(index)"
127+
v-if="!isActive(index, entry)"
124128
v-tooltip="'Time Travel to This State'"
125129
class="action"
126130
@click.stop="timeTravelTo(entry)"
@@ -139,11 +143,11 @@
139143
{{ entry.timestamp | formatTime }}
140144
</span>
141145
<span
142-
v-if="isActive(index)"
146+
v-if="isActive(index, entry)"
143147
class="label active"
144148
>active</span>
145149
<span
146-
v-if="isInspected(index)"
150+
v-if="isInspected(index, entry)"
147151
class="label inspected"
148152
>inspected</span>
149153
</div>
@@ -234,7 +238,7 @@ export default {
234238
},
235239
set (filter) {
236240
this.$store.dispatch('vuex/updateFilter', filter)
237-
this.$store.commit('vuex/INSPECT', -1)
241+
this.$store.dispatch('vuex/inspect', filter ? -1 : this.history.length - 1)
238242
}
239243
},
240244
@@ -255,11 +259,13 @@ export default {
255259
'updateFilter'
256260
]),
257261
258-
isActive (index) {
262+
isActive (index, entry) {
263+
if (this.filter) return this.activeIndex === this.filteredHistory.indexOf(entry)
259264
return this.activeIndex === index - 1
260265
},
261266
262-
isInspected (index) {
267+
isInspected (index, entry) {
268+
if (this.filter) return this.inspectedIndex === this.filteredHistory.indexOf(entry)
263269
return this.inspectedIndex === index - 1
264270
},
265271

‎src/devtools/views/vuex/VuexStateInspector.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@
5959

6060
<div
6161
v-if="$shared.snapshotLoading"
62-
class="state-info"
62+
class="state-info loading-vuex-state"
6363
>
6464
<div class="label">Loading state...</div>
6565

@@ -81,6 +81,7 @@
8181

8282
<div>
8383
<VueButton
84+
data-id="load-vuex-state"
8485
@click="loadState()"
8586
>
8687
Load state

‎src/devtools/views/vuex/module.js

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ const state = {
1616
filter: '',
1717
filterRegex: ANY_RE,
1818
filterRegexInvalid: false,
19-
inspectedState: null
19+
inspectedState: null,
20+
lastReceivedState: null
2021
}
2122

2223
const mutations = {
@@ -35,7 +36,7 @@ const mutations = {
3536
},
3637

3738
'COMMIT_ALL' (state) {
38-
state.base = state.inspectedState
39+
state.base = state.lastReceivedState
3940
state.lastCommit = Date.now()
4041
reset(state)
4142
},
@@ -45,7 +46,7 @@ const mutations = {
4546
},
4647

4748
'COMMIT' (state, index) {
48-
state.base = state.inspectedState
49+
state.base = state.lastReceivedState
4950
state.lastCommit = Date.now()
5051
state.history = state.history.slice(index + 1)
5152
state.history.forEach(({ mutation }, index) => {
@@ -67,6 +68,10 @@ const mutations = {
6768
state.inspectedState = value
6869
},
6970

71+
'RECEIVE_STATE' (state, value) {
72+
state.lastReceivedState = value
73+
},
74+
7075
'TIME_TRAVEL' (state, index) {
7176
state.activeIndex = index
7277
},

0 commit comments

Comments
 (0)