feat: add logPlaygroundUrl in screen

Author: Balavishnu V J

package.json

@@ -42,9 +42,10 @@
     "@babel/runtime": "^7.10.3",
     "@types/aria-query": "^4.2.0",
     "aria-query": "^4.2.2",
+    "chalk": "^4.1.0",
     "dom-accessibility-api": "^0.5.1",
-    "pretty-format": "^26.4.2",
-    "chalk": "^4.1.0"
+    "lz-string": "^1.4.4",
+    "pretty-format": "^26.4.2"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.10.1",
@@ -78,4 +79,4 @@
     "url": "https://github.com/testing-library/dom-testing-library/issues"
   },
   "homepage": "https://github.com/testing-library/dom-testing-library#readme"
-}
+}

src/__tests__/screen.js

@@ -1,5 +1,5 @@
 import {screen} from '..'
-import {renderIntoDocument} from './helpers/test-utils'
+import {render, renderIntoDocument} from './helpers/test-utils'
 
 // Since screen.debug internally calls getUserCodeFrame, we mock it so it doesn't affect these tests
 jest.mock('../get-user-code-frame', () => ({
@@ -21,6 +21,27 @@ test('exposes queries that are attached to document.body', async () => {
   expect(screen.queryByText(/hello world/i)).not.toBeNull()
 })
 
+test('logs Playground URL that are attached to document.body', () => {
+  renderIntoDocument(`<div>hello world</div>`)
+  screen.logTestingPlaygroundURL()
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "Open this URL in your browser
+
+    https://testing-playground.com/#markup=DwEwlgbgfAFgpgGwQewAQHdkCcEmAenGiA"
+  `)
+})
+
+test('logs Playground URL that are passed as element', () => {
+  screen.logTestingPlaygroundURL(render(`<h1>Sign <em>up</em></h1>`).container)
+  expect(console.log).toHaveBeenCalledTimes(1)
+  expect(console.log.mock.calls[0][0]).toMatchInlineSnapshot(`
+    "Open this URL in your browser
+
+    https://testing-playground.com/#markup=DwCwjAfAyglg5gOwATAKYFsIFcAOwD0GEB4EQA"
+  `)
+})
+
 test('exposes debug method', () => {
   renderIntoDocument(
     `<button>test</button><span>multi-test</span><div>multi-test</div>`,

src/screen.js

@@ -1,23 +1,41 @@
+import {compressToEncodedURIComponent} from 'lz-string'
 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(element) {
+  return `https://testing-playground.com/#markup=${encode(element.innerHTML)}`
+}
 
 const debug = (element, maxLength, options) =>
   Array.isArray(element)
     ? element.forEach(el => logDOM(el, maxLength, options))
     : logDOM(element, maxLength, options)
 
+const logTestingPlaygroundURL = (element = getDocument().body) => {
+  console.log(`Open this URL in your browser\n\n${getPlaygroundUrl(element)}`)
+}
+
+const initialValue = {debug, logTestingPlaygroundURL}
 export const screen =
   typeof document !== 'undefined' && document.body
-    ? getQueriesForElement(document.body, queries, {debug})
-    : Object.keys(queries).reduce(
-        (helpers, key) => {
-          helpers[key] = () => {
-            throw new TypeError(
-              'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
-            )
-          }
-          return helpers
-        },
-        {debug},
-      )
+    ? getQueriesForElement(document.body, queries, initialValue)
+    : Object.keys(queries).reduce((helpers, key) => {
+        helpers[key] = () => {
+          throw new TypeError(
+            'For queries bound to document.body a global document has to be available... Learn more: https://testing-library.com/s/screen-global-error',
+          )
+        }
+        return helpers
+      }, initialValue)