test for action.jsx and action.jsx font color changes based on sliderIndex

Author: joshua0308

src/app/components/Action.jsx

@@ -3,13 +3,15 @@ import PropTypes from 'prop-types';
 
 const Action = (props) => {
   const {
-    selected, handleChangeSnapshot, handleJumpSnapshot, index,
+    selected, handleChangeSnapshot, handleJumpSnapshot, index, sliderIndex,
   } = props;
+
   return (
     <div
       className={selected ? 'action-component selected' : 'action-component'}
       onClick={() => handleChangeSnapshot(index)}
       role="presentation"
+      style={index > sliderIndex ? { color: '#5f6369' } : {}}
     >
       <div className="action-component-text">{index}</div>
       <button

src/app/components/Tree.jsx

@@ -2,20 +2,17 @@ import React from 'react';
 import JSONTree from 'react-json-tree';
 import PropTypes from 'prop-types';
 
-<<<<<<< HEAD
-const getItemString = data => <span>{data.name}</span>;
-=======
 const getItemString = (type, data) => {
   // check to make sure that we are on the tree node, not anything else
-  if (Object.keys(data).length === 3 && typeof data.state === 'object' && typeof data.name === 'string' && Array.isArray(data.children)) {
-    return (
-      <span>
-        {data.name}
-      </span>
-    );
+  if (
+    Object.keys(data).length === 3
+    && typeof data.state === 'object'
+    && typeof data.name === 'string'
+    && Array.isArray(data.children)
+  ) {
+    return <span>{data.name}</span>;
   }
 };
->>>>>>> dev
 
 const Tree = (props) => {
   const { snapshot } = props;
@@ -27,9 +24,7 @@ const Tree = (props) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw) => {
-            return (typeof raw[0] !== 'number') ? <span>{raw[0]}</span> : null;
-          }}
+          labelRenderer={raw => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
         />
       )}
     </React.Fragment>

src/app/containers/ActionContainer.jsx

@@ -8,6 +8,7 @@ const ActionContainer = ({
   handleChangeSnapshot,
   handleJumpSnapshot,
   emptySnapshot,
+  sliderIndex,
 }) => {
   let actionsArr = [];
   if (snapshots.length > 0) {
@@ -19,6 +20,7 @@ const ActionContainer = ({
           index={index}
           snapshot={snapshot}
           selected={selected}
+          sliderIndex={sliderIndex}
           handleChangeSnapshot={handleChangeSnapshot}
           handleJumpSnapshot={handleJumpSnapshot}
         />
@@ -38,9 +40,7 @@ const ActionContainer = ({
 };
 
 ActionContainer.propTypes = {
-  snapshots: PropTypes.arrayOf(
-    PropTypes.object,
-  ).isRequired,
+  snapshots: PropTypes.arrayOf(PropTypes.object).isRequired,
   viewIndex: PropTypes.number.isRequired,
   handleChangeSnapshot: PropTypes.func.isRequired,
   handleJumpSnapshot: PropTypes.func.isRequired,

src/app/containers/MainContainer.jsx

@@ -201,6 +201,7 @@ class MainContainer extends Component {
           <ActionContainer
             snapshots={snapshots}
             viewIndex={viewIndex}
+            sliderIndex={sliderIndex}
             handleChangeSnapshot={this.handleChangeSnapshot}
             handleJumpSnapshot={this.handleJumpSnapshot}
             emptySnapshot={this.emptySnapshot}

src/app/styles/layout/_stateContainer.scss

@@ -17,6 +17,7 @@
   // prevent navbar from scrolling with state/tree display
   position: sticky;
   top: 0px;
+  left: 0px;
   z-index: 1;
 }