Merge pull request #7 from oslabs-beta/testing

Testing

Author: ngoczwolinski

src/app/components/StateRoute/ComponentMap/ComponentMap.tsx

@@ -216,8 +216,8 @@ export default function ComponentMap({
 
   const formatContext = (data) => {
     const contextFormat = [];
-    // const nestedObj = [];
     for (const key in data) {
+      // Suggestion: update the front end to display as a list if we have object
       contextFormat.push(<p className='statecontext'>{`${key}: ${data[key]}`}</p>);
     }
     return contextFormat;

src/backend/__tests__/tree.test.ts

@@ -1,14 +1,56 @@
 import Tree from '../tree';
+import { serializeState, scrubUnserializableMembers } from '../tree';
 
-/**
- * Created new tree under sibling and copy and clean tree describe block --
- * Reason is because other tests are adding properties to tree and affecting the child block,
- * so this was a quick way to test the trees getting reset to initial state
- *
- * Possible fix if more time allowed: Making use of beforeEach or afterEach --
- */
+describe('Serialize state unit test', () => {
+  const dummyState = {
+    counter: 1,
+    playerOne: 'X',
+    board: [
+      ['', 'O', 'X'],
+      ['', 'O', 'X'],
+      ['O', 'X', ''],
+    ],
+  };
 
-describe('Tree unit test', () => {
+  const circularState: { [key: string]: any } = {};
+  circularState.circ = circularState;
+
+  const serializedState = serializeState(dummyState);
+  const serializedCircularState = serializeState(circularState);
+
+  it('should create a deep copy of state', () => {
+    expect(dummyState).toEqual(serializedState);
+    expect(dummyState).not.toBe(serializedState);
+  });
+
+  it('should detect circular state', () => {
+    expect(serializedCircularState).toEqual('circularState');
+  });
+});
+
+describe('Scrub unserialized members unit test', () => {
+  const dummyState = {
+    counter: 1,
+    playerOne: 'X',
+    board: [
+      ['', 'O', 'X'],
+      ['', 'O', 'X'],
+      ['O', 'X', ''],
+    ],
+    increment: function () {
+      this.counter++;
+    },
+  };
+  const newTree = new Tree(dummyState);
+  const scrubbedTree = scrubUnserializableMembers(newTree);
+  // make sure return type is tree
+  it('should be instance of tree', () => {
+    expect(newTree).toBeInstanceOf(Tree);
+  });
+  // make sure function is scrubbed
+});
+
+xdescribe('Tree unit test', () => {
   const newTree = new Tree({});
   describe('Constructor', () => {
     it('should be able to create a newTree', () => {
@@ -30,20 +72,6 @@ describe('Tree unit test', () => {
     });
   });
 
-  /**
-   *
-   * making sure to adhere to ts practices when goign through tests
-   *
-   * ^^
-   * the tree should have initial values of state,
-   * name, etc to be default as per newly created tree
-   * update the add child and add sibling tests
-   *
-   * update the clean tree copy test to make it test for deep equaltiy? (note:
-   * this test may always fail if we make it so because there is no way to have deep equalituy
-   * with some shit that isn't allowed)
-   */
-
   describe('Adding children', () => {
     const returnChild = newTree.addChild('stateful', 'child', {}, null);
 
@@ -79,6 +107,8 @@ describe('Tree unit test', () => {
     });
   });
 
+  // TO DO- add serializing state tests
+  describe('Serializing state unit test', () => {});
   // review this test
   // returnSibling not used?
   // Check Test

src/backend/index.ts

@@ -11,15 +11,15 @@
 import 'regenerator-runtime/runtime';
 import linkFiberStart from './linkFiber';
 import timeJumpStart from './timeJump';
-import { Snapshot, Mode, MsgData } from './types/backendTypes';
+import { Snapshot, Status, MsgData } from './types/backendTypes';
 
 // * State snapshot object initialized here
 const snapShot: Snapshot = {
   tree: null,
   unfilteredTree: null,
 };
 
-const mode: Mode = {
+const mode: Status = {
   jumping: false,
   paused: false,
 };

src/backend/linkFiber.ts

@@ -16,12 +16,42 @@ import {
   // tree
   Snapshot,
   // jump, pause
-  Mode,
+  Status,
   // array of state and component
   HookStates,
   // object with tree structure
   Fiber,
 } from './types/backendTypes';
+import {
+  FunctionComponent,
+  ClassComponent,
+  IndeterminateComponent, // Before we know whether it is function or class
+  HostRoot, // Root of a host tree. Could be nested inside another node.
+  HostPortal, // A subtree. Could be an entry point to a different renderer.
+  /**
+   * Host Component: a type of component that represents a native DOM element in the browser environment, such as div, span, input, h1 etc.
+   */
+  HostComponent, // has stateNode of html elements
+  HostText,
+  Fragment,
+  Mode,
+  ContextConsumer,
+  ContextProvider,
+  ForwardRef,
+  Profiler,
+  SuspenseComponent,
+  MemoComponent,
+  SimpleMemoComponent, // A higher order component where if the component renders the same result given the same props, react skips rendering the component and uses last rendered result. Has memoizedProps/memoizedState but no stateNode
+  LazyComponent,
+  IncompleteClassComponent,
+  DehydratedFragment,
+  SuspenseListComponent,
+  FundamentalComponent,
+  ScopeComponent,
+  Block,
+  OffscreenComponent,
+  LegacyHiddenComponent,
+} from './types/backendTypes';
 // import function that creates a tree
 import Tree from './tree';
 // passes the data down to its components
@@ -54,7 +84,7 @@ let rtid = null;
  *
  * Middleware: Gets a copy of the current snap.tree and posts a recordSnap message to the window
  */
-function sendSnapshot(snap: Snapshot, mode: Mode): void {
+function sendSnapshot(snap: Snapshot, mode: Status): void {
   // Don't send messages while jumping or while paused
   if (mode.jumping || mode.paused) return;
   // If there is no current tree  creates a new one
@@ -87,7 +117,7 @@ function sendSnapshot(snap: Snapshot, mode: Mode): void {
  * Middleware: Updates snap object with latest snapshot, using @sendSnapshot
  */
 // updating tree depending on current mode on the panel (pause, etc)
-function updateSnapShotTree(snap: Snapshot, mode: Mode): void {
+function updateSnapShotTree(snap: Snapshot, mode: Status): void {
   // this is the currently active root fiber(the mutable root of the tree)
   if (fiberRoot) {
     const { current } = fiberRoot;
@@ -138,6 +168,7 @@ function traverseHooks(memoizedState: any): HookStates {
 // This runs after every Fiber commit. It creates a new snapshot
 const exclude = new Set([
   'alternate',
+  'basename',
   'baseQueue',
   'baseState',
   'child',
@@ -149,20 +180,25 @@ const exclude = new Set([
   'deps',
   'dependencies',
   'destroy',
+  'dispatch',
+  'location',
   'effects',
   'element',
   'elementType',
   'firstBaseUpdate',
   'firstEffect',
   'flags',
   'get key',
+  'getState',
   'key',
   'lanes',
   'lastBaseUpdate',
   'lastEffect',
+  'liftedStore',
   'navigator',
   'memoizedState',
   'mode',
+  'navigationType',
   'next',
   'nextEffect',
   'pending',
@@ -172,12 +208,15 @@ const exclude = new Set([
   'Provider',
   'updateQueue',
   'ref',
+  'replaceReducer',
   'responders',
   'return',
   'route',
   'routeContext',
   'shared',
   'sibling',
+  'subscribe',
+  'subscription',
   'stateNode',
   'tag',
   'type',
@@ -193,39 +232,57 @@ const exclude = new Set([
   '_store',
   '_threadCount',
   '$$typeof',
+  '@@observable',
 ]);
-// -------------------CONVERT PROPT DATA TO STRING------------------------------
-// This recursive function is used to grab the state of children components
-// and push them into the parent componenent
-// react elements throw errors on client side of application - convert react/functions into string
-function convertDataToString(newObj, newPropData = {}, depth = 0) {
-  // const newPropData = oldObj;
-  for (const key in newObj) {
-    // Skip keys that are in exclude list OR if there is no value at key
-    if (exclude.has(key) || !newObj[key]) {
+// -----------------TRIMMING PASSED IN FIBER ROOT DATA--------------------------
+/**
+ * This recursive function is used to grab the state of children components
+ and push them into the parent componenent react elements throw errors on client side of application - convert react/functions into string
+ * 
+ * @param reactDevData - The data object obtained from React Devtool. Ex: memoizedProps, memoizedState
+ * @param reactimeData - The updated data object to send to front end of Reactime. 
+ * @param depth - reactDevData is nested object. The value in reactDevData can be another object. Depth is use to keep track the depth during the unraveling of nested object
+ * @returns reactimeData - the updated data object to send to front end of ReactTime
+ */
+function convertDataToString(reactDevData, reactimeData = {}, excludeSet?: any) {
+  if (!excludeSet) excludeSet = exclude;
+  for (const key in reactDevData) {
+    // Skip keys that are in exclude set OR if there is no value at key
+    // Falsy values such as 0, false, null are still valid value
+    if (excludeSet.has(key) || reactDevData[key] === undefined) {
       continue;
-      // newPropData[key] = 'reactFiber';
-      // return newPropData;
-    }
-    // If value at key is a function, assign key with value 'function' to newPropData object
-    else if (typeof newObj[key] === 'function') {
-      newPropData[key] = 'function';
     }
-    // If value at key is an object, recusive call convertDataToString to traverse through all keys and append to newPropData object accodingly
-    else if (typeof newObj[key] === 'object') {
-      // newPropData[key] =
-      depth > 10
-        ? 'convertDataToString reached max depth'
-        : convertDataToString(newObj[key], newPropData, depth + 1);
+    // If value at key is a function, assign key with value 'function' to reactimeData object
+    else if (typeof reactDevData[key] === 'function') {
+      reactimeData[key] = 'function';
     } else {
-      newPropData[key] = newObj[key];
+      reactimeData[key] = reactDevData[key];
     }
   }
-  return newPropData;
+  return reactimeData;
+}
+// ------------------------TRIMMING CONTEXT DATA--------------------------------
+function trimContextData(memoizedState, reactimeContextData = {}) {
+  const exclude = new Set(['children', 'store', 'subscription']);
+  while (memoizedState) {
+    //Trim the current level of memoizedState data:
+    const updateMemoizedState = convertDataToString(memoizedState?.memoizedState[0], {}, exclude);
+    //Update Reactime data:
+    Object.assign(reactimeContextData, updateMemoizedState);
+    //Move on to the next level:
+    memoizedState = memoizedState?.next;
+  }
+
+  return reactimeContextData;
 }
 // -------------------------CREATE TREE TO SEND TO FRONT END--------------------
 /**
  * Every time a state change is made in the accompanying app, the extension creates a Tree “snapshot” of the current state, and adds it to the current “cache” of snapshots in the extension
+ *
+ * @param currentFiber
+ * @param tree
+ * @param fromSibling
+ * @returns
  */
 function createTree(
   currentFiber: Fiber,
@@ -262,10 +319,12 @@ function createTree(
       elementType,
     memoizedProps,
     memoizedState,
+    dependencies,
+    _debugHookTypes,
   });
 
-  // Tag === 5 signify this is a React Fragment. Each JSX component return a React fragment => The parent of a React Fragment could be a JSX component
-  if (tag === 5) {
+  // TODO: Understand this if statement
+  if (tag === HostComponent) {
     try {
       // Ensure parent component has memoizedProps property
       if (
@@ -302,15 +361,24 @@ function createTree(
   } = {};
   let componentFound = false;
 
+  /**
+   * In addition to React Component JSX from user input, there are other components that user would be using under the hood without needing to see it. For example, if Redux is used, a ContextProvider, called ReactRedux.Provider is created under the hood to manage the context store.
+   * @variable filteredComponents is boolean value, used to filter out 'under-the-hood' components
+   */
+  // const filteredComponents = tag != ContextProvider;
+  const filteredComponents = true;
   // check to see if the parent component has any state/props
-  if (memoizedProps && Object.keys(memoizedProps).length) {
-    componentData.props = convertDataToString(memoizedProps, {});
+  if (filteredComponents && memoizedProps && Object.keys(memoizedProps).length) {
+    componentData.props = convertDataToString(memoizedProps);
   }
-
   // if the component uses the useContext hook, we want to grab the context object and add it to the componentData object for that fiber
-  if (tag === 0 && _debugHookTypes && dependencies?.firstContext?.memoizedValue) {
-    componentData.context = convertDataToString(dependencies.firstContext.memoizedValue, null);
+  // if (tag === 0 && _debugHookTypes && dependencies?.firstContext?.memoizedValue) {
+  //   componentData.context = convertDataToString(dependencies.firstContext.memoizedValue);
+  // }
+  if ((tag === FunctionComponent || tag === ClassComponent) && memoizedState?.memoizedState) {
+    componentData.context = trimContextData(memoizedState);
   }
+  
   // Check if node is a stateful class component
   if (stateNode && stateNode.state && (tag === 0 || tag === 1 || tag === 2)) {
     // Save component's state and setState() function to our record for future
@@ -360,6 +428,7 @@ function createTree(
     treeBaseDuration,
   };
   console.log('props', componentData.props);
+  console.log('context', componentData.context);
   let newNode = null;
 
   // We want to add this fiber node to the snapshot
@@ -449,7 +518,7 @@ interface DevTools {
  * @return a function to be invoked by index.js that initiates snapshot monitoring
  * linkFiber contains core module functionality, exported as an anonymous function.
  */
-export default (snap: Snapshot, mode: Mode): (() => void) => {
+export default (snap: Snapshot, mode: Status): (() => void) => {
   // Checks for visiblity of document
   function onVisibilityChange() {
     // Hidden property = background tab/minimized window