cypress init

.eslintrc.js

@@ -61,4 +61,14 @@ module.exports = {
     'no-undef': 'off',
     'no-unused-vars': 'off',
   },
+  overrides: [
+    {
+      files: ['**/*.spec.{js,ts}'],
+      extends: [
+        // Add Cypress-specific lint rules, globals and Cypress plugin
+        // See https://github.com/cypress-io/eslint-plugin-cypress#rules
+        'plugin:cypress/recommended',
+      ],
+    },
+  ],
 }

cypress.json

+{
+    "viewportWidth": 1080,
+    "viewportHeight": 920
+  }
\ No newline at end of file

cypress/fixtures/example.json

+{
+  "name": "test name",
+  "email": "test@mail.com",
+  "body": "test body"
+}

cypress/integration/overview/overview.spec.js

+/// <reference types="cypress" />
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false
+})
+describe('Testing endpoints, clusters and attributes', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/?restPort=9070#/')
+  })
+
+  it('creating 3 new endpoints', () => {
+    // adding three new endpoints
+    cy.get('button').contains('Add New Endpoint').click()
+    cy.wait(1000)
+    cy.get(
+      '.q-form > .q-select > .q-field__inner > .q-field__control > .q-field__control-container'
+    ).click()
+    cy.wait(1000)
+    cy.get('div').contains('Billing Unit (0x0203)').click()
+    cy.wait(1000)
+    cy.get('button').contains('Create').click()
+    cy.wait(1000)
+
+    cy.get('button').contains('Add New Endpoint').click()
+    cy.wait(1000)
+    cy.get(
+      '.q-form > .q-select > .q-field__inner > .q-field__control > .q-field__control-container'
+    ).click()
+    cy.wait(1000)
+    cy.get('div').contains('CBA BACnet Tunneled Device (0x000A)').click()
+    cy.wait(1000)
+    cy.get('button').contains('Create').click()
+    cy.wait(1000)
+
+    cy.get('button').contains('Add New Endpoint').click()
+    cy.wait(1000)
+    cy.get(
+      '.q-form > .q-select > .q-field__inner > .q-field__control > .q-field__control-container'
+    ).click()
+    cy.wait(1000)
+    cy.get('div').contains('CBA Config Tool (0x0005)').click()
+    cy.wait(1000)
+    cy.get('button').contains('Create').click()
+    cy.wait(1000)
+  })
+  it('check if three added endpoints exist', () => {
+    cy.get('aside')
+      .children()
+      .should('contain', 'Billing Unit (0x0203)')
+      .and('contain', 'CBA BACnet Tunneled Device (0x000A)')
+      .and('contain', 'CBA Config Tool (0x0005)')
+  })
+  it('checking clusters of one of the endpoints', () => {
+    //click on one of the endpoints
+    cy.get('aside').contains('Billing Unit (0x0203)').click()
+
+    //check if the selected endpont has General cluster and click on it
+    cy.get('.q-page-container > div').children().should('contain', 'General')
+    cy.get('div').contains('General').click()
+  })
+  it('check attributes and commands', () => {
+    cy.get('aside').contains('Billing Unit (0x0203)').click()
+    cy.get('div').contains('General').click()
+    //check if configure button works fine
+    cy.get(
+      '#General > .q-expansion-item__container > .q-expansion-item__content > :nth-child(1) > .q-table__container > .q-table__middle > .q-table > tbody > :nth-child(1) > :nth-child(7) > .q-btn > .q-btn__wrapper > .q-btn__content > .material-icons'
+    ).click()
+    cy.wait(1000)
+
+    //check if attributes are loaded
+    cy.get('tbody').children().its('length').should('be.gte', 1)
+    cy.get('a[href*="#"]').click()
+    cy.wait(1000)
+    cy.get('.q-page-container > div').children().should('contain', 'Financial')
+
+    cy.get('div').contains('Financial').click()
+    cy.get(
+      '#Financial > .q-expansion-item__container > .q-expansion-item__content > :nth-child(1) > .q-table__container > .q-table__middle > .q-table > tbody > .text-weight-bolder > :nth-child(7)'
+    ).click()
+    cy.wait(1000)
+    cy.get('tbody').children().its('length').should('be.gte', 1)
+    cy.get('a[href*="#"]').click()
+  })
+})

