feat(debug): allow debugging an array of containers

* Allow debug multiple elements

* Split tests using existing templates instead of creating a new one

* Add formater

Author: arnaublanche

src/__tests__/debug.js

@@ -39,3 +39,20 @@ test('debug pretty prints the provided parameter', () => {
     expect.stringContaining('Hello World'),
   )
 })
+
+test('debug pretty prints multiple nodes with the given parameter', () => {
+  const {getAllByText, debug} = render(HelloWorld)
+  const multipleElements = getAllByText(/.+/)
+
+  // debug also accepts an array of DOM nodes as a parameter.
+  debug(multipleElements)
+
+  expect(console.log).toHaveBeenCalledTimes(2)
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Hello World'),
+  )
+
+  expect(console.log).toHaveBeenCalledWith(
+    expect.stringContaining('Lorem ipsum dolor sit amet'),
+  )
+})

src/vue-testing-library.js

@@ -68,7 +68,8 @@ function render(
   return {
     container,
     baseElement,
-    debug: (el = baseElement) => logDOM(el),
+    debug: (el = baseElement) =>
+      Array.isArray(el) ? el.forEach(e => logDOM(e)) : logDOM(el),
     unmount: () => wrapper.destroy(),
     isUnmounted: () => wrapper.vm._isDestroyed,
     html: () => wrapper.html(),