From 043f51d36c1c157f0e85561c1aaf88e2a419f19c Mon Sep 17 00:00:00 2001
From: Maciej Jastrzebski <mdjastrzebski@gmail.com>
Date: Mon, 18 May 2020 16:19:08 +0200
Subject: [PATCH] feat(breaking): remove legacy `debug` export (#328)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Removed global `debug` functions

* Removed global `debug` from docs

* Cleanup

* Added migration section

Co-authored-by: Michał Pierzchała <thymikee@gmail.com>
---
 .../__snapshots__/debug.test.js.snap          | 57 ------------
 src/__tests__/debug.test.js                   | 88 -------------------
 src/debug.js                                  | 42 ---------
 src/index.js                                  |  2 -
 typings/__tests__/index.test.tsx              | 12 ---
 typings/index.d.ts                            | 14 ---
 website/docs/API.md                           | 57 ------------
 website/docs/Migration20.md                   |  5 ++
 8 files changed, 5 insertions(+), 272 deletions(-)
 delete mode 100644 src/__tests__/__snapshots__/debug.test.js.snap
 delete mode 100644 src/__tests__/debug.test.js
 delete mode 100644 src/debug.js

diff --git a/src/__tests__/__snapshots__/debug.test.js.snap b/src/__tests__/__snapshots__/debug.test.js.snap
deleted file mode 100644
index b1732ecc..00000000
--- a/src/__tests__/__snapshots__/debug.test.js.snap
+++ /dev/null
@@ -1,57 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`debug 1`] = `
-"<ForwardRef
-  onPress={[Function _callee]}
->
-  <TextComponent
-    text=\\"Press me 0\\"
-  />
-</ForwardRef>"
-`;
-
-exports[`debug.deep 1`] = `
-"<View
-  accessible={true}
-  focusable={true}
-  onClick={[Function onClick]}
-  onResponderGrant={[Function onResponderGrant]}
-  onResponderMove={[Function onResponderMove]}
-  onResponderRelease={[Function onResponderRelease]}
-  onResponderTerminate={[Function onResponderTerminate]}
-  onResponderTerminationRequest={[Function onResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function onStartShouldSetResponder]}
-  style={
-    Object {
-      \\"opacity\\": 1,
-    }
-  }
->
-  <Text>
-    Press me 0
-  </Text>
-</View>"
-`;
-
-exports[`debug.deep async test 1`] = `
-"<View
-  accessible={true}
-  focusable={true}
-  onClick={[Function onClick]}
-  onResponderGrant={[Function onResponderGrant]}
-  onResponderMove={[Function onResponderMove]}
-  onResponderRelease={[Function onResponderRelease]}
-  onResponderTerminate={[Function onResponderTerminate]}
-  onResponderTerminationRequest={[Function onResponderTerminationRequest]}
-  onStartShouldSetResponder={[Function onStartShouldSetResponder]}
-  style={
-    Object {
-      \\"opacity\\": 1,
-    }
-  }
->
-  <Text>
-    Press me 1
-  </Text>
-</View>"
-`;
diff --git a/src/__tests__/debug.test.js b/src/__tests__/debug.test.js
deleted file mode 100644
index baf35027..00000000
--- a/src/__tests__/debug.test.js
+++ /dev/null
@@ -1,88 +0,0 @@
-// @flow
-/* eslint-disable no-console */
-import React from 'react';
-import { TouchableOpacity, Text } from 'react-native';
-import stripAnsi from 'strip-ansi';
-import { debug, render, fireEvent, flushMicrotasksQueue } from '..';
-import debugShallow from '../helpers/debugShallow';
-
-type ConsoleLogMock = JestMockFn<Array<string>, void>;
-
-function TextComponent({ text }) {
-  return <Text>{text}</Text>;
-}
-
-class Button extends React.Component<any, any> {
-  state = { counter: 0 };
-
-  onPress = async () => {
-    await Promise.resolve();
-
-    this.setState({ counter: 1 });
-    this.props.onPress();
-  };
-
-  render() {
-    return (
-      <TouchableOpacity onPress={this.onPress}>
-        <TextComponent text={`${this.props.text} ${this.state.counter}`} />
-      </TouchableOpacity>
-    );
-  }
-}
-
-test('debug', () => {
-  jest.spyOn(console, 'log').mockImplementation((x) => x);
-  const component = <Button onPress={jest.fn} text="Press me" />;
-  debug(component);
-
-  const output = ((console.log: any): ConsoleLogMock).mock.calls[0][0];
-
-  expect(stripAnsi(output)).not.toEqual(output);
-  expect(stripAnsi(output)).toMatchSnapshot();
-
-  ((console.log: any): ConsoleLogMock).mockReset();
-
-  debug(component, 'test message');
-
-  expect(console.log).toHaveBeenCalledWith('test message\n\n', output);
-});
-
-test('debug.shallow', () => {
-  expect(debug.shallow).toBe(debugShallow);
-});
-
-test('debug.deep', () => {
-  // $FlowFixMe
-  console.log = jest.fn();
-  const component = <Button onPress={jest.fn} text="Press me" />;
-  debug.deep(component);
-
-  const output = ((console.log: any): ConsoleLogMock).mock.calls[0][0];
-
-  expect(stripAnsi(output)).not.toEqual(output);
-  expect(stripAnsi(output)).toMatchSnapshot();
-
-  ((console.log: any): ConsoleLogMock).mockReset();
-
-  debug.deep(component, 'test message');
-
-  expect(console.log).toHaveBeenCalledWith('test message\n\n', output);
-});
-
-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: any): ConsoleLogMock).mock.calls[0][0];
-
-  expect(stripAnsi(output)).toMatchSnapshot();
-});
diff --git a/src/debug.js b/src/debug.js
deleted file mode 100644
index 807eaa57..00000000
--- a/src/debug.js
+++ /dev/null
@@ -1,42 +0,0 @@
-// @flow
-/* eslint-disable no-console */
-import * as React from 'react';
-import render from './render';
-import debugShallow from './helpers/debugShallow';
-import debugDeep from './helpers/debugDeep';
-import format from './helpers/format';
-
-/**
- * Log pretty-printed deep test component instance
- */
-function debugDeepElementOrInstance(
-  instance: React.Element<any> | ?ReactTestRendererJSON,
-  message?: any = ''
-) {
-  try {
-    // We're assuming React.Element<any> here and fallback to
-    // rendering ?ReactTestRendererJSON
-    // $FlowFixMe
-    const { toJSON } = render(instance);
-    if (message) {
-      console.log(`${message}\n\n`, format(toJSON()));
-    } else {
-      console.log(format(toJSON()));
-    }
-  } catch (e) {
-    // $FlowFixMe
-    debugDeep(instance);
-  }
-}
-
-function debug(
-  instance: ReactTestInstance | React.Element<any>,
-  message?: any
-) {
-  return debugShallow(instance, message);
-}
-
-debug.shallow = debugShallow;
-debug.deep = debugDeepElementOrInstance;
-
-export default debug;
diff --git a/src/index.js b/src/index.js
index 2e7ac9f2..1d73981f 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
 // @flow
 import act from './act';
 import cleanup from './cleanup';
