first cypress web test

Makefile

@@ -12,6 +12,10 @@ test: test-frontend
 test-frontend: lint-frontend
 	cd web && npm run test:unit
 
+.PHONY: test-e2e
+test-e2e:
+	cd web && npm install && npm run test:e2e
+
 .PHONY: install-frontend
 install-frontend:
 	cd web && npm install

web/cypress.config.ts

@@ -0,0 +1,136 @@
+import { defineConfig } from 'cypress';
+import registerCypressGrep from '@cypress/grep/src/plugin';
+const fs = require('fs');
+const path = require('path');
+const report_dir = process.env.ARTIFACT_DIR || '/tmp';
+
+export default defineConfig({
+  screenshotsFolder:  path.join(report_dir, 'cypress', 'screenshots'),
+  screenshotOnRunFailure: true,
+  trashAssetsBeforeRuns: true,
+  videosFolder: path.join(report_dir, 'cypress', 'videos'),
+  video: true,
+  videoCompression: false,
+  reporter: './node_modules/cypress-multi-reporters',
+  reporterOptions: {
+    reporterEnabled: 'mocha-junit-reporter, mochawesome',
+    mochaJunitReporterReporterOptions: {
+      mochaFile:  path.join(report_dir, 'junit_cypress-[hash].xml'),
+      toConsole: false
+    },
+    mochawesomeReporterOptions: {
+      reportDir: report_dir,
+      reportFilename: 'cypress_report',
+      overwrite: false,
+      html: false,
+      json: true
+    }
+  },
+  env: {
+    grepFilterSpecs: false,
+    'KUBECONFIG_PATH': process.env.KUBECONFIG,
+    'OPENSHIFT_VERSION': process.env.CYPRESS_OPENSHIFT_VERSION,
+    //Specify if OPENSHIFT_LOGGING and OPENSHIFT_TRACING are enabled in this cluster.
+    'OPENSHIFT_LOGGING': process.env.CYPRESS_OPENSHIFT_LOGGING || false,
+    'OPENSHIFT_TRACING': process.env.CYPRESS_OPENSHIFT_TRACING || false, 
+  },
+  fixturesFolder: 'fixtures',
+  defaultCommandTimeout: 30000,
+  retries: {
+    runMode: 0,
+    openMode: 0,
+  },
+  viewportWidth: 1600,
+  viewportHeight: 1200,
+  e2e: {
+    baseUrl: process.env.CYPRESS_BASE_URL || process.env.BASE_URL || 'http://localhost:9003',
+    setupNodeEvents(on, config) {
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require('@cypress/code-coverage/task')(on, config);
+      on('before:browser:launch', (browser = {
+        name: "",
+        family: "chromium",
+        channel: "",
+        displayName: "",
+        version: "",
+        majorVersion: "",
+        path: "",
+        isHeaded: false,
+        isHeadless: false
+      }, launchOptions) => {
+        if (browser.family === 'chromium' && browser.name !== 'electron') {
+          // auto open devtools
+          launchOptions.args.push('--enable-precise-memory-info')
+        }
+
+        return launchOptions
+
+      });
+      // `on` is used to hook into various events Cypress emits
+      on('task', {
+        log(message) {
+          console.log(message);
+          return null;
+        },
+        logError(message) {
+          console.error(message);
+          return null;
+        },
+        logTable(data) {
+          console.table(data);
+          return null;
+        },
+        readFileIfExists(filename) {
+          if (fs.existsSync(filename)) {
+            return fs.readFileSync(filename, 'utf8');
+          }
+          return null;
+        },
+      });
+      on('after:screenshot', (details) => {
+        // Prepend "1_", "2_", etc. to screenshot filenames because they are sorted alphanumerically in CI's artifacts dir
+        const pathObj = path.parse(details.path);
+        fs.readdir(pathObj.dir, (error, files) => {
+          const newPath = `${pathObj.dir}${path.sep}${files.length}_${pathObj.base}`;
+          return new Promise((resolve, reject) => {
+            // eslint-disable-next-line consistent-return
+            fs.rename(details.path, newPath, (err) => {
+              if (err) return reject(err);
+              // because we renamed and moved the image, resolve with the new path
+              // so it is accurate in the test results
+              resolve({ path: newPath });
+            });
+          });
+        });
+      });
+      on(
+        'after:spec',
+        (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
+          if (results && results.video) {
+            // Do we have failures for any retry attempts?
+            const failures = results.tests.some((test) =>
+              test.attempts.some((attempt) => attempt.state === 'failed')
+            )
+            if (!failures && fs.existsSync(results.video)) {
+              // delete the video if the spec passed and no tests retried
+              fs.unlinkSync(results.video)
+            }
+          }
+        }
+      );
+      require('@cypress/grep/src/plugin')(config);
+      return config;
+    },
+    supportFile: './cypress/support/e2e.ts',
+    specPattern: './cypress/e2e/*.cy.{js,jsx,ts,tsx}',
+    numTestsKeptInMemory: 1,
+    testIsolation: false,
+    experimentalModifyObstructiveThirdPartyCode: true,
+    experimentalOriginDependencies: true,
+    experimentalMemoryManagement: true,
+    experimentalCspAllowList: ['default-src', 'script-src']
+  },
+  numTestsKeptInMemory: 2,
+  video: false,
+  viewportWidth: 1400,
+});

