Merge pull request #20 from oslabs-beta/dev

Merging dev to master

Author: SamuelTr13

package.json

@@ -5,6 +5,7 @@
     "transform": {
       "^.+\\.(js|ts|tsx)$": "ts-jest"
     },
+    "transformIgnorePatterns": ["/node_modules/(?!d3|d3-array|internmap|delaunator|robust-predicates)"],
     "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
     "moduleFileExtensions": [
       "ts",
@@ -93,6 +94,7 @@
     "@testing-library/jest-dom": "^4.2.4",
     "@types/chai": "^4.2.14",
     "@types/chrome": "^0.0.119",
+    "@types/d3": "^7.4.0",
     "@types/d3-scale-chromatic": "^2.0.0",
     "@types/jest": "^26.0.4",
     "@types/lodash.isequal": "^4.5.5",
@@ -166,10 +168,10 @@
     "acorn-jsx": "^5.2.0",
     "apexcharts": "^3.23.1",
     "chai": "^4.2.0",
-    "d3": "^5.16.0",
-    "d3-scale-chromatic": "^2.0.0",
+    "d3": "^7.6.1",
+    "d3-scale-chromatic": "^3.0.0",
     "d3-shape": "^2.0.0",
-    "d3-zoom": "^1.8.3",
+    "d3-zoom": "^3.0.0",
     "immer": "^9.0.12",
     "intro.js": "^5.0.0",
     "intro.js-react": "^0.6.0",

src/app/__tests__/History.test.tsx

@@ -1,26 +1,19 @@
 /* eslint:disable */
 
-import * as d3 from 'd3'
+import * as d3 from 'd3';
 
-describe('D3 Canvas Testing', ()=> {
-  const getCanvas = () => {
-    return d3.select('#canvas')
-  }
+describe('D3 Canvas Testing', () => {
+  const getCanvas = () => d3.select('#canvas');
 
-  it ('should render', ()=>{
+  it('should render', () => {
     expect(getCanvas()).not.toBeNull();
-  })
+  });
+});
 
-})
+describe('D3 Node Testing', () => {
+  const getNodes = () => d3.select('g');
 
-describe('D3 Node Testing', ()=> {
-  const getNodes = () => {
-    return d3.select('g')
-  }
-
-  it ('should render', () => {
+  it('should render', () => {
     expect(getNodes()).not.toBeNull();
-  })
-
-
-})
+  });
+});

src/app/__tests__/RouteDescription.test.tsx

@@ -1,4 +1,3 @@
-// @ts-nocheck
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable react/jsx-filename-extension */
 
@@ -11,7 +10,7 @@ import RouteDescription from '../components/RouteDescription';
 configure({ adapter: new (Adapter as any)() });
 
 describe('Unit testing RouteDescription', () => {
-  const actionsArr = [];
+  const actionsArr: JSX.Element[] = [];
 
   actionsArr.push(
     <Action

src/app/components/Action.tsx

@@ -20,8 +20,9 @@ interface ActionProps {
   displayName: string;
   componentName: string;
   componentData: { actualDuration: number } | undefined;
+  routePath: any;
   state?: Record<string, unknown>;
-  viewIndex: number;
+  viewIndex: number | undefined;
   isCurrIndex: boolean;
   handleOnkeyDown: (e: any, i: number) => any;
 }
@@ -58,33 +59,33 @@ const Action = (props: ActionProps): JSX.Element => {
 
   /**
    * @function cleanTime: Displays render times for state changes
-   * @returns render display time in seconds in miliseconds
+   * @returns render display time in seconds in milliseconds
    */
   const cleanTime = () => {
     if (!componentData || !componentData.actualDuration) {
       return 'NO TIME';
     }
     let seconds: number | string;
-    let miliseconds: any = componentData.actualDuration;
+    let milliseconds: any = componentData.actualDuration;
     if (Math.floor(componentData.actualDuration) > 60) {
       seconds = Math.floor(componentData.actualDuration / 60);
       seconds = JSON.stringify(seconds);
       if (seconds.length < 2) {
         seconds = '0'.concat(seconds);
       }
-      miliseconds = Math.floor(componentData.actualDuration % 60);
+      milliseconds = Math.floor(componentData.actualDuration % 60);
     } else {
       seconds = '00';
     }
-    miliseconds = Number.parseFloat(miliseconds).toFixed(2);
-    const arrayMiliseconds = miliseconds.split('.');
-    if (arrayMiliseconds[0].length < 2) {
-      arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
+    milliseconds = Number.parseFloat(milliseconds).toFixed(2);
+    const arrayMilliseconds = milliseconds.split('.');
+    if (arrayMilliseconds[0].length < 2) {
+      arrayMilliseconds[0] = '0'.concat(arrayMilliseconds[0]);
     }
     if (index === 0) {
-      return `${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+      return `${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
     }
-    return `+${seconds}:${arrayMiliseconds[0]}.${arrayMiliseconds[1]}`;
+    return `+${seconds}:${arrayMilliseconds[0]}.${arrayMilliseconds[1]}`;
   };
   const displayTime = cleanTime();
 

src/app/components/App.tsx

@@ -2,13 +2,10 @@ import React, { useReducer } from 'react';
 import {
   MemoryRouter as Router,
 } from 'react-router-dom';
-// import { Steps, Hints } from 'intro.js-react';
 import MainContainer from '../containers/MainContainer';
 import { StoreContext } from '../store';
 import mainReducer from '../reducers/mainReducer.js';
 
-// import 'intro.js/introjs.css';
-
 // currentTab is the current active tab within Google Chrome.
 // This is used to decide what tab Reactime should be monitoring. This can be "locked"
 // currentTabInApp is the current active tab within Reactime (Map, Performance, History, etc).