Merge pull request #59 from jzuniga206/native

Added Jest tests for some left container reducers

Author: sean1292

package.json

@@ -72,6 +72,7 @@
     "build": "cross-env NODE_ENV=production webpack --config webpack.config.production.js",
     "build-bin": "electron-builder -mwl",
     "test": "cross-env NODE_ENV=test jest --verbose",
+    "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
     "test:clear": "cross-env NODE_ENV=test jest --clearCache",
     "test:update-snap": "cross-env NODE_ENV=test jest --updateSnapshot",
     "linter": "eslint src",

src/components/bottom/Props.tsx

@@ -25,123 +25,6 @@ interface PropsPropsInt extends PropsInt {
   }): void;
 }
 
-const styles = () => ({
-  root: {
-    display: 'flex',
-    justifyContent: 'center',
-    flexWrap: 'wrap'
-  },
-  chip: {
-    color: '#eee',
-    backgroundColor: '#333333'
-  },
-  column: {
-    display: 'inline-flex',
-    alignItems: 'baseline'
-  },
-  icon: {
-    fontSize: '20px',
-    color: '#eee',
-    opacity: '0.7',
-    transition: 'all .2s ease',
-
-    '&:hover': {
-      color: 'red'
-    }
-  },
-  cssLabel: {
-    color: 'white',
-
-    '&$cssFocused': {
-      color: 'green'
-    }
-  },
-  propHeader: {
-    fontSize: '35px',
-    fontWeight: '900',
-    marginLeft: '1rem',
-    paddingTop: '10px'
-  },
-  dataTableHeader: {
-    fontSize: '35px',
-    fontWeight: '900',
-    marginLeft: '22rem',
-    marginTop: '15px',
-    paddingTop: '10px'
-  },
-  cssFocused: {},
-  input: {
-    color: '#fff',
-    marginBottom: '10px',
-    width: '160px',
-    backgroundColor: 'none',
-    borderRadius: '5px',
-    height: '40%',
-    paddingLeft: '15px',
-    paddingTop: '5px',
-    paddingBottom: '5px',
-    paddingRight: '10px',
-    fontSize: '1.2rem',
-    whiteSpace: 'nowrap',
-    overflowX: 'hidden',
-    textOverflow: 'ellipsis',
-    border: '1px solid #33eb91'
-  },
-  inputLabel: {
-    fontSize: '16px',
-    zIndex: '20',
-    color: '#fff',
-    marginLeft: '10px'
-  },
-  select: {
-    color: '#fff',
-    marginBottom: '10px',
-    width: '120px',
-    backgroundColor: 'rgba(0, 0, 0, 0.3)',
-    borderRadius: '5px',
-    height: '40%',
-    overflowWrap: 'break-word',
-    paddingLeft: '15px',
-    paddingTop: '5px',
-    paddingBottom: '5px',
-    fontSize: '1.2rem',
-    border: '1px solid #33eb91'
-  },
-  selectLabel: {
-    fontSize: '16px',
-    zIndex: '20',
-    color: '#fff',
-    marginLeft: '10px'
-  },
-  addProp: {
-    width: '15rem',
-    marginLeft: '3rem',
-    height: '4rem',
-    transition: 'all 0.1s ease-out',
-    border: '2px solid #33eb91',
-    background: 'transparent',
-    color: '#fff',
-    '&:hover': {
-      transform: 'scale(1.1)',
-      fontSize: '1.2rem',
-      backgroundColor: '#33eb91',
-      color: '#006400'
-    }
-  },
-  dataTable: {
-    border: '1px solid red',
-    backgroundColor: 'red',
-    width: '60%'
-  },
-  light: {
-    color: '#eee'
-  },
-  avatar: {
-    color: '#eee',
-    fontSize: '10px'
-  }
-});
-
 const mapDispatchToProps = (dispatch: any) => ({
   addProp: (prop: PropInt) => dispatch(addProp(prop)),
   deleteProp: (propId: number) => dispatch(deleteProp(propId)),
@@ -159,17 +42,14 @@ const mapStateToProps = (store: any) => ({
   focusChild: store.workspace.focusChild
 });
 
-// available types for select drop-down for button types
+// available TypeScript types for select drop-down next to Props input
 const availablePropTypes = {
   string: 'STR',
   number: 'NUM',
   object: 'OBJ',
   array: 'ARR',
   boolean: 'BOOL',
   function: 'FUNC',
-  // symbol: 'SYM',
-  // node: 'NODE',
-  // element: 'ELEM',
   any: 'ANY',
   tuple: 'TUP',
   enum: 'ENUM'
@@ -228,7 +108,7 @@ class Props extends Component<PropsPropsInt, StateInt> {
   // function that handles the addition of props to a given componnent
   // added regex to strip usr input from non alpha numeric properties
   // presence of these characters crashes the app and should not be a valid input anyways
-  handleAddProp = (event: MouseEvent) => {
+  handleAddProp = (event: React.ChangeEvent<HTMLFormElement>) => {
     event.preventDefault();
 
     // destructuring from local state
@@ -286,7 +166,10 @@ class Props extends Component<PropsPropsInt, StateInt> {
     }));
 
     return (
-      <div className={'htmlattr'}>
+      <div
+        className={'htmlattr'}
+        style={{ overflowY: 'auto', height: '85%', marginTop: '1rem' }}
+      >
         {' '}
         {/* if no focus component in state, then render message */}
         {Object.keys(focusComponent).length < 1 ? (
@@ -333,7 +216,6 @@ class Props extends Component<PropsPropsInt, StateInt> {
                         <FormControl>
                           <TextField
                             type="text"
-                            // native commented out due to overload error with material
                             id="propVariable"
                             label="Prop"
                             margin="none"
@@ -355,22 +237,6 @@ class Props extends Component<PropsPropsInt, StateInt> {
                           />
                         </FormControl>
                       </Grid>
-                      {/* code for  */}
-                      {/* <Grid item xs={6}>
-                        <TextField
-                          id='propValue'
-                          label='Value'
-                          margin='normal'
-                          onChange={this.handleChange}
-                          InputProps={{
-                            className: classes.input,
-                          }}
-                          InputLabelProps={{
-                            className: classes.input,
-                          }}
-                          value={this.state.propValue}
-                        />
-                      </Grid> */}
                       <Grid item xs={6}>
                         <FormControl required>
                           <InputLabel
@@ -429,10 +295,12 @@ class Props extends Component<PropsPropsInt, StateInt> {
                   item
                   xs={8}
                   style={{
-                    height: '17rem',
-                    overflow: 'scroll',
+                    height: '100%',
+                    overflowY: 'auto',
+                    overflowX: 'auto',
                     marginTop: '1rem',
-                    paddingBottom: '1rem',
+                    // paddingBottom: '1rem',
+                    marginLeft: '6rem',
                     paddingTop: '0'
                   }}
                 >
@@ -455,6 +323,123 @@ class Props extends Component<PropsPropsInt, StateInt> {
   }
 }
 
+const styles = () => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  },
+  chip: {
+    color: '#eee',
+    backgroundColor: '#333333'
+  },
+  column: {
+    display: 'inline-flex',
+    alignItems: 'baseline'
+  },
+  icon: {
+    fontSize: '20px',
+    color: '#eee',
+    opacity: '0.7',
+    transition: 'all .2s ease',
+
+    '&:hover': {
+      color: 'red'
+    }
+  },
+  cssLabel: {
+    color: 'white',
+
+    '&$cssFocused': {
+      color: 'green'
+    }
+  },
+  propHeader: {
+    fontSize: '35px',
+    fontWeight: '900',
+    marginLeft: '1rem',
+    paddingTop: '10px'
+  },
+  dataTableHeader: {
+    fontSize: '35px',
+    fontWeight: '900',
+    marginLeft: '22rem',
+    marginTop: '15px',
+    paddingTop: '10px'
+  },
+  cssFocused: {},
+  input: {
+    color: '#fff',
+    marginBottom: '10px',
+    width: '160px',
+    backgroundColor: 'none',
+    borderRadius: '5px',
+    height: '40%',
+    paddingLeft: '15px',
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    paddingRight: '10px',
+    fontSize: '1.2rem',
+    whiteSpace: 'nowrap',
+    overflowX: 'hidden',
+    textOverflow: 'ellipsis',
+    border: '1px solid #33eb91'
+  },
+  inputLabel: {
+    fontSize: '16px',
+    zIndex: '20',
+    color: '#fff',
+    marginLeft: '10px'
+  },
+  select: {
+    color: '#fff',
+    marginBottom: '10px',
+    width: '120px',
+    backgroundColor: 'rgba(0, 0, 0, 0.3)',
+    borderRadius: '5px',
+    height: '40%',
+    overflowWrap: 'break-word',
+    paddingLeft: '15px',
+    paddingTop: '5px',
+    paddingBottom: '5px',
+    fontSize: '1.2rem',
+    border: '1px solid #33eb91'
+  },
+  selectLabel: {
+    fontSize: '16px',
+    zIndex: '20',
+    color: '#fff',
+    marginLeft: '10px'
+  },
+  addProp: {
+    width: '15rem',
+    marginLeft: '3rem',
+    height: '4rem',
+    transition: 'all 0.1s ease-out',
+    border: '2px solid #33eb91',
+    background: 'transparent',
+    color: '#fff',
+    '&:hover': {
+      transform: 'scale(1.1)',
+      fontSize: '1.2rem',
+      backgroundColor: '#33eb91',
+      color: '#006400'
+    }
+  },
+  dataTable: {
+    border: '1px solid red',
+    backgroundColor: 'red',
+    width: '60%'
+  },
+  light: {
+    color: '#eee'
+  },
+  avatar: {
+    color: '#eee',
+    fontSize: '10px'
+  }
+});
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps