run ui e2e tests in github actions

davdhacs · davdhacs · commit 184603c6ad0f · 2025-12-07T22:04:21.000-07:00
diff --git a/.github/workflows/ui.yaml b/.github/workflows/ui.yaml
@@ -0,0 +1,128 @@
+name: UI tests
+
+on:
+  pull_request:
+  push:
+    branches:
+      - master
+
+jobs:
+  ui-e2e-tests:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v5
+        with:
+          fetch-depth: 0
+
+      - name: Free disk space (delete unused tools)
+        id: delete-unused-tools
+        continue-on-error: true
+        shell: bash
+        run: |
+          free_disk_space=22
+          # delete preinstalled unused tools
+          cleanup=(
+            /usr/share/dotnet
+            /usr/share/miniconda
+            /usr/share/swift
+            /usr/share/kotlinc
+            /opt/ghc
+            /opt/hostedtoolcache/CodeQL
+            /opt/hostedtoolcache/Ruby
+            /opt/az
+            /usr/local/lib/android
+          )
+          for d in "${cleanup[@]}"; do
+            if [[ -d "$d" ]]; then
+              rm -rf -- "$d" && echo "deleted $d"
+            else
+              echo "$d not found"
+              continue
+            fi
+            free=$(df -BGB --output=avail / | tail -1)
+            if [[ ${free%GB} -ge "${free_disk_space}" ]]; then
+              echo "Reached requested free disk space ${free_disk_space} [${free} free]."
+              exit 0
+            fi
+          done
+          df -h
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Create KinD Cluster
+        uses: helm/kind-action@v1
+        with:
+          cluster_name: kind
+
+      - name: tags
+        run: |
+          echo "TAG=$(make tag)" | tee -a "$GITHUB_ENV"
+
+      - name: Build Docker image
+        uses: docker/build-push-action@v5
+        with:
+          file: image/Dockerfile
+          context: .
+          push: false
+          load: true
+          tags: quay.io/rhacs-eng/infra-server:${{ env.TAG }}
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      - name: Load into KinD
+        run: |
+          # Check cluster name
+          kind get clusters
+          #docker build -t quay.io/rhacs-eng/infra-server:${{ env.TAG }} -f image/Dockerfile .
+          kind load docker-image quay.io/rhacs-eng/infra-server:${{ env.TAG }} --name kind
+          docker images | grep infra-server
+
+      - name: Deploy
+        run: make deploy-local
+
+      - name: Wait for pods
+        run: kubectl wait --for=condition=ready pod -l app=infra-server -n infra --timeout=3m
+
+      - name: Start port-forward
+        run: |
+          kubectl port-forward -n infra svc/infra-server-service 8443:8443 >/dev/null 2>&1 &
+          echo "PORT_FORWARD_PID=$!" >> "$GITHUB_ENV"
+          sleep 5
+          # Verify port-forward is working
+          timeout 10 sh -c 'until curl -k -f https://localhost:8443/v1/whoami 2>/dev/null; do sleep 1; done' || echo "Warning: Backend may not be ready"
+
+      - name: Run E2E tests
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ui
+          start: npm run start
+          wait-on: 'http://localhost:3001'
+          wait-on-timeout: 60
+          command: npm run cypress:run:e2e
+        env:
+          BROWSER: none
+          PORT: 3001
+          # Backend uses HTTPS with self-signed cert (see scripts/deploy/helm.sh)
+          INFRA_API_ENDPOINT: https://localhost:8443
+
+      - name: Upload test artifacts
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: cypress-artifacts
+          path: |
+            ui/cypress/videos
+            ui/cypress/screenshots
+          retention-days: 7
+
+      - name: Cleanup port-forward
+        if: always()
+        run: |
+          # Kill by PID if available, otherwise kill by process name
+          if [ -n "${{ env.PORT_FORWARD_PID }}" ]; then
+            echo "Cleaning up port-forward (PID: ${{ env.PORT_FORWARD_PID }})..."
+            kill ${{ env.PORT_FORWARD_PID }} 2>/dev/null || true
+          fi
+          # Fallback: kill any remaining port-forward processes
+          pkill -f "kubectl port-forward.*8443:8443" 2>/dev/null || true
diff --git a/DEPLOYMENT.md b/DEPLOYMENT.md
@@ -118,7 +118,7 @@ This is used in the infra PR clusters to set the login referer and disable telem
 
 #### Deployments for testing only (no secrets)
 
-For test clusters (such as a local KinD/Colima), you can use the deploy-local make target to skip loading secrets. The flavor provisioning actions that require secrets will no be accessible, and integrations such as with Slack will be disabled.
+For test clusters (such as a local KinD/Colima), you can use the deploy-local make target to skip loading secrets. The flavor provisioning actions that require secrets will not be accessible, and integrations such as with Slack will be disabled.
 
 `make deploy-local`
 
