BDMS-167: Cypress with Cucumber Preprocessor - Features with Steps Example

cypress.config.ts

@@ -1,4 +1,7 @@
 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({
   component: {
@@ -9,9 +12,25 @@ export default defineConfig({
   },
 
   e2e: {
-    baseUrl: 'http://localhost:4173',
-    setupNodeEvents(on, config) {
-      process.env.NODE_ENV = 'test'
+    baseUrl: process.env.CI
+    ? "http://localhost:4173"   
+    : "http://localhost:5173",
+    specPattern: "**/*.feature",
+    async setupNodeEvents(
+      on: Cypress.PluginEvents,
+      config: Cypress.PluginConfigOptions
+    ): Promise<Cypress.PluginConfigOptions> {
+      await addCucumberPreprocessorPlugin(on, config);
+
+      on(
+        "file:preprocessor",
+        createBundler({
+          plugins: [createEsbuildPlugin(config)],
+        })
+      );
+
+      process.env.NODE_ENV = "test";
+      return config;
     },
     env: {
       // set test auth variable to true to mock Authentik provider token

cypress/e2e/ocotillo/features/well_show.feature

@@ -0,0 +1,68 @@
+@ui @well-detail
+Feature: Well Detail Page
+  As a hydrogeologist reviewing a well record
+  I want to see well information organized clearly on a single page
+  So that I can quickly understand the well’s monitoring status, ensure accurate data migration, and answer incoming well data requests. 
+
+  Background:
+    Given I open the Well Detail Page for well "1"
+
+  @basic
+  Scenario: Page renders all required UI Elements
+    Then It should receive an api response with the well response schema
+    And I see the header Show Well
+    And I see the Map
+    And I see the Hydrograph
+    And I see the Recent Water Level Observations
+    And I see the Contacts section
+    And I see the Equipment section
+    And I see the Well Screens section
+    And I see the Attachments section
+
+  @acceptance-criteria
+  Scenario: Well information displays core physical attributes
+    Then I should see the well name or point ID
+    And I should see the well purpose
+    And I should see the release status
+    And I should see the hole depth
+    And I should see the well depth
+    And I should see the coordinates
+    And I should see the elevation
+    And I should see the alternate IDs
+
+  Scenario: Map section displays interactive satellite view
+    Then I should see the interactive satellite map
+
+  Scenario: Hydrograph and observations are grouped together
+    Then I should see the hydrograph visualization
+    And I should see the recent water level observations table
+
+  Scenario: Contacts section displays table with required fields
+    Then I should see the contacts table
+    And the table should show contact names
+    And the table should show contact roles
+    And the table should show contact types
+    And the table should show email addresses
+    And the table should show phone numbers
+    And I should see the create contact button
+
+  Scenario: Equipment section displays installed equipment
+    Then I should see the equipment table
+    And I should see the create equipment button
+    And the table should show equipment names
+    And the table should show equipment models
+    And the table should show serial numbers
+    And the table should show installation dates
+    And the table should show removal dates
+    And the table should show recording intervals
+    And the table should show equipment notes
+
+  Scenario: Well Screens section displays screen information
+    Then I should see the well screens table
+    And I should see the create well screen button
+    And the table should show screen types
+    And the table should show screen top depths
+    And the table should show screen bottom depths
+
+  Scenario: Attachments section displays attachments
+    Then I should see the attachments section

cypress/e2e/ocotillo/steps/well_show.cy.ts

@@ -0,0 +1,248 @@
+/// <reference types="cypress" />
+import { Given, When, Then } from "@badeball/cypress-cucumber-preprocessor";
+import { zWellResponse } from '../../../../src/generated/zod.gen';
+
+Given('I open the Well Detail Page for well "{word}"', (wellId: string) => {
+    cy.login();
+    cy.visit(`/ocotillo/well/show/${encodeURIComponent(wellId)}`);
+    cy.intercept('GET', `/thing/${encodeURIComponent(wellId)}`).as('getWaterwell');
+});
+
+Then('It should receive an api response with the well response schema', () => {
+    cy.wait('@getWaterwell').then((interception) => {
+        const body = interception?.response?.body;
+        try {
+            zWellResponse.parse(body);
+        } catch (error) {
+            console.error('Zod validation failed:', error);
+            throw error;
+        }
+    });
+});
+
+Then('I see the header Show Well', () => {
+    cy.get('.MuiCardHeader-root')
+        .contains('Show Well')
+        .should('be.visible');
+});
+
+Then("I see the Map", () => {
+    cy.get('.MuiCard-root')
+        .contains('Map')
+        .should('be.visible');
+});
+
+Then("I see the Hydrograph", () => {
+    cy.get('.MuiCard-root')
+        .contains('Hydrograph')
+        .should('be.visible');
+});
+
+Then("I see the Recent Water Level Observations", () => {
+    cy.get('.MuiCard-root')
+        .contains('Recent Water Level Observations')
+        .should('be.visible');
+});
+
+Then("I see the Contacts section", () => {
+    cy.get('.MuiAccordion-root')
+        .contains('Contacts')
+        .should('be.visible');
+});
+
+Then("I see the Equipment section", () => {
+    cy.get('.MuiCard-root')
+        .contains('Equipment')
+        .should('be.visible');
+});
+
+Then("I see the Well Screens section", () => {
+    cy.get('.MuiCard-root')
+        .contains('Well Screens')
+        .should('be.visible');
+});
+
+Then("I see the Attachments section", () => {
+    cy.get('.MuiAccordion-root')
+        .contains('Attachments')
+        .should('be.visible');
+});
+
+// Well Information assertions
+//Chips will have random text in test environment
+Then("I should see the well name or point ID", () => {
+    cy.get('.MuiChip-label')
+        .should('be.visible');
+});
+Then("I should see the well purpose", () => {
+    cy.get('.MuiChip-label')
+        .should('be.visible');
+});
+Then("I should see the release status", () => {
+    cy.get('.MuiChip-label')
+        .should('be.visible');
+});
+Then("I should see the hole depth", () => {
+    cy.get('.MuiTypography-root')
+        .contains('Hole Depth:')
+        .should('be.visible');
+});
+Then("I should see the well depth", () => {
+    cy.get('.MuiTypography-root')
+        .contains('Well Depth:')
+        .should('be.visible');
+});
+Then("I should see the coordinates", () => {
+    cy.get('.MuiTypography-root')
+        .contains('Northing/Easting:')
+        .should('be.visible');
+});
+Then("I should see the elevation", () => {
+    cy.get('.MuiTypography-root')
+        .contains('Elevation:')
+        .should('be.visible');
+});
+Then("I should see the alternate IDs", () => {
+    cy.get('.MuiTypography-root')
+        .contains('Alternate IDs')
+        .should('be.visible');
+});
+
+//Map section assertions
+Then("I should see the interactive satellite map", () => {
+    cy.get('.MuiCard-root')
+        .contains('Map')
+        .should('be.visible');
+});
+
+//Hydrograph and Recent Water Level Observations section assertions
+Then("I should see the hydrograph visualization", () => {
+    cy.get('.MuiCard-root')
+        .contains('Hydrograph')
+        .should('be.visible');
+});
+Then("I should see the recent water level observations table", () => {
+    cy.get('.MuiCard-root')
+        .contains('Recent Water Level Observations')
+        .should('be.visible');
+});
+
+//Contacts section assertions
+Then("I should see the contacts table", () => {
+    cy.get('.MuiAccordion-root')
+        .contains('Contacts')
+        .should('exist');
+});
+
+Then("the table should show contact names", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Name')
+        .should('exist');
+});
+Then("the table should show contact roles", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Role')
+        .should('exist');
+});
+Then("the table should show contact types", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Contact Type')
+        .should('exist');
+});
+Then("the table should show email addresses", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Email')
+        .should('exist');
+});
+Then("the table should show phone numbers", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Phone')
+        .should('exist');
+});
+Then("I should see the create contact button", () => {
+    cy.get('.MuiButton-root')
+        .contains('Create')
+        .should('exist');
+});
+
+//Equipment Section assertions
+Then("I should see the equipment table", () => {
+    cy.get('.MuiCard-root')
+        .contains('Equipment')
+        .should('exist');
+});
+Then("I should see the create equipment button", () => {
+    cy.get('.MuiButton-root')
+        .contains('Create')
+        .should('exist');
+});
+
+Then("the table should show equipment names", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Name')
+        .should('exist');
+});
+Then("the table should show equipment models", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Model')
+        .should('exist');
+});
+Then("the table should show serial numbers", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Serial No')
+        .should('exist');
+});
+Then("the table should show installation dates", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Date Installed')
+        .should('exist');
+});
+Then("the table should show removal dates", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Date Removed')
+        .should('exist');
+});
+Then("the table should show recording intervals", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Recording Interval')
+        .should('exist');
+});
+Then("the table should show equipment notes", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Notes')
+        .should('exist');
+});
+
+//Well Screens Section assertions
+Then("I should see the well screens table", () => {
+    cy.get('.MuiCard-root')
+        .contains('Well Screens')
+        .should('exist');
+});
+Then("I should see the create well screen button", () => {
+    cy.get('.MuiButton-root')
+        .contains('Create')
+        .should('exist');
+});
+Then("the table should show screen types", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Screen Type')
+        .should('exist');
+});
+Then("the table should show screen top depths", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Screen Top Depth (ft)')
+        .should('exist');
+});
+Then("the table should show screen bottom depths", () => {
+    cy.get('.MuiDataGrid-columnHeaderTitle')
+        .contains('Screen Bottom Depth (ft)')
+        .should('exist');
+});
+
+//Attachments Section assertions
+Then("I should see the attachments section", () => {
+    cy.get('.MuiAccordion-root')
+        .contains('Attachments')
+        .should('be.visible');
+});