added error handling for invalid input on solve; added cypress test f…

…or invalid input
lbianchi-lbl · Jul 7, 2022 · 21dfa32 · 21dfa32
1 parent 56e9cef
commit 21dfa32
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 5 deletions.
diff --git a/electron/cypress/e2e/InvalidFlowsheetInput.cy.js b/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')
+
+    })
+
+})
diff --git a/electron/ui/src/components/InputWrapper/InputWrapper.js b/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"

diff --git a/electron/ui/src/components/SolveDialog/SolveDialog.js b/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]);

diff --git a/electron/ui/src/tests/SolveDialog.test.js b/electron/ui/src/tests/SolveDialog.test.js
@@ -561,7 +561,7 @@ const id = 1;
 test('test input accordion', () => {
 
     render( <SolveDialog open={solveDialogOpen} handleSolved={mockhandleSolved} flowsheetData={flowsheetData} id={id}></SolveDialog> )
-///flow_vol/i
+
     //test for component elements
     screen.getAllByRole('presentation', {  name: ""});
     screen.getByRole('dialog', {  name: ""});

diff --git a/electron/ui/src/views/FlowsheetConfig/FlowsheetConfig.js b/electron/ui/src/views/FlowsheetConfig/FlowsheetConfig.js
@@ -52,6 +52,7 @@ export default function FlowsheetConfig() {
     const [solveDialogOpen, setSolveDialogOpen] = useState(false);
     const [outputData, setOutputData] = useState(null);
     const [openSuccessSaveSnackbar, setOpenSuccessSaveSnackbar] = React.useState(false);
+    const [openErrorSnackbar, setOpenErrorSnackbar] = useState(false);
 
     useEffect(()=>{ 
       //console.log("params.id",params.id);
@@ -118,6 +119,12 @@ export default function FlowsheetConfig() {
       setSolveDialogOpen(false);
     };
 
+    const handleError = () => {
+      console.log("handle error");
+
+      setOpenErrorSnackbar(true);
+      setSolveDialogOpen(false);
+    };
 
     const handleSave = (data) => {
       console.log("handle save.....",data);
@@ -134,6 +141,9 @@ export default function FlowsheetConfig() {
       setOpenSuccessSaveSnackbar(false);
     };
 
+    const handleErrorSnackbarClose = () => {
+      setOpenErrorSnackbar(false);
+    };
 
     const handleReset = () => {
       console.log("reset. id:", params.id)
@@ -182,13 +192,24 @@ export default function FlowsheetConfig() {
           </Box>
         )
       }  
-      <SolveDialog open={solveDialogOpen} handleSolved={handleSolved} flowsheetData={flowsheetData} id={params.id}></SolveDialog>
+      <SolveDialog open={solveDialogOpen} handleSolved={handleSolved} handleError={handleError} flowsheetData={flowsheetData} id={params.id}></SolveDialog>
+      <Snackbar
+        open={openSuccessSaveSnackbar}
+        autoHideDuration={2000} 
+        onClose={handleSuccessSaveSnackbarClose}
+        message="Changes saved!" 
+      />
       <Snackbar
         open={openSuccessSaveSnackbar}
         autoHideDuration={2000} 
         onClose={handleSuccessSaveSnackbarClose}
         message="Changes saved!" 
       />
+      <Snackbar open={openErrorSnackbar} autoHideDuration={3000} onClose={handleErrorSnackbarClose}>
+        <Alert onClose={handleErrorSnackbarClose} severity="error">
+          Error: Data Input Infeasible
+        </Alert>
+      </Snackbar>
       </Container>  
 
     );