starting unit testing on SwitchApp component

Author: nmwenz90

src/app/__tests__/Diff.test.jsx

@@ -1,8 +1,6 @@
 import React from 'react';
 import { configure, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
-import { diff, formatters } from 'jsondiffpatch';
-import ReactHtmlParser from 'react-html-parser';
 import Diff from '../components/Diff.jsx';
 
 import { useStoreContext } from '../store';
@@ -13,51 +11,32 @@ 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 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 } },
+    tabs: { 100: { snapshots: [1, 2, 3, 4], viewIndex: 1, sliderIndex: 1 } },
   };
 
-  const currentTab = state.tabs[state.currentTab];
 
-  jest.mock('../store');
   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 />);
-    useStoreContext.mockClear();
-    // console.log('Diff component wrapper', wrapper);
+    wrapper = shallow(<Diff {...props} />);
   });
 
-
-  // // const state = {
-  // //   currentTab: 1,
-  // //   tabs: [],
-  // // };
-  
-  // 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 snapshot={props.snapshot} show={props.show} />);
-  //   // console.log('Diff component wrapper', wrapper);
-  // });
-
   describe('delta', () => {
     it('delta variable should be an object, with a property children', () => {
       expect(typeof delta).toBe('object');
@@ -79,27 +58,17 @@ describe('Unit testing for Diff.jsx', () => {
     });
   });
 
-  // the diff component should be a diff
-  // it should detect no state change when state is undefined
   describe('Diff Component', () => {
     it('Check if Diff component is a div', () => {
       expect(wrapper.type()).toEqual('div');
     });
-    it('Check if Diff component inner text states no chages made', () => {
-      expect(wrapper.text()).toEqual('string');
+    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');
     });
   });
 
 });
-// JSX INNER TEXT TEST
-// const wrapper = shallow(<div><b>important</b></div>);
-// expect(wrapper.text()).to.equal('important');
-
-// need to test that if there is no state change detected, we expect a div to be returned with a className="noState"
-
-// If there is a stateChange we expect a div with the appropriate state changes as an html react element obj that is parsed
-
-// test delta; its initially an array with an obj; as soon as you change state from the initial state change, delta becomes an object
-
-
-// check for className=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

@@ -3,29 +3,42 @@ import PropTypes from 'prop-types';
 import { diff, formatters } from 'jsondiffpatch';
 import ReactHtmlParser from 'react-html-parser';
 
-import { useStoreContext } from '../store'
+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> No state change detected. Trigger an event to change state </div>;
+    console.log('reacthtml parser -->', ReactHtmlParser(html), typeof ReactHtmlParser(html))
+    return <div className='noState'> No state change detected. Trigger an event to change state </div>;
   }
   return <div>{ReactHtmlParser(html)}</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.push({ value: tab, label: tabs[tab].title });
   });
+  console.log('tabs object -->', tabsArray);
 
   const currTab = {
     value: currentTab,