add ui e2e tests

Author: davdhacs

Makefile

@@ -257,6 +257,27 @@ helm-diff: pre-check helm-dependency-update create-namespaces
 .PHONY: deploy-local
 deploy-local: helm-dependency-update create-namespaces
 	TEST_MODE=true ./scripts/deploy/helm.sh deploy-local $(shell make tag) local
+
+## Run UI E2E tests against local deployment
+.PHONY: test-e2e
+test-e2e:
+	@echo "test-e2e starting..." >&2
+	@echo "Waiting for infra-server to be ready..." >&2
+	@kubectl wait --for=condition=ready pod -l app=infra-server -n infra --timeout=3m >&2 || \
+		(echo "ERROR: infra-server pods did not become ready" >&2 && exit 1)
+	@echo "Starting port-forward and running E2E tests..." >&2
+	@kubectl port-forward -n infra svc/infra-server-service 8443:8443 >/dev/null 2>&1 & \
+	PF_PID=$$!; \
+	cleanup() { \
+		echo "" >&2; \
+		echo "Cleaning up port-forward (PID: $$PF_PID)..." >&2; \
+		kill $$PF_PID 2>/dev/null || true; \
+	}; \
+	trap cleanup EXIT; \
+	sleep 5; \
+	echo "Running Cypress E2E tests..." >&2; \
+	cd ui && BROWSER=none PORT=3001 INFRA_API_ENDPOINT=http://localhost:8443 npm run test:e2e
+
 ## Bounce pods
 .PHONY: bounce-infra-pods
 bounce-infra-pods:

chart/infra-server/configuration/local-values.yaml

@@ -1,10 +1,5 @@
 environment: local
 
-# Disable Auth0 for local development - allow anonymous access
-auth0:
-  clientID: ""
-  tenant: ""
-
 # Set local deploy mode to true for local development
 localDeploy: true
 

scripts/deploy/helm.sh

