Merge pull request #1 from MichaelPesce/UI-testing

UI testing

.gitignore

@@ -138,3 +138,6 @@ dmypy.json
 
 # Pyre type checker
 .pyre/
+
+# DS_store
+.DS_store

electron/cypress.config.js

@@ -0,0 +1,12 @@
+const { defineConfig } = require("cypress");
+
+module.exports = defineConfig({
+  e2e: {
+    setupNodeEvents(on, config) {
+      // implement node event listeners here
+
+    },
+    baseUrl: 'http://localhost:3000',
+    video: false
+  },
+});

electron/cypress/e2e/FlowsheetsList.cy.js

@@ -0,0 +1,55 @@
+describe('flowsheetslist', () => {
+    it('test flowsheetslist page', () => {
+        //load webpage
+        cy.visit('/')
+
+        //locate new flowsheet button
+        cy.findByRole('button', { name: /new/i })
+
+        //locate heading
+        cy.findByRole('heading', {  name: /flowsheets/i})
+
+        //locate table headers
+        cy.findByRole('columnheader', {  name: /name/i})
+        cy.findByRole('columnheader', {  name: /treatment train/i})
+        cy.findByRole('columnheader', {  name: /last run/i})
+        cy.findByRole('columnheader', {  name: /created/i})
+
+    })
+
+    it('test new flowsheet button', () => {
+        //load webpage
+        cy.visit('/')
+
+        //click on new flowsheet button
+        cy.findByRole('button', { name: /new/i }).click()
+
+        //verify that all textboxes are present and empty; enter values for each
+        cy.findByRole('textbox', {  name: /flowsheet name/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /has bypass/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /has desal feed/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /is twostage/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /has erd/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /nf type/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /nf base/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /ro type/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /ro base/i}).should('have.value', '');
+        cy.findByRole('textbox', {  name: /ro level/i}).should('have.value', '');
+
+        // enter text into textboxes
+        cy.findByRole('textbox', { name: /flowsheet name/i }).type('flowsheet z');
+        cy.findByRole('textbox', {  name: /has bypass/i}).type('yes');
+        cy.findByRole('textbox', {  name: /has desal feed/i}).type('no');
+        cy.findByRole('textbox', {  name: /is twostage/i}).type('maybe');
+        cy.findByRole('textbox', {  name: /has erd/i}).type('yes');
+        cy.findByRole('textbox', {  name: /nf type/i}).type('a');
+        cy.findByRole('textbox', {  name: /nf base/i}).type('milk');
+        cy.findByRole('textbox', {  name: /ro type/i}).type('b');
+        cy.findByRole('textbox', {  name: /ro base/i}).type('yogurt');
+        cy.findByRole('textbox', {  name: /ro level/i}).type('42');
+
+        // click cancel button
+        cy.findByRole('button', {  name: /cancel/i})
+
+    })
+})

electron/cypress/e2e/InvalidFlowsheetInput.cy.js

@@ -0,0 +1,26 @@
+describe('Invalid Input Test', () => {
+    it('test negative input for recovery rate', () => {
+        //load webpage
+        cy.visit('/')
+
+        //click example ro flowsheet
+        cy.findByRole('link', {  name: /example ro flowsheet/i}).click()
+
+        //enter negative value for recovery rate
+        var recovery_textbox = cy.get('#outlined-basicRecovery')
+        recovery_textbox.click({force:true})
+        recovery_textbox = cy.get('#outlined-basicRecovery')
+        recovery_textbox.type('{backspace}{backspace}{backspace}-10')
+
+        //click on save
+        cy.findAllByRole('button', {  name: /save/i}).eq(0).click()
+
+        //click on solve
+        cy.findAllByRole('button', {  name: /solve/i}).eq(0).click()
+
+        //find error message
+        cy.findByRole('alert')
+
+    })
+
+})

electron/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

electron/cypress/support/commands.js

@@ -0,0 +1 @@
+import "@testing-library/cypress/add-commands"

electron/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')

electron/package.json

@@ -13,7 +13,9 @@
     "electron": "^18.2.3"
   },
   "dependencies": {
+    "@testing-library/cypress": "^8.0.3",
     "axios": "^0.27.2",
+    "cypress": "^10.2.0",
     "dotenv": "^16.0.1"
   }
 }

electron/ui/src/App.test.js

@@ -1,8 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import App from './App';
+import { BrowserRouter } from "react-router-dom";
 
 test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
+  render(<BrowserRouter> <App /> </BrowserRouter>);
 });

electron/ui/src/components/InputWrapper/InputWrapper.js

@@ -36,7 +36,7 @@ export default function InputWrapper(props) {
     }
 
     return  <Tooltip title={fieldData.description}>
-                <TextField id="outlined-basic" 
+                <TextField id={"outlined-basic"+fieldData.display_name} 
                         label={fieldData.display_name}
                         variant="outlined" 
                         size="small"

electron/ui/src/components/SolveDialog/SolveDialog.js

@@ -9,7 +9,7 @@ import Box from '@mui/material/Box';
 import { solve } from "../../services/output.service"; 
 
 export default function SolveDialog(props) {
-  const { open, handleSolved, flowsheetData, id } = props;
+  const { open, handleSolved, handleError, flowsheetData, id } = props;
 
   useEffect(()=>{  
     if(open)
@@ -20,7 +20,10 @@ export default function SolveDialog(props) {
         .then((outputData)=>{ 
             console.log("outputData",outputData);
             handleSolved(outputData);
-        });
+        }).catch(e => {
+          console.log("caught error: "+e)
+          handleError()
+      });
         //},3000);
     }
   },[open]);