cypress/integration/preview button/preview_button.spec.js

+/// <reference types="cypress" />
+Cypress.on('uncaught:exception', (err, runnable) => {
+  // returning false here prevents Cypress from
+  // failing the test
+  return false
+})
+describe('Check preview buttton', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/?restPort=9070#/')
+  })
+
+  it('adding a new endpoint', () => {
+    cy.get('button').contains('Add New Endpoint').click()
+    cy.wait(1000)
+    cy.get(
+      '.q-form > .q-select > .q-field__inner > .q-field__control > .q-field__control-container'
+    ).click()
+    cy.wait(1000)
+    cy.get('div').contains('Billing Unit (0x0203)').click()
+    cy.wait(1000)
+    cy.get('button').contains('Create').click()
+    cy.wait(1000)
+  })
+  it('Checking preview button', () => {
+    cy.get('button').contains('Preview').click()
+    cy.wait(1000)
+    cy.get('.q-pa-md > .q-btn > .q-btn__wrapper')
+      .contains('Select File')
+      .click()
+    cy.get('.q-list > div').should('contain', 'sdk-extension.out')
+  })
+})

cypress/plugins/index.js

+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

cypress/support/commands.js

+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/index.js

+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

package.json

@@ -25,6 +25,7 @@
     "test:unit:coverage": "jest --coverage",
     "test:unit:watch": "jest --watch",
     "test:unit:watchAll": "jest --watchAll",
+    "test:e2e": "npm run zap-devserver | cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress open\"",
     "postinstall": "electron-builder install-app-deps && husky install && npm rebuild canvas --update-binary",
     "wpzap": "npm run build-spa && npm run build-backend && npm run dist-mac",
     "zap": "node src-script/zap-start.js --logToStdout --gen ./test/gen-template/zigbee/gen-templates.json",
@@ -121,6 +122,7 @@
     "@quasar/app": "^2.2.10",
     "@quasar/extras": "^1.10.8",
     "@quasar/quasar-app-extension-testing": "^1.0.3",
+    "@quasar/quasar-app-extension-testing-e2e-cypress": "^4.0.0-beta.9",
     "@quasar/quasar-app-extension-testing-unit-jest": "^2.2.2",
     "@types/bytebuffer": "^5.0.42",
     "@types/sqlite3": "^3.1.7",

quasar.extensions.json

 {
   "@quasar/testing": {
-    "harnesses": ["unit-jest"]
+    "harnesses": [
+      "unit-jest"
+    ]
   },
   "@quasar/testing-unit-jest": {
     "babel": "babelrc",
-    "options": ["scripts"]
+    "options": [
+      "scripts"
+    ]
+  },
+  "@quasar/testing-e2e-cypress": {
+    "options": [
+      "scripts",
+      "typescript"
+    ]
   }
-}
+}
\ No newline at end of file

src/components/ZclAttributeManager.vue

@@ -20,7 +20,7 @@ limitations under the License.
   add action to edit button
 -->
 <template>
-  <div v-show="relevantAttributeData.length > 0" >
+  <div v-show="relevantAttributeData.length > 0">
     <q-table
       class="my-sticky-header-table"
       :data.sync="relevantAttributeData"
@@ -33,11 +33,11 @@ limitations under the License.
       :pagination.sync="pagination"
       :sort-method="customAttributeSort"
       data-cy="Attributes"
-      style="height:calc(100vh - 210px);overflow:hidden;"
+      style="height: calc(100vh - 210px); overflow: hidden"
     >
