fix: handle non element cases

Author: balavishnuvj

src/__tests__/screen.js

@@ -32,6 +32,28 @@ test('logs Playground URL that are attached to document.body', () => {
   `)
 })
 
+test('logs messsage when element is empty', () => {
+  screen.logTestingPlaygroundURL(render('').container)
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(
+    `"The provided element doesn't have any children."`,
+  )
+})
+
+test('logs messsage when element is not a valid HTML', () => {
+  screen.logTestingPlaygroundURL(null)
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(
+    `"The element you're providing isn't a valid DOM element."`,
+  )
+  console.log.mockClear()
+  screen.logTestingPlaygroundURL({})
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(
+    `"The element you're providing isn't a valid DOM element."`,
+  )
+})
+
 test('logs Playground URL that are passed as element', () => {
   screen.logTestingPlaygroundURL(render(`<h1>Sign <em>up</em></h1>`).container)
   expect(console.log).toHaveBeenCalledTimes(1)

src/screen.js

@@ -7,15 +7,15 @@ import {getDocument} from './helpers'
 function unindent(string) {
   // remove white spaces first, to save a few bytes.
   // testing-playground will reformat on load any ways.
-  return (string || '').replace(/[ \t]*[\n][ \t]*/g, '\n')
+  return string.replace(/[ \t]*[\n][ \t]*/g, '\n')
 }
 
 function encode(value) {
   return compressToEncodedURIComponent(unindent(value))
 }
 
-function getPlaygroundUrl(element) {
-  return `https://testing-playground.com/#markup=${encode(element.innerHTML)}`
+function getPlaygroundUrl(markup) {
+  return `https://testing-playground.com/#markup=${encode(markup)}`
 }
 
 const debug = (element, maxLength, options) =>
@@ -24,7 +24,17 @@ const debug = (element, maxLength, options) =>
     : logDOM(element, maxLength, options)
 
 const logTestingPlaygroundURL = (element = getDocument().body) => {
-  console.log(`Open this URL in your browser\n\n${getPlaygroundUrl(element)}`)
+  if (!element || !('innerHTML' in element)) {
+    console.log(`The element you're providing isn't a valid DOM element.`)
+    return
+  }
+  if (!element.innerHTML) {
+    console.log(`The provided element doesn't have any children.`)
+    return
+  }
+  console.log(
+    `Open this URL in your browser\n\n${getPlaygroundUrl(element.innerHTML)}`,
+  )
 }
 
 const initialValue = {debug, logTestingPlaygroundURL}