web/cypress/README.md

@@ -0,0 +1,8 @@
+#The following file are copyed from https://github.com/openshift/logging-view-plugin/tree/main/web. These files will be updated Ad hoc
+web/cypress/support/commands/auth-commands.ts
+web/cypress/support/commands/selector-commands.ts
+web/cypress/support/commands/utility-commands.ts
+web/cypress/views/nav.ts
+web/cypress/views/tour.ts
+web/cypress/views/utils.ts
+web/src/components/data-test.ts

web/cypress/e2e/acceptance.cy.ts

@@ -0,0 +1,99 @@
+import * as dt from '../fixtures/data-test'
+
+describe('TroubleShoot Baseline Test', { tags: ['@admin'] }, () => {
+  before( function() {
+    cy.uiLoginAsClusterAdminForUser("first");
+
+  });
+
+  beforeEach( function() {
+  });
+
+  after( function() {
+    cy.uiLogoutClusterAdminForUser("first");
+  });
+
+  // Verify all  
+  it('Essential elements validation ',{tags:['@smoke']}, () => {
+    cy.clickNavLink(['Home', 'Projects']);
+    cy.openTroubleshootPanel();
+    //troubleShoot Panel title div
+    cy.get(dt.Classes.TroubleShootPanelPopoverTitleBar)
+      .should('exist')
+      .within(() => {
+	cy.contains('h1', 'Troubleshooting');
+	cy.get('h1').find('button').should('exist')
+	cy.get('button[aria-label="Close"]').should('exist');
+	cy.get(dt.Classes.TroubleShootPanelPopoverClose).should('exist');
+      })
+
+    //troubelShoot Panel query-container
+    //<div pf-v5-c-expandable-section pf-m-expanded.pf-m-detached pf-m-indented tp-plugin__panel-query-container>
+    //troubelShoot Panel query-container -- control div
+    cy.get(dt.Classes.TroubleShootPanelQueryControlContainer)
+      .should('exist')
+      .within(() => {
+        cy.contains('button','Focus');
+        cy.contains('button','Advanced');
+	//The refresh button exists
+        cy.get('button').eq(2).should('be.visible');
+      })
+    //Click the force button
+    cy.focusTroubleshootPanel();
+    //Click the Advance Button
+    cy.clickTroubleshootPanelAdvance();
+    cy.get(dt.Classes.TroubleShootPanelQueryAdvancedContainer)
+      .find('form')
+      .within(() => {
+        cy.contains('label', 'Time');
+        cy.contains('button', 'Recent');
+        cy.contains('button', 'Range');
+        cy.contains('h6','Since');
+        cy.get(dt.Classes.TroubleShootPanelQueryNumerInput).should('exist');
+        cy.contains('h6','Ago');
+        cy.contains('button', 'days');
+        cy.contains('button', 'Distance');
+        cy.contains('button', 'Goal Class');
+        cy.contains('label', 'Query').find('button').should('exist');
+        cy.get('textarea[id="query-input"]').should('exist');
+      });
+    //troubelShoot Panel query-container -- topology-container
+    //<div class="pf-m-grow tp-plugin__panel-topology-container"><div class="pf-v6-l-stack"><div class="pf-v6-l-stack__item pf-m-fill pf-topology-container"><div class="pf-topology-content">
+    cy.get(dt.Classes.TroubleShootPanelTopologyContainer).should('exist');
+    cy.get('div[data-test-id="topology"]').should('exist');
+    cy.get('g[data-id="korrel8r_graph"]')
+      .within(() => {
+        cy.get('ellipse').should('exist'); // node element
+        cy.get(dt.Classes.TroubleShootPanelTopologyNodeLabel).should('exist'); // text panel
+        cy.get(dt.Classes.TroubleShootPanelTopologyNodeBackGroud).should('exist'); //backgroup panel
+        cy.get('g[data-test-id="edge-handler"]').should('exist'); // connection line
+      })
+    cy.get(dt.Classes.TroubleShootPanelTopologyGraphControlBar)
+      .within(() => {
+        cy.get('button[id="zoom-in"]').should('exist');
+        cy.get('button[id="zoom-out"]').should('exist');
+        cy.get('button[id="fit-to-screen"]').should('exist');
+        cy.get('button[id="reset-view"]').should('exist');
+      })
+
+     //Three nodes should be show when focus on home->projects
+    cy.get('g[data-id="korrel8r_graph"]')          // get the parent <g>
+      .find('g[data-id="k8s:Project.v1.project.openshift.io"]') // find the child <g>
+      .should('exist')
+      .find('text')
+      .contains('K8s Project')
+      .should('exist')
+    cy.get('g[data-id="korrel8r_graph"]')          // get the parent <g>
+      .find('g[data-id="k8s:ClusterVersion.v1.config.openshift.io"]') // find the child <g>
+      .should('exist')
+      .find('text')
+      .contains('K8s ClusterVersion')
+      .should('exist')
+    cy.get('g[data-id="korrel8r_graph"]')          // get the parent <g>
+      .find('g[data-id="k8s:Network.v1.operator.openshift.io"]') // find the child <g>
+      .should('exist')
+      .find('text')
+      .contains('K8s Network')
+      .should('exist')
+  });
+})