feat(debug): Add maxLength and options to debug (#164)

Author: afontcu

src/__tests__/debug.js

@@ -57,3 +57,19 @@ test('debug pretty prints multiple nodes with the given parameter', () => {
     expect.stringContaining('Lorem ipsum dolor sit amet'),
   )
 })
+
+test('allows same arguments as prettyDOM', () => {
+  const {debug, container} = render(HelloWorld)
+
+  // debug accepts a maxLength and an options parameters:
+  // https://testing-library.com/docs/dom-testing-library/api-helpers#prettydom
+  debug(container, 6, {highlight: false})
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0]).toMatchInlineSnapshot(`
+    Array [
+      <div>
+      ...,
+    ]
+  `)
+})

src/vue-testing-library.js

@@ -3,7 +3,7 @@ import {createLocalVue, mount} from '@vue/test-utils'
 
 import {
   getQueriesForElement,
-  logDOM,
+  prettyDOM,
   waitFor,
   fireEvent as dtlFireEvent,
 } from '@testing-library/dom'
@@ -72,8 +72,10 @@ function render(
   return {
     container,
     baseElement,
-    debug: (el = baseElement) =>
-      Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
+    debug: (el = baseElement, maxLength, options) =>
+      Array.isArray(el)
+        ? el.forEach(e => console.log(prettyDOM(e, maxLength, options)))
+        : console.log(prettyDOM(el, maxLength, options)),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),