diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js index 3e7f98436..5143637f2 100644 --- 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 index a882292a3..0c79cc725 100644 --- 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 new file mode 100644 index 000000000..1fef09937 --- /dev/null +++ b/shells/dev/target/VuexObject.vue @@ -0,0 +1,19 @@ + + + + + \ No newline at end of file diff --git a/shells/dev/target/index.js b/shells/dev/target/index.js index bdacc6454..704eb84f1 100644 --- 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 index bdde81967..f4eab0516 100644 --- 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++,