Isolate playground logic in playground-helper.ts

Author: mathiassoeholm

package.json

@@ -49,6 +49,7 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.11.6",
+    "@types/lz-string": "^1.3.34",
     "jest-in-case": "^1.0.2",
     "jest-serializer-ansi": "^1.0.3",
     "jest-watch-select-projects": "^2.0.0",

src/config.ts

@@ -1,3 +1,4 @@
+import {getPlaygroundUrl} from 'playground-helper'
 import {Config, ConfigFn} from '../types/config'
 import {prettyDOM} from './pretty-dom'
 
@@ -31,14 +32,17 @@ let config: InternalConfig = {
 
   // called when getBy* queries fail. (message, container) => Error
   getElementError(message, container) {
-    const playgroundMessage =
-      'Check out the Testing-Library playground to learn more on how to make the right query: https://testing-playground.com'
+    const playgroundUrl =
+      message &&
+      getConfig().printPlaygroundLink &&
+      getPlaygroundUrl(container, false)
 
     const error = new Error(
       [
         message,
         prettyDOM(container),
-        message && getConfig().printPlaygroundLink && playgroundMessage,
+        playgroundUrl &&
+          `Open this DOM in the Testing-Library Playground:\n${playgroundUrl}`,
       ]
         .filter(Boolean)
         .join('\n\n'),

src/playground-helper.ts

@@ -0,0 +1,31 @@
+import {compressToEncodedURIComponent} from 'lz-string'
+
+function unindent(value: string) {
+  // remove white spaces first, to save a few bytes.
+  // testing-playground will reformat on load any ways.
+  return value.replace(/[ \t]*[\n][ \t]*/g, '\n')
+}
+
+function encode(value: string) {
+  return compressToEncodedURIComponent(unindent(value))
+}
+
+function getPlaygroundUrl(element: Element | null, logErrors = true) {
+  if (!element || !('innerHTML' in element)) {
+    if (logErrors) {
+      console.log(`The element you're providing isn't a valid DOM element.`)
+    }
+    return null
+  }
+
+  if (!element.innerHTML) {
+    if (logErrors) {
+      console.log(`The provided element doesn't have any children.`)
+    }
+    return null
+  }
+
+  return `https://testing-playground.com/#markup=${encode(element.innerHTML)}`
+}
+
+export {getPlaygroundUrl}

src/screen.js

@@ -1,40 +1,19 @@
-import {compressToEncodedURIComponent} from 'lz-string'
+import {getPlaygroundUrl} from './playground-helper'
 import * as queries from './queries'
 import {getQueriesForElement} from './get-queries-for-element'
 import {logDOM} from './pretty-dom'
 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')
-}
-
-function encode(value) {
-  return compressToEncodedURIComponent(unindent(value))
-}
-
-function getPlaygroundUrl(markup) {
-  return `https://testing-playground.com/#markup=${encode(markup)}`
-}
-
 const debug = (element, maxLength, options) =>
   Array.isArray(element)
     ? element.forEach(el => logDOM(el, maxLength, options))
     : logDOM(element, maxLength, options)
 
 const logTestingPlaygroundURL = (element = getDocument().body) => {
-  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
+  const url = getPlaygroundUrl(element, console.log)
+  if (url) {
+    console.log(`Open this URL in your browser\n\n${url}`)
   }
-  console.log(
-    `Open this URL in your browser\n\n${getPlaygroundUrl(element.innerHTML)}`,
-  )
 }
 
 const initialValue = {debug, logTestingPlaygroundURL}