Created enzyme test for new WebMetrics tab

Co-authored-by: kev-ngo <[email protected]>
Co-authored-by: CourageWolf <[email protected]>
Co-authored-by: DennisLpz <[email protected]>
Co-authored-by: demircaner <[email protected]>

Author: 5 people

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/StateRoute.tsx

@@ -139,8 +139,7 @@ const StateRoute = (props: StateRouteProps) => {
       <div className="web-metrics-container">
         <WebMetrics color={LCPColor} series={(webMetrics.LCP / 2500) * 100} formatted={(val) => ((val / 100) * 2500).toFixed(2) + ' ms'} label="LCP"/>
         <WebMetrics color={FIDColor} series={(webMetrics.FID) * 25} formatted={(val) => ((val / 25)).toFixed(2) + ' ms'} label="FID"/>
-        {/* <WebMetrics color={CLSColor} series={(webMetrics.CLS * 50) * 100} formatted={(val) => ((val / 100) / 50).toFixed(2)} label="CLS"/> */}
-        <WebMetrics color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
+        <WebMetrics onMouseOver={() => handleMouseOver()} description={FCPDescription} color={FCPColor} series={(webMetrics.FCP / 1000) * 100} formatted={(val) => ((val / 100) * 1000).toFixed(2) + ' ms'} label="FCP"/>
         <WebMetrics color={TTFBColor} series={(webMetrics.TTFB / 10) * 100} formatted={(val) => ((val / 100) * 10).toFixed(2) + ' ms'} label="TTFB"/>
       </div>
     );

src/app/components/WebMetrics.tsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, Component } from 'react';
 import Charts from 'react-apexcharts';
 import useForceUpdate from './useForceUpdate';
 
+
 const radialGraph = (props) => {
 
 		const state = {
@@ -84,7 +85,7 @@ const radialGraph = (props) => {
 					lineCap: 'flat'
 				},
 				labels: [props.label],
-			},		
+			},	
     };
 
 

src/app/containers/ActionContainer.tsx

@@ -117,7 +117,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;
 
@@ -48,20 +47,6 @@ const StateContainer = (props: StateContainerProps): JSX.Element => {
         <div className='main-navbar-container'>
           <div className='main-navbar-text'>
             {' '}
-            {/* <button
-              id='side-bar-button'
-              className='toggleAC'
-              onClick={() => toggleActionContainer()}
-            >
-              Close
-            </button> */}
-            {/* <div className='toggleAC'>
-              <aside className='no-aside'>
-                <a className='toggle'>
-                  <i></i>
-                </a>
-              </aside>
-            </div> */}
           </div>
           <div className='main-navbar'>
             <NavLink