adding cypress test

.gitignore

@@ -43,3 +43,6 @@ dynamic-mapping-ui/.env
 dist
 node_modules
 .angular
+dynamic-mapping-ui/cypress.env.js
+dynamic-mapping-ui/cypress/videos
+dynamic-mapping-ui/cypress/screenshots

dynamic-mapping-ui/cypress.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+   baseUrl: 'http://localhost:4200',
+  },
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  video:true,
+  videoCompression: 0,
+});

dynamic-mapping-ui/cypress.env.json

@@ -0,0 +1,7 @@
+{
+    "C8Y_TENANT_NOT": "t233505140",
+    "C8Y_TENANT": "t306817378",
+    "C8Y_USERNAME": "[email protected]",
+    "C8Y_USERNAME_NOT": "christof.strack.gmx",
+    "C8Y_PASSWORD": "#Manage250!DFC"
+  }

dynamic-mapping-ui/cypress/e2e/configuration.cy.ts

@@ -0,0 +1,87 @@
+/* eslint-disable no-useless-escape */
+describe('Specs for connector configuration', () => {
+  beforeEach(() => {
+
+  });
+
+  before(function () {
+    // login
+    cy.getAuth().login();
+    cy.hideCookieBanner();
+    cy.disableGainsight();
+    cy.fixture('mqttConnectionInput').then((data) => {
+      this.mqttConnectionInput = data;
+    });
+
+    // Setup interceptors
+    cy.intercept(
+      'POST',
+      '/service/dynamic-mapping-service/configuration/connector/instance'
+    ).as('postMqttConnection');
+    cy.intercept(
+      'GET',
+      '/service/dynamic-mapping-service/configuration/connector/specifications'
+    ).as('getConnectorSpecifications');
+  });
+
+  it.only('Add connector', function () {
+    cy.visitAndWaitForSelector(
+        '/apps/administration/index.html?remotes=%7B%22sag-ps-pkg-dynamic-mapping%22%3A%5B%22DynamicMappingModule%22%5D%7D',
+        'en',
+        '#navigator'
+      );
+      cy.get('[data-cy="Settings"]').should('exist').click();
+      cy.get('[data-cy="Dynamic Mapping"]')
+        .should('exist')
+        .should('be.visible')
+        .click();
+    // navigate to configuration
+    cy.get('a[title="Configuration"]').as('configuration').should('exist');
+    cy.get('@configuration').click();
+
+    // click button 'Add configuration'
+    cy.get('#addConfiguration').should('exist').click();
+    // cy.wait('@getConnectorSpecifications');
+    // cy.get('#connectorType').should('exist').should('be.visible');
+    // cy.get('#connectorType').should('exist').should('be.visible').select('MQTT');
+    // // fill in form
+    // cy.get('#name').type(this.mqttConnectionInput.name);
+    // cy.get('#mqttHost').type(this.mqttConnectionInput.mqttHost);
+    // cy.get('#mqttPort').type(this.mqttConnectionInput.mqttPort);
+    // cy.get('#user').type(this.mqttConnectionInput.user);
+    // cy.get('#password').type(this.mqttConnectionInput.password);
+    // cy.get('#clientId').type(this.mqttConnectionInput.clientId);
+
+    // // save
+    // // cy.get('.modal-footer > .btn-primary').click();
+    // cy.get('button[title="Save"]').click();
+    // // record post request of new connector
+    // cy.wait('@postMqttConnection').then((interception) => {
+    //   const requestData = interception.request.body;
+    //   cy.writeFile(
+    //     'cypress/fixtures/mqttConnectionPostRequest.json',
+    //     requestData
+    //   );
+    // });
+    // cy.screenshot();
+  });
+
+  it('Delete connector', function () {
+    // navigate to configuration
+    cy.get('a[title="Configuration"]').as('configuration').should('exist');
+    cy.get('@configuration').click();
+
+    // read ident from previously added connector
+    cy.fixture('mqttConnectionPostRequest').then((data) => {
+      this.mqttConnectionPostRequest = data;
+      // cy.get(`#connector_${this.mqttConnectionPostRequest.ident} btn[title="Action"]`)
+      // identify crespective row with connector
+      cy.get(`#connector_${this.mqttConnectionPostRequest.ident}`)
+        .click();
+      cy.get('.dropdown #delete')
+        .click({force: true});
+      cy.get('[data-cy="c8y-confirm-modal--ok"]')
+        .click();
+    });
+  });
+});

dynamic-mapping-ui/cypress/fixtures/mqttConnectionInput.json

@@ -0,0 +1,8 @@
+{
+  "name": "Cypress MQTT",
+  "mqttHost": "dummyHost",
+  "mqttPort": 8883,
+  "user": "test",
+  "password": "testPassword",
+  "clientId": "cypressId"
+}

dynamic-mapping-ui/cypress/support/commands.ts

@@ -0,0 +1,45 @@
+/* eslint-disable spaced-comment */
+/// <reference types="cypress" />
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+Cypress.Commands.add('getByData', (selector) => {
+    return cy.get(`[data-cy=${selector}]`);
+  });
+
+// ***********************************************
+// This example commands.ts 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) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

dynamic-mapping-ui/cypress/support/e2e.ts

@@ -0,0 +1,24 @@
+// ***********************************************************
+// This example support/e2e.ts 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 'cumulocity-cypress/lib/commands/';
+import './commands';
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+before(() => {
+  });

dynamic-mapping-ui/cypress/support/index.ts

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/no-unused-vars */
+/* eslint-disable @typescript-eslint/no-namespace */
+/* eslint-disable spaced-comment */
+/// <reference types="cypress" />
+
+declare global {
+  namespace Cypress {
+    interface Chainable<Subject = any> {
+        getByData(value: string): Chainable<any>
+    }
+  }
+}
+export {};

dynamic-mapping-ui/cypress/tsconfig.json

@@ -0,0 +1,14 @@
+{
+    "extends": "../tsconfig.json",
+    "include": [
+      "../node_modules/cypress",
+      "**/*spec.ts"
+    ],
+    "compilerOptions": {
+      "noEmit": false,
+      "sourceMap": false,
+      "target": "ES2022",
+      "lib": ["ES2022", "dom"],
+      "types": ["cypress"]
+    }
+  }