Merge pull request #133 from sanketpathak/port-e2e-tests-console-plugin

ODC-7592: Adding pipelines e2e tests from console to console plugin

.ci-operator.yaml

@@ -1,4 +1,4 @@
 build_root_image:
-  name: nodejs-16
+  name: nodejs-18
   namespace: openshift
   tag: latest

.devcontainer/Dockerfile.plugin

@@ -1,2 +1,2 @@
-FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:16 as build
+FROM mcr.microsoft.com/vscode/devcontainers/typescript-node:18 as build
 COPY --from=openshift/origin-cli:latest /usr/bin/oc /usr/local/bin/oc

.gitignore

@@ -7,3 +7,4 @@ integration-tests/screenshots
 yarn-error.log
 .DS_Store
 *.pem
+integration-tests/cypress-a11y-report.json

CONTRIBUTING.md

@@ -6,7 +6,7 @@
 
 Required tools:
 
-- [Node.js](https://nodejs.org/en/) v16 or newer and [yarn](https://yarnpkg.com) are required
+- [Node.js](https://nodejs.org/en/) v18 or newer and [yarn](https://yarnpkg.com) are required
   to build and run the example.
 - To run OpenShift console in a container, either
   [Docker](https://www.docker.com) or [podman 3.2.0+](https://podman.io) and

Dockerfile

@@ -1,4 +1,4 @@
-FROM registry.access.redhat.com/ubi8/nodejs-16:latest AS builder-ui
+FROM registry.access.redhat.com/ubi8/nodejs-18:latest AS builder-ui
 USER root
 RUN command -v yarn || npm i -g yarn
 

integration-tests/.cypress-cucumber-preprocessorrc.json

@@ -0,0 +1,7 @@
+{
+    "stepDefinitions": [
+        "cypress/support/step-definitions/[filepath].ts",
+        "cypress/support/step-definitions/common/common.ts",
+        "cypress/support/step-definitions/common/pipelines.ts"
+    ]
+}

integration-tests/.gherkin-lintrc

@@ -0,0 +1,94 @@
+{
+  "no-files-without-scenarios": "on",
+  "no-unnamed-features": "on",
+  "no-unnamed-scenarios": "on",
+  "no-dupe-scenario-names": [
+    "on",
+    "in-feature"
+  ],
+  "no-dupe-feature-names": "on",
+  "no-partially-commented-tag-lines": "on",
+  "indentation": [
+    "off",
+    {
+      "Feature": 0,
+      "Background": 4,
+      "Scenario": 4,
+      "Step": 8,
+      "Examples": 8,
+      "example": 12,
+      "given": 8,
+      "when": 8,
+      "then": 8,
+      "and": 8,
+      "but": 8,
+      "feature tag": 0,
+      "scenario tag": 4
+    }
+  ],
+  "no-trailing-spaces": "on",
+  "new-line-at-eof": [
+    "on",
+    "yes"
+  ],
+  "no-multiple-empty-lines": "off",
+  "no-empty-file": "on",
+  "no-scenario-outlines-without-examples": "on",
+  "name-length": "off",
+  "allowed-tags": [
+    "on",
+    {
+      "tags": [
+        "@pre-condition",
+        "@un-verified",
+        "@broken-test",
+        "@e2e",
+        "@to-do",
+        "@manual",
+        "@regression",
+        "@smoke",
+        "@pipelines",
+        "@knative"
+      ]
+    }
+  ],
+  "no-restricted-tags": [
+    "on",
+    {
+      "tags": [
+        "@watch",
+        "@wip",
+        "@debug"
+      ]
+    }
+  ],
+  "use-and": "off",
+  "no-duplicate-tags": "on",
+  "no-superfluous-tags": "on",
+  "no-homogenous-tags": "off",
+  "one-space-between-tags": "on",
+  "no-unused-variables": "on",
+  "no-empty-background": "on",
+  "scenario-size": [
+    "off",
+    {
+      "steps-length": {
+        "Background": 8,
+        "Scenario": 20
+      }
+    }
+  ],
+  "max-scenarios-per-file": [
+    "off",
+    {
+      "maxScenarios": 20,
+      "countOutlineExamples": true
+    }
+  ],
+  "file-name": [
+    "on",
+    {
+      "style": "kebab-case"
+    }
+  ]
+}

integration-tests/cypress.config.ts

@@ -0,0 +1,109 @@
+/* eslint-disable global-require */
+import { addCucumberPreprocessorPlugin } from '@badeball/cypress-cucumber-preprocessor';
+import * as webpack from '@cypress/webpack-preprocessor';
+import { defineConfig } from 'cypress';
+import * as fs from 'fs';
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions,
+): Promise<Cypress.PluginConfigOptions> {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
+  await addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    'file:preprocessor',
+    webpack({
+      webpackOptions: {
+        resolve: {
+          extensions: ['.ts', '.js', '.tsx'],
+        },
+        module: {
+          rules: [
+            {
+              test: /\.tsx?$/,
+              use: [
+                {
+                  loader: 'ts-loader',
+                },
+              ],
+            },
+            {
+              test: /\.feature$/,
+              use: [
+                {
+                  loader: '@badeball/cypress-cucumber-preprocessor/webpack',
+                  options: config,
+                },
+              ],
+            },
+          ],
+        },
+      },
+    }),
+  );
+
+  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;
+    },
+  });
+  config.baseUrl = `${
+    process.env.BRIDGE_BASE_ADDRESS || 'http://localhost:9000/'
+  }`;
+  config.env.BRIDGE_KUBEADMIN_PASSWORD = process.env.BRIDGE_KUBEADMIN_PASSWORD;
+  return config;
+}
+
+export default defineConfig({
+  viewportWidth: 1920,
+  viewportHeight: 1080,
+  watchForFileChanges: true,
+  defaultCommandTimeout: 40000,
+  animationDistanceThreshold: 20,
+  execTimeout: 90000,
+  pageLoadTimeout: 90000,
+  requestTimeout: 15000,
+  responseTimeout: 15000,
+  screenshotsFolder: './screenshots',
+  videosFolder: './videos',
+  video: true,
+  reporter: '../node_modules/cypress-multi-reporters',
+  reporterOptions: {
+    configFile: 'reporter-config.json',
+  },
+  fixturesFolder: 'testData',
+  chromeWebSecurity: false,
+  env: {
+    TAGS: '(@pre-condition or @smoke or @regression) and not (@manual or @to-do or @un-verified or @broken-test)',
+    NAMESPACE: 'aut-pipelines',
+  },
+  retries: {
+    runMode: 1,
+    openMode: 0,
+  },
+  e2e: {
+    setupNodeEvents,
+    specPattern: 'cypress/features/**/*{feature,features}',
+    supportFile: 'cypress/support/commands/index.ts',
+    baseUrl: 'http://localhost:9000',
+    experimentalMemoryManagement: true,
+    testIsolation: false,
+    numTestsKeptInMemory: 5,
+  },
+});

