test(e2e): more stable tests

Author: Guillaume Chau

cypress/integration/component-data-edit.js

@@ -4,8 +4,14 @@ suite('component data edit', () => {
   it('should edit data using the decrease button', () => {
     // select Instance
     cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
-    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({ force: true }).click({ force: true })
-    cy.get('.data-field').eq(7).should('contain', '-1', { timeout: 5000 })
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({ force: true })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('0')
+    })
+    cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(1).click({ force: true })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().contains('-1')
+    })
 
     // expect DOM element to be updated
     cy.get('#target').iframe().then(({ get }) => {
@@ -16,10 +22,11 @@ suite('component data edit', () => {
   it('should edit data using the increase button', () => {
     cy.get('.instance:nth-child(1) .instance:nth-child(2)').eq(0).click()
     cy.get('.data-field').eq(7).find('.actions .vue-ui-button').eq(2).click({ force: true })
-    cy.get('.data-field').eq(7).should('contain', '0', { timeout: 5000 })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('0')
+    })
 
     // expect DOM element to be updated
-    cy.wait(200)
     cy.get('#target').iframe().then(({ get }) => {
       get('#target div').eq(0).contains('0')
     })
@@ -32,10 +39,11 @@ suite('component data edit', () => {
     cy.get('.edit-input').type('12')
     cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
 
-    cy.get('.data-field').eq(7).should('contain', '12', { timeout: 5000 })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('0').parent().get('.value').contains('12')
+    })
 
     // expect DOM element to be updated
-    cy.wait(200)
     cy.get('#target').iframe().then(({ get }) => {
       get('#target div').eq(0).contains('12')
     })
@@ -49,10 +57,11 @@ suite('component data edit', () => {
     cy.get('.edit-overlay > .actions > :nth-child(2) > .content > .vue-ui-icon').click()
 
     cy.get('.data-field').eq(6).find('.children .data-field').should('have.length', '3', { timeout: 5000 })
-    cy.get('.data-field').eq(6).find('.children .data-field').eq(2).should('contain', 55, { timeout: 5000 })
+    cy.get('.component-state-inspector').within(() => {
+      cy.get('.key').contains('2').parent().get('.value').contains('55')
+    })
 
     // expect DOM element to be updated
-    cy.wait(200)
     cy.get('#target').iframe().then(({ get }) => {
       get('#target div').eq(4).contains('55')
     })

cypress/integration/components-tab.js

@@ -10,9 +10,7 @@ suite('components tab', () => {
   })
 
   it('should select instance', () => {
-    cy.get('.instance .self').eq(0).click().then(el => {
-      expect(el).to.have.class('selected')
-    })
+    cy.get('.instance .self').eq(0).click().should('have.class', 'selected')
     cy.get('.tree').should('be.visible')
     cy.get('.action-header .title').contains('Root')
     cy.get('.data-field').contains('$route')

cypress/integration/vuex-edit.js

@@ -9,9 +9,19 @@ suite('vuex edit', () => {
     cy.get('.state .data-field').eq(0)
       .find('.actions .vue-ui-button').eq(1)
       .click({ force: true })
+    
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('-1')
+    })
+      
+    cy.get('.state .data-field').eq(0)
+      .find('.actions .vue-ui-button').eq(1)
       .click({ force: true })
 
-    cy.wait(200)
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('-2')
+    })
+
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('-2')
     })
@@ -22,9 +32,19 @@ suite('vuex edit', () => {
     cy.get('.state .data-field').eq(0).click()
       .find('.actions .vue-ui-button').eq(2)
       .click({ force: true })
+
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('-1')
+    })
+
+    cy.get('.state .data-field').eq(0).click()
+      .find('.actions .vue-ui-button').eq(2)
       .click({ force: true })
 
-    cy.wait(200)
+    cy.get('.vuex-state-inspector').within(() => {
+      cy.get('.key').contains('count').parent().contains('0')
+    })
+
     cy.get('#target').iframe().then(({ get }) => {
       get('#counter p').contains('0')
     })