test: vuex edit (vuejs#728)

hootlex · Akryum · commit fa185d8be88f · 2018-08-05T09:28:52.000+02:00
* add vuex object elements to dev

* vuex-edit tests
diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
@@ -1,6 +1,6 @@
 import { suite } from '../utils/suite'
 
-const baseInstanceCount = 8
+const baseInstanceCount = 9
 
 suite('components tab', () => {
   it('should detect instances inside shadow DOM', () => {
diff --git a/cypress/integration/vuex-edit.js b/cypress/integration/vuex-edit.js
@@ -1,7 +1,7 @@
 import { suite } from '../utils/suite'
 
 suite('vuex edit', () => {
-  it('should edit state', () => {
+  it('should edit state using the decrease button', () => {
     cy.get('.vuex-tab').click()
     // using the decrease button
     cy.get('.data-field').eq(0)
@@ -12,7 +12,9 @@ suite('vuex edit', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('-2')
     })
+  })
 
+  it('should edit state using the increase button', () => {
     // using the increase button
     cy.get('.data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(2)
@@ -22,7 +24,9 @@ suite('vuex edit', () => {
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('0')
     })
+  })
 
+  it('should edit state using the edit input', () => {
     // using the edit input
     cy.get('.data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(0).click({ force: true })
@@ -33,7 +37,7 @@ suite('vuex edit', () => {
       get('#counter p').contains('12')
     })
 
-    // change count back to 1
+    // change count back to 0
     cy.get('.data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(0).click({ force: true })
     cy.get('.edit-input').type('0')
@@ -43,4 +47,36 @@ suite('vuex edit', () => {
       get('#counter p').contains('0')
     })
   })
+
+  it('should edit state nested field', () => {
+    // using the decrease button
+    cy.get('.data-field > .children > .data-field').eq(2)
+      .find('.actions .vue-ui-button').eq(1)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#vuex-object pre').contains('-2')
+    })
+
+    // using the increase button
+    cy.get('.data-field > .children > .data-field').eq(2)
+      .find('.actions .vue-ui-button').eq(2)
+      .click({ force: true })
+      .click({ force: true })
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#vuex-object pre').contains('0')
+    })
+
+    // using the input
+    cy.get('.data-field > .children > .data-field').eq(2)
+      .find('.actions .vue-ui-button').eq(0).click({ force: true })
+    cy.get('.edit-input').eq(1).type('12')
+    cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
+
+    cy.get('#target').iframe().then(({ get }) => {
+      get('#vuex-object pre').contains('12')
+    })
+  })
 })
diff --git a/shells/dev/target/VuexObject.vue b/shells/dev/target/VuexObject.vue
@@ -0,0 +1,19 @@
+<template>
+  <div id="vuex-object">
+    <h2>Vuex Object</h2>
+    <pre>{{ object }}</pre>
+  </div>
+</template>
+
+<script>
+  import {mapState} from 'vuex'
+  export default {
+    computed: {
+      ...mapState(['object'])
+    },
+  }
+</script>
+
+<style scoped>
+
+</style>
diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js
@@ -3,6 +3,7 @@ import store from './store'
 import Target from './Target.vue'
 import Other from './Other.vue'
 import Counter from './Counter.vue'
+import VuexObject from './VuexObject.vue'
 import NativeTypes from './NativeTypes.vue'
 import Events from './Events.vue'
 import MyClass from './MyClass.js'
@@ -27,11 +28,12 @@ new Vue({
   render (h) {
     return h('div', null, [
       h(Counter),
-      h(Target, { props: { msg: 'hi', ins: new MyClass() }}),
+      h(Target, { props: { msg: 'hi', ins: new MyClass() } }),
       h(Other),
       h(Events, { key: 'foo' }),
       h(NativeTypes, { key: new Date() }),
-      h(Router, { key: [] })
+      h(Router, { key: [] }),
+      h(VuexObject)
     ])
   },
   data: {
diff --git a/shells/dev/target/store.js b/shells/dev/target/store.js
@@ -9,7 +9,16 @@ export default new Vuex.Store({
     date: new Date(),
     set: new Set(),
     map: new Map(),
-    sym: Symbol('test')
+    sym: Symbol('test'),
+    object: {
+      name: 'I am Object',
+      number: 0,
+      children: [
+        {
+          number: 0
+        }
+      ]
+    }
   },
   mutations: {
     INCREMENT: state => state.count++,
