From 92444eacb848d6975ab67f8dc8739b85fbabb8e2 Mon Sep 17 00:00:00 2001
From: bendtherules <abhasbhattacharya2@gmail.com>
Date: Fri, 19 Jul 2019 18:45:25 +0530
Subject: [PATCH] Add basic traverse function with tests

---
 src/index.ts                              | 63 +++++++++++++++++++++++
 src/index.tsx                             | 14 -----
 src/utils.ts                              |  5 ++
 test/sample-components/depth-2-simple.tsx | 14 +++++
 test/traverse-basic.spec.tsx              | 39 ++++++++++++++
 5 files changed, 121 insertions(+), 14 deletions(-)
 create mode 100644 src/index.ts
 delete mode 100644 src/index.tsx
 create mode 100644 src/utils.ts
 create mode 100644 test/sample-components/depth-2-simple.tsx
 create mode 100644 test/traverse-basic.spec.tsx

diff --git a/src/index.ts b/src/index.ts
new file mode 100644
index 0000000..184241f
--- /dev/null
+++ b/src/index.ts
@@ -0,0 +1,63 @@
+// import { isNodeSimple } from './utils';
+
+export interface FiberNode {
+  child: FiberNode | null;
+  sibling: FiberNode | null;
+  // Add type
+}
+
+function traverse(node: FiberNode, fn: (node: FiberNode) => any) {
+  // if (node.child) {
+  //   if (!isNodeSimple(node) && typeof node.child.type === "string") {
+  //     node.child.stateNode.addEventListener('click', (ev) => {
+  //       console.log('Clicked inside component: ' + node.type.name);
+  //       ev.stopPropagation();
+  //     });
+  //     /* console.log('Set event listener for '+ node.type.name) */;
+  //   }
+  // }
+
+  fn.call(null, node);
+  console.log('Going through node with ', node);
+
+  if (node.child !== null) {
+    traverse(node.child, fn);
+  }
+  if (node.sibling !== null) {
+    traverse(node.sibling, fn);
+  }
+};
+
+
+// findComponent = (node, name) => {
+//   console.log(node)
+//   if (!isNodeSimple(node) && node.type.name === name) {
+//     console.log('Found node with name ' + node.type.name);
+
+//     /* if (node.child) {
+//       let innerNode = node.child;
+//       console.log('Highlighting its inner nodes in yellow');
+
+//       highlightNode(node, true);
+
+//     } */
+//     return node;
+//   }
+
+//   let returnVal = undefined;
+//   returnVal = node.child && findComponent(node.child, name);
+//   if (returnVal) { return returnVal }
+//   returnVal = node.sibling && findComponent(node.sibling, name);
+//   if (returnVal) { return returnVal }
+// };
+
+// highlightNode = (node, ignoreSibling = false) => {
+//   if (isNodeSimple(node)) {
+//     node.stateNode.style.backgroundColor = "yellow";
+//   } else {
+//     node.child && highlightNode(node.child);
+//   }
+//   !ignoreSibling && node.sibling && highlightNode(node.sibling);
+// }
+
+export { traverse };
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
deleted file mode 100644
index 3a0fe63..0000000
--- a/src/index.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as PropTypes from 'prop-types'
-import * as React from 'react'
-
-interface Props {
-  text: string
-}
-
-const C: React.SFC<Props> = ({ text }) => <p>{text}</p>
-
-C.propTypes = {
-  text: PropTypes.string.isRequired
-}
-
-export default C
diff --git a/src/utils.ts b/src/utils.ts
new file mode 100644
index 0000000..33afafd
--- /dev/null
+++ b/src/utils.ts
@@ -0,0 +1,5 @@
+function isNodeSimple(node) {
+    return (typeof node.type === "string") || node.type === null;
+}
+
+export { isNodeSimple };
\ No newline at end of file
diff --git a/test/sample-components/depth-2-simple.tsx b/test/sample-components/depth-2-simple.tsx
new file mode 100644
index 0000000..b6a0e66
--- /dev/null
+++ b/test/sample-components/depth-2-simple.tsx
@@ -0,0 +1,14 @@
+// import * as PropTypes from "prop-types";
+import * as React from "react";
+
+class CDepth2 extends React.Component {
+  render() {
+    return <div></div>;
+  }
+}
+
+// C.propTypes = {
+//   text: PropTypes.string.isRequired
+// };
+
+export default CDepth2;
diff --git a/test/traverse-basic.spec.tsx b/test/traverse-basic.spec.tsx
new file mode 100644
index 0000000..cd02533
--- /dev/null
+++ b/test/traverse-basic.spec.tsx
@@ -0,0 +1,39 @@
+import * as React from "react";
+// import ReactDOM from "react-dom";
+import { mount } from "enzyme";
+import CDepth2 from "./sample-components/depth-2-simple";
+import { traverse, FiberNode } from "../src";
+
+describe("Basic traverse test", () => {
+  let container: HTMLDivElement;
+
+  beforeEach(() => {
+    container = document.body.appendChild(document.createElement("div"));
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+  });
+
+  it("should render correctly", () => {
+    const rootRef = React.createRef<CDepth2>();
+
+    // ReactDOM.render(
+    //   <C text="text" ref={rootRef} />,
+    //   document.getElementById("container")
+    // );
+    mount(<CDepth2 ref={rootRef} />, { attachTo: container });
+
+    const mockCallback = jest.fn();
+
+    if (rootRef.current !== null) {
+      traverse(
+        (rootRef.current as any)._reactInternalFiber.child as FiberNode,
+        mockCallback
+      );
+    }
+
+    // The mock function is called twice
+    expect(mockCallback.mock.calls.length).toBe(2);
+  });
+});