feat: implement first set of simple UI tests and run in CI finos#571

.github/workflows/ci.yml

@@ -54,3 +54,11 @@ jobs:
     # - name: Exit if coverage condition not met
     #   if: ${{ steps.test.outputs.exit_code }} != 0
     #   run: exit ${{ steps.test.outputs.exit_code }}
+
+    - name: Cypress run
+      uses: cypress-io/github-action@v6
+      with:
+        build: npm run build
+        start: npm start
+
+

cypress.config.js

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

cypress/e2e/login.cy copy.js

@@ -0,0 +1,19 @@
+describe("Display finos UI Login Page",()=>{
+
+  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/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/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')

package.json

@@ -16,7 +16,8 @@
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx,json}\" \"test/**/*.{js,jsx,ts,tsx,json}\"",
     "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx,json}\" \"test/**/*.{js,jsx,ts,tsx,json}\"",
     "format": "prettier --write src/**/*.{js,jsx,ts,tsx,css,md,json,scss} test/**/*.{js,jsx,ts,tsx,json} --config ./.prettierrc",
-    "gen-schema-doc": "node ./scripts/doc-schema.js"
+    "gen-schema-doc": "node ./scripts/doc-schema.js",
+    "cypress:run": "cypress run"
   },
   "bin": {
     "git-proxy": "./index.js",

src/ui/views/Login/Login.jsx

@@ -104,6 +104,7 @@ export default function UserProfile() {
                   width={'150px'}
                   src={logo}
                   alt='logo'
+                  data-test ="git-proxy-logo"
                 />
               </div>
             </CardHeader>
@@ -118,6 +119,7 @@ export default function UserProfile() {
                       value={username}
                       onChange={(e) => setUsername(e.target.value)}
                       autoFocus={true}
+                      data-test ='username'
                     />
                   </FormControl>
                 </GridItem>
@@ -131,14 +133,15 @@ export default function UserProfile() {
                       type='password'
                       value={password}
                       onChange={(e) => setPassword(e.target.value)}
+                      data-test ='password'
                     />
                   </FormControl>
                 </GridItem>
               </GridContainer>
             </CardBody>
             <CardFooter>
               {!isLoading ? (
-                <Button color='success' block disabled={!validateForm()} type='submit'>
+                <Button color='success' block disabled={!validateForm()} type='submit' data-test="login">
                   Login
                 </Button>
               ) : (