integration-tests/cypress/features/BestPractices.md

@@ -0,0 +1,72 @@
+# Gherkin Scenarios designing Best Practices
+
+Scenario Titles should follow below rules
+    a. One line statement
+    b, Use conjunction words like and, but, if at all required, but always make sure each scenario focused on one behavior
+    c. Avoid disjunction words like because, so, since etc..
+    d. Avoid assertion language like verify, assert, should etc..
+
+BDD scenarios should follow below rules
+    1. Gherkin Golden Rule - Declarative sentences
+        ```
+
+        Scenario: Add shoes to the shopping cart
+            Given the shoe store home page is displayed
+            When the shopper searches for "red pumps"
+            And the shopper adds the first result to the cart
+            Then the cart has one pair of "red pumps"
+        ```
+
+    2. Cardinal Rule of BDD - One to one rule
+        a. Collaboration: More focus and less confusion
+        b. Automation: Each test failure points to a unique problem
+        c. Efficiency: Less complex work makes for faster cycle times
+        d. Traceability: 1 behavior → 1 example → 1 scenario → 1 test → 1 result
+        e. Accountability: Teams cannot hide or avoid behaviors
+
+    3. Unique Example Rule - Use effective examples
+        ```
+        Scenario Outline: Simple product search
+            Given the shoe store home page is displayed
+            When the search phrase "<phrase>" is entered
+            Then results for "<phrase>" are shown
+
+            Examples: Shoes
+                | phrase        |
+                | red pumps     |
+                | sneakers      |
+        ```
+
+    4. Good Grammar rule - Language matters
+        a. Given [Context] - should use past or present-perfect tense, because they represent an initial state that must already be established
+        b. When [Action]   - should use present tense, because they represent actions actively performed as part of the behavior. 
+        c. Then [Outcome]  - should use present or future tense, because they represent what should happen after the behavior actions.
+
+## BDD Style Guidelines
+
+    1. Focus on customer needs
+    2. Limit one feature per feature file. This makes it easy to find features. 
+    3. Limit the number of scenarios per feature. Nobody wants a thousand-line feature file. A good measure is a dozen scenarios per feature. 
+    4. Limit the number of steps per scenario to less than ten. 
+    5. Limit the character length of each step. Common limits are 80-120 characters. 
+    6. Use proper spelling. 
+    7. Use proper grammar. 
+    8. Capitalize Gherkin keywords. 
+    9. Capitalize the first word in titles. 
+    10. Do not capitalize words in the step phrases unless they are proper nouns. 
+    11. Do not use punctuation (specifically periods and commas) at the end of step phrases. 
+    12. Use single spaces between words. 
+    13. Indent the content beneath every section header. 
+    14. Separate features and scenarios by two blank lines. 
+    15. Separate examples tables by 1 blank line. 
+    16. Do not separate steps within a scenario by blank lines. 
+    17. Space table delimiter pipes (“|”) evenly. 
+    18. Adopt a standard set of tag names. Avoid duplicates. 
+    19. Write all tag names in lowercase, and use hyphens (“-“) to separate words. 
+    20. Limit the length of tag names. 
+    21. All parameter names should wrap with "<>"
+    22. label names, page names and popup header names should wrap with ""
+
+## Reusable steps
+
+    Given user is at the Import from Git form