-import debug from './debug';
 import fireEvent from './fireEvent';
 import flushMicrotasksQueue from './flushMicrotasksQueue';
 import render from './render';
@@ -11,7 +10,6 @@ import within from './within';
 
 export { act };
 export { cleanup };
-export { debug };
 export { fireEvent };
 export { flushMicrotasksQueue };
 export { render };
diff --git a/typings/__tests__/index.test.tsx b/typings/__tests__/index.test.tsx
index 3caf5f29..209102b3 100644
--- a/typings/__tests__/index.test.tsx
+++ b/typings/__tests__/index.test.tsx
@@ -6,7 +6,6 @@ import {
   fireEvent,
   shallow,
   flushMicrotasksQueue,
-  debug,
   waitForElement,
   act,
   within,
@@ -251,17 +250,6 @@ 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');
-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 0a5bb8d2..ef4895f1 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -230,19 +230,6 @@ 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> | ReactTestRendererJSON | null,
-    message?: string
-  ) => void;
-};
-
 export declare const render: (
   component: React.ReactElement<any>,
   options?: RenderOptions
@@ -252,7 +239,6 @@ export declare const shallow: <P = {}>(
 ) => { output: React.ReactElement<P> };
 export declare const flushMicrotasksQueue: () => Promise<any>;
 export declare const cleanup: () => void;
-export declare const debug: DebugAPI;
 export declare const fireEvent: FireEventAPI;
 export declare const waitForElement: WaitForElementFunction;
 export declare const act: (callback: () => void) => Thenable;
diff --git a/website/docs/API.md b/website/docs/API.md
index 62176f09..5a7bca6c 100644
--- a/website/docs/API.md
+++ b/website/docs/API.md
@@ -370,63 +370,6 @@ Use cases for scoped queries include:
 - queries scoped to a single item inside a FlatList containing many items
 - queries scoped to a single screen in tests involving screen transitions (e.g. with react-navigation)
 
-## `debug`
-
-- [`Example code`](https://github.com/callstack/react-native-testing-library/blob/master/src/__tests__/debug.test.js)
-
-Log prettified shallowly rendered component or test instance (just like snapshot) to stdout.
-
-```jsx
-import { debug } from 'react-native-testing-library';
-
-debug(<Component />);
-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 />);
-debug.deep(toJSON(), 'actually debug JSON too'); // useful when Component state changes
-```
-
-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`
 
 Waits for microtasks queue to flush. Useful if you want to wait for some promises with `async/await`.
diff --git a/website/docs/Migration20.md b/website/docs/Migration20.md
index 6bd99491..d4f69eb5 100644
--- a/website/docs/Migration20.md
+++ b/website/docs/Migration20.md
@@ -5,6 +5,11 @@ title: Migration to 2.0
 
 This guides describes major steps involved in migrating your testing code from using React Native Testing Library version `1.x` to version `2.0`.
 
+
+## Removed global `debug` function
+
+Global debug function has been removed in favor of `debug()` method returned from `render()` function.
+
 ## Some `byTestId` queries behavior changes
 
 In version `1.x` `getByTestId` and `queryByTestId` could return non-native elements in tests. This was in contrast with other query functions: `getAllByTestId`, `queryAllByTestId`, `findByTestId` and `findAllByTestId` which returned only elements that would be rendered to native components (e.g. `View`, `Text`, etc).