Bridge specs + Fix other broken specs

components/Codemirror/index.js

@@ -17,7 +17,7 @@ import 'codemirror/addon/display/fullscreen.css';
 import 'codemirror/addon/fold/foldgutter.css';
 
 function CodeMirror({
-  formKey, isEditView, readOnly, values, data,
+  formKey, isEditView, readOnly, values, data, id,
 }) {
   const codeRef = useRef(null);
   const [mounted, setMounted] = useState(false);
@@ -111,7 +111,7 @@ function CodeMirror({
   }, []);
 
   return (
-    <div ref={codeRef} style={{ zIndex: fullScreen ? 1200 : 5, position: 'relative' }}>
+    <div ref={codeRef} id={id} style={{ zIndex: fullScreen ? 1200 : 5, position: 'relative' }}>
       {mounted
         ? (
           <CM
@@ -159,6 +159,7 @@ CodeMirror.propTypes = {
     testPayloadCode: PropTypes.string,
   }),
   data: PropTypes.shape({}),
+  id: PropTypes.string.isRequired,
 };
 
 CodeMirror.defaultProps = {

components/Editor/ActionsDialog/index.js

@@ -26,7 +26,7 @@ const useStyles = makeStyles({
 });
 
 function ActionsDialog({
-  active, open, onClose, id,
+  active, open, onClose, bridgeId,
 }) {
   const [errorOpen, setErrorOpen] = useState(false);
   const [successOpen, setSuccessOpen] = useState(false);
@@ -35,7 +35,7 @@ function ActionsDialog({
 
   const handleAbort = () => {
     api.patch('/events/abort', {
-      bridge_id: id,
+      bridge_id: bridgeId,
     })
       .then((res) => {
         if (res.status === 200) {
@@ -51,8 +51,8 @@ function ActionsDialog({
   };
 
   const handleActivate = async () => {
-    await api.patch(`/bridges/${id}/${active ? 'deactivate' : 'activate'}`).then(() => {
-      router.push(`/bridge/${id}`);
+    await api.patch(`/bridges/${bridgeId}/${active ? 'deactivate' : 'activate'}`).then(() => {
+      router.push(`/bridge/${bridgeId}`);
       setSuccessOpen(true);
       setTimeout(() => {
         setSuccessOpen(false);
@@ -66,7 +66,7 @@ function ActionsDialog({
   };
 
   const handleDelete = () => {
-    api.delete(`/bridges/${id}`).then(() => {
+    api.delete(`/bridges/${bridgeId}`).then(() => {
       router.push('/dashboard');
     }).catch(() => {
       setErrorOpen(true);
@@ -82,6 +82,7 @@ function ActionsDialog({
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={successOpen}
         autoHideDuration={3000}
+        id="actions-success-message"
       >
         <Alert severity="success">
           Success! Your bridge has been updated.
@@ -91,30 +92,34 @@ function ActionsDialog({
         anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
         open={errorOpen}
         autoHideDuration={3000}
+        id="actions-error-message"
       >
         <Alert severity="error">
           Some error occurred. Please try again.
         </Alert>
       </Snackbar>
+
       <DialogTitle id="simple-dialog-title">Bridge Actions</DialogTitle>
       <List>
-        <ListItem button onClick={handleAbort}>
+        <ListItem button onClick={handleAbort} id="action-abort">
           <ListItemAvatar>
             <Avatar className={classes.avatar}>
               <CancelIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary="Abort Ongoing Requests" />
         </ListItem>
-        <ListItem button onClick={handleActivate}>
+
+        <ListItem button onClick={handleActivate} id="action-deactive">
           <ListItemAvatar>
             <Avatar className={classes.avatar}>
               <PauseIcon />
             </Avatar>
           </ListItemAvatar>
           <ListItemText primary={`${active ? 'Deactivate' : 'Activate'} Bridge`} />
         </ListItem>
-        <ListItem button onClick={handleDelete}>
+
+        <ListItem button onClick={handleDelete} id="action-delete">
           <ListItemAvatar>
             <Avatar className={classes.avatar}>
               <DeleteForeverIcon />
@@ -131,7 +136,7 @@ ActionsDialog.propTypes = {
   active: PropTypes.bool.isRequired,
   onClose: PropTypes.func.isRequired,
   open: PropTypes.bool.isRequired,
-  id: PropTypes.number.isRequired,
+  bridgeId: PropTypes.number.isRequired,
 };
 
 export default ActionsDialog;

components/Editor/BridgeTestCard/index.js

@@ -67,6 +67,7 @@ function BridgeTestCard({ isEditView, values }) {
             formKey="testPayloadCode"
             isEditView={isEditView}
             values={values}
+            id="test-payload"
           />
         </Container>
       </AccordionDetails>

components/Editor/EnvironmentVariablesCard/index.js

@@ -89,6 +89,7 @@ function EnvironmentVariablesCard({ environmentVariables }) {
                         name={`environmentVariables[${idx}].value`}
                         value={envVar.value || ''}
                         placeholder="Value"
+                        id={`envVar-${idx}-value`}
                         fullWidth
                         validate={validateEnvVars}
                       />
@@ -97,6 +98,7 @@ function EnvironmentVariablesCard({ environmentVariables }) {
                       <Button
                         className={classes.primary}
                         onClick={() => { handleDelete(arrayHelpers, envVar, idx); }}
+                        id={`envVar-trash-${idx}`}
                       >
                         <DeleteForeverIcon fontSize="large" />
                       </Button>
@@ -109,6 +111,7 @@ function EnvironmentVariablesCard({ environmentVariables }) {
                   variant="outlined"
                   className={classes.plusButton}
                   onClick={() => arrayHelpers.push({ key: '', value: '' })}
+                  id="envPlusBtn"
                 >
                   +
                 </Button>

components/Editor/HeadersCard/DelayDropdown.js

@@ -47,6 +47,7 @@ function MethodDropdown() {
         select
         validate={validateDelay}
         className={classes.dropDown}
+        id="delay"
       >
         <MenuItem value="0">Instant</MenuItem>
         <MenuItem value="15">15 Minutes</MenuItem>

components/Editor/HeadersCard/HeaderTextFields.js

@@ -90,6 +90,7 @@ function HeaderTextFields({ headers }) {
                     name={`headers[${idx}].value`}
                     value={header.value || ''}
                     placeholder="Value"
+                    id={`headers-${idx}-value`}
                     validate={validateHeaders}
                     fullWidth
                   />
@@ -98,6 +99,7 @@ function HeaderTextFields({ headers }) {
                   <Button
                     className={classes.primary}
                     onClick={() => { handleDelete(arrayHelpers, header, idx); }}
+                    id={`headers-trash-${idx}`}
                   >
                     <DeleteForeverIcon fontSize="large" />
                   </Button>
@@ -110,6 +112,7 @@ function HeaderTextFields({ headers }) {
               variant="outlined"
               className={classes.plusButton}
               onClick={() => arrayHelpers.push({ key: '', value: '' })}
+              id="headerPlusBtn"
             >
               +
             </Button>

components/Editor/HeadersCard/MethodDropdown.js

@@ -42,11 +42,12 @@ function MethodDropdown() {
       <Field
         component={TextField}
         type="text"
-        name="method"
+        name="httpMethod"
         select
         validate={validateMethod}
         label="Method"
         className={classes.dropDown}
+        id="method"
       >
         {methods.map((method) => (
           <MenuItem key={method} value={method}>{method}</MenuItem>

components/Editor/HeadersCard/RetryDropdown.js

@@ -46,9 +46,10 @@ function MethodDropdown() {
         select
         validate={validateRetries}
         className={classes.dropDown}
+        id="retries"
       >
         {retries.map((retry) => (
-          <MenuItem key={`${retry}-retries`} value={retry}>{`${retry} Retries`}</MenuItem>
+          <MenuItem key={`${retry}`} value={retry}>{`${retry}`}</MenuItem>
         ))}
       </Field>
     </FormControl>

components/Editor/HeadersCard/index.js

@@ -46,7 +46,7 @@ function HeaderCard({ headers, outboundUrl, title }) {
     let error;
     if (!bridgeTitle) {
       error = 'Required';
-    } else if (bridgeTitle.size < 3) {
+    } else if (bridgeTitle.length < 3) {
       error = 'Title must be at least 3 characters long';
     }
     return error;

components/Editor/PayloadCard/index.js

@@ -71,7 +71,7 @@ function PayloadCard({ isEditView, values }) {
           </Accordion>
 
           <Typography>Edit outbound payload</Typography>
-          <CodeMirror formKey="payloadCode" isEditView={isEditView} values={values} />
+          <CodeMirror formKey="payloadCode" isEditView={isEditView} values={values} id="payload" />
 
         </Container>
       </AccordionDetails>

components/Editor/index.js

@@ -42,14 +42,16 @@ function Editor({ bridge, isEditView }) {
   const [open, setOpen] = useState(false);
   const [actionsDialogOpen, setActionsDialogOpen] = useState(false);
   const [errorOpen, setErrorOpen] = useState(false);
+  const [errorMessage, setErrorMessage] = useState('Some error has occurred. Please try again.');
+
   // TODO: Custom error messages
   // const [errMsg, setErrMsg] = useState('');
 
   const {
     active,
     id,
     outboundUrl,
-    method,
+    httpMethod,
     headers,
     environmentVariables,
     data,
@@ -62,7 +64,7 @@ function Editor({ bridge, isEditView }) {
     active,
     title,
     outboundUrl,
-    method,
+    httpMethod,
     retries,
     delay,
     headers,
@@ -98,7 +100,7 @@ function Editor({ bridge, isEditView }) {
   const generatePayload = (values) => ({
     active: values.active,
     title: values.title,
-    http_method: values.method,
+    http_method: values.httpMethod,
     outbound_url: values.outboundUrl,
     retries: values.retries,
     delay: values.delay,
@@ -110,20 +112,54 @@ function Editor({ bridge, isEditView }) {
     },
   });
 
+  const validatePayloads = (payloadCode, testPayloadCode) => {
+    const erraneousPayloads = [];
+    const validatePayload = (payload, type) => {
+      try { JSON.parse(payload); } catch { erraneousPayloads.push(type); }
+    };
+    const createErrorMessage = () => {
+      if (erraneousPayloads.length === 1) {
+        setErrorMessage(`Invalid JSON for ${erraneousPayloads[0]} editor`);
+      } else {
+        setErrorMessage('Invalid JSON for Payload and Test Payload editors');
+      }
+    };
+
+    validatePayload(payloadCode, 'Payload');
+    validatePayload(testPayloadCode, 'Test Payload');
+
+    if (erraneousPayloads.length !== 0) {
+      createErrorMessage();
+      setErrorOpen(true);
+      return false;
+    }
+
+    return true;
+  };
+
   const handleSubmit = async (values, setSubmitting) => {
-    if (id) {
+    if (validatePayloads(values.payloadCode, values.testPayloadCode)) {
       // POST if new bridge, otherwise PATCH
-      await api
-        .patch(`/bridges/${id}`, generatePayload(values))
-        .catch(() => setErrorOpen(true));
-    } else {
-      await api
-        .post('/bridges', generatePayload(values))
-        .then((res) => router.push(`/bridge/${res.data.id}`))
-        .catch(() => setErrorOpen(true));
+      if (id) {
+        await api
+          .patch(`/bridges/${id}`, generatePayload(values))
+          .then(() => setOpen(true))
+          .catch(() => setErrorOpen(true));
+      } else {
+        await api
+          .post('/bridges', generatePayload(values))
+          .then((res) => {
+            setOpen(true);
+            // TODO: Should timeout so user gets a chance to read the snack
+            // but is 200ms the time we want?
+            setTimeout(() => {
+              router.push(`/bridge/${res.data.id}`);
+            }, 200);
+          })
+          .catch(() => setErrorOpen(true));
+      }
     }
 
-    setOpen(true);
     setSubmitting(false);
   };
 
@@ -149,6 +185,7 @@ function Editor({ bridge, isEditView }) {
             validateOnChange={false}
             validateOnBlur={false}
             className={classes.root}
+            id="form"
           >
             {({ values, submitForm }) => (
               <Form className={classes.form}>
@@ -172,10 +209,18 @@ function Editor({ bridge, isEditView }) {
                         active={active}
                         open={actionsDialogOpen}
                         onClose={() => setActionsDialogOpen(false)}
-                        id={id}
+                        bridgeId={id}
                       />
-                      <Button onClick={() => setActionsDialogOpen(true)} variant="outlined" color="secondary" className={classes.action}>Actions</Button>
-                      <Button onClick={submitForm} variant="contained" color="secondary">Save</Button>
+                      <Button
+                        onClick={() => setActionsDialogOpen(true)}
+                        variant="outlined"
+                        color="secondary"
+                        className={classes.action}
+                        id="actions-button"
+                      >
+                        Actions
+                      </Button>
+                      <Button id="save-btn" onClick={submitForm} variant="contained" color="secondary">Save</Button>
                     </Grid>
                   </Grid>
                 </Grid>
@@ -195,8 +240,8 @@ function Editor({ bridge, isEditView }) {
           </Formik>
         </Grid>
       </Grid>
-      <SnackAlert open={open} onClose={handleClose} severity="success" message="Bridge has been saved." />
-      <SnackAlert open={errorOpen} onClose={handleClose} severity="error" message="Some error has occured. Please try again." />
+      <SnackAlert id="success-alert" open={open} onClose={handleClose} severity="success" message="Bridge has been saved." />
+      <SnackAlert id="error-alert" open={errorOpen} onClose={handleClose} severity="error" message={errorMessage} />
     </>
   );
 }
@@ -209,7 +254,7 @@ Editor.defaultProps = {
     active: true,
     title: '',
     outboundUrl: '',
-    method: '',
+    httpMethod: '',
     retries: '',
     delay: '',
     headers: [
@@ -233,7 +278,7 @@ Editor.propTypes = {
     id: PropTypes.number,
     title: PropTypes.string,
     outboundUrl: PropTypes.string,
-    method: PropTypes.string,
+    httpMethod: PropTypes.string,
     retries: PropTypes.number,
     delay: PropTypes.number,
     headers: PropTypes.arrayOf(