diff --git a/scripts/deploy/helm.sh b/scripts/deploy/helm.sh
@@ -135,7 +135,10 @@ 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)
+        # SAN (Subject Alternative Name) is required for gRPC-Gateway TLS validation in modern Go versions
+        # Without SAN, you'll get: "x509: certificate relies on legacy Common Name field"
+        local san_config
+        san_config=$(mktemp) || { echo "Failed to create temporary config file" >&2; return 1; }
         cat > "${san_config}" <<EOF
 [req]
 distinguished_name = req_distinguished_name
diff --git a/ui/TESTING.md b/ui/TESTING.md
@@ -6,6 +6,15 @@ This directory contains Cypress E2E tests for the StackRox Infra UI.
 
 ### Prerequisites
 
+0. **Build** images:
+
+   ```bash
+   make image
+   ```
+
+   In your clone of the repository, you must build the infra-server into the
+   image for it to be deployed in the next step.
+
 1. **Deploy the local backend** (with authentication disabled):
 
    ```bash
diff --git a/ui/cypress.config.ts b/ui/cypress.config.ts
@@ -2,6 +2,20 @@
 import { defineConfig } from 'cypress';
 import * as crypto from 'crypto';
 
+interface JWTPayload {
+  user: {
+    Name: string;
+    Email: string;
+    Picture: string;
+    Expiry: {
+      seconds: number;
+    };
+  };
+  exp: number;
+  nbf: number;
+  iat: number;
+}
+
 export default defineConfig({
   e2e: {
     // UI dev server runs on :3001
@@ -21,15 +35,15 @@ export default defineConfig({
     setupNodeEvents(on, config) {
       // Task to generate JWT tokens for local dev authentication
       on('task', {
-        generateJWT({ payload, secret }: { payload: any; secret: string }) {
+        generateJWT({ payload, secret }: { payload: JWTPayload; secret: string }): string {
           // Create JWT header
           const header = {
             alg: 'HS256',
             typ: 'JWT',
           };
 
           // Base64url encode header and payload
-          const base64UrlEncode = (obj: any) =>
+          const base64UrlEncode = (obj: object) =>
             Buffer.from(JSON.stringify(obj))
               .toString('base64')
               .replace(/\+/g, '-')
diff --git a/ui/cypress/e2e/flavor-selection.cy.ts b/ui/cypress/e2e/flavor-selection.cy.ts
@@ -1,3 +1,16 @@
+const ERROR_MESSAGES = {
+  ACCESS_DENIED: 'access denied',
+  UNEXPECTED_ERROR: 'There was an unexpected error',
+};
+
+const SELECTORS = {
+  FLAVOR_CARD: '.pf-v6-c-card',
+  CARD_TITLE: '.pf-v6-c-card__title',
+  LABEL: '.pf-v6-c-label',
+  FLAVOR_TOGGLE: 'input[name="flavor-filter-toggle"]',
+  PAGE_HEADING: 'h2',
+};
+
 describe('Flavor Selection', () => {
   beforeEach(() => {
     // Authenticate for local development before visiting the page
@@ -7,41 +20,41 @@ describe('Flavor Selection', () => {
 
   it('should load the page without authentication errors', () => {
     // Verify no error messages (confirms LOCAL_DEPLOY mode is working)
-    cy.get('body').should('not.contain', 'access denied');
-    cy.get('body').should('not.contain', 'There was an unexpected error');
+    cy.get('body').should('not.contain', ERROR_MESSAGES.ACCESS_DENIED);
+    cy.get('body').should('not.contain', ERROR_MESSAGES.UNEXPECTED_ERROR);
   });
 
   it('should display a list of available flavors', () => {
-    // Wait for flavors to load (check for either "My Flavors" or "All Flavors" title)
-    cy.contains('h2', /My Flavors|All Flavors/).should('be.visible');
+    // Wait for the page heading to be visible (indicates page has loaded)
+    cy.get(SELECTORS.PAGE_HEADING).should('be.visible');
 
     // Verify that the flavor gallery is not empty
     // Each flavor is rendered as a LinkCard inside a GalleryItem
-    cy.get('.pf-v6-c-card').should('have.length.at.least', 1);
+    cy.get(SELECTORS.FLAVOR_CARD).should('have.length.at.least', 1);
   });
 
   it('should display flavor details for each flavor card', () => {
     // Wait for flavors to load
-    cy.contains('h2', /My Flavors|All Flavors/).should('be.visible');
+    cy.get(SELECTORS.PAGE_HEADING).should('be.visible');
 
     // Get the first flavor card and verify it has required elements
-    cy.get('.pf-v6-c-card')
+    cy.get(SELECTORS.FLAVOR_CARD)
       .first()
       .within(() => {
         // Each flavor card should have a name (header text)
-        cy.get('.pf-v6-c-card__title').should('exist').and('not.be.empty');
+        cy.get(SELECTORS.CARD_TITLE).should('exist').and('not.be.empty');
 
         // Each flavor card should have an availability label
-        cy.get('.pf-v6-c-label').should('exist');
+        cy.get(SELECTORS.LABEL).should('exist');
       });
   });
 
   it('should have clickable flavor cards that navigate to launch page', () => {
     // Wait for flavors to load
-    cy.contains('h2', /My Flavors|All Flavors/).should('be.visible');
+    cy.get(SELECTORS.PAGE_HEADING).should('be.visible');
 
     // Click the first flavor card
-    cy.get('.pf-v6-c-card').first().click();
+    cy.get(SELECTORS.FLAVOR_CARD).first().click();
 
     // Verify navigation to launch page (URL should contain /launch/)
     cy.url().should('include', '/launch/');
@@ -50,24 +63,27 @@ describe('Flavor Selection', () => {
     cy.contains('h1', /Launch/).should('be.visible');
   });
 
-  it('should toggle between "My Flavors" and "All Flavors"', () => {
-    // Verify initial state
-    cy.contains('h2', 'My Flavors').should('be.visible');
-
-    // Find and click the "Show All Flavors" toggle switch
-    // Use force:true because PatternFly switch has a visual element covering the input
-    cy.get('input[name="flavor-filter-toggle"]').click({ force: true });
+  it('should toggle between flavor filter states', () => {
+    // Get the initial heading text
+    cy.get(SELECTORS.PAGE_HEADING)
+      .should('be.visible')
+      .invoke('text')
+      .then((initialHeading) => {
+        // Find and click the flavor filter toggle switch
+        // Use force:true because PatternFly switch has a visual element covering the input
+        cy.get(SELECTORS.FLAVOR_TOGGLE).click({ force: true });
 
-    // Verify the title changed to "All Flavors"
-    cy.contains('h2', 'All Flavors').should('be.visible');
+        // Verify the heading text changed
+        cy.get(SELECTORS.PAGE_HEADING).invoke('text').should('not.equal', initialHeading);
 
-    // Verify URL parameter was updated
-    cy.url().should('include', 'showAllFlavors=true');
+        // Verify URL parameter was updated
+        cy.url().should('include', 'showAllFlavors=true');
 
-    // Toggle back
-    cy.get('input[name="flavor-filter-toggle"]').click({ force: true });
+        // Toggle back
+        cy.get(SELECTORS.FLAVOR_TOGGLE).click({ force: true });
 
-    // Verify we're back to "My Flavors"
-    cy.contains('h2', 'My Flavors').should('be.visible');
+        // Verify we're back to the original heading
+        cy.get(SELECTORS.PAGE_HEADING).invoke('text').should('equal', initialHeading);
+      });
   });
 });
diff --git a/ui/cypress/e2e/home.cy.ts b/ui/cypress/e2e/home.cy.ts
@@ -1,3 +1,8 @@
+const ERROR_MESSAGES = {
+  ACCESS_DENIED: 'access denied',
+  UNEXPECTED_ERROR: 'There was an unexpected error',
+};
+
 describe('Home Page', () => {
   beforeEach(() => {
     // Authenticate for local development before visiting the page
@@ -10,7 +15,7 @@ describe('Home Page', () => {
   });
 
   it('should not show error messages', () => {
-    cy.get('body').should('not.contain', 'access denied');
-    cy.get('body').should('not.contain', 'There was an unexpected error');
+    cy.get('body').should('not.contain', ERROR_MESSAGES.ACCESS_DENIED);
+    cy.get('body').should('not.contain', ERROR_MESSAGES.UNEXPECTED_ERROR);
   });
 });
diff --git a/ui/cypress/support/commands.ts b/ui/cypress/support/commands.ts
@@ -5,14 +5,16 @@
  * This uses the known session secret from local-deploy oidc.yaml.
  */
 Cypress.Commands.add('loginForLocalDev', () => {
-  // The session secret from chart/infra-server/templates/secrets.yaml for local deploy
+  // IMPORTANT: This secret is ONLY for local development (LOCAL_DEPLOY=true).
+  // It matches chart/infra-server/configuration/local-values.yaml
+  // Production deployments use different secrets from GCP Secret Manager.
   const sessionSecret = 'local-dev-secret-min-32-chars-long';
 
   // Create a test user matching the backend's expected structure
   // Note: Fields are capitalized to match Go's JSON serialization of protobuf structs
   const testUser = {
     Name: 'Test User',
-    Email: 'test@redhat.com',
+    Email: 'test@redhat.com', // Backend requires @redhat.com domain (see pkg/auth/tokenizer.go:128)
     Picture: '',
     Expiry: {
       seconds: Math.floor(Date.now() / 1000) + 3600, // 1 hour from now
