From b5cf8233b85e0f646cf2541dfd550bf76862e177 Mon Sep 17 00:00:00 2001
From: Guillaume Chau <alphadelta.fg@gmail.com>
Date: Sun, 16 Sep 2018 19:03:21 +0200
Subject: [PATCH] test(e2e): more stable tests

---
 cypress/integration/component-data-edit.js | 25 +++++++++++++++-------
 cypress/integration/components-tab.js      |  4 +---
 cypress/integration/vuex-edit.js           | 24 +++++++++++++++++++--
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/cypress/integration/component-data-edit.js b/cypress/integration/component-data-edit.js
index 326258e33..743d19b02 100644
--- a/cypress/integration/component-data-edit.js
+++ b/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')
     })
diff --git a/cypress/integration/components-tab.js b/cypress/integration/components-tab.js
index 0e7662658..27e17fb96 100644
--- a/cypress/integration/components-tab.js
+++ b/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')
diff --git a/cypress/integration/vuex-edit.js b/cypress/integration/vuex-edit.js
index 5f3fd7f06..3f4b3d4fb 100644
--- a/cypress/integration/vuex-edit.js
+++ b/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')
     })