Skip to content

Commit 3871f23

Browse files
author
Guillaume Chau
committed
Merge branch 'dev' into add-router-tab
2 parents 5955259 + ecc097f commit 3871f23

32 files changed

+1660
-39
lines changed

‎cypress/integration/component-data-edit.js

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
import { suite } from '../utils/suite'
2+
3+
suite('component data edit', () => {
4+
it('should edit data using the decrease button', () => {
5+
// select Instance
6+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
7+
cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({force: true}).click({force: true})
8+
cy.get('.data-field').eq(7).should('contain', '-1')
9+
10+
// expect DOM element to be updated
11+
cy.get('#target').iframe().then(({ get }) => {
12+
get('#target div').eq(0).contains('-1')
13+
})
14+
})
15+
16+
it('should edit data using the increase button', () => {
17+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
18+
cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(2).click({force: true})
19+
cy.get('.data-field').eq(7).should('contain', '0')
20+
21+
// expect DOM element to be updated
22+
cy.get('#target').iframe().then(({ get }) => {
23+
get('#target div').eq(0).contains('0')
24+
})
25+
})
26+
27+
it('should edit data using the edit input', () => {
28+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
29+
cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(0).click({force: true})
30+
31+
cy.get('.edit-input').type('12')
32+
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
33+
34+
cy.get('.data-field').eq(7).should('contain', '12')
35+
36+
// expect DOM element to be updated
37+
cy.get('#target').iframe().then(({ get }) => {
38+
get('#target div').eq(0).contains('12')
39+
})
40+
})
41+
42+
it('should add elements to array', () => {
43+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
44+
cy.get('.data-field').eq(6).find('.actions .vue-ui-button').eq(1).click({force: true})
45+
46+
cy.get('.edit-input').type('55')
47+
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
48+
49+
cy.get('.data-field').eq(6).find('.children .data-field').should('have.length', '3')
50+
cy.get('.data-field').eq(6).find('.children .data-field').eq(2).should('contain', 55)
51+
52+
// expect DOM element to be updated
53+
cy.get('#target').iframe().then(({ get }) => {
54+
get('#target div').eq(4).contains('55')
55+
})
56+
})
57+
58+
it('should remove elements from array', () => {
59+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
60+
cy.get('.data-field').eq(9).find('.actions .vue-ui-button').eq(3).click({force: true})
61+
62+
cy.get('.data-field').eq(6).find('.children .data-field').should('have.length', '2')
63+
})
64+
65+
it('should parse object through edit input', () => {
66+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
67+
cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(0).click({force: true})
68+
69+
cy.get('.edit-input').type('{{}"count":42}')
70+
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
71+
72+
cy.get('.data-field').eq(7).should('contain', 'Object')
73+
// expand object
74+
cy.get('.data-field').eq(7).click()
75+
cy.get('.data-field').eq(8).find('.key').should('contain', 'count')
76+
cy.get('.data-field').eq(8).find('.value').should('contain', 42)
77+
})
78+
79+
it('should rename object\'s property', () => {
80+
cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
81+
cy.get('.data-field').eq(8).find('.actions .vue-ui-button').eq(0).click({force: true})
82+
cy.get('.edit-input.key-input').clear().type('name')
83+
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
84+
85+
cy.get('.data-field').eq(8).find('.key').should('contain', 'name')
86+
})
87+
})

‎cypress/integration/components-tab.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { suite } from '../utils/suite'
22

3-
const baseInstanceCount = 8
3+
const baseInstanceCount = 9
44

