Add cypress tests for Vue Tour (#1273)

cypress/e2e/tour/tour.cy.js

+describe('Testing Vue Tour', () => {
+  it('Skip the tutorial', () => {
+    cy.fixture('baseurl').then((url) => {
+      cy.visit(url.baseurl)
+    })
+    cy.dataCy('btn-tutorial').click().wait(250)
+    cy.dataCy('tour-window').should('be.visible')
+    cy.contains('Skip').click().wait(500)
+    cy.dataCy('tour-window').should('not.be.visible')
+  })
+  it('Complete a full tutorial - delete tutorial endpoint', () => {
+    cy.fixture('baseurl').then((url) => {
+      cy.visit(url.baseurl)
+    })
+    cy.dataCy('btn-tutorial').click().wait(250)
+    cy.dataCy('tour-window').should('be.visible')
+    for (let i = 0; i < 17; i++) {
+      cy.contains('Next').click().wait(500)
+    }
+    cy.contains('Finish').click().wait(250)
+    cy.dataCy('delete-end-tour-endpoint').click()
+    cy.dataCy('tour-window').should('not.be.visible')
+    cy.fixture('data').then((data) => {
+      cy.get('aside').children().contains(data.endpoint1).should('not.exist')
+    })
+  })
+  it('Complete a full tutorial - keep tutorial endpoint', () => {
+    cy.fixture('baseurl').then((url) => {
+      cy.visit(url.baseurl)
+    })
+    cy.dataCy('btn-tutorial').click().wait(250)
+    cy.dataCy('tour-window').should('be.visible')
+    for (let i = 0; i < 17; i++) {
+      cy.contains('Next').click().wait(500)
+    }
+    cy.contains('Finish').click().wait(250)
+    cy.dataCy('cancel-end-tour-endpoint').click()
+    cy.dataCy('tour-window').should('not.be.visible')
+  })
+})

cypress/support/commands.js

@@ -65,3 +65,7 @@ Cypress.Commands.add('setZclProperties', () => {
     }*/
   })
 })
+
+Cypress.Commands.add('dataCy', (selector) => {
+  cy.get(`[data-cy=${selector}]`)
+})

src/components/ZCLToolbar.vue

@@ -45,7 +45,9 @@
       no-caps
       class="cursor-pointer"
       @click="saveChanges"
-      v-if="this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty"
+      v-if="
+        this.$store.state.zap.saveButtonVisible && this.$store.state.zap.isDirty
+      "
     >
       <div class="text-center">
         <q-icon name="o_save" />
@@ -143,6 +145,7 @@
       color="grey"
       class="cursor-pointer"
       @click="startTour"
+      data-cy="btn-tutorial"
     >
       <div class="text-center">
         <q-icon name="o_psychology_alt" />
@@ -265,9 +268,7 @@ export default {
       }
     },
     saveChanges() {
-      window[rendApi.GLOBAL_SYMBOL_EXECUTE] (
-        rendApi.id.save
-      )
+      window[rendApi.GLOBAL_SYMBOL_EXECUTE](rendApi.id.save)
     },
     // This function will start vue tour steps
     startTour,

src/tutorials/ZclTour.vue

@@ -19,6 +19,7 @@ limitations under the License.
       ref="zcl-tour"
       :steps="tutorialSteps"
       @onTourEnd="disableTutorial"
+      data-cy="tour-window"
     />
     <q-dialog
       v-model="deletingTutorialEndpoint"
@@ -36,6 +37,7 @@ limitations under the License.
             v-close-popup
             class="col"
             @click="setDefaultTourState"
+            data-cy="cancel-end-tour-endpoint"
           />
           <q-btn
             :label="'Delete'"
@@ -43,6 +45,7 @@ limitations under the License.
             class="col"
             @click="deleteEndpoint"
             id="delete_last_endpoint"
+            data-cy="delete-end-tour-endpoint"
           />
         </q-card-actions>
       </q-card>