Skip to content

Commit 0d72b42

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

File tree

8 files changed

+79
-54
lines changed

8 files changed

+79
-54
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: 42 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,14 @@ 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('.recording-vuex-state').should('not.be.visible')
16+
cy.get('.loading-vuex-state').should('not.be.visible')
1417
cy.get('.vuex-state-inspector').then(el => {
1518
expect(el.text()).to.include('type:"DECREMENT"')
1619
expect(el.text()).to.include('count:1')
1720
})
18-
cy.get('.history .entry:nth-child(4)').should('have.class', 'inspected').should('have.class', 'active')
21+
cy.get('.history .entry').eq(3).should('have.class', 'inspected').should('have.class', 'active')
1922
})
2023

2124
it('should filter state & getters', () => {
@@ -28,28 +31,30 @@ suite('vuex tab', () => {
2831

2932
it('should filter history', () => {
3033
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)
34+
cy.get('.history .entry[data-active="true"]').should('have.length', 2)
35+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
36+
cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
3437

3538
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)
39+
cy.get('.history .entry[data-active="true"]').should('have.length', 1)
40+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
41+
cy.get('.history .entry[data-active="true"].active').should('have.length', 0)
3942

4043
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)
44+
cy.get('.history .entry[data-active="true"]').should('have.length', 3)
45+
cy.get('.history .entry[data-active="true"].inspected').should('have.length', 0)
46+
cy.get('.history .entry[data-active="true"].active').should('have.length', 1)
4447

4548
cy.get('.left .search input').clear()
4649
})
4750

4851
it('should inspect state', () => {
49-
cy.get('.history .entry:nth-child(3) .mutation-type').click()
50-
cy.get('.history .entry:nth-child(3)')
52+
cy.get('.history .entry .mutation-type').eq(2).click()
53+
cy.get('.history .entry').eq(2)
5154
.should('have.class', 'inspected')
5255
.should('not.have.class', 'active')
56+
cy.get('.recording-vuex-state').should('not.be.visible')
57+
cy.get('.loading-vuex-state').should('not.be.visible')
5358
cy.get('.vuex-state-inspector').then(el => {
5459
expect(el.text()).to.include('type:"INCREMENT"')
5560
expect(el.text()).to.include('count:2')
@@ -60,42 +65,44 @@ suite('vuex tab', () => {
6065
})
6166

6267
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)')
68+
cy.get('.history .entry[data-index="2"] .entry-actions .action:nth-child(3)').click({ force: true })
69+
cy.get('.history .entry[data-index="2"]')
6570
.should('have.class', 'inspected')
6671
.should('have.class', 'active')
6772
cy.get('#target').iframe().then(({ get }) => {
6873
get('#counter p').contains('2')
6974
})
7075

71-
cy.get('.history .entry:nth-child(2) .mutation-type').click({ force: true })
72-
cy.get('.history .entry:nth-child(2)')
76+
cy.get('.history .entry[data-index="1"] .mutation-type').click({ force: true })
77+
cy.get('.history .entry[data-index="1"]')
7378
.should('have.class', 'inspected')
7479
.should('not.have.class', 'active')
75-
cy.get('.history .entry:nth-child(3)')
80+
cy.get('.history .entry[data-index="2"]')
7681
.should('not.have.class', 'inspected')
7782
.should('have.class', 'active')
83+
cy.get('.recording-vuex-state').should('not.be.visible')
84+
cy.get('.loading-vuex-state').should('not.be.visible')
7885
cy.get('.vuex-state-inspector').then(el => {
7986
expect(el.text()).to.include('type:"INCREMENT"')
8087
expect(el.text()).to.include('count:1')
8188
})
8289
cy.get('#target').iframe().then(({ get }) => {
8390
get('#counter p').contains('2')
8491
})
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)')
92+
cy.get('.history .entry[data-index="1"] .entry-actions .action:nth-child(3)').click({ force: true })
93+
cy.get('.history .entry[data-index="1"]')
8794
.should('have.class', 'inspected')
8895
.should('have.class', 'active')
89-
cy.get('.history .entry:nth-child(3)')
96+
cy.get('.history .entry[data-index="2"]')
9097
.should('not.have.class', 'inspected')
9198
.should('not.have.class', 'active')
9299
cy.get('#target').iframe().then(({ get }) => {
93100
get('#counter p').contains('1')
94101
})
95102

96103
// Base state
97-
cy.get('.history .entry:nth-child(1) .mutation-type').click({ force: true })
98-
cy.get('.history .entry:nth-child(1)')
104+
cy.get('.history .entry[data-index="0"] .mutation-type').click({ force: true })
105+
cy.get('.history .entry[data-index="0"]')
99106
.should('have.class', 'inspected')
100107
.should('not.have.class', 'active')
101108
cy.get('.vuex-state-inspector').then(el => {
@@ -104,8 +111,8 @@ suite('vuex tab', () => {
104111
cy.get('#target').iframe().then(({ get }) => {
105112
get('#counter p').contains('1')
106113
})
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)')
114+
cy.get('.history .entry[data-index="0"] .entry-actions .action:nth-child(1)').click({ force: true })
115+
cy.get('.history .entry[data-index="0"]')
109116
.should('have.class', 'inspected')
110117
.should('have.class', 'active')
111118
cy.get('#target').iframe().then(({ get }) => {
@@ -114,10 +121,10 @@ suite('vuex tab', () => {
114121
})
115122

116123
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)')
124+
cy.get('.history .entry[data-index="3"] .mutation-type').click({ force: true })
125+
cy.get('.history .entry[data-index="3"]').find('.action:nth-child(2)').click({ force: true })
126+
cy.get('.history .entry[data-active="true"]').should('have.length', 3)
127+
cy.get('.history .entry[data-index="2"]')
121128
.should('have.class', 'inspected')
122129
.should('have.class', 'active')
123130
cy.get('.vuex-state-inspector').then(el => {
@@ -129,10 +136,10 @@ suite('vuex tab', () => {
129136
})
130137

131138
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)')
139+
cy.get('.history .entry[data-index="2"] .mutation-type').click({ force: true })
140+
cy.get('.history .entry[data-index="2"] .action:nth-child(1)').click({ force: true })
141+
cy.get('.history .entry[data-active="true"]').should('have.length', 1)
142+
cy.get('.history .entry[data-index="0"]')
136143
.should('have.class', 'inspected')
137144
.should('have.class', 'active')
138145
cy.get('.vuex-state-inspector').then(el => {
@@ -153,7 +160,9 @@ suite('vuex tab', () => {
153160
.click({ force: true })
154161
.click({ force: true })
155162
})
156-
cy.get('.history .entry:nth-child(4)').click({ force: true })
163+
cy.get('.history .entry[data-index="3"]').click({ force: true })
164+
cy.get('.recording-vuex-state').should('not.be.visible')
165+
cy.get('.loading-vuex-state').should('not.be.visible')
157166
cy.get('.vuex-state-inspector').then(el => {
158167
expect(el.text()).to.include('isPositive:false')
159168
})

‎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: 3 additions & 2 deletions
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

@@ -69,7 +69,7 @@
6969
</div>
7070
<div
7171
v-else-if="isOnlyMutationPayload"
72-
class="state-info"
72+
class="state-info recording-vuex-state"
7373
>
7474
<div class="label">
7575
<VueIcon
@@ -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)