refactor: Cypress tests to use cucumber MAASENG-5318 (#5894)

Author: rumanowskak

cypress.config.ts

@@ -1,3 +1,6 @@
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+import { createEsbuildPlugin } from "@badeball/cypress-cucumber-preprocessor/esbuild";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
 import { defineConfig } from "cypress";
 
 export default defineConfig({
@@ -9,25 +12,51 @@ export default defineConfig({
       "www.google-analytics.com",
       "sentry.is.canonical.com",
     ],
+
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
-    setupNodeEvents(on, config) {
+    // Here we use any type as Cypress’s on function supports many different event types, but its TypeScript definitions
+    // only fully cover "task", so strictly typing on causes errors for other events like "file:preprocessor"
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    async setupNodeEvents(on: any, config) {
+      await addCucumberPreprocessorPlugin(on, config);
       on("task", {
-        log(args) {
+        log(args: unknown) {
           console.log(args);
 
           return null;
         },
-        table(message) {
+        table(message: unknown) {
           console.table(message);
 
           return null;
         },
       });
+      const jsBundler = createBundler({});
+
+      on("file:preprocessor", (file: Cypress.FileObject) => {
+        if (file.filePath.endsWith(".feature")) {
+          return createBundler({
+            plugins: [createEsbuildPlugin(config)],
+          })(file);
+        }
+
+        if (
+          file.filePath.match(/\.(js|ts|jsx|tsx)$/) &&
+          !file.filePath.endsWith(".steps.ts")
+        ) {
+          return jsBundler(file);
+        }
+
+        return undefined;
+      });
       return config;
     },
     baseUrl: "http://0.0.0.0:8400",
-    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
+    specPattern: [
+      "cypress/e2e/**/*.{js,jsx,ts,tsx}",
+      "cypress/e2e/**/*.feature",
+    ],
     viewportHeight: 1300,
     viewportWidth: 1440,
   },

cypress/e2e/with-users/features/base/footer.feature

@@ -0,0 +1,13 @@
+Feature: Footer
+
+Background:
+    Given the user is logged in
+    And the user is on the home page
+
+Scenario: Navigating to the local documentation
+    When the user looks for the "local documentation" link
+    Then the link should include "/MAAS/docs/"
+
+Scenario: It has a link to legal
+    When the user looks for the "legal information" link
+    Then the link should include "https://www.ubuntu.com/legal"

cypress/e2e/with-users/features/images/imagesList.feature

@@ -0,0 +1,6 @@
+Feature: Images list
+
+  Scenario: The correct heading is rendered
+    Given the user is logged in
+    When the user navigates to the images page
+    Then the main toolbar heading should be "Images"

cypress/support/step_definitions/base/footer.steps.ts

@@ -0,0 +1,14 @@
+import { Given, Then, When } from "@badeball/cypress-cucumber-preprocessor";
+import { generateMAASURL } from "../../../e2e/utils";
+
+Given("the user is on the home page", () => {
+  cy.visit(generateMAASURL("/"));
+});
+
+When("the user looks for the {string} link", (linkName: string) => {
+  cy.findByRole("link", { name: new RegExp(linkName, "i") }).as("element");
+});
+
+Then("the link should include {string}", (expectedHref) => {
+  cy.get("@element").should("have.attr", "href").and("include", expectedHref);
+});

cypress/support/step_definitions/common/auth.steps.ts

@@ -0,0 +1,5 @@
+import { Given } from "@badeball/cypress-cucumber-preprocessor";
+
+Given("the user is logged in", () => {
+  cy.login();
+});

cypress/support/step_definitions/images/imagesList.steps.ts

@@ -0,0 +1,13 @@
+import { Then, When } from "@badeball/cypress-cucumber-preprocessor";
+import { generateMAASURL } from "../../../e2e/utils";
+
+When("the user navigates to the images page", () => {
+  cy.visit(generateMAASURL("/images"));
+});
+
+Then("the main toolbar heading should be {string}", (expectedHeading) => {
+  cy.get("[data-testid='main-toolbar-heading']").should(
+    "contain",
+    expectedHeading
+  );
+});

cypress/tsconfig.json

@@ -4,7 +4,7 @@
     "baseUrl": "../ui/node_modules",
     "target": "es6",
     "lib": ["es2017", "dom"],
-    "types": ["cypress", "cypress-axe", "@testing-library/cypress", "@percy/cypress"],
+    "types": ["node", "cypress", "cypress-axe", "@testing-library/cypress", "@percy/cypress"],
     "moduleResolution": "Node"
   },
   "include": ["**/*.ts"]

package.json

@@ -91,6 +91,8 @@
     "yup": "0.32.11"
   },
   "devDependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "23.0.0",
+    "@bahmutov/cypress-esbuild-preprocessor": "2.2.5",
     "@canonical/typescript-config-react": "0.9.0",
     "@eslint/compat": "1.4.1",
     "@eslint/eslintrc": "3.3.1",
@@ -119,7 +121,7 @@
     "@types/chance": "1.1.7",
     "@types/classnames": "2.3.4",
     "@types/clone-deep": "4.0.4",
-    "@types/node": "22.19.1",
+    "@types/node": "25.0.3",
     "@types/path-parse": "1.0.22",
     "@types/pluralize": "0.0.33",
     "@types/react": "19.2.4",
@@ -207,5 +209,8 @@
       "prefer-alphabetical-dependencies": "error",
       "prefer-alphabetical-devDependencies": "error"
     }
+  },
+  "cypress-cucumber-preprocessor": {
+    "nonGlobalStepDefinitions": true
   }
-}
+}