From b41805aae148baeb1374961d2e35801c4149c5cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Fontcuberta?= <afontcu@gmail.com>
Date: Mon, 3 Jun 2019 18:43:36 +0200
Subject: [PATCH] Allow debug() to accept a DOM parameter

---
 src/vue-testing-library.js                |  2 +-
 tests/__tests__/components/HelloWorld.vue |  5 ++++-
 tests/__tests__/debug.js                  | 24 ++++++++++++++++++++++-
 3 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/vue-testing-library.js b/src/vue-testing-library.js
index 078a091f..f986a1f4 100644
--- a/src/vue-testing-library.js
+++ b/src/vue-testing-library.js
@@ -64,7 +64,7 @@ function render (TestComponent, {
   return {
     container: wrapper.element.parentNode,
     baseElement: document.body,
-    debug: () => console.log(prettyDOM(wrapper.element)),
+    debug: (el = wrapper.element) => console.log(prettyDOM(el)),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),
diff --git a/tests/__tests__/components/HelloWorld.vue b/tests/__tests__/components/HelloWorld.vue
index 585f4951..be08b358 100644
--- a/tests/__tests__/components/HelloWorld.vue
+++ b/tests/__tests__/components/HelloWorld.vue
@@ -1,3 +1,6 @@
 <template>
-  <div>Hello World!</div>
+  <div>
+    <h1>Hello World!</h1>
+    <p>Lorem ipsum dolor sit amet</p>
+  </div>
 </template>
diff --git a/tests/__tests__/debug.js b/tests/__tests__/debug.js
index 2e9a8762..c3aa2229 100644
--- a/tests/__tests__/debug.js
+++ b/tests/__tests__/debug.js
@@ -10,11 +10,33 @@ afterEach(() => {
   console.log.mockRestore()
 })
 
-test('debug pretty prints the container', () => {
+test('debug pretty prints the container if no parameter is provided', () => {
   const { debug } = render(HelloWorld)
+
   debug()
+
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Hello World')
+  )
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Lorem ipsum dolor sit amet')
+  )
+})
+
+test('debug pretty prints the provided parameter', () => {
+  const { getByText, debug } = render(HelloWorld)
+
+  // debug accepts a DOM node as a parameter.
+  debug(getByText('Lorem ipsum dolor sit amet'))
+
   expect(console.log).toHaveBeenCalledTimes(1)
   expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Lorem ipsum dolor sit amet')
+  )
+
+  // Notice the 'not' particle
+  expect(console.log).not.toHaveBeenCalledWith(
     expect.stringContaining('Hello World')
   )
 })