From 9c96ce35c6271abbe2d3f7462d828d75b50d6591 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Thu, 18 Oct 2018 00:39:50 +0200
Subject: [PATCH 1/3] feat: make debug.deep more usable

---
 .../__snapshots__/debug.test.js.snap          | 28 +++++++++++++--
 src/__tests__/debug.test.js                   | 34 ++++++++++++++++---
 src/debug.js                                  | 17 +++++++---
 typings/__tests__/index.test.tsx              |  1 +
 typings/index.d.ts                            |  5 ++-
 5 files changed, 73 insertions(+), 12 deletions(-)

diff --git a/src/__tests__/__snapshots__/debug.test.js.snap b/src/__tests__/__snapshots__/debug.test.js.snap
index 2a595cfa1..8bef21dcb 100644
--- a/src/__tests__/__snapshots__/debug.test.js.snap
+++ b/src/__tests__/__snapshots__/debug.test.js.snap
@@ -3,10 +3,10 @@
 exports[`debug 1`] = `
 "<TouchableOpacity
   activeOpacity={0.2}
-  onPress={[Function bound fn]}
+  onPress={[Function _callee]}
 >
   <TextComponent
-    text=\\"Press me\\"
+    text=\\"Press me 0\\"
   />
 </TouchableOpacity>"
 `;
@@ -28,7 +28,29 @@ exports[`debug.deep 1`] = `
   }
 >
   <Text>
-    Press me
+    Press me 0
+  </Text>
+</View>"
+`;
+
+exports[`debug.deep async test 1`] = `
+"<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function bound touchableHandleResponderGrant]}
+  onResponderMove={[Function bound touchableHandleResponderMove]}
+  onResponderRelease={[Function bound touchableHandleResponderRelease]}
+  onResponderTerminate={[Function bound touchableHandleResponderTerminate]}
+  onResponderTerminationRequest={[Function bound touchableHandleResponderTerminationRequest]}
+  onStartShouldSetResponder={[Function bound touchableHandleStartShouldSetResponder]}
+  style={
+    Object {
+      \\"opacity\\": 1,
+    }
+  }
+>
+  <Text>
+    Press me 1
   </Text>
 </View>"
 `;
diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
index 758280cea..d887e8980 100644
--- a/src/__tests__/debug.test.js
+++ b/src/__tests__/debug.test.js
@@ -3,17 +3,26 @@
 import React from 'react';
 import { TouchableOpacity, Text } from 'react-native';
 import stripAnsi from 'strip-ansi';
-import { debug } from '..';
+import { debug, render, fireEvent, flushMicrotasksQueue } from '..';
 
 function TextComponent({ text }) {
   return <Text>{text}</Text>;
 }
 
-class Button extends React.Component<*> {
+class Button extends React.Component<*, *> {
+  state = { counter: 0 };
+
+  onPress = async () => {
+    await Promise.resolve();
+
+    this.setState({ counter: 1 });
+    this.props.onPress();
+  };
+
   render() {
     return (
-      <TouchableOpacity onPress={this.props.onPress}>
-        <TextComponent text={this.props.text} />
+      <TouchableOpacity onPress={this.onPress}>
+        <TextComponent text={`${this.props.text} ${this.state.counter}`} />
       </TouchableOpacity>
     );
   }
@@ -58,3 +67,20 @@ test('debug.deep', () => {
 
   expect(console.log).toBeCalledWith(output, 'test message');
 });
+
+test('debug.deep async test', async () => {
+  // $FlowFixMe
+  console.log = jest.fn();
+  const { toJSON, getByName } = render(
+    <Button onPress={jest.fn} text="Press me" />
+  );
+
+  fireEvent.press(getByName('TouchableOpacity'));
+  await flushMicrotasksQueue();
+
+  debug.deep(toJSON());
+
+  const output = console.log.mock.calls[0][0];
+
+  expect(stripAnsi(output)).toMatchSnapshot();
+});
diff --git a/src/debug.js b/src/debug.js
index d97b66fcb..b6c21a904 100644
--- a/src/debug.js
+++ b/src/debug.js
@@ -20,10 +20,19 @@ function debugShallow(
 /**
  * Log pretty-printed deep test component instance
  */
-function debugDeep(instance: React.Element<*>, message?: any) {
-  const { toJSON } = render(instance);
-
-  console.log(format(toJSON()), message || '');
+function debugDeep(
+  instance: React.Element<*> | ?ReactTestRendererJSON,
+  message?: any
+) {
+  try {
+    // We're assuming React.Element<*> here and fallback to
+    // rendering ?ReactTestRendererJSON
+    // $FlowFixMe
+    const { toJSON } = render(instance);
+    console.log(format(toJSON()), message || '');
+  } catch (e) {
+    console.log(format(instance), message || '');
+  }
 }
 
 const format = input =>
diff --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx
index b3532970c..7446554d1 100644
--- a/typings/__tests__/index.test.tsx
+++ b/typings/__tests__/index.test.tsx
@@ -90,6 +90,7 @@ debug.shallow(<TestComponent />);
 debug.shallow(<TestComponent />, 'message');
 debug.deep(<TestComponent />);
 debug.deep(<TestComponent />, 'message');
+debug.deep(tree.toJSON());
 
 const waitBy: Promise<ReactTestInstance> = waitForElement<ReactTestInstance>(
   () => tree.getByName('View')
diff --git a/typings/index.d.ts b/typings/index.d.ts
index 1f467e1b0..15b2d02d4 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -58,7 +58,10 @@ export type DebugFunction = (
 
 export type DebugAPI = DebugFunction & {
   shallow: DebugFunction;
-  deep: (instance: React.ReactElement<any>, message?: string) => void;
+  deep: (
+    instance: React.ReactElement<any> | ReactTestRendererJSON | null,
+    message?: string
+  ) => void;
 };
 
 export declare const render: (

From 6e25bde638bed8a1c8561c00352ee083801160ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Thu, 18 Oct 2018 00:49:10 +0200
Subject: [PATCH 2/3] chore: add docs

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index 961d2ff44..a6df746f9 100644
--- a/README.md
+++ b/README.md
@@ -295,6 +295,7 @@ There's also `debug.deep` that renders deeply to stdout.
 import { debug } from 'react-native-testing-library';
 
 debug.deep(<Component />);
+debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes
 ```
 
 logs:

From 8dbe3e003290cf5d2d9148df1daa80baa1b44083 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Thu, 18 Oct 2018 09:06:38 +0200
Subject: [PATCH 3/3] use default param

---
 src/debug.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/debug.js b/src/debug.js
index b6c21a904..29320bf68 100644
--- a/src/debug.js
+++ b/src/debug.js
@@ -22,16 +22,16 @@ function debugShallow(
  */
 function debugDeep(
   instance: React.Element<*> | ?ReactTestRendererJSON,
-  message?: any
+  message?: any = ''
 ) {
   try {
     // We're assuming React.Element<*> here and fallback to
     // rendering ?ReactTestRendererJSON
     // $FlowFixMe
     const { toJSON } = render(instance);
-    console.log(format(toJSON()), message || '');
+    console.log(format(toJSON()), message);
   } catch (e) {
-    console.log(format(instance), message || '');
+    console.log(format(instance), message);
   }
 }