electron/ui/src/tests/FlowsheetsListTable.test.js

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import FlowsheetsListTable from "Components/FlowsheetsListTable/FlowsheetsListTable"
+import test_data from '../../../../backend/data/flowsheets/fake/data.json'
+
+
+test('test flowsheets list table', () => {
+    render( <FlowsheetsListTable rows={[test_data]}/> )
+
+    expect(screen.getByRole('cell', {  name: /METAB treatment train/i}))
+    expect(screen.getByRole('link', {  name: /METAB treatment train/i}))
+    expect(screen.getByRole('button', { name: /edit project/i }))
+
+    screen.debug();
+
+})

electron/ui/src/tests/Graph.test.js

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import Graph from "Components/Graph/Graph"
+
+//mock props
+
+test('test input accordion', () => {
+
+    render( <Graph></Graph> )
+
+    //test for component elements
+    screen.getByRole('img', {  name: /flowsheet/i});
+})

electron/ui/src/tests/Header.test.js

@@ -0,0 +1,13 @@
+import { render, screen } from '@testing-library/react';
+import Header from "Components/Boilerplate/Header/Header"
+
+//mock props
+
+test('test input accordion', () => {
+
+    render( <Header></Header> )
+
+    //test for component elements
+    screen.getByRole('link', {  name: /NAWI logo/i});
+    screen.getByRole('img', {  name: /NAWI logo/i});
+})

electron/ui/src/tests/InputAccordion.test.js

@@ -0,0 +1,50 @@
+import { render, screen } from '@testing-library/react';
+import InputAccordion from "Components/InputAccordion/InputAccordion"
+
+//mock props
+const key = ""
+
+const mockSections = {
+    "": {
+      "display_name": "",
+      "variables": {
+        "flow_vol": {
+          "value": {
+            "index": [
+              [
+                0
+              ]
+            ],
+            "value": [
+              0.0003286
+            ],
+            "bounds": [
+              [
+                null,
+                null
+              ]
+            ]
+          },
+          "display_name": "flow_vol",
+          "description": "Volumetric flowrate in feed",
+          "display_units": "m<sup>3</sup>/s",
+          "indices": [],
+          "scale_factor": 0,
+          "to_units": "",
+          "readonly": false,
+          "category": ""
+        },
+      }
+    }
+  }
+
+test('test input accordion', () => {
+
+    render( <InputAccordion dataKey={key} data={mockSections[key]}></InputAccordion> )
+
+    //test for component elements
+    screen.getByRole('button', {  name: ""});
+    screen.getByRole('region', {  name: ""});
+    screen.getByRole('textbox', {  name: /flow_vol/i});
+
+})

electron/ui/src/tests/InputWrapper.test.js

@@ -0,0 +1,41 @@
+import { render, screen } from '@testing-library/react';
+import InputWrapper from "Components/InputWrapper/InputWrapper"
+
+//mock props
+const key = "flow_vol"
+const fieldData = {
+    "value": {
+      "index": [
+        [
+          0
+        ]
+      ],
+      "value": [
+        0.0003286
+      ],
+      "bounds": [
+        [
+          null,
+          null
+        ]
+      ]
+    },
+    "display_name": "flow_vol",
+    "description": "Volumetric flowrate in feed",
+    "display_units": "m<sup>3</sup>/s",
+    "indices": [],
+    "scale_factor": 0,
+    "to_units": "",
+    "readonly": false,
+    "category": ""
+  }
+
+test('test input wrapper', () => {
+
+    render( <InputWrapper key={key} fieldData={fieldData}></InputWrapper> )
+
+    //test for component elements
+    screen.getByRole('textbox', {  name: /flow_vol/i});
+
+
+})

electron/ui/src/tests/NewFlowsheetDialog.test.js

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import NewFlowsheetDialog from "Components/NewFlowsheetDialog/NewFlowsheetDialog"
+
+
+//mock props
+const open = true
+const mockClose = () => {
+    console.log("close");
+};
+
+test('test new flowsheet dialog', () => {
+    render( <NewFlowsheetDialog open={open} onClose={mockClose}></NewFlowsheetDialog> )
+
+    //test that all textboxes are present
+    screen.getByRole('textbox', {  name: /flowsheet name/i});
+    screen.getByRole('textbox', {  name: /has bypass/i});
+    screen.getByRole('textbox', {  name: /has desal feed/i});
+    screen.getByRole('textbox', {  name: /is twostage/i});
+    screen.getByRole('textbox', {  name: /has erd/i});
+    screen.getByRole('textbox', {  name: /nf type/i});
+    screen.getByRole('textbox', {  name: /nf base/i});
+    screen.getByRole('textbox', {  name: /ro type/i});
+    screen.getByRole('textbox', {  name: /ro base/i});
+    screen.getByRole('textbox', {  name: /ro level/i});
+
+    //test that cancel and create buttons are present
+    screen.getByRole('button', {  name: /cancel/i})
+    screen.getByRole('button', {  name: /create/i})
+
+    //screen.debug();
+})

electron/ui/src/tests/Page.test.js

@@ -0,0 +1,12 @@
+import { render, screen } from '@testing-library/react';
+import Page from "Components/Page/Page"
+
+//mock props
+
+test('test input accordion', () => {
+
+    render( <Page></Page> )
+
+    //test for component elements
+    screen.getByRole('img', {  name: /flowsheet/i});
+})