Tests: Enable cypress to run cucumber tests

Add libraries needed to run cucumber tests with cypress,
namely cypress-cucumber-preprocessor and cypress-esbuild-preprocessor
in order to translate gherkin steps to cypress executable test.

Configure cypress to run the gherkin tests.

Signed-off-by: Michal Polovka <mpolovka@redhat.com>

.github/workflows/gating.yml

@@ -79,7 +79,11 @@ jobs:
         run: vagrant provision
 
       - name: Run Cypress tests
-        uses: cypress-io/github-action@v4
+        uses: cypress-io/github-action@v5
+        with:
+          build: npm run build
+          start: npm run serve
+          browser: firefox
 
       - name: Upload cypress screenshots
         uses: actions/upload-artifact@v2

cypress.config.ts

@@ -1,10 +1,25 @@
 import { defineConfig } from "cypress";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";
 
 export default defineConfig({
   e2e: {
-    baseUrl: "https://server.ipa.demo/ipa/modern_ui/",
-  },
-  hosts: {
-    "server.ipa.demo": "127.0.0.1",
+    specPattern: "**/*.feature",
+    baseUrl: "http://localhost:3000/",
+
+    async setupNodeEvents(
+      on: Cypress.PluginEvents,
+      config: Cypress.PluginConfigOptions
+    ): Promise<Cypress.PluginConfigOptions> {
+      await addCucumberPreprocessorPlugin(on, config);
+      on(
+        "file:preprocessor",
+        createBundler({
+          plugins: [createEsbuildPlugin(config)],
+        })
+      );
+      return config;
+    },
   },
 });

cypress/plugins/index.js

@@ -0,0 +1,5 @@
+const cucumber = require("cypress-cucumber-preprocessor").default;
+
+module.exports = (on, config) => {
+  on("file:preprocessor", cucumber());
+};

package.json

@@ -63,6 +63,13 @@
     "typescript": "^4.7.4",
     "webpack": "^5.76.2",
     "webpack-cli": "^4.10.0",
-    "webpack-dev-server": "^4.9.3"
+    "webpack-dev-server": "^4.9.3",
+    "@badeball/cypress-cucumber-preprocessor": "^18.0.1",
+    "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0"
+  },
+  "cypress-cucumber-preprocessor": {
+    "stepDefinitions": [
+      "tests/features/steps/*.{js,ts}"
+    ]
   }
 }

tests/features/steps/test_webui.js

@@ -0,0 +1,7 @@
+import { When, Then, Given } from "@badeball/cypress-cucumber-preprocessor";
+When("I am on the home page", () => {
+  cy.visit("/");
+})
+Then("I should be on the page {string}", function(pageName) {
+  cy.location('pathname').should('contain', pageName);
+});

tests/features/test_sanity.feature

@@ -0,0 +1,6 @@
+Feature: Basic sanity
+  Teste if the application loads
+
+  Scenario: Load the landing page
+    When I am on the home page
+    Then I should be on the page "active-users"

tsconfig.json

@@ -3,7 +3,7 @@
     "baseUrl": ".",
     "rootDir": ".",
     "outDir": "dist",
-    "target": "es5",
+    "target": "ES2015",
     "lib": ["es6", "dom"],
     "sourceMap": true,
     "jsx": "react",
@@ -18,7 +18,13 @@
     "importHelpers": true,
     "skipLibCheck": true,
     "noEmit": false,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "moduleResolution": "node",
+    "paths": {
+      "@badeball/cypress-cucumber-preprocessor/*": [
+        "./node_modules/@badeball/cypress-cucumber-preprocessor/dist/subpath-entrypoints/*"
+      ]
+    }
   },
   "exclude": ["node_modules"]
 }