-      <template v-slot:body="props" >
+      <template v-slot:body="props">
         <q-tr :props="props">
-        <q-td key="status" :props="props" class="q-px-none">
+          <q-td key="status" :props="props" class="q-px-none">
             <q-icon
               v-show="displayAttrWarning(props.row)"
               name="warning"
@@ -51,18 +51,24 @@ limitations under the License.
               content-class="bg-white text-black"
               style="overflow-wrap: break-word; padding: 0px"
             >
-            <template v-slot="scope">
-              <div class="row items-center" items-center style="padding: 0px" @click.stop="scope.cancel">
-                <q-icon
-                  name="warning"
-                  class="text-amber q-mr-sm"
-                  style="font-size: 1.5rem"
-                ></q-icon>
-                <div class="vertical-middle text-subtitle2">
-                This attribute is mandatory for the cluster and device type configuration you have enabled
+              <template v-slot="scope">
+                <div
+                  class="row items-center"
+                  items-center
+                  style="padding: 0px"
+                  @click.stop="scope.cancel"
+                >
+                  <q-icon
+                    name="warning"
+                    class="text-amber q-mr-sm"
+                    style="font-size: 1.5rem"
+                  ></q-icon>
+                  <div class="vertical-middle text-subtitle2">
+                    This attribute is mandatory for the cluster and device type
+                    configuration you have enabled
+                  </div>
                 </div>
-              </div>
-            </template>
+              </template>
             </q-popup-edit>
           </q-td>
           <q-td key="included" :props="props" auto-width>
@@ -203,14 +209,18 @@ import EditableAttributeMixin from '../util/editable-attributes-mixin'
 export default {
   name: 'ZclAttributeManager',
   mixins: [EditableAttributeMixin],
-  destroyed() {
-  },
+  destroyed() {},
   methods: {
     isAttributeRequired(attribute) {
       return this.requiredAttributes.includes(attribute.id)
     },
     displayAttrWarning(row) {
-      return this.isAttributeRequired(row) && !this.selection.includes(this.hashAttributeIdClusterId(row.id, this.selectedCluster.id))
+      return (
+        this.isAttributeRequired(row) &&
+        !this.selection.includes(
+          this.hashAttributeIdClusterId(row.id, this.selectedCluster.id)
+        )
+      )
     },
     customAttributeSort(rows, sortBy, descending) {
       const data = [...rows]
@@ -299,19 +309,19 @@ export default {
 
   computed: {
     requiredDeviceTypeAttributes() {
-        return this.$store.state.zap.attributeView.requiredAttributes
+      return this.$store.state.zap.attributeView.requiredAttributes
     },
     requiredAttributes() {
-        return this.relevantAttributeData
-          .filter(
-            (attribute) =>
-              !attribute.isOptional ||
-              this.requiredDeviceTypeAttributes.includes(attribute.id)
-          )
-          .map((attribute) => attribute.id)
+      return this.relevantAttributeData
+        .filter(
+          (attribute) =>
+            !attribute.isOptional ||
+            this.requiredDeviceTypeAttributes.includes(attribute.id)
+        )
+        .map((attribute) => attribute.id)
     },
     storageOptions() {
-        return Object.values(DbEnum.storageOption)
+      return Object.values(DbEnum.storageOption)
     },
   },
   data() {
@@ -341,7 +351,7 @@ export default {
           field: 'attrID',
           sortable: true,
           style: 'max-width: 90px',
-          headerStyle: 'max-width: 90px'
+          headerStyle: 'max-width: 90px',
         },
         {
           name: 'attrName',
@@ -404,8 +414,8 @@ export default {
           align: 'left',
           label: 'Default',
           field: 'default',
-          style: 'min-width: 80px',
-          headerStyle: 'min-width: 80px'
+          style: 'min-width: 180px',
+          headerStyle: 'min-width: 180px',
         },
       ],
     }