Merge pull request #43 from oslabs-beta/reactime7

Reactime7

Author: rtviner

src/app/__tests__/ButtonsContainer.test.tsx

@@ -40,7 +40,6 @@ describe('testing the bottom buttons', () => {
     dispatch.mockClear();
     useStoreContext.mockClear();
     currentTab.mode = {
-      // locked: false,
       paused: false,
       persist: false,
     };
@@ -65,25 +64,6 @@ describe('testing the bottom buttons', () => {
       expect(wrapper.find('.pause-button').text()).toBe('<FontAwesomeIcon />Unlock');
     }); 
   });
-  // describe('lock button testing', () => {
-  //   beforeEach(() => {
-  //     wrapper.find('.lock-button').simulate('click');
-  //   });
-  //   test('lock button dispatches upon click', () => {
-  //     expect(dispatch.mock.calls.length).toBe(1);
-  //   });
-
-  //   test('lock button dispatches toggleMode action', () => {
-  //     expect(dispatch.mock.calls[0][0]).toEqual(toggleMode('locked'));
-  //   });
-
-  //   test('lock button displays state', () => {
-  //     expect(wrapper.find('.lock-button').text()).toBe('Lock');
-  //     state.tabs[state.currentTab].mode.locked = true;
-  //     wrapper = shallow(<ButtonsContainer />);
-  //     expect(wrapper.find('.lock-button').text()).toBe('Unlock');
-  //   });
-  // });
 
   describe('persist button testing', () => {
     beforeEach(() => {

src/app/__tests__/MainContainer.test.tsx

@@ -48,7 +48,7 @@ beforeEach(() => {
 describe('MainContainer rendering', () => {
   test('With no snapshots, should not render any containers', () => {
     expect(wrapper.text()).toEqual(
-      'No React application found. Please visit reactime.io to more info.',
+      '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);

src/app/components/Diff.tsx

@@ -27,7 +27,7 @@ function Diff(props: DiffProps) {
     previous = snapshots[sliderIndex - 1];
   }
 
-  // cleanning preview from stateless data
+  // cleaning preview from stateless data
   const statelessCleanning = (obj:{name?:string; componentData?:object; state?:string|any;stateSnaphot?:object; children?:any[]}) => {
     const newObj = { ...obj };
     if (newObj.name === 'nameless') {

src/app/components/legend.tsx

@@ -94,9 +94,6 @@ export default function LegendKey(props: any) {
                 <LegendItem
                   key={`legend-quantile-${i}`}
                   margin="0 5px"
-                  onClick={() => {
-                    // if (Event) alert('clicked: YO BRILLIANT GENIUS');
-                  }}
                 >
                   <svg width={10} height={10}>
                     <rect
@@ -122,7 +119,6 @@ export default function LegendKey(props: any) {
             width: 25%;
             font-family: arial;
             font-weight: 900;
-            // background-color: 242529;
             border-radius: 14px;
             padding: 2px 2px 2px 2px;
             overflow-y: auto;

src/backend/__tests__/timeJump.test.ts

@@ -5,8 +5,6 @@
 /* eslint-disable max-classes-per-file */
 import timeJumpRequire from '../timeJump';
 import componentActionsRecord from '../masterState';
-// import { ComponentData } from '../types/backendTypes';
-// const timeJumpRequire = require('../timeJump');
 
 class Component {
   mockfn: (state) => void
@@ -65,7 +63,6 @@ describe('unit testing for timeJump.ts', () => {
 
     snapShot = { tree };
     timeJump = timeJumpRequire(snapShot, mode);
-    // mockFunc.mockClear()
   });
   test('calling the initial require should return a function', () => {
     expect(typeof timeJumpRequire).toBe('function');

src/backend/linkFiber.ts

@@ -11,7 +11,6 @@
 
 //import typescript types
 import {
-  
   //tree
   Snapshot,
   //jump, pause
@@ -30,9 +29,7 @@ import componentActionsRecord from './masterState';
 // throttle returns a function that can be called any number of times (possibly in quick succession) but will only invoke the callback at most once every x ms
 //getHooksNames - helper function to grab the getters/setters from `elementType`
 import { throttle, getHooksNames } from './helpers';
-// import { Console } from 'console';
 import AtomsRelationship from '../app/components/AtomsRelationship';
-// import { isNull } from 'util';
 
 // Set global variables to use in exported module and helper functions
 declare global {
@@ -116,7 +113,6 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
  //updating tree depending on current mode on the panel (pause, etc) 
 function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
   // this is the currently active root fiber(the mutable root of the tree)
-
   if (fiberRoot) {
     const { current } = fiberRoot;
     //Clears circular component table
@@ -321,12 +317,10 @@ function createTree(
         componentData.hooksIndex = hooksIndex;
 
         // Improves tree visualization but breaks jump ?
-        // if (!newState) {
-          
-        // }
+        // if (!newState) {}
         // newState.push(state.state);
 
-        /* what is this supposed to do??? currently doesn't work?? and makes no sense, newState is an object, how can you push state.state into an object?? */
+        /* what is this supposed to do? currently doesn't work? and makes no sense, newState is an object, how can you push state.state into an object? */
         // if (newState && newState.hooksState) {
         //   newState.push(state.state);
         // } else if (newState) {
@@ -395,7 +389,7 @@ function createTree(
 
   // We want to add this fiber node to the snapshot
   if (componentFound || newState === 'stateless') {
-    // where does this get changed to true?
+
     if (isRecoil) {
       // do this down below too
       if(currentFiber.elementType.name){
@@ -490,24 +484,19 @@ export default (snap: Snapshot, mode: Mode): (() => void) => {
   function onVisibilityChange(): void {
     doWork = !document.hidden;
   }
-  // this code hasnt changed since reactime 4.0
-  // https://medium.com/@aquinojardim/react-fiber-reactime-4-0-f200f02e7fa8
   return () => {
     // react devtools global hook is a global object that was injected by the React Devtools content script, allows access to fiber nodes and react version
     const devTools = window.__REACT_DEVTOOLS_GLOBAL_HOOK__;
     const reactInstance = devTools ? devTools.renderers.get(1) : null;
     fiberRoot = devTools.getFiberRoots(1).values().next().value;
-  //  console.log("fiberRoot in export default: " + Object.entries(fiberRoot));
+
     const throttledUpdateSnapshot = throttle(() => updateSnapShotTree(snap, mode), 70);
     document.addEventListener('visibilitychange', onVisibilityChange);
 
     if (reactInstance && reactInstance.version) {
-      // when is this being called...
       devTools.onCommitFiberRoot = (function (original) {
         return function (...args) {
-          // console.log("args in onCommitFiberRoot: ", args)
           // eslint-disable-next-line prefer-destructuring
-
           fiberRoot = args[1];
           if (doWork) {
             throttledUpdateSnapshot();

src/backend/timeJump.ts

@@ -37,21 +37,13 @@ export default (origin, mode) => {
     // check if it is a stateful class component
     // if yes, find the component by its index and assign it to a variable
     // call that components setState method to reset state to the state at the time of the jump snapshot
-    // if (target.state && !target.state.hooksState)
     if (component && component.setState) {
       component.setState(
         prevState => {
-          // console.log("prevState: ", prevState);
           Object.keys(prevState).forEach(key => {
-            // console.log("target state object at key: ", target.state[key])
-            // what is this edge case??
             if (!target.state[key] === undefined) {
               target.state[key] = undefined;
             }
-            // does this do the same?
-            // if (!target.state[key]) {
-            //   target.state[key];
-            // }
           });
           return target.state;
         },
@@ -63,13 +55,11 @@ export default (origin, mode) => {
     // Check for hooks state and set it with dispatch()
     if (target.state && target.state.hooksState) {
       target.state.hooksState.forEach(hook => {
-        // console.log("hook: ", hook);
         const hooksComponent = componentActionsRecord.getComponentByIndex(
           target.componentData.hooksIndex,
         );
-        // console.log("hooksComponent: ", hooksComponent);
         const hookState = Object.values(hook);
-        // console.log("hookstate in hooks if block: ", hookState);
+
         if (hooksComponent && hooksComponent.dispatch) {
           hooksComponent.dispatch(hookState[0]);
         }

src/backend/tree.ts

@@ -64,7 +64,6 @@ class Tree {
   }
 
   addChild(state: string | {}, name: string, componentData: {}, rtid: any, recoilDomNode:any): Tree {
-    //console.log("arguments in addChild: "+ arguments.length)
     const newChild: Tree = new Tree(state, name, componentData, rtid, recoilDomNode);
     newChild.parent = this;
     this.children.push(newChild);

tests/automated-tests/typescript/Frontend/src/scenes/lastSnapshot.tsx

@@ -1,12 +1,6 @@
 /* eslint-disable no-undef */
 import React, { useState, useEffect } from 'react';
-// import { connect } from 'react-redux';
 import './styles.sass';
-// import { AnyAction } from 'redux';
-
-// import * as actions from '../redux/actions/actions';
-// const mapStateToProps = state => ({});
-// const mapDispatchToProps = dispatch => ({});
 
 const LastSnapshot = () => {
   const [currentSnapshot, setCurrentSnapshot] = useState('');

tests/manual-tests/CalculatorClasses/src/index.js

@@ -1,9 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import reactime from "reactime";
 import App from "./component/App";
 import "./index.css";
 import "github-fork-ribbon-css/gh-fork-ribbon.css";
 
 ReactDOM.render(<App />, document.getElementById("root"));
-// reactime(document.getElementById("root"));
+