merge

Author: CourageWolf

package.json

@@ -74,6 +74,8 @@
     "@babel/plugin-proposal-decorators": "^7.10.5",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-react": "^7.12.7",
+    "@testing-library/jest-dom": "^4.2.4",
+    "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/jest": "^26.0.4",
@@ -85,7 +87,7 @@
     "core-js": "^3.6.5",
     "css-loader": "^3.6.0",
     "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
+    "enzyme-adapter-react-16": "^1.15.6",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-import": "^2.22.0",
@@ -107,6 +109,7 @@
     "style-loader": "^0.23.1",
     "ts-jest": "^26.1.2",
     "ts-loader": "^7.0.5",
+    "ts-node": "^9.1.1",
     "typedoc": "^0.17.8",
     "typedoc-webpack-plugin": "^1.1.4",
     "typescript": "^3.9.6",
@@ -140,6 +143,7 @@
     "acorn": "^7.3.1",
     "acorn-jsx": "^5.2.0",
     "apexcharts": "^3.23.1",
+    "chai": "^4.2.0",
     "cookie": "^0.4.1",
     "d3": "^5.16.0",
     "d3-scale-chromatic": "^2.0.0",

src/app/__tests__/ActionContainer.test.tsx

@@ -82,8 +82,11 @@ useStoreContext.mockImplementation(() => [state, dispatch]);
 
 let wrapper;
 
+//actionView={true} must be passed in to <ActionContainer /> in beforeEach() to deal with new
+//conditional rendering in ActionContainer that shows/hides time-travel functionality
+
 beforeEach(() => {
-  wrapper = shallow(<ActionContainer />);
+  wrapper = shallow(<ActionContainer actionView={true}/>);
   useStoreContext.mockClear();
   dispatch.mockClear();
 });

src/app/__tests__/MainContainer.test.tsx

@@ -8,7 +8,6 @@ import Adapter from 'enzyme-adapter-react-16';
 import MainContainer from '../containers/MainContainer';
 import { useStoreContext } from '../store';
 
-import HeadContainer from '../containers/HeadContainer';
 import ActionContainer from '../containers/ActionContainer';
 import StateContainer from '../containers/StateContainer';
 import TravelContainer from '../containers/TravelContainer';
@@ -50,7 +49,6 @@ describe('MainContainer rendering', () => {
     expect(wrapper.text()).toEqual(
       'No React application found. Please visit reactime.io to more info.If you are using a React application, make sure tha you application is running in development mode.NOTE: The React Developer Tools extension is also required for Reactime to run, if you do not already have it installed on your browser.',
     );
-    expect(wrapper.find(HeadContainer).length).toBe(0);
     expect(wrapper.find(ActionContainer).length).toBe(0);
     expect(wrapper.find(StateContainer).length).toBe(0);
     expect(wrapper.find(TravelContainer).length).toBe(0);
@@ -66,7 +64,6 @@ describe('MainContainer rendering', () => {
     };
 
     wrapper = shallow(<MainContainer />);
-    expect(wrapper.find(HeadContainer).length).toBe(1);
     expect(wrapper.find(ActionContainer).length).toBe(1);
     expect(wrapper.find(StateContainer).length).toBe(1);
     expect(wrapper.find(TravelContainer).length).toBe(1);

src/app/__tests__/WebMetrics.test.tsx

@@ -0,0 +1,27 @@
+/* eslint:disable */
+import React from 'react';
+import { shallow, configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import WebMetrics from '../components/WebMetrics';
+import { expect } from 'chai'; 
+
+
+//the WebMetrics container should render 4 <div/> elements, each with id="card"
+//the WebMetrics container is itself  <div class="web-metrics-container" /> 
+configure({ adapter: new (Adapter as any)() });
+
+let  wrapper = shallow(<WebMetrics />);
+
+
+describe('WebMetrics graph testing', ()=> {
+  it ('should have 1 div with id "card" ', () => {
+    expect(wrapper.find('#card')).to.have.lengthOf(1);
+  })
+
+  it ('should have 1 div with id "chart" ', () => {
+    expect(wrapper.find('#chart')).to.have.lengthOf(1);
+  })
+  
+
+})
+

src/app/components/WebMetrics.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import Charts from 'react-apexcharts';
 
+
 const radialGraph = (props) => {
   const state = {
     series: [props.series],

src/app/containers/ActionContainer.tsx

@@ -115,7 +115,8 @@ function ActionContainer(props) {
     setActionView(true);
   }, []);
 
-  // this is not logging; the prop is not being udpdated or the component is not being re-rendered.
+  //the conditional logic below will cause ActionContainer.test.tsx to fail as it cannot find the Empty button
+  //UNLESS actionView={true} is passed into <ActionContainer /> in the beforeEach() call in ActionContainer.test.tsx
   return (
     <div id='action-id' className='action-container'>
       <div id='arrow'>

src/app/containers/HeadContainer.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react';
-import HeadContainer from './HeadContainer';
 import ActionContainer from './ActionContainer';
 import StateContainer from './StateContainer';
 import TravelContainer from './TravelContainer';
@@ -29,9 +28,6 @@ function MainContainer(): any {
     const toggleElem = document.querySelector('aside');
     toggleElem.classList.toggle('no-aside');
   };
-  useEffect(() => {
-    setActionView(true);
-  }, []);
 
   useEffect(() => {
     // only open port once
@@ -189,7 +185,6 @@ function MainContainer(): any {
 
   return (
     <div className='main-container'>
-      {/* <HeadContainer /> */}
       <div id='bodyContainer' className='body-container1'>
         <ActionContainer
           actionView={actionView}
@@ -198,7 +193,6 @@ function MainContainer(): any {
         />
         {snapshots.length ? (
           <StateContainer
-            toggleActionContainer={toggleActionContainer}
             webMetrics={webMetrics}
             viewIndex={viewIndex}
             snapshot={snapshotDisplay}

src/app/containers/MainContainer.tsx

@@ -24,11 +24,11 @@ interface StateContainerProps {
     }
   >;
   toggleActionContainer?: any;
-  webMetrics: object;
+  webMetrics?: object;
   AtomsRelationship?: any[];
   hierarchy: Record<string, unknown>;
-  snapshots: [];
-  viewIndex: number;
+  snapshots?: [];
+  viewIndex?: number;
 }
 
 // eslint-disable-next-line react/prop-types
@@ -38,7 +38,6 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
     hierarchy,
     snapshots,
     viewIndex,
-    toggleActionContainer,
     webMetrics,
   } = props;
 
@@ -47,6 +46,10 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
       <div className='state-container'>
         <div className='main-navbar-container'>
           <div className='main-navbar-text'>
+<<<<<<< HEAD
+=======
+            {' '}
+>>>>>>> eb57db934793cb1169b1a5946689e3df2d886d7f
           </div>
           <div className='main-navbar'>
             <NavLink

src/app/containers/StateContainer.tsx

@@ -361,13 +361,6 @@ aside {
   transform: none;
 }
 #arrow {
-  // height: 10px !important;
   margin-bottom: 40px;
-<<<<<<< HEAD
-  // margin-right: 20px;
-}
-=======
-  margin-right: 20px;
 }
 /* ^ sidebar button open and closing functionality */
->>>>>>> ed65fc7acb392828d0c86a3997518c11acbf9435