@@ -134,11 +134,32 @@ deploy-local() {
 
     if [[ ! -f "${cert_file}" ]] || [[ ! -f "${key_file}" ]]; then
         echo "Generating self-signed certificate for local development..." >&2
+        # Create a temporary config file for SAN extension
+        local san_config=$(mktemp)
+        cat > "${san_config}" <<EOF
+[req]
+distinguished_name = req_distinguished_name
+x509_extensions = v3_req
+prompt = no
+
+[req_distinguished_name]
+CN = localhost
+
+[v3_req]
+keyUsage = keyEncipherment, dataEncipherment
+extendedKeyUsage = serverAuth
+subjectAltName = @alt_names
+
+[alt_names]
+DNS.1 = localhost
+IP.1 = 127.0.0.1
+EOF
         openssl req -x509 -newkey rsa:2048 -nodes \
             -keyout "${key_file}" \
             -out "${cert_file}" \
             -days 36500 \
-            -subj "/CN=localhost" >&2
+            -config "${san_config}" >&2
+        rm -f "${san_config}"
         echo "Certificate generated: ${cert_file}" >&2
     else
         echo "Using existing self-signed certificate: ${cert_file}" >&2

ui/.gitignore

@@ -8,6 +8,12 @@
 # testing
 /coverage
 
+# cypress
+cypress/videos
+cypress/screenshots
+cypress/downloads
+cypress.env.json
+
 # production
 /build
 

ui/TESTING.md

@@ -0,0 +1,161 @@
+# Cypress E2E Testing
+
+This directory contains Cypress E2E tests for the StackRox Infra UI.
+
+## Quick Start - Running E2E Tests Against Local Backend
+
+### Prerequisites
+
+1. **Deploy the local backend** (with authentication disabled):
+
+   ```bash
+   # From the repository root
+   make deploy-local
+   ```
+
+   This deploys the infra-server to your local Kubernetes cluster with
+   `LOCAL_DEPLOY=true`, which disables authentication for local development.
+
+2. **Start port-forwarding** to access the backend:
+
+   ```bash
+   kubectl port-forward -n infra svc/infra-server-service 8443:8443
+   ```
+
+   Keep this running in a separate terminal.
+
+3. **Configure the UI to connect to local backend**:
+
+   ```bash
+   cd ui
+   cp .env.example .env.local
+   ```
+
+   This creates a `.env.local` file. Note: The file contains
+   `INFRA_API_ENDPOINT` but the environment variable must also be set when
+   starting the dev server (see next step).
+
+4. **Start the UI dev server** (in a separate terminal):
+
+   ```bash
+   cd ui
+   BROWSER=none PORT=3001 INFRA_API_ENDPOINT=http://localhost:8443 npm start
+   ```
+
+   **Important:** The `INFRA_API_ENDPOINT` environment variable must be set when
+   starting the dev server (not just in `.env.local`) because the proxy
+   middleware reads it at startup.
+
+   Keep this running. The dev server will:
+
+   - Run on http://localhost:3001
+   - Proxy API requests to http://localhost:8443 (your local backend)
+   - Hot-reload when you make changes to the UI code
+
+5. **Run the E2E tests** (in another terminal):
+
+   ```bash
+   cd ui
+   npm run cypress:run:e2e
+   ```
+
+That's it! The tests will run against the UI dev server at
+http://localhost:3001, which proxies API requests to your local backend at
+`https://localhost:8443`.
+
+### Test Results
+
+After the tests complete:
+
+- **Videos** are saved to `ui/cypress/videos/` (one per test file)
+- **Screenshots** (on failures only) are saved to `ui/cypress/screenshots/`
+
+Review the videos to verify the tests are properly accessing the backend.
+
+## Interactive Mode
+
+To run tests interactively with the Cypress UI (useful for debugging):
+
+**Prerequisites:** Make sure the UI dev server is running (step 4 above).
+
+```bash
+cd ui
+npm run cypress:open
+```
+
+Then:
+
+1. Select "E2E Testing"
+2. Choose a browser
+3. Click on any test file to run it
+
+Interactive mode lets you see the tests run in real-time, inspect the DOM, and
+debug failures.
+
+## Test Structure
+
+- `cypress/e2e/home.cy.ts` - Basic home page tests
+- `cypress/e2e/flavor-selection.cy.ts` - Tests for flavor API integration
+
+## Configuration
+
+Tests are configured in `cypress.config.ts` to:
+
+- Run against the UI dev server at `http://localhost:3001` (which proxies to the
+  backend)
+- Accept self-signed certificates (`chromeWebSecurity: false`)
+- Capture videos of all test runs
+- Capture screenshots on failures only
+- Retry failed tests 2 times in CI mode (run mode), 0 times in interactive mode
+
+The UI dev server (configured via `ui/.env.local`) proxies API requests to your
+local backend at `https://localhost:8443`.
+
+## Adding More Tests
+
+To add new E2E tests:
+
+1. Create a new file in `cypress/e2e/` with the pattern `*.cy.ts`
+2. Follow the existing test patterns for consistency
+3. Run the tests locally before committing
+
+## Troubleshooting
+
+### Tests fail with "Cypress failed to verify that your server is running"
+
+**Solution:** Make sure the UI dev server is running on port 3001 before running
+tests:
+
+```bash
+cd ui
+BROWSER=none PORT=3001 npm start
+```
+
+### Tests show "access denied" or authentication errors
+
+**Solution:** Verify that:
+
+1. The backend was deployed with `LOCAL_DEPLOY=true` (via `make deploy-local`)
+2. Port-forwarding is active:
+   `kubectl port-forward -n infra svc/infra-server-service 8443:8443`
+3. The `.env.local` file points to the correct backend:
+   `INFRA_API_ENDPOINT=https://localhost:8443`
+
+You can check if LOCAL_DEPLOY is enabled:
+
+```bash
+kubectl get deployment -n infra infra-server-deployment -o jsonpath='{.spec.template.spec.containers[0].env}' | grep LOCAL_DEPLOY
+```
+
+### Port 3001 or 8443 already in use
+
+**Solution:**
+
+- Find and kill the process using the port: `lsof -i :3001` or `lsof -i :8443`
+- Or use different ports by modifying `cypress.config.ts` and `.env.local`
+
+## Documentation
+
+- Full Cypress documentation: https://docs.cypress.io/
+- Cypress Best Practices:
+  https://docs.cypress.io/guides/references/best-practices

ui/cypress.config.ts

@@ -0,0 +1,80 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { defineConfig } from 'cypress';
+import * as crypto from 'crypto';
+
+export default defineConfig({
+  e2e: {
+    // UI dev server runs on :3001
+    // API calls are proxied to backend at :8443 (configured via INFRA_API_ENDPOINT in setupProxy.js)
+    // Routes proxied: /v1, /login, /callback, /logout, /downloads/infractl-*
+    baseUrl: 'http://localhost:3001',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.ts',
+    fixturesFolder: 'cypress/fixtures',
+    screenshotsFolder: 'cypress/screenshots',
+    videosFolder: 'cypress/videos',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: true,
+    screenshotOnRunFailure: true,
+    chromeWebSecurity: false, // Allow self-signed certificates for local dev
+    setupNodeEvents(on, config) {
+      // Task to generate JWT tokens for local dev authentication
+      on('task', {
+        generateJWT({ payload, secret }: { payload: any; secret: string }) {
+          // Create JWT header
+          const header = {
+            alg: 'HS256',
+            typ: 'JWT',
+          };
+
+          // Base64url encode header and payload
+          const base64UrlEncode = (obj: any) =>
+            Buffer.from(JSON.stringify(obj))
+              .toString('base64')
+              .replace(/\+/g, '-')
+              .replace(/\//g, '_')
+              .replace(/=/g, '');
+
+          const encodedHeader = base64UrlEncode(header);
+          const encodedPayload = base64UrlEncode(payload);
+
+          // Create signature
+          const signatureInput = `${encodedHeader}.${encodedPayload}`;
+          const signature = crypto
+            .createHmac('sha256', secret)
+            .update(signatureInput)
+            .digest('base64')
+            .replace(/\+/g, '-')
+            .replace(/\//g, '_')
+            .replace(/=/g, '');
+
+          // Return complete JWT
+          return `${encodedHeader}.${encodedPayload}.${signature}`;
+        },
+      });
+
+      return config;
+    },
+    env: {
+      // Default environment variables for tests
+      // Can be overridden via CLI or cypress.env.json
+      API_URL: 'https://localhost:8000',
+    },
+  },
+  component: {
+    devServer: {
+      framework: 'react',
+      bundler: 'vite',
+    },
+    specPattern: 'src/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/component.ts',
+  },
+  retries: {
+    runMode: 2, // Retry failed tests in CI
+    openMode: 0, // Don't retry in interactive mode
+  },
+  defaultCommandTimeout: 10000,
+  requestTimeout: 10000,
+  responseTimeout: 10000,
+});