From 6fbbe2cdf537bde0171f61ceaa3f6312c252fb7b 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:13:47 +0200
Subject: [PATCH] feat: make debug.deep more usable (#40)

<!-- Please provide enough information so that others can review your pull request. -->
<!-- Keep pull requests small and focused on a single change. -->

### Summary

Make `debug.deep` more usable by allowing it to print arbitrary JSON (and actually any) files. This proves handy when we want to debug async component which we want to snapshot after async operations:

```jsx
const { toJSON, getByName } = render(
  <Button onPress={jest.fn} text="Press me" />
);
fireEvent.press(getByName('TouchableOpacity'));
await flushMicrotasksQueue();

debug.deep(toJSON());
```

### Test plan

added one
---
 README.md                                     |  1 +
 .../__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 ++-
 6 files changed, 74 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index 961d2ff4..a6df746f 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:
diff --git a/src/__tests__/__snapshots__/debug.test.js.snap b/src/__tests__/__snapshots__/debug.test.js.snap
index 2a595cfa..8bef21dc 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 758280ce..d887e898 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 d97b66fc..29320bf6 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 b3532970..7446554d 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 1f467e1b..15b2d02d 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: (