no type err on app folder

aquinojardim · aquinojardim · commit 86eb0e1afb56 · 2020-07-09T13:59:57.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,17 @@
 {
   "name": "reactime",
   "description": "build web extension bundle.js",
+  "jest": {
+    "transform": {
+      ".(ts|tsx)": "<rootDir>/node_modules/ts-jest/preprocessor.js"
+    },
+    "testRegex": "(/__tests__/.*|\\.(test|spec))\\.(ts|tsx|js)$",
+    "moduleFileExtensions": [
+      "ts",
+      "tsx",
+      "js"
+    ]
+  },
   "scripts": {
     "build": "webpack --mode production",
     "dev": "webpack --mode development --watch",
@@ -49,6 +60,8 @@
     "@babel/plugin-proposal-decorators": "^7.4.4",
     "@babel/preset-env": "^7.10.3",
     "@babel/preset-react": "^7.0.0",
+    "@types/chrome": "0.0.119",
+    "@types/jest": "^26.0.4",
     "babel-loader": "^8.0.6",
     "core-js": "^3.6.5",
     "css-loader": "^3.2.0",
@@ -69,6 +82,7 @@
     "sass-loader": "^7.2.0",
     "sinon-chrome": "^3.0.1",
     "style-loader": "^0.23.1",
+    "ts-jest": "^26.1.1",
     "ts-loader": "^7.0.5",
     "typescript": "^3.9.6",
     "webpack": "^4.43.0",
diff --git a/sandboxes/automated-tests/tsconfig.json b/sandboxes/automated-tests/tsconfig.json
@@ -1,11 +1,10 @@
 {
   "compilerOptions": {
     "outDir": "./Frontend/public",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es6",
+    "module": "es6",
+    "target": "es5",
     "jsx": "react",
-    "esModuleInterop": true
+    "allowJs": true,
+    "types": ["chrome", "jest"]
   }
 }
diff --git a/src/app/__tests__/action.test.tsx b/src/app/__tests__/action.test.tsx
@@ -10,6 +10,7 @@ configure({ adapter: new Adapter() });
 describe('unit testing for Action.jsx', () => {
   let wrapper;
   const props = {
+    key:'actions2',
     selected: true,
     last: false,
     index: 2,
diff --git a/src/app/__tests__/index.test.tsx b/src/app/__tests__/index.test.tsx
diff --git a/src/app/actions/actions.ts b/src/app/actions/actions.ts
@@ -1,4 +1,4 @@
-import * as types from '../constants/actionTypes.ts';
+import * as types from '../constants/actionTypes';
 
 export const toggleMode = mode => ({
   type: types.TOGGLE_MODE,
diff --git a/src/app/components/Action.tsx b/src/app/components/Action.tsx
@@ -2,17 +2,18 @@ import React from 'react';
 import { changeView, changeSlider } from '../actions/actions';
 
 interface ActionProps {
+  key: string;
   selected: boolean;
   last: boolean; 
   index: number;
   sliderIndex: number;
-  dispatch: () => void;
+  dispatch: (a:any) => void;
   displayName: string;
   componentName: string;
-  componentData: {actualDuration: number};
-  state: object;
+  componentData: {actualDuration: number}|undefined;
+  state?: object|string;
   viewIndex: number;
-  handleOnkeyDown: (e: KeyboardEvent, i: number) => void;
+  handleOnkeyDown: (e: any, i: number) => void;
 }
 
 /* // gabi and nate :: index and delta props were removed from Action.jsx  */
@@ -39,7 +40,8 @@ const Action = (props: ActionProps) => {
     } else {
       seconds = '00';
     }
-    miliseconds = Number.parseFloat(miliseconds).toFixed(2);
+    const convert:any = new Number()
+    miliseconds = convert.parseFloat(miliseconds).toFixed(2);
     const arrayMiliseconds = miliseconds.split('.');
     if (arrayMiliseconds[0].length < 2) {
       arrayMiliseconds[0] = '0'.concat(arrayMiliseconds[0]);
@@ -54,9 +56,9 @@ const Action = (props: ActionProps) => {
   return (
     <div
       // Edwin: invoking keyboard functionality; functionality is in ActionContainer;
-      onKeyDown={(e: KeyboardEvent) => handleOnkeyDown(e, viewIndex)}
+      onKeyDown={(e:any) => handleOnkeyDown(e, viewIndex)}
       className={selected || last ? 'action-component selected' : 'action-component'}
-      onClick={(e: MouseEvent) => {
+      onClick={() => {
         dispatch(changeView(index));
       }}
       role="presentation"
@@ -74,7 +76,7 @@ const Action = (props: ActionProps) => {
       </button>
       <button
         className="jump-button"
-        onClick={(e: MouseEvent) => {
+        onClick={(e:any) => {
           e.stopPropagation();
           dispatch(changeSlider(index));
           dispatch(changeView(index));
diff --git a/src/app/components/Chart.tsx b/src/app/components/Chart.tsx
@@ -15,10 +15,9 @@ import React, { Component } from 'react';
 import * as d3 from 'd3';
 
 const colors = ['#95B6B7', '#475485', '#519331', '#AA5039', '#8B2F5F', '#C5B738', '#858DFF', '#FF8D02', '#FFCD51', '#ACDAE6', '#FC997E', '#CF93AD', '#AA3939', '#AA6C39', '#226666', '#2C4870'];
+
 interface ChartProps {
-  chartRef:any;
-  maked3Tree: any; 
-  removed3Tree: any;
+  hierarchy: object;
 }
 
 let root = {};
diff --git a/src/app/components/Diff.tsx b/src/app/components/Diff.tsx
@@ -4,7 +4,7 @@ import ReactHtmlParser from 'react-html-parser';
 import { useStoreContext } from '../store';
 
 interface DiffProps {
-  snapshot: {state:object|string}; 
+  snapshot: {state?:object|string}; 
   show?: boolean|undefined; 
 }
 
@@ -23,7 +23,7 @@ function Diff(props: DiffProps) {
   }
 
   // gabi :: cleanning preview from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:[]}) => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:any[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
diff --git a/src/app/components/DiffRoute.tsx b/src/app/components/DiffRoute.tsx
@@ -5,7 +5,7 @@ import {
 import Diff from './Diff';
 
 
-const DiffRoute = (props: {snapshot: {state: string | object; children?:[]}}) => (
+const DiffRoute = (props: {snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; }}) => (
 
   <Router>
     <div className="navbar">
diff --git a/src/app/components/Dropdown.tsx b/src/app/components/Dropdown.tsx
@@ -3,7 +3,7 @@ import Select from 'react-select';
 
 interface DropdownProps {
   selectedSpeed: { value: number; label: string },
-  speeds: [];
+  speeds: { value: number; label: string; }[];
   setSpeed:  () => void;
 }
 
diff --git a/src/app/components/ErrorHandler.tsx b/src/app/components/ErrorHandler.tsx
@@ -1,11 +1,7 @@
 import React from 'react';
 
-interface ErrorHandlerProps {
-  state: { errorOccurred: boolean }
-}
-
 class ErrorHandler extends React.Component {
-  constructor(props:ErrorHandlerProps) {
+  constructor(props:any) {
     super(props);
     this.state = { errorOccurred: false };
   }
@@ -16,7 +12,7 @@ class ErrorHandler extends React.Component {
   }
 
   render() {
-    return this.state.errorOccurred ? <div margin="8px">Unexpected Error</div> : this.props.children
+    return this.state.errorOccurred ? <div>Unexpected Error</div> : this.props.children
   }
 }
 
diff --git a/src/app/components/PerfView.tsx b/src/app/components/PerfView.tsx
@@ -23,14 +23,14 @@ import { schemeSet1 as colorScheme } from 'd3';
 // import { addNewSnapshots } from '../actions/actions.ts';
 
 interface PerfViewProps {
-  snapshots:[]; 
+  snapshots:any[]; 
   viewIndex:number; 
   width: number;
   height: number;
 }
 
 const PerfView = (props:PerfViewProps) => {
-  const { snapshots, viewIndex, width = 600, height = 600 } = props
+  const { snapshots, viewIndex, width, height } = props
   const svgRef = useRef(null);
 
   // Figure out which snapshot index to use
@@ -92,7 +92,7 @@ const PerfView = (props:PerfViewProps) => {
         .attr('pointer-events', (d?:{children:[]}) => (!d.children ? 'none' : null))
         .on('mouseover', function () { d3.select(this).attr('stroke', '#000'); })
         .on('mouseout', function () { d3.select(this).attr('stroke', null); })
-        .on('click', (d:MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
+        .on('click', (d:{ x: number; y: number; r: number; }) => curFocus !== d && (zoomToNode(d), d3.event.stopPropagation()));
 
     // Generate text labels. Set (only) root to visible initially
     const label = svg.append('g')
@@ -102,8 +102,9 @@ const PerfView = (props:PerfViewProps) => {
       .enter().append('text')
         .style('fill-opacity', (d:{parent:object}) => (d.parent === packedRoot ? 1 : 0))
         .style('display', (d:{parent?:object}) => (d.parent === packedRoot ? 'inline' : 'none'))
-        .text((d:{data:{name:string, componentData?:{actualDuration:number}}}) =>  `${d.data.name}:
-          ${Number.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`);
+        .text((d:{data:{name:string, componentData?:{actualDuration:any}}}) =>  {
+          const convert:any = new Number()
+          return `${d.data.name}: ${convert.parseFloat(d.data.componentData.actualDuration || 0).toFixed(2)}ms`});
 
     // Remove any unused nodes
     label.exit().remove();
diff --git a/src/app/components/StateRoute.tsx b/src/app/components/StateRoute.tsx
@@ -13,7 +13,7 @@ const NO_STATE_MSG = 'No state change detected. Trigger an event to change state
 
 
 interface StateRouteProps {
-  snapshot: {state?: object | string, children?: []}; 
+  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; }; 
   hierarchy: object; 
   snapshots: []; 
   viewIndex: number;
@@ -41,7 +41,7 @@ const StateRoute = (props:StateRouteProps) => {
     if (hierarchy) {
       return (
         <ErrorHandler>
-          <PerfView viewIndex={viewIndex} snapshots={snapshots} />
+          <PerfView viewIndex={viewIndex} snapshots={snapshots} width={600} height={600}/>
         </ErrorHandler>
       );
     }
diff --git a/src/app/components/SwitchApp.tsx b/src/app/components/SwitchApp.tsx
@@ -7,7 +7,7 @@ import { setTab } from '../actions/actions';
 const SwitchAppDropdown = () => {
   const [{ currentTab, tabs }, dispatch] = useStoreContext();
   
-  const tabsArray:[] = [];
+  const tabsArray:any[] = [];
   Object.keys(tabs).forEach(tab => {
     tabsArray.unshift({ value: tab, label: tabs[tab].title });
   });
diff --git a/src/app/components/Tree.tsx b/src/app/components/Tree.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import JSONTree from 'react-json-tree';
 
 
-const getItemString = (type, data:{state:object|string, name:string, children:[]}) => {
+const getItemString = (type, data:{state?:object|string, name:string, children:[]}) => {
   // check to make sure that we are on the tree node, not anything else
   if (
     Object.keys(data).length > 3
@@ -16,7 +16,7 @@ const getItemString = (type, data:{state:object|string, name:string, children:[]
 };
 
 interface TreeProps {
-  snapshot: {state?:object|string, children?:[]};
+  snapshot: { name?: string; componentData?: object; state?: string | object; stateSnaphot?: object; children?: any[]; };
 }
 
 const Tree = (props:TreeProps) => {
@@ -30,7 +30,7 @@ const Tree = (props:TreeProps) => {
           theme={{ tree: () => ({ className: 'json-tree' }) }}
           shouldExpandNode={() => true}
           getItemString={getItemString}
-          labelRenderer={(raw:[]) => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
+          labelRenderer={(raw:any[]) => (typeof raw[0] !== 'number' ? <span>{raw[0]}</span> : null)}
         />
       )}
     </>
diff --git a/src/app/containers/ActionContainer.tsx b/src/app/containers/ActionContainer.tsx
@@ -17,10 +17,10 @@ function ActionContainer() {
   const { hierarchy, sliderIndex, viewIndex } = tabs[currentTab];
   console.log(tabs[currentTab])
   let actionsArr = [];
-  const hierarchyArr:[] = [];
+  const hierarchyArr:any[] = [];
 
   // gabi and nate :: delete function to traverse state from snapshots, now we are tranversing state from hiararchy and alsog getting infromation on display name and component name
-  const displayArray = (obj:{stateSnapshot:{children:[]}, name:number, branch:number, index:number, children?:[]}) => {
+  const displayArray = (obj:{stateSnapshot:{children:any[]}, name:number, branch:number, index:number, children?:[]}) => {
     if (obj.stateSnapshot.children.length > 0 && obj.stateSnapshot.children[0] && obj.stateSnapshot.children[0].state && obj.stateSnapshot.children[0].name) {
       const newObj:object = {
         index: obj.index,
@@ -63,7 +63,7 @@ function ActionContainer() {
     }
   }
 
-  actionsArr = hierarchyArr.map((snapshot:{state:object|string, displayName:string, componentName:string, componentData:object|undefined}, index) => {
+  actionsArr = hierarchyArr.map((snapshot:{state?:object|string, displayName:string, componentName:string, componentData:{actualDuration: number}|undefined}, index) => {
     const selected = index === viewIndex;
     const last = viewIndex === -1 && index === hierarchyArr.length - 1;
     return (
@@ -89,7 +89,7 @@ function ActionContainer() {
       <div className="action-component exclude">
         <button
           className="empty-button"
-          onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {
+          onClick={() => {
             dispatch(emptySnapshots());
             // set slider back to zero
             resetSlider();
diff --git a/src/app/containers/ButtonsContainer.tsx b/src/app/containers/ButtonsContainer.tsx
@@ -20,14 +20,20 @@ function exportHandler(snapshots:[]) {
   URL.revokeObjectURL(fileDownload.href);
 }
 
-function importHandler(dispatch:(a:()=>void)=>void) {
+function importHandler(dispatch:(a:any)=>void) {
   const fileUpload = document.createElement('input');
   fileUpload.setAttribute('type', 'file');
 
-  fileUpload.onchange = (event:{target:{files:[]}}) => {
+  fileUpload.onchange = () => {
     const reader = new FileReader();
-    reader.onload = () => dispatch(importSnapshots(JSON.parse(reader.result)));
-    reader.readAsText(event.target.files[0]);
+    reader.onload = () => {
+      const test = reader.result.toString()
+      return dispatch(importSnapshots(JSON.parse(test)))
+    };
+    if(event.target.hasOwnProperty('files')){
+      const eventFiles:any = event.target
+      reader.readAsText(eventFiles.files[0]);
+    }
   };
 
   fileUpload.click();
@@ -42,23 +48,23 @@ function ButtonsContainer() {
 
   return (
     <div className="buttons-container">
-      <button className="pause-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('paused'))}>
+      <button className="pause-button" type="button" onClick={() => dispatch(toggleMode('paused'))}>
         {paused ? 'Resume' : 'Pause'}
       </button>
-      <button className="lock-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('locked'))}>
+      <button className="lock-button" type="button" onClick={() => dispatch(toggleMode('locked'))}>
         {locked ? 'Unlock' : 'Lock'}
       </button>
       <button
         className="persist-button"
         type="button"
-        onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => dispatch(toggleMode('persist'))}
+        onClick={() => dispatch(toggleMode('persist'))}
       >
         {persist ? 'Unpersist' : 'Persist'}
       </button>
-      <button className="export-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => exportHandler(snapshots)}>
+      <button className="export-button" type="button" onClick={() => exportHandler(snapshots)}>
         Export
       </button>
-      <button className="import-button" type="button" onClick={(e: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => importHandler(dispatch)}>
+      <button className="import-button" type="button" onClick={() => importHandler(dispatch)}>
         Import
       </button>
     </div>
diff --git a/src/app/containers/MainContainer.tsx b/src/app/containers/MainContainer.tsx
@@ -25,7 +25,7 @@ function MainContainer() {
       const { action, payload, sourceTab } = message;
       let maxTab;
       if (!sourceTab) {
-        const tabsArray = Object.keys(payload);
+        const tabsArray:any = Object.keys(payload);
         maxTab = Math.max(...tabsArray);
       }
       switch (action) {
@@ -84,7 +84,7 @@ function MainContainer() {
   // if viewIndex is -1, then use the sliderIndex instead
   const snapshotView = viewIndex === -1 ? snapshots[sliderIndex] : snapshots[viewIndex];
   // gabi :: cleannign hierarchy and snapshotView from stateless data
-  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:[]}) => {
+  const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object|string;stateSnaphot?:object; children?:any[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {
       delete newObj.name;
@@ -102,7 +102,7 @@ function MainContainer() {
     if (newObj.children) {
       newObj.children = [];
       if (obj.children.length > 0) {
-        obj.children.forEach((element:{state:object|string, children?:[]}) => {
+        obj.children.forEach((element:{state?:object|string, children?:[]}) => {
           if (element.state !== 'stateless' || element.children.length > 0) {
             const clean = statelessCleanning(element);
             newObj.children.push(clean);
diff --git a/src/app/containers/StateContainer.tsx b/src/app/containers/StateContainer.tsx
diff --git a/src/app/containers/TravelContainer.tsx b/src/app/containers/TravelContainer.tsx
diff --git a/src/app/index.tsx b/src/app/index.tsx
diff --git a/src/app/module.d.ts b/src/app/module.d.ts
diff --git a/tsconfig.json b/tsconfig.json

Original file line number	Diff line number	Diff line change
`@@ -1,11 +1,10 @@`
`1`	`1`	`{`
`2`	`2`	`"compilerOptions": {`
`3`	`3`	`"outDir": "./Frontend/public",`
`4`		`- "sourceMap": true,`
`5`		`- "noImplicitAny": true,`
`6`		`- "module": "commonjs",`
`7`		`- "target": "es6",`
	`4`	`+ "module": "es6",`
	`5`	`+ "target": "es5",`
`8`	`6`	`"jsx": "react",`
`9`		`- "esModuleInterop": true`
	`7`	`+ "allowJs": true,`
	`8`	`+ "types": ["chrome", "jest"]`
`10`	`9`	`}`
`11`	`10`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import * as types from '../constants/actionTypes.ts';`
	`1`	`+import * as types from '../constants/actionTypes';`
`2`	`2`
`3`	`3`	`export const toggleMode = mode => ({`
`4`	`4`	`type: types.TOGGLE_MODE,`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import ReactHtmlParser from 'react-html-parser';`
`4`	`4`	`import { useStoreContext } from '../store';`
`5`	`5`
`6`	`6`	`interface DiffProps {`
`7`		`- snapshot: {state:object\|string};`
	`7`	`+ snapshot: {state?:object\|string};`
`8`	`8`	`show?: boolean\|undefined;`
`9`	`9`	`}`
`10`	`10`
`@@ -23,7 +23,7 @@ function Diff(props: DiffProps) {`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`// gabi :: cleanning preview from stateless data`
`26`		`- const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object\|string;stateSnaphot?:object; children?:[]}) => {`
	`26`	`+ const statelessCleanning = (obj:{name?:string; componentData?:object; state?:object\|string;stateSnaphot?:object; children?:any[]}) => {`
`27`	`27`	`const newObj = { ...obj };`
`28`	`28`	`if (newObj.name === 'nameless') {`
`29`	`29`	`delete newObj.name;`