feat: add logPlaygroundUrl in screen

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)