feat(test): cypress tests refactor

Separate plugins cypress tests and shell cypress tests. add grep.

n/a

.github/workflows/pull-request.yml

@@ -70,6 +70,7 @@ jobs:
           browser: chrome
           record: false
           config-file: cypress.config.ts
+          env: grepUntagged=true
 
       - name: Upload cypress screenshots
         uses: actions/upload-artifact@v3

cypress.config.ts

@@ -12,6 +12,7 @@ export default defineConfig({
       }
 
       configureC8yPlugin(on, config);
+
       return config;
     },
     baseUrl: 'http://localhost:4200',

cypress/README.md

@@ -1,3 +1,3 @@
 # Cypress
 
-You can use `npm run cypress:ci` to execute cypress tests against a previously built version (`npm run build`) of this package located in the `dist` folder.
+You can use `npm run cypress:ci:plugins` to execute cypress tests against a previously built version (`npm run build`) of this package located in the `dist` folder.

cypress/e2e/datapoints-graph/datapoints-graph-1020.cy.ts

@@ -0,0 +1,35 @@
+describe('datapoints-graph', { tags: '@1020' }, () => {
+  beforeEach(() => {
+    cy.intercept(
+      '/inventory/managedObjects?fragmentType=c8y_Dashboard!name!home-cockpit1&pageSize=1',
+      { fixture: 'widgets/datapoints-graph/cockpit-dashboard.json' }
+    ).as('cockpitDashboardConfig');
+    cy.getAuth('admin').login();
+    // TODO: make it configurable
+    cy.visit(
+      '/apps/cockpit/index.html?remotes=%7B"sag-pkg-community-plugins"%3A%5B"ExampleWidgetPluginModule"%2C"DatapointsGraphWidgetModule"%5D%7D#/'
+    );
+    // cy.visit('/apps/sag-pkg-community-plugins/#/');
+    cy.wait('@cockpitDashboardConfig');
+  });
+
+  it('view component should be present', () => {
+    cy.get('c8y-datapoints-graph-widget-view').should('exist');
+    cy.get('c8y-charts').should('exist');
+  });
+
+  it('config component should be present', () => {
+    cy.get('[data-cy="c8y-widget-dashboard--edit-widgets"]')
+      .should('be.visible')
+      .click();
+    cy.get(
+      'c8y-dashboard-child .header-actions button[data-cy="c8y-dashboard-child--settings"]'
+    ).click({ force: true });
+    cy.get(
+      '.dropdown-menu button[data-cy="widgets-dashboard--Edit-widget"]'
+    ).click({ force: true });
+    cy.get('c8y-datapoints-graph-widget-config button.c8y-realtime')
+      .find('.c8y-pulse.active')
+      .should('exist');
+  });
+});

cypress/e2e/datapoints-graph/datapoints-graph.cy.ts

@@ -1,15 +1,16 @@
 describe('datapoints-graph', () => {
   beforeEach(() => {
+    cy.interceptLoginOptions();
+    cy.interceptCurrentTenant();
+    cy.interceptCurrentUser();
+    cy.interceptAppManifest();
+
     cy.intercept(
       '/inventory/managedObjects?fragmentType=c8y_Dashboard!name!home-cockpit1&pageSize=1',
       { fixture: 'widgets/datapoints-graph/cockpit-dashboard.json' }
     ).as('cockpitDashboardConfig');
-    cy.getAuth('admin').login();
-    // TODO: make it configurable
-    cy.visit(
-      '/apps/cockpit/index.html?remotes=%7B"sag-pkg-community-plugins"%3A%5B"ExampleWidgetPluginModule"%2C"DatapointsGraphWidgetModule"%5D%7D#/'
-    );
-    // cy.visit('/apps/sag-pkg-community-plugins/#/');
+
+    cy.visit('/apps/sag-pkg-community-plugins/#/');
     cy.wait('@cockpitDashboardConfig');
   });
 
@@ -24,10 +25,10 @@ describe('datapoints-graph', () => {
       .click();
     cy.get(
       'c8y-dashboard-child .header-actions button[data-cy="c8y-dashboard-child--settings"]'
-    ).click({ force: true });
+    ).click();
     cy.get(
       '.dropdown-menu button[data-cy="widgets-dashboard--Edit-widget"]'
-    ).click({ force: true });
+    ).click();
     cy.get('c8y-datapoints-graph-widget-config button.c8y-realtime')
       .find('.c8y-pulse.active')
       .should('exist');

cypress/support/e2e.ts

@@ -21,9 +21,13 @@ import './commands';
 
 import 'cumulocity-cypress/lib/commands';
 
+import registerCypressGrep from '@cypress/grep/src/support';
+
 import { C8yPactID } from 'cumulocity-cypress-ctrl';
 const { _ } = Cypress;
 
+registerCypressGrep();
+
 before(() => {
   Cypress.session.clearAllSavedSessions();
 
@@ -36,11 +40,11 @@ before(() => {
     });
     const runner = Cypress.mocha.getRunner();
     runner.on('suite', (suite) => c8yctrl(getSuiteTitles(suite)));
-  }
 
-  cy.then(() => {
-    cy.getAuth('admin').getTenantId();
-  });
+    cy.then(() => {
+      cy.getAuth('admin').getTenantId();
+    });
+  }
 });
 
 beforeEach(() => {

cypress/tsconfig.json

@@ -3,7 +3,7 @@
     "moduleResolution": "node",
     "target": "es6",
     "lib": ["es6", "dom"],
-    "types": ["cypress","node"]
+    "types": ["cypress", "node", "@cypress/grep"]
   },
   "include": ["**/*.ts"]
 }

package.json

@@ -9,9 +9,10 @@
     "watch": "ng build --watch --configuration development",
     "test": "jest",
     "commit": "commit",
-    "cypress:ci": "start-server-and-test http-server http://localhost:4200/apps/sag-pkg-community-plugins/index.html cypress:headless",
-    "cypress:ci:shell": "start-server-and-test c8yctrl-server-proxy http://localhost:4200/apps/sag-pkg-community-plugins/index.html cypress:headless",
-    "cypress:headless": "cypress run",
+    "cypress:ci:plugins": "start-server-and-test http-server http://localhost:4200/apps/sag-pkg-community-plugins/index.html cypress:headless:plugins",
+    "cypress:headless:plugins": "cypress run --env grepUntagged=true",
+    "cypress:headless:shell:recording": "cypress run --env grepTags=@1020 C8Y_CTRL_MODE=recording",
+    "cypress:headless:shell:mocking": "cypress run --env grepTags=@1020 C8Y_CTRL_MODE=mocking",
     "cypress:open": "cypress open",
     "deploy": "c8ycli deploy",
     "http-server": "http-server -p 4200 ./dist",
@@ -102,6 +103,7 @@
     "rimraf": "^4.1.2",
     "semantic-release": "^20.1.0",
     "start-server-and-test": "^1.15.3",
-    "typescript": "5.3.2"
+    "typescript": "5.3.2",
+    "@cypress/grep": "^4.0.2"
   }
 }