Merge pull request #581 from bill-n/UI-Test

test: introduce UI tests with Cypress

Author: JamieSlome

.github/workflows/ci.yml

@@ -54,3 +54,29 @@ jobs:
     # - name: Exit if coverage condition not met
     #   if: ${{ steps.test.outputs.exit_code }} != 0
     #   run: exit ${{ steps.test.outputs.exit_code }}
+    
+    - name: Build application
+      run: npm run build
+
+    - name: Save build folder
+      uses: actions/upload-artifact@v4
+      with:
+        name: build
+        if-no-files-found: error
+        path: build
+
+    - name: Download the build folders
+      uses: actions/download-artifact@v4
+      with:
+        name: build
+        path: build
+
+    - name: Run cypress test
+      uses: cypress-io/github-action@v6
+      with: 
+        start: npm start &
+        wait-on: "http://localhost:3000"
+        wait-on-timeout: 120
+        run: npm run cypress:run
+
+

cypress.config.js

@@ -0,0 +1,7 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+  e2e: {
+    baseUrl: process.env.CYPRESS_BASE_URL ||'http://localhost:3000',
+  },
+})

cypress/e2e/login.cy.js

@@ -0,0 +1,19 @@
+describe("Display finos UI",()=>{
+  
+  beforeEach(() =>{
+    cy.visit('/login')
+ })
+ it('shoud find git proxy logo',() =>{
+  cy.get('[data-test="git-proxy-logo"]').should('exist')
+})
+  it('shoud find username',() =>{
+    cy.get('[data-test="username"]').should('exist')
+  })
+
+  it('shoud find passsword',() =>{
+    cy.get('[data-test="password"]').should('exist')
+  })
+  it('shoud find login button',() =>{
+    cy.get('[data-test="login"]').should('exist')
+  })
+})

cypress/support/commands.js

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })

cypress/support/e2e.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')