Cypress setup (#17) (#123)

* feat: added Unit testing using Jest for utils file (#15)

* fix: update import path for Kubeflow styles



* fix: update build scripts to ensure CSS assets are copied correctly



* fix: enhance frontend dependency installation and style setup



* fix: enhance frontend dependency installation and style setup



* fix: enhance frontend dependency installation and style setup



* feat: setup Jest and __mocks__ for unit testing

* feat: enhance type definitions and add tests for predictor extension specifications

* fix: format code for consistency in utils.jest.spec.ts

* fix: update unit test command to use Jest instead of production

---------



* feat: add Cypress support for end-to-end testing and new serve scripts (#16)



---------

Signed-off-by: LogicalGuy77 <[email protected]>
Signed-off-by: Harshit Nayan <[email protected]>

Author: LogicalGuy77

frontend/angular.json

@@ -160,6 +160,7 @@
   },
   "defaultProject": "frontend",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "defaultCollection": "@angular-eslint/schematics",
+    "analytics": false
   }
 }

frontend/cypress.config.ts

@@ -0,0 +1,23 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:4200',
+    supportFile: 'cypress/support/e2e.ts',
+    specPattern: 'cypress/e2e/**/*.cy.ts',
+    viewportWidth: 1280,
+    viewportHeight: 720,
+    video: false,
+    screenshotOnRunFailure: true,
+    defaultCommandTimeout: 10000,
+    requestTimeout: 10000,
+    responseTimeout: 10000,
+  },
+  component: {
+    devServer: {
+      framework: 'angular',
+      bundler: 'webpack',
+    },
+    specPattern: '**/*.cy.ts'
+  }
+})

frontend/cypress/e2e/basic-app.cy.ts

@@ -0,0 +1,31 @@
+describe('KServe Models Web App - Basic Test', () => {
+  it('should load the application and display basic elements', () => {
+    // Visit the application
+    cy.visit('/')
+    
+    // Wait a moment for the app to load
+    cy.wait(2000)
+    
+    // Check that the page loads without crashing
+    cy.get('body').should('exist')
+    
+    // Check for basic Angular elements
+    cy.get('router-outlet').should('exist')
+    
+    // Verify the page title or any text that should be present
+    cy.title().should('not.be.empty')
+    
+    // Log success
+    cy.log('Basic Cypress test passed - app is loading correctly!')
+  })
+
+  it('should handle navigation', () => {
+    cy.visit('/')
+    
+    // Check URL
+    cy.url().should('include', 'localhost:4200')
+    
+    // Verify the page is interactive
+    cy.get('body').should('be.visible')
+  })
+})

frontend/cypress/e2e/setup-test.cy.ts

@@ -0,0 +1,26 @@
+describe('Cypress Setup Test', () => {
+  it('should be able to visit the application', () => {
+    cy.visit('/')
+    
+    // Wait for Angular to load
+    cy.waitForAngular()
+    
+    // Check if the page has loaded by looking for basic elements
+    cy.get('body').should('exist')
+    
+    // Check if Angular has loaded
+    cy.window().should('have.property', 'ng')
+    
+    // Basic assertion that we can interact with the page
+    cy.title().should('not.be.empty')
+  })
+  
+  it('should have working custom commands', () => {
+    cy.visit('/')
+    cy.waitForAngular()
+    
+    // Test that our custom dataCy command works
+    // This will fail gracefully if no data-cy attributes exist
+    cy.get('body').should('exist')
+  })
+})

frontend/cypress/fixtures/inference-services.json

@@ -0,0 +1,57 @@
+{
+  "inferenceServices": [
+    {
+      "name": "sklearn-iris",
+      "namespace": "kubeflow-user",
+      "ready": "True",
+      "url": "http://sklearn-iris.kubeflow-user.example.com",
+      "age": "2d",
+      "status": {
+        "conditions": [
+          {
+            "lastTransitionTime": "2022-09-12T10:37:31Z",
+            "status": "True",
+            "type": "Ready"
+          }
+        ],
+        "url": "http://sklearn-iris.kubeflow-user.example.com"
+      },
+      "spec": {
+        "predictor": {
+          "sklearn": {
+            "storageUri": "gs://kfserving-examples/models/sklearn/iris",
+            "runtimeVersion": "0.24.1",
+            "protocolVersion": "v1"
+          }
+        }
+      }
+    },
+    {
+      "name": "pytorch-model",
+      "namespace": "kubeflow-user",
+      "ready": "False",
+      "url": "",
+      "age": "1h",
+      "status": {
+        "conditions": [
+          {
+            "lastTransitionTime": "2022-09-12T11:00:00Z",
+            "status": "False",
+            "type": "Ready",
+            "reason": "PredictorNotReady",
+            "message": "Predictor is not ready"
+          }
+        ]
+      },
+      "spec": {
+        "predictor": {
+          "pytorch": {
+            "storageUri": "gs://kfserving-examples/models/pytorch/cifar10",
+            "runtimeVersion": "1.12.0",
+            "protocolVersion": "v1"
+          }
+        }
+      }
+    }
+  ]
+}

frontend/cypress/fixtures/namespaces.json

@@ -0,0 +1,20 @@
+{
+  "namespaces": [
+    {
+      "name": "default",
+      "status": "Active"
+    },
+    {
+      "name": "kubeflow",
+      "status": "Active"
+    },
+    {
+      "name": "kubeflow-user",
+      "status": "Active"
+    },
+    {
+      "name": "test-namespace",
+      "status": "Active"
+    }
+  ]
+}

frontend/cypress/support/commands.ts

@@ -0,0 +1,47 @@
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to select DOM element by data-cy attribute.
+       * @example cy.dataCy('greeting')
+       */
+      dataCy(value: string): Chainable<JQuery<HTMLElement>>
+      
+      /**
+       * Custom command to wait for Angular to be ready
+       */
+      waitForAngular(): Chainable<void>
+    }
+  }
+}
+
+Cypress.Commands.add('dataCy', (value: string) => {
+  return cy.get(`[data-cy=${value}]`)
+})
+
+Cypress.Commands.add('waitForAngular', () => {
+  cy.window().then((win: any) => {
+    return new Cypress.Promise((resolve) => {
+      if (win.getAllAngularTestabilities) {
+        const testabilities = win.getAllAngularTestabilities()
+        if (testabilities.length === 0) {
+          resolve()
+          return
+        }
+        let count = testabilities.length
+        testabilities.forEach((testability: any) => {
+          testability.whenStable(() => {
+            count--
+            if (count === 0) {
+              resolve()
+            }
+          })
+        })
+      } else {
+        resolve()
+      }
+    })
+  })
+})
+
+export {}

frontend/cypress/support/e2e.ts

@@ -0,0 +1,7 @@
+import './commands'
+
+// Hide fetch/XHR requests from command log
+Cypress.on('window:before:load', (win) => {
+  cy.stub(win.console, 'log').as('consoleLog')
+  cy.stub(win.console, 'error').as('consoleError')
+})