feat: add a debug method to screen. (#429)

jkdowdle · web-flow · commit 3805b2772f93 · 2020-01-28T15:39:31.000-07:00
* Add a debug method to screen.

* Make suggested edits.
diff --git a/src/__tests__/screen.js b/src/__tests__/screen.js
@@ -1,9 +1,65 @@
 import {renderIntoDocument} from './helpers/test-utils'
 import {screen} from '..'
 
+beforeEach(() => {
+  jest.spyOn(console, 'log').mockImplementation(() => {})
+})
+
+afterEach(() => {
+  console.log.mockRestore()
+})
+
 test('exposes queries that are attached to document.body', async () => {
   renderIntoDocument(`<div>hello world</div>`)
   screen.getByText(/hello world/i)
   await screen.findByText(/hello world/i)
   expect(screen.queryByText(/hello world/i)).not.toBeNull()
 })
+
+test('exposes debug method', () => {
+  renderIntoDocument(
+    `<button>test</button><span>multi-test</span><div>multi-test</div>`,
+  )
+  // log document
+  screen.debug()
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "<body>
+      <button>
+        test
+      </button>
+      <span>
+        multi-test
+      </span>
+      <div>
+        multi-test
+      </div>
+    </body>"
+  `)
+  console.log.mockClear()
+  // log single element
+  screen.debug(screen.getByText('test', {selector: 'button'}))
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "<button>
+      test
+    </button>"
+  `)
+  console.log.mockClear()
+  // log multiple elements
+  screen.debug(screen.getAllByText('multi-test'))
+  expect(console.log).toHaveBeenCalledTimes(2)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "<span>
+      multi-test
+    </span>"
+  `)
+  expect(console.log.mock.calls[1][0]).toMatchInlineSnapshot(`
+    "<div>
+      multi-test
+    </div>"
+  `)
+  console.log.mockClear()
+})
+
+/* eslint no-console:0 */
diff --git a/src/get-queries-for-element.js b/src/get-queries-for-element.js
@@ -7,14 +7,19 @@ import * as defaultQueries from './queries'
 /**
  * @param {HTMLElement} element container
  * @param {FuncMap} queries object of functions
+ * @param {Object} initialValue for reducer
  * @returns {FuncMap} returns object of functions bound to container
  */
-function getQueriesForElement(element, queries = defaultQueries) {
+function getQueriesForElement(
+  element,
+  queries = defaultQueries,
+  initialValue = {},
+) {
   return Object.keys(queries).reduce((helpers, key) => {
     const fn = queries[key]
     helpers[key] = fn.bind(null, element)
     return helpers
-  }, {})
+  }, initialValue)
 }
 
 export {getQueriesForElement}
diff --git a/src/screen.js b/src/screen.js
@@ -1,14 +1,23 @@
 import * as queries from './queries'
 import {getQueriesForElement} from './get-queries-for-element'
+import {logDOM} from './pretty-dom'
+
+const debug = (element, maxLength, options) =>
+  Array.isArray(element)
+    ? element.forEach(el => logDOM(el, maxLength, options))
+    : logDOM(element, maxLength, options)
 
 export const screen =
   typeof document !== 'undefined' && document.body
-    ? getQueriesForElement(document.body)
-    : Object.keys(queries).reduce((helpers, key) => {
-        helpers[key] = () => {
-          throw new TypeError(
-            'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
-          )
-        }
-        return helpers
-      }, {})
+    ? getQueriesForElement(document.body, queries, {debug})
+    : Object.keys(queries).reduce(
+        (helpers, key) => {
+          helpers[key] = () => {
+            throw new TypeError(
+              'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
+            )
+          }
+          return helpers
+        },
+        {debug},
+      )
