TRI-30586 Run cypress end to end on github actions

.github/workflows/e2e.yml

@@ -0,0 +1,22 @@
+name: End-to-end tests
+
+on:
+  push:
+    branches: [ "main" ]
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  cypress-run:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      # Install NPM dependencies, cache them correctly
+      # and run all Cypress tests
+      - name: Cypress run
+        uses: cypress-io/github-action@v6
+        with:
+          working-directory: ui
+          build: npm run build
+          start: npm start

tests/.gitignore

@@ -0,0 +1,2 @@
+node_modules
+cypress/screenshots

ui/.cypress-cucumber-preprocessorrc.json

@@ -0,0 +1,9 @@
+{
+    "nonGlobalStepDefinitions": false,
+    "cucumberJson": {
+        "generate": true,
+        "outputFolder": "cypress/cucumber-json",
+        "filePrefix": "",
+        "fileSuffix": ".cucumber"
+    }
+}

ui/cypress.config.js

@@ -0,0 +1,41 @@
+const { defineConfig } = require('cypress')
+
+module.exports = defineConfig({
+
+  projectId:'ag5qdq',
+
+  chromeWebSecurity: false,
+
+  'cypress-cucumber-preprocessor': {
+
+    nonGlobalStepDefinitions: true,
+
+    step_definitions: './cypress/e2e/**/*.feature',
+
+  },
+
+  e2e: {
+
+    //baseUrl: 'https://oxi.matr.io/',
+    baseUrl: 'http://localhost:3000',
+    ModifyObstructiveThirdPartyCode: true,
+    SkipDomainInjection: [ '*.matr.io'],
+
+    setupNodeEvents(on, config) {
+
+      return require('./cypress/plugins/index.js')(on, config)
+
+    },
+
+    //retries: 1,
+
+    testIsolation: false,
+
+    specPattern: 'cypress/e2e/**/*.feature',
+
+    supportFile:false
+
+  },
+
+})
+

ui/cypress/e2e/graphSlider.feature

@@ -0,0 +1,23 @@
+Feature: Validation of RPV and LE
+
+  Scenario: Validation of RPV and LE changes by moving Oxi States
+
+    Given I open the Oxidation State Analyser website
+
+    When I enter LiMn2O4 in Chemical composition text box
+
+    When I click Submit
+
+    Then I capture current RPV
+
+    Then I capture current LE
+
+    Then I click on new toggle value
+
+    Then I capture new RPV
+
+    Then I capture new LE
+
+    Then I verify the RPV and LE changes
+
+    #Then the indicator should move

ui/cypress/e2e/graphSlider/graphSlider.js

@@ -0,0 +1,124 @@
+import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps';
+import "cypress-xpath";
+const genFilesPath = "cypress/fixtures/rpv.text"
+const leFilesPath = "cypress/fixtures/le.text"
+const newRpvPath = "cypress/fixtures/newRpv.text"
+const newleFilesPath = "cypress/fixtures/newLe.text"
+//cy.writeFile(genFilesPath,'test') tested
+
+
+const sometext='';
+
+Given('I open the Oxidation State Analyser website', () => {
+
+  cy.visit(Cypress.config().baseUrl)
+  cy.intercept('POST', '/api', { fixture: 'response.json' })
+  cy.log('NAVIGATING TO OXIDATION ANALYSER WEB')
+  cy.wait(10000)
+  cy.get('#input-section-chemical-composition').should("be.visible")
+  cy.screenshot()
+
+
+});
+
+
+When('I enter LiMn2O4 in Chemical composition text box', () => {
+    cy.log('Entering LiMnO4 in chemical input')
+    cy.get('#input-section-chemical-composition').should("be.visible")
+      .type('LiMn2O4')
+
+}); 
+
+
+When('I click Submit',()=> {
+    cy.get('#input-section-submit-button')
+    .should('be.visible')
+    .click()
+
+});
+
+
+Then('I capture current RPV', () => {
+   cy.get('input[id="ecp-input"]')
+        .invoke('val')
+       .then(sometext => cy.writeFile(genFilesPath,sometext));
+        cy.log('The RPV value at first record is');
+
+});
+
+Then('I capture current LE', () => {
+
+    const items = []
+    cy.get('[data-field="likelihoodCurrentElecChemPotential"]')
+    .each(($li) => items.push($li.text()))
+    .then( () => {
+       cy.writeFile(leFilesPath,items)
+    })
+})
+
+
+Then('I click on new toggle value', () => {
+
+    cy.wait(5000)
+    cy.get("[id='next-nudge']")
+    .should('be.visible')
+    .click()
+    .click()
+});
+
+
+Then('I capture new RPV', () => {
+    cy.wait(5000)
+   cy.get('input[id="ecp-input"]')
+                .invoke('val')
+                .then(newRpv => cy.writeFile(newRpvPath,newRpv));
+        cy.readFile('cypress/fixtures/rpv.text')
+})
+
+
+Then('I capture new LE', () => {
+
+    const items = []
+    cy.get('[data-field="likelihoodCurrentElecChemPotential"]')
+    .each(($li) => items.push($li.text()))
+    .then( () => {
+        //cy.log(items.join(','))
+        cy.writeFile(newleFilesPath,items)
+    })
+})
+
+
+Then('I verify the RPV and LE changes', () => {
+
+    cy.fixture('rpv.text').then(fixture => {
+        cy.readFile(newRpvPath).then(download => {
+           assert.notEqual(fixture,download, " RPV Changes")
+        })
+    })
+
+    cy.fixture('le.text').then(oldle => {
+        cy.readFile(newleFilesPath).then(newle => {
+           assert.notEqual(oldle,newle, "LE Changes")
+        })
+    })
+
+})
+
+
+Then('I enter new value in RPV', () => {
+
+    cy.xpath("//*[@class='MuiInputBase-input MuiFilledInput-input css-2bxn45']").type('{selectall}{backspace}')
+    cy.xpath("//*[@class='MuiInputBase-input MuiFilledInput-input css-2bxn45']").type('2.00000',{force: true})
+    cy.xpath("//*[@id='custom-handle-slider']")
+       .should('be.visible')
+       .scrollTo('left',{ensureScrollable: false})
+
+});
+
+
+Then('the indicator should move', () => {
+
+    cy.log(' VALIDATING ...')
+
+});
+

