Merge pull request #38 from oslabs-beta/staging

Staging

Author: crperezt

src/app/__tests__/Diff.test.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Diff from '../components/Diff.jsx';
+
+import { useStoreContext } from '../store';
+
+configure({ adapter: new Adapter() });
+
+jest.mock('../store');
+
+describe('Unit testing for Diff.jsx', () => {
+  let wrapper;
+  const props = {
+    show: false,
+    snapshot: [{
+      children: [{
+        state: { total: 12, next: 5, operation: null },
+      }],
+
+    }],
+  }
+
+  const state = {
+    currentTab: 100,
+    tabs: { 100: { snapshots: [1, 2, 3, 4], viewIndex: 1, sliderIndex: 1 } },
+  };
+
+
+  useStoreContext.mockImplementation(() => [state]);
+
+  const delta = { children: {} }; // expect delta to be an obj
+  const html = 'html'; // expect html to be a string
+  const previous = { state: 'string', children: {} }; // expect previous to be an obj
+
+  beforeEach(() => {
+    wrapper = shallow(<Diff {...props} />);
+  });
+
+  describe('delta', () => {
+    it('delta variable should be an object, with a property children', () => {
+      expect(typeof delta).toBe('object');
+      expect(delta).toHaveProperty('children');
+    });
+  });
+
+  describe('html', () => {
+    it('html variable should be a string', () => {
+      expect(typeof html).toBe('string');
+    });
+  });
+
+  describe('previous', () => {
+    it('previous variable should be a object', () => {
+      expect(previous).toHaveProperty('state');
+      expect(previous).toHaveProperty('children');
+      expect(typeof previous).toBe('object');
+    });
+  });
+
+  describe('Diff Component', () => {
+    it('Check if Diff component is a div', () => {
+      expect(wrapper.type()).toEqual('div');
+    });
+    it('Check if Diff component inner text value is a string', () => {
+      expect(typeof wrapper.text()).toEqual('string');
+    });
+    xit('Check if Diff component div has a className noState ', () => {
+      console.log(wrapper.props());
+      expect(wrapper.props().className).toEqual('noState');
+    });
+  });
+
+});

src/app/__tests__/SwitchApp.test.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import Select from 'react-select';
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import SwitchApp from '../components/SwitchApp.jsx';
+
+import { useStoreContext } from '../store';
+
+configure({ adapter: new Adapter() });
+
+jest.mock('../store');
+
+
+describe('Unit testing for SwitchApp.jsx', () => {
+  let wrapper;
+
+  const state = {
+    currentTab: 100,
+    tabs: { 100: { snapshots: [1, 2, 3, 4], viewIndex: 1, sliderIndex: 1 } },
+  };
+  const tabsArray = [];
+  const currTab = {
+    value: 100,
+    label: {},
+  };
+
+  const dispatch = jest.fn();
+  useStoreContext.mockImplementation(() => [dispatch, state]);
+
+  beforeEach(() => {
+    wrapper = shallow(<SwitchApp />);
+  });
+
+  describe('currentTab', () => {
+    it('should have properties value and label', () => {
+      expect(currTab).toHaveProperty('value');
+      expect(currTab).toHaveProperty('label');
+    });
+  });
+
+// check if currTab has properties value, label
+// currentTab should be a number
+// tab should be an object
+// check if onChange if the function runs
+// className should be tab-select-container
+// options should be an array
+// value prop should be equal to a number
+})       

src/app/components/Action.jsx

@@ -23,14 +23,11 @@ const Action = props => {
     } else {
       seconds = '00';
     }
-    miliseconds = JSON.stringify(miliseconds);
+    miliseconds = Number.parseFloat(miliseconds).toFixed(2)
     const arrayMiliseconds = miliseconds.split('.');
     if (arrayMiliseconds[0].length < 2) {
       arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
     }
-    if (arrayMiliseconds[1].length > 3) {
-      arrayMiliseconds[1] = arrayMiliseconds[1].slice(0, 2);
-    }
     if (index == 0) {
       return `${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
     }

src/app/components/Diff.jsx

@@ -7,20 +7,58 @@ import { useStoreContext } from '../store';
 
 function Diff({ snapshot, show }) {
   const [mainState] = useStoreContext();
+  // console.log('this is the mainState variable -->', mainState);
   const { currentTab, tabs } = mainState; // Nate:: k/v pairs of mainstate store object being created
+  // console.log('this is the currentTab variable -->', currentTab);
+  // console.log('this is the tabs variable -->', tabs);
   const { snapshots, viewIndex, sliderIndex } = tabs[currentTab];
   let previous;
 
   // previous follows viewIndex or sliderIndex
-  if (viewIndex !== -1) {
+  if (viewIndex !== -1) { // if tab isnt selected, view index is set to -1
     previous = snapshots[viewIndex - 1];
+    // console.log('previous with viewIndex - 1: ', previous)
   } else {
     previous = snapshots[sliderIndex - 1];
+    // console.log('previous with sliderIndex - 1: ', previous)
   }
-  // Nate:: diff function returns a comparaison of two objects, one has an updated change
-  const delta = diff(previous, snapshot);
+
+  // gabi :: cleanning preview from stateless data
+  const statelessCleanning = obj => {
+    const newObj = { ...obj };
+    if (newObj.name === 'nameless') {
+      delete newObj.name;
+    }
+    if (newObj.componentData) {
+      delete newObj.componentData;
+    }
+    if (newObj.state === 'stateless') {
+      delete newObj.state;
+    }
+    if (newObj.stateSnaphot) {
+      newObj.stateSnaphot = statelessCleanning(obj.stateSnaphot);
+    }
+    if (newObj.children) {
+      newObj.children = [];
+      if (obj.children.length > 0) {
+        obj.children.forEach(element => {
+          if (element.state !== 'stateless' || element.children.length > 0) {
+            const clean = statelessCleanning(element);
+            newObj.children.push(clean);
+          }
+        });
+      }
+    }
+    return newObj;
+  };
+  // gabi :: just display stateful data
+  const previousDisplay = statelessCleanning(previous);
+  // Nate:: diff function returns a comparison of two objects, one has an updated change
+  // gabi :: just display stateful data
+  const delta = diff(previousDisplay, snapshot);
   // returns html in string
-  const html = formatters.html.format(delta, previous);
+  // gabi :: just display stateful data
+  const html = formatters.html.format(delta, previousDisplay);
   if (show) formatters.html.showUnchanged();
   else formatters.html.hideUnchanged();
 

src/app/components/StateRoute.jsx

@@ -39,13 +39,13 @@ const StateRoute = ({ snapshot, hierarchy, snapshots, viewIndex }) => {
     <Router>
       <div className="navbar">
         <NavLink className="router-link" activeClassName="is-active" exact to="/">
-        State
+        Tree
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/chart">
         History
         </NavLink>
         <NavLink className="router-link" activeClassName="is-active" to="/performance">
-        Rendering
+        Performance
         </NavLink>
       </div>
       <Switch>

src/app/components/SwitchApp.jsx

@@ -6,12 +6,13 @@ import { setTab } from '../actions/actions';
 
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
-
+  console.log('tabs object -->', tabs);
+  
   const tabsArray = [];
-
   Object.keys(tabs).forEach(tab => {
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
   });
+  console.log('tabs object -->', tabsArray);
 
   const currTab = {
     value: currentTab,

src/app/styles/components/_actionComponent.scss

@@ -14,7 +14,7 @@
 }
 
 .action-component-text{
-  margin-bottom: 10px;
+  margin-bottom: 8px;
 }
 
 .action-component.selected {

src/app/styles/components/_buttons.scss

@@ -21,6 +21,7 @@
 .time-button {
   outline: none;
   height: 20px;
+  margin-bottom: 8px;
   width: 70px;
   border: none;
   border-radius: 3px;
@@ -31,6 +32,7 @@
 
 .jump-button {
   @extend %button-shared;
+  margin-bottom: 8px;
   width: 50px;
   opacity: 0;
   transform: rotateX(90deg);

src/app/styles/components/d3graph.css

@@ -96,7 +96,7 @@ div.tooltip {
 .perfContainer {
   display: block;
   margin: 0 -14px;
-  background-color: hsl(152,80%,80%);
+  background-color: hsl(221,16%,20%);
   /* border: 2px solid red; */
 }