From 088075abd93464610797d01da7ad26cf3d988e75 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Tue, 16 Oct 2018 19:21:47 +0200
Subject: [PATCH 1/3] feat: add debug.deep and debug.shallow

---
 package.json                                  |  1 +
 .../__snapshots__/debug.test.js.snap          | 34 +++++++++++
 src/__tests__/debug.test.js                   | 60 +++++++++++++++++++
 src/debug.js                                  | 23 ++++++-
 yarn.lock                                     | 12 ++++
 5 files changed, 128 insertions(+), 2 deletions(-)
 create mode 100644 src/__tests__/__snapshots__/debug.test.js.snap
 create mode 100644 src/__tests__/debug.test.js

diff --git a/package.json b/package.json
index 9aad03b10..5736f17bf 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "react": "16.6.0-alpha.8af6728",
     "react-native": "^0.57.3",
     "react-test-renderer": "16.6.0-alpha.8af6728",
+    "strip-ansi": "^5.0.0",
     "typescript": "^3.1.1"
   },
   "peerDependencies": {
diff --git a/src/__tests__/__snapshots__/debug.test.js.snap b/src/__tests__/__snapshots__/debug.test.js.snap
new file mode 100644
index 000000000..2a595cfa1
--- /dev/null
+++ b/src/__tests__/__snapshots__/debug.test.js.snap
@@ -0,0 +1,34 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`debug 1`] = `
+"<TouchableOpacity
+  activeOpacity={0.2}
+  onPress={[Function bound fn]}
+>
+  <TextComponent
+    text=\\"Press me\\"
+  />
+</TouchableOpacity>"
+`;
+
+exports[`debug.deep 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
+  </Text>
+</View>"
+`;
diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
new file mode 100644
index 000000000..758280cea
--- /dev/null
+++ b/src/__tests__/debug.test.js
@@ -0,0 +1,60 @@
+// @flow
+/* eslint-disable no-console */
+import React from 'react';
+import { TouchableOpacity, Text } from 'react-native';
+import stripAnsi from 'strip-ansi';
+import { debug } from '..';
+
+function TextComponent({ text }) {
+  return <Text>{text}</Text>;
+}
+
+class Button extends React.Component<*> {
+  render() {
+    return (
+      <TouchableOpacity onPress={this.props.onPress}>
+        <TextComponent text={this.props.text} />
+      </TouchableOpacity>
+    );
+  }
+}
+
+test('debug', () => {
+  // $FlowFixMe
+  console.log = jest.fn();
+  const component = <Button onPress={jest.fn} text="Press me" />;
+  debug(component);
+
+  const output = console.log.mock.calls[0][0];
+
+  expect(stripAnsi(output)).not.toEqual(output);
+  expect(stripAnsi(output)).toMatchSnapshot();
+
+  console.log.mockReset();
+
+  debug(component, 'test message');
+
+  expect(console.log).toBeCalledWith(output, 'test message');
+});
+
+test('debug.shallow', () => {
+  expect(debug.shallow).toBe(debug);
+});
+
+test('debug.deep', () => {
+  // $FlowFixMe
+  console.log = jest.fn();
+  const component = <Button onPress={jest.fn} text="Press me" />;
+  debug.deep(component);
+
+  const output = console.log.mock.calls[0][0];
+
+  expect(stripAnsi(output)).not.toEqual(output);
+  expect(stripAnsi(output)).toMatchSnapshot();
+
+  console.log.mockReset();
+
+  debug.deep(component, 'test message');
+
+  expect(console.log).toBeCalledWith(output, 'test message');
+});
diff --git a/src/debug.js b/src/debug.js
index ce45289ce..d97b66fcb 100644
--- a/src/debug.js
+++ b/src/debug.js
@@ -1,21 +1,40 @@
 // @flow
+/* eslint-disable no-console */
 import * as React from 'react';
 import prettyFormat, { plugins } from 'pretty-format'; // eslint-disable-line import/no-extraneous-dependencies
 import shallow from './shallow';
+import render from './render';
 
 /**
  * Log pretty-printed shallow test component instance
  */
-export default function debug(
+function debugShallow(
   instance: ReactTestInstance | React.Element<*>,
   message?: any
 ) {
   const { output } = shallow(instance);
-  // eslint-disable-next-line no-console
+
   console.log(format(output), message || '');
 }
 
+/**
+ * Log pretty-printed deep test component instance
+ */
+function debugDeep(instance: React.Element<*>, message?: any) {
+  const { toJSON } = render(instance);
+
+  console.log(format(toJSON()), message || '');
+}
+
 const format = input =>
   prettyFormat(input, {
     plugins: [plugins.ReactTestComponent, plugins.ReactElement],
+    highlight: true,
   });
+
+const debug = debugShallow;
+
+debug.shallow = debugShallow;
+debug.deep = debugDeep;
+
+export default debug;
diff --git a/yarn.lock b/yarn.lock
index d3b769f49..e3ee9109b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -842,6 +842,11 @@ ansi-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-3.0.0.tgz#ed0317c322064f79466c02966bddb605ab37d998"
   integrity sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=
 
+ansi-regex@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-4.0.0.tgz#70de791edf021404c3fd615aa89118ae0432e5a9"
+  integrity sha512-iB5Dda8t/UqpPI/IjsejXu5jOGDrzn41wJyljwPH65VCIbk6+1BzFIMJGFwTNrYXT1CrD+B4l19U7awiQ8rk7w==
+
 ansi-styles@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/ansi-styles/-/ansi-styles-2.2.1.tgz#b432dd3358b634cf75e1e4664368240533c1ddbe"
@@ -6275,6 +6280,13 @@ strip-ansi@^4.0.0:
   dependencies:
     ansi-regex "^3.0.0"
 
+strip-ansi@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-5.0.0.tgz#f78f68b5d0866c20b2c9b8c61b5298508dc8756f"
+  integrity sha512-Uu7gQyZI7J7gn5qLn1Np3G9vcYGTVqB+lFTytnDJv83dd8T22aGH451P3jueT2/QemInJDfxHB5Tde5OzgG1Ow==
+  dependencies:
+    ansi-regex "^4.0.0"
+
 strip-bom@3.0.0, strip-bom@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-3.0.0.tgz#2334c18e9c759f7bdd56fdef7e9ae3d588e68ed3"

From be4691e089ba85fd80d60508cb504f36af6d725d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Tue, 16 Oct 2018 19:30:41 +0200
Subject: [PATCH 2/3] add docs

---
 README.md | 48 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 44 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index f3f0d05ca..6e6b89d62 100644
--- a/README.md
+++ b/README.md
@@ -273,12 +273,52 @@ Log prettified shallowly rendered component or test instance (just like snapshot
 import { debug } from 'react-native-testing-library';
 
 debug(<Component />);
-// console.log:
-// <View>
-//   <Text>Component</Text>
-// </View>
+debug.shallow(<Component />); // an alias for `debug`
 ```
 
+logs:
+
+```jsx
+<TouchableOpacity
+  activeOpacity={0.2}
+  onPress={[Function bound fn]}
+>
+  <TextComponent
+    text="Press me"
+  />
+</TouchableOpacity>
+```
+
+There's also `debug.deep` that renders deeply to stdout.
+
+```jsx
+import { debug } from 'react-native-testing-library';
+
+debug.deep(<Component />);
+```
+
+logs:
+
+```jsx
+<View
+  accessible={true}
+  isTVSelectable={true}
+  onResponderGrant={[Function bound touchableHandleResponderGrant]}
+  // ... more props
+  style={
+    Object {
+      \\"opacity\\": 1,
+    }
+  }
+>
+  <Text>
+    Press me
+  </Text>
+</View>
+```
+
+Optionally you can provide a string message as a second argument to `debug`, which will be displayed right after the component.
+
 ## `flushMicrotasksQueue`
 
 Wait for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`.

From b522870368e3507d2e7cc30f120cba10f5e9302c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Pierzcha=C5=82a?= <thymikee@gmail.com>
Date: Tue, 16 Oct 2018 19:35:39 +0200
Subject: [PATCH 3/3] add TS

---
 typings/__tests__/index.test.tsx |  7 +++++++
 typings/index.d.ts               | 14 +++++++++++---
 2 files changed, 18 insertions(+), 3 deletions(-)

diff --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx
index 460628a4e..b3532970c 100644
--- a/typings/__tests__/index.test.tsx
+++ b/typings/__tests__/index.test.tsx
@@ -81,8 +81,15 @@ const shallowTree: { output: React.ReactElement<any> } = shallow(
 
 const waitForFlush: Promise<any> = flushMicrotasksQueue();
 
+// debug API
 debug(<TestComponent />);
+debug(<TestComponent />, 'message');
 debug(getByNameString);
+debug(getByNameString, 'message');
+debug.shallow(<TestComponent />);
+debug.shallow(<TestComponent />, 'message');
+debug.deep(<TestComponent />);
+debug.deep(<TestComponent />, 'message');
 
 const waitBy: Promise<ReactTestInstance> = waitForElement<ReactTestInstance>(
   () => tree.getByName('View')
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ec4bfaaa8..1f467e1b0 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -51,6 +51,16 @@ export type WaitForElementFunction = <T = any>(
   interval?: number
 ) => Promise<T>;
 
+export type DebugFunction = (
+  instance: ReactTestInstance | React.ReactElement<any>,
+  message?: string
+) => void;
+
+export type DebugAPI = DebugFunction & {
+  shallow: DebugFunction;
+  deep: (instance: React.ReactElement<any>, message?: string) => void;
+};
+
 export declare const render: (
   component: React.ReactElement<any>,
   options?: RenderOptions
@@ -59,8 +69,6 @@ export declare const shallow: <P = {}>(
   instance: ReactTestInstance | React.ReactElement<P>
 ) => { output: React.ReactElement<P> };
 export declare const flushMicrotasksQueue: () => Promise<any>;
-export declare const debug: (
-  instance: ReactTestInstance | React.ReactElement<any>
-) => void;
+export declare const debug: DebugAPI;
 export declare const fireEvent: FireEventAPI;
 export declare const waitForElement: WaitForElementFunction;