ui/cypress/e2e/rowInteraction.feature

@@ -0,0 +1,19 @@
+Feature: Validation of Graph Slider and RPV
+
+  Scenario: Validation of Graph Slider and RPV changes by clicking different rows
+
+    Given I open the Oxidation State Analyser website
+
+    When I enter "LiMn2O4" in Chemical composition text box
+
+    When I click Submit
+
+    When I click row number 2
+
+    Then I capture "current" RPV and graph slider position
+
+    When I click row number 3
+
+    Then I capture "new" RPV and graph slider position
+
+    Then I validate the changes in RPV and graph slider position

ui/cypress/e2e/rowInteraction/rowInteraction.js

@@ -0,0 +1,65 @@
+import { Given, When, Then, And } from 'cypress-cucumber-preprocessor/steps';
+import "cypress-xpath";
+const rowsliderPath = "cypress/fixtures/rowslider.text"
+const rowrpvPath = "cypress/fixtures/rowrpv.text"
+const rownewSliderPath = "cypress/fixtures/rownewSlider.text"
+const rownewrpvPath = "cypress/fixtures/rownewrpv.text"
+
+
+const sometext='';
+
+Given('I open the Oxidation State Analyser website', () => {
+
+  cy.visit(Cypress.config().baseUrl)
+  cy.intercept('POST', '/api', { fixture: 'response.json' })
+
+
+});
+
+
+When('I enter {string} in Chemical composition text box', chemical => {
+
+    cy.log('Entering Chemical in chemical input')
+    cy.get('#input-section-chemical-composition').should("be.visible")
+      .type(chemical)
+
+});
+
+
+When('I click Submit',()=> {
+    cy.get('#input-section-submit-button')
+    .should('be.visible')
+    .click()
+    cy.wait(5000)
+
+});
+
+
+When('I click row number {int}', (row) => {
+    let actualRow=row-1
+    let theXpath="//*[@data-rowindex="+actualRow+"]"
+    // cy.xpath("//*[@data-id='row' and @data-rowindex='row']").click()
+   cy.xpath(theXpath).click()
+})
+
+
+Then('I capture {string} RPV and graph slider position',currentorNew => {
+    let filePath="cypress/fixtures/"+currentorNew+"rowrpv.text"
+    cy.get('input[id="ecp-input"]')
+    .invoke('val')
+    .then(sometext => cy.writeFile(filePath,sometext));
+    cy.log('The RPV value at first record is');
+
+    cy.get('[data-rcs="clip-item"]')
+    .invoke('attr', 'style').then(some => cy.writeFile(filePath,some, {flag : 'a+'}));
+    cy.log('The Slider style value at first record is');
+})
+
+
+Then('I validate the changes in RPV and graph slider position', () => {
+    cy.fixture('currentrowrpv.text').then(fixture => {
+        cy.readFile('cypress/fixtures/newrowrpv.text').then(download => {
+           assert.notEqual(fixture,download, " RPV and Slider Position Changes when row selection changes")
+        })
+    })
+})

ui/cypress/e2e/rpvInteraction.feature

@@ -0,0 +1,23 @@
+Feature: Validation of Graph Slider and LE
+
+  Scenario: Validation of Graph Slider and LE changes by changing RPV values
+
+    Given I open the Oxidation State Analyser website
+
+    When I enter LiMn2O4 in Chemical composition text box
+
+    When I click Submit
+
+    Then I capture current graph slider position
+
+    Then I capture current LE
+
+    Then I enter new RPV
+
+    Then I capture new graph slider position
+
+    Then I capture new LE
+
+    Then I verify the graph slider and LE changes
+
+    #Then the indicator should move