55
suite('components tab', () => {
66
it('should detect instances inside shadow DOM', () => {

‎cypress/integration/vuex-edit.js

Lines changed: 38 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { suite } from '../utils/suite'
22

33
suite('vuex edit', () => {
4-
it('should edit state', () => {
4+
it('should edit state using the decrease button', () => {
55
cy.get('.vuex-tab').click()
66
// using the decrease button
77
cy.get('.data-field').eq(0)
@@ -12,7 +12,9 @@ suite('vuex edit', () => {
1212
cy.get('#target').iframe().then(({ get }) => {
1313
get('#counter p').contains('-2')
1414
})
15+
})
1516

17+
it('should edit state using the increase button', () => {
1618
// using the increase button
1719
cy.get('.data-field').eq(0).click()
1820
.find('.actions .vue-ui-button').eq(2)
@@ -22,7 +24,9 @@ suite('vuex edit', () => {
2224
cy.get('#target').iframe().then(({ get }) => {
2325
get('#counter p').contains('0')
2426
})
27+
})
2528

29+
it('should edit state using the edit input', () => {
2630
// using the edit input
2731
cy.get('.data-field').eq(0).click()
2832
.find('.actions .vue-ui-button').eq(0).click({ force: true })
@@ -33,7 +37,7 @@ suite('vuex edit', () => {
3337
get('#counter p').contains('12')
3438
})
3539

36-
// change count back to 1
40+
// change count back to 0
3741
cy.get('.data-field').eq(0).click()
3842
.find('.actions .vue-ui-button').eq(0).click({ force: true })
3943
cy.get('.edit-input').type('0')
@@ -43,4 +47,36 @@ suite('vuex edit', () => {
4347
get('#counter p').contains('0')
4448
})
4549
})
50+
51+
it('should edit state nested field', () => {
52+
// using the decrease button
53+
cy.get('.data-field > .children > .data-field').eq(2)
54+
.find('.actions .vue-ui-button').eq(1)
55+
.click({ force: true })
56+
.click({ force: true })
57+
58+
cy.get('#target').iframe().then(({ get }) => {
59+
get('#vuex-object pre').contains('-2')
60+
})
61+
62+
// using the increase button
63+
cy.get('.data-field > .children > .data-field').eq(2)
64+
.find('.actions .vue-ui-button').eq(2)
65+
.click({ force: true })
66+
.click({ force: true })
67+
68+
cy.get('#target').iframe().then(({ get }) => {
69+
get('#vuex-object pre').contains('0')
70+
})
71+
72+
// using the input
73+
cy.get('.data-field > .children > .data-field').eq(2)
74+
.find('.actions .vue-ui-button').eq(0).click({ force: true })
75+
cy.get('.edit-input').eq(1).type('12')
76+
cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
77+
78+
cy.get('#target').iframe().then(({ get }) => {
79+
get('#vuex-object pre').contains('12')
80+
})
81+
})
4682
})

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@vue/ui": "^0.5.1",
4040
"autoprefixer": "^9.0.2",
4141
"circular-json-es6": "^2.0.1",
42+
"d3": "^5.5.0",
4243
"lodash.debounce": "^4.0.8",
4344
"lodash.groupby": "^4.6.0",
4445
"lru-cache": "^4.1.3",

‎shells/createConfig.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ module.exports = (config, target = { chrome: 52, firefox: 48 }) => {
1919
alias: {
2020
src: path.resolve(__dirname, '../src'),
2121
views: path.resolve(__dirname, '../src/devtools/views'),
22-
components: path.resolve(__dirname, '../src/devtools/components')
22+
components: path.resolve(__dirname, '../src/devtools/components'),
23+
filters: path.resolve(__dirname, '../src/devtools/filters')
2324
}
2425
},
2526
module: {

‎shells/dev/target/EventChild.vue

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
<br>
88

99
<button @click="emitManyEvents">Emit a lot of events</button>
10+
<button @click="emitAndCommit">Emit and event and commit a mutation</button>
1011
</div>
1112
</template>
1213

@@ -45,6 +46,11 @@ export default {
4546
for (let i = 0; i < 10000; i++) {
4647
this.$emit('event', i)
4748
}
49+
},
50+
51+
emitAndCommit () {
52+
this.$emit('event-1', 'foobar')
53+
this.$store.commit('DECREMENT', 'barfoo')
4854
}
4955
}
5056
}

‎shells/dev/target/VuexObject.vue

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<template>
2+
<div id="vuex-object">
3+
<h2>Vuex Object</h2>
4+
<pre>{{ object }}</pre>
5+
</div>
6+
</template>
7+
8+
<script>
9+
import {mapState} from 'vuex'
10+
export default {
11+
computed: {
12+
...mapState(['object'])
13+
},
14+
}
15+
</script>
16+
17+
<style scoped>
18+
19+
</style>

‎shells/dev/target/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import store from './store'
33
import Target from './Target.vue'
44
import Other from './Other.vue'
55
import Counter from './Counter.vue'
6+
import VuexObject from './VuexObject.vue'
67
import NativeTypes from './NativeTypes.vue'
78
import Events from './Events.vue'
89
import MyClass from './MyClass.js'
@@ -37,7 +38,8 @@ new Vue({
3738
h(Other),
3839
h(Events, { key: 'foo' }),
3940
h(NativeTypes, { key: new Date() }),
40-
h(Router, { key: [] })
41+
h(Router, { key: [] }),
42+
h(VuexObject)
4143
])
4244
}
4345
}).$mount('#app')

‎shells/dev/target/store.js

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,16 @@ export default new Vuex.Store({
99
date: new Date(),
1010
set: new Set(),
1111
map: new Map(),
12-
sym: Symbol('test')
12+
sym: Symbol('test'),
13+
object: {
14+
name: 'I am Object',
15+
number: 0,
16+
children: [
17+
{
18+
number: 0
19+
}
20+
]
21+
}
1322
},
1423
mutations: {
1524
INCREMENT: state => state.count++,

‎src/backend/index.js

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { highlight, unHighlight, getInstanceOrVnodeRect } from './highlighter'
55
import { initVuexBackend } from './vuex'
66
import { initEventsBackend } from './events'
77
import { initRouterBackend } from './router'
8+
import { initPerfBackend } from './perf'
89
import { findRelatedComponent } from './utils'
910
import { stringify, classify, camelize, set, parse, getComponentName } from '../util'
1011
import ComponentSelector from './component-selector'
@@ -149,7 +150,12 @@ function connect (Vue) {
149150
'background:transparent'
150151
)
151152

152-
setTimeout(scan, 0)
153+
setTimeout(() => {
154+
scan()
155+
156+
// perf
157+
initPerfBackend(Vue, bridge, instanceMap)
158+
}, 0)
153159
}
154160

155161
export function findInstanceOrVnode (id) {

0 commit comments

Comments
 (0)