Merge pull request #37 from nmwenz90/diffview

Diffview

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/Diff.jsx

@@ -7,23 +7,35 @@ 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);
+  const delta = diff(previous, snapshot); // initilly an array with one object, on state change becomes an object
+  // console.log('delta: ', delta);
   // returns html in string
   const html = formatters.html.format(delta, previous);
-  if (show) formatters.html.showUnchanged();
-  else formatters.html.hideUnchanged();
-
+  // console.log('html   -->', html)
+  if (show){
+    // console.log('showing unchanged values', formatters.html.showUnchanged() );
+    formatters.html.showUnchanged();
+  } else {
+    // console.log('hiding unchanged values', formatters.html.hideUnchanged() );
+    formatters.html.hideUnchanged();
+  };
+  
   if (previous === undefined || delta === undefined) {
     return <div className='noState'> No state change detected. Trigger an event to change state </div>;
   }

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,