testing-library/testing-playground

Simple and complete DOM testing playground that encourage good testing practices.

Testing-Playground

Simple and complete DOM testing playground that encourage good testing practices.

online playground | next version

---

Playground for testing-library/dom

Testing-Library makes it easy to get started with testing. But even then, it can still be challenging to find the right queries or to understand why an element isn't being matched.

Testing-Playground provides you with direct feedback. Trying to visualize the direct impact of adding and removing specific (aria) attributes. All to give you some visual support while learning about the importance of aria roles, labels, and attributes.

Embedding

Testing-Playground can also be embedded. There is are two embed modes. Manual integration, and oembed.

Oembed

To get started with oembed, you'll simply need to copy / paste your direct playground links into a supporting platform.

Manual integration (demo)

Follow the following steps if you wish to have an interactive playground on your website.

Add the following snippet directly before your closing </body> tag:

<script async src="https://testing-playground.com/embed.js"></script>

Create a template element, in which you add to script tags. One for html and one for javascript. Make sure to type them correctly, as that's what our embedder uses to populate the different panes.

Note that the data-testing-playground attribute is required as well.

<template data-testing-playground>
  <script type="text/html"></script>

  <script type="text/javascript"></script>
</template>

Now, you can populate the html and javascript elements:

<template data-testing-playground>
  <script type="text/html">
    <button>one</button>
  </script>

  <script type="text/javascript">
    screen.getByRole('button');
  </script>
</template>

options

To configure your playground even further, add one or more of the following attributes to your opening <template> tag. Note, don't remove the data-testing-playground attribute!

attribute	type	default	description
data-panes	[markup | preview | query | result]	['markup', 'preview', 'query', 'result']	which panes to show, and in what order
data-height	number | string	300	height of the element
data-width	number | string	'100% '	width of the element
data-loading	eager | lazy	'lazy'	load the frame eager or lazy (see iframe specs)

dynamic updates

Playground can be updated using cross-window messaging after it has been loaded. After the playground is loaded, you can update it with following message: {type: 'UPDATE_DATA', markup: 'new markup', query: 'new query'} with both markup and query being optional.

To find out, if playground is ready, you can listen for a message {source: 'embedded-testing-playground', type: 'READY'} in window from which are you embedding the playground.

Example:

<template data-testing-playground data-class="messaging-iframe"></template>
<script type="text/javascript">
  function updatePlayground() {
    const iframe = document.querySelector('.messaging-iframe');
    iframe.contentWindow.postMessage(
      { type: 'UPDATE_DATA', markup: 'new markup', query: 'new query' },
      'https://testing-playground.com',
    );
  }

  window.addEventListener('message', ({ data }) => {
    if (
      data.source === 'embedded-testing-playground' &&
      data.type === 'READY'
    ) {
      updatePlayground();
    }
  });
</script>

Roadmap

Future ideas are maintained in roadmap.md. Please use the issue tracker to discuss any questions or suggestions you have.

Every section in the roadmap is accompanied by one or more issues. Contributions are most welcome!

Contributing

Please see contributing.md for more details. If you just want to run the playground on your own machine, go to your terminal and enter the following commands:

git clone [email protected]:testing-library/testing-playground.git
cd testing-playground
npm ci
npm run dev

Contributors

Thanks goes to these people (emoji key):

Stephan Meijer 🤔 💻 🚇 🚧	Marco Moretti 💻 ⚠️ 📖	Tim Deschryver 💻	Kent C. Dodds 🤔	Michaël De Boey 💻	Bianca Del Carretto 💻 📖	Gerrit Alex 💻 ⚠️
Dominik Guzy 💻	ConnorProgrammes 📖 💻	Jacob M-G Evans 💻 ⚠️	Sumeesh Nagisetty 👀	Flávio H Freitas 💻	Brandon Everett 💻	Michal Kočárek 💻 🤔
Alejandro Garcia Anglada 💻 📖 ⚠️	ddehart 💻 ⚠️	Balavishnu V J 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

testing-playground's Issues

ReadMe Contributing Section has wrong getting started commands

Bug Report 🐛

As far as I can tell this seems like a bug as there is no command for just npm ci

Suggested solution 🔦

I believe this is supposed to be npm run ci:test?

I am happy to fix this if this is what is intended to be in the readME 😃

add dev instructions to `readme.md`

We don't have any instructions on how to get the thing started at localhost, or how to contribute. This should be made crystal clear.

`a new version is available` notification keeps showing up

Bug Report 🐛

The 'refresh for update' indicator is a bit buggy

To Reproduce ✔️

1. No idea, maybe it's only the netlify preview build?

Expected behavior 🤔

The refresh indicator should only appear once, and be gone when I click "refresh".

Suggested solution 🔦

Your Environment 💻

• browser: Chrome
• os: Linux

Crashes on mousemove

In this REPL

Thanks for this tool!

usage instructions / help

Do we need some instructions on how to use the tool? I'm not sure about this yet, but if we do, it should be added to the playground itself. Not just a markdown on Github.

Move to testing library org?

Hi @smeijer,

This is amazing work! It's awesome. I'd like to invite you to officially join the testing library maintainers within the testing library GitHub org. This is totally up to you. If you'd prefer to keep it under your username that's fine. The benefit of moving it to the org is that it makes the project more official and contributions and collaborations are more plentiful.

Let me know, and I'll help it happen.

fix: use `getSuggestedQuery` from `@testing-library/dom`

#113 already implemented this partially. But I noticed that it isn't applied yet in the ResultSuggestions component (the blue buttons on the bottom left)

Application Crash On CodeMirror Clear

Issue description

Steps to reproduce the issue

1. Select All HTML in First Code Mirror Block
2. Clear (backspace)
3. White Screen with console errors (screenshot)

What's the expected result?

Clearing the codemirror completely allows me to add in HTML afterward. Cleared codemirror doesn't crash the application.

What's the actual result?

Application crashes, production fatal crash white screen, reload required to restore.

Additional details / screenshot

playground is showing query suggestions when there are none

I'm not sure what's nice about this one:

playground

And I'm not sure what's great about this one either:

playground

[seo] meta tags, especially open graph

^ that's how testing-playground is currently getting rendered on Discord (and thus presumably also Facebook, Whatsapp, Twitter, whatever).

Could add the newly chosen logo and the repo description Simple and complete DOM testing playground that encourage good testing practices. so most of that would be out of the way. Filing a PR later this day.

Set up GitHub Authentication

We need an option to Login with GitHub.

In case we need to specify permission, we need to have "read/write" access to GitHub gists (API).

---

note: This issue is part of a number of different issues, together they'll make sense

event log should be inversed

Summary 💡

The event log (added by #167) currently adds new events on the top. This is so they will be visible without scrolling.

It would be better if we could make the scrollbars stick to the bottom, and add new events to the bottom instead of the top.

Examples 🌈

Every single chat app.

Motivation 🔦

Reading from top to bottom is easier for the brain.

Optimize query suggestions for smaller screens

We need to improve the layout for the 11" MacBook air .

docs: update readme, mention iframely support

we're whitelisted on iframely!

Add explicit "save" option

The save action, should write the state to a github gist.

I just learned that this is how ASTExplorer does it, and it turns out that it works quite amazing.

For example, take the astexplorer instance:

https://astexplorer.net/#/gist/27a4fea62d9c957de06791e6302aa4d1/664d8a3d29d4db7d6ff7e407dc12ec8815ff75d3
       https://gist.github.com/27a4fea62d9c957de06791e6302aa4d1/664d8a3d29d4db7d6ff7e407dc12ec8815ff75d3

The files that we save can be a source.html with the html, an source.js with the query, and an playground.json for future usage.

If the user is authenticated, we will write the state to his own gists collection. If he is not, we will write it to an (bot) account of this project (I've created the user account: testing-playground-com for this purpose).

All gists will be private.

If a playground has an URL that starts with #/gist/, we will load the state from he gist, just as astexplorer does.

---

Partially Blocked by #151

support `testing-library/user-event`

I haven't worked out the details, but enabling users to play with user-events would awesome. Perhaps together with adding support for HTML mixed mode?

---

inspiration: https://twitter.com/kentcdodds/status/1270919381380284416?s=20

Testing Playground crashes when all content in `MarkDownEditor` is erased

Bug Report 🐛

To Reproduce ✔️

When erasing all content from the MarkUpEditor the whole page crashes. I have provided both a GIF and a stack trace below to further explain
GIF

Stack Trace

Expected behavior 🤔

I expect the editor to clear so I can begin writing my own HTML and testing those instead of the predefined ones you get when visiting the site.

Suggested solution 🔦

Open for discussion

Your Environment 💻

• browser: Chrome Version 81.0.4044.138
• os: Mac

Webmanifest icon links are invalid

Looks like during build, Parcel prefixes the urls in there with ../public/<img> (which isnt even valid in the first place as they are placed on the top level) but also does not attach the correct hashes.

invalid suggestion on hover

When hovering the flag images in this repl, the preview area suggests a getByRole query.

Yet, when we apply that query by clicking the flag, the suggestion pane renders an error:

use the official testing-lib getSuggestedQuery for query advise

Now that @testing-library/dom has adopted the query suggestions, and added it to its core, we can use the exported getSuggestedQuery method to ensure that we are on the same page as the official lib.

// getSuggestedQuery(...)
{
  queryName: 'Role',
  queryMethod: 'getByRole',
  queryArgs: ['button', { name: /submit/i }],
  variant: 'get',
  toString() // » getByRole('button', { name: /submit/i })
}

For this to work, we need to upgrade @testing-library/dom to 7.11.0 (or higher), to include the changes from testing-library/dom-testing-library#608

add filter options to event debugger

It should be possible to filter events in the event debugger (under /events, introduced by #167). This way the event log will be less noisy, so it would become easier to extract the data of interest.

To fix this, we can add "dropdown" menu's to the type and name columns, which will allow to enable/disable specific types.

By default, the following events should be filtered out:

mouseenter
mousemove
mouseover
mouseout
mouseleave

pointerover
pointermove
pointerenter
pointerleave
pointerout

add a issue and pr template

We should have some templates here.

Issues:

• should have a link to a playground in case there is a behavior bug
• a hint to check if the bug also exists on http://develop.testing-playground.com/

Pull requests:

• ?

The navbar should be made responsive

It doesn't look very nice at the moment:

Chrome Extension permissions needs to be fixed for approval

The chrome extension was rejected due to:

User Data Privacy

Use of Permissions
Request access to the narrowest permissions necessary to implement your Product’s features or services. If more than one permission could be used to implement a feature, you must request those with the least access to data or functionality.

Don't attempt to "future proof" your Product by requesting a permission that might benefit services or features that have not yet been implemented.

All help would be appreciated!

use emoji-key to add contributors to `README.md`

I have no idea how it works, but I know we need to use emoji-key to list contributors in the readme. I believe contributors deserve to be acknowledged.

Some questions about recommended queries

Seems like overkill to use regex for recommended queries. Is that really what we want to propagate as the recommended pattern?

So for example the playground recommends:

screen.getByRole('button', { name: /signup/i })

But why not this simpler option?

screen.getByRole('button', { name: 'signup' })

Additionally maybe it's just me but I think:

screen.getByLabelText('Username')

is written more from a "user perspective" than:

screen.getByRole('textbox', { name: /username/i })

We just have to be careful, because folks are going to take your recommendations as gospel.

sandbox markup

Just like #68, we need to create a sandbox for the markup.

Currently, it's possible to add a <meta http-equiv="refresh" content="1; URL=http://evil.corp"> to the HTML markup, and trigger a full page refresh.

This shouldn't be possible.

We should render the markup in an iframe with the proper restrictions. (See #68). It's quite easy to render the markup (with the srcdoc attribute). But we also need to inject the custom scrollbars, and tailwind styling. That's what will consume the most time of this ticket.

Add option to copy suggestion to clipboard

Mayble introduce a setting checkbox that when checked, enables copy-to-clipboard on the suggested query box?

feat: make interface responsive

I think we can make the interface responsive, for two purposes:

1. I can imagine that people share playground links, with the receiving party opening the playground on their phone. Not to edit, but just to check the results.

2. Having the playground side-by-side on a single monitor with other editing tools makes sense. The current layout is quite wide and limits the efficiency in "split screen" layouts.

Quick sketch:

Based on what I see in the tailwind docs, this shouldn't be hard.

Add roadmap, either roadmap.md or issues

Hi @smeijer

thanks for this project :). I want to contribute in some way. Can you create a list of issues with what you think to implement or where you want an hand?
I see that you haven't tested the application, maybe it could be a starting point.

Thanks :)

Regards
Marcp

add a way to add listener only to some nodes

Summary 💡

We should add event listeners to only some elements if a data attribute is used in markup

Examples 🌈

as suggested by Kent we can lister for a [data-listen-only] attribute. If some elements have this attribute we could attach event listener only on those elements.

Motivation 🔦

Because the user can be interested only on some elements

wrap it in a chrome extension!

I believe we can wrap this project into a chrome extension. That way people can use the thing on their own sites, without needing to copy / paste html fragments. How awesome would that be?!

---

Resources

• https://twitter.com/kentcdodds/status/1264253036626501632?s=19
• https://twitter.com/SferaDev/status/1264264904258748416?s=19

turn it into a progressive web app (PWA)

This would enable offline usage. As the playground already is a single-page app, it shouldn't be that difficult to add?

Autoformat pasted HTML

Bug Report 🐛

Pasting HTML into the top left window does not automatically format it. Reloading formats it however. Would be nice if this could be done instantly or on blur.

To Reproduce ✔️

Just paste any (valid) unformatted HTML into the top left window.

Expected behavior 🤔

Formatting is applied either instantly or on blur.

Suggested solution 🔦

Your Environment 💻

• browser: Chrome,
• os: Windows

add tests

A testing-playground.com without tests... I don't think that should be a thing, but at this moment it is.

We should fix that, and use jest & testing-library to do it.

choosing a logo / mascot

The current play icon isn't really awesome. I just needed something, and I needed it fast.

Let's change it. I have a few options that look interesting. Please feel free to comment if you have a strong opinion about one or another. Or just want to share your personal favorite.

'

Please add a license

Please provide a license for testing-playground.

Thanks!

add an menu with a few markup presets

This would enable users to play with different cases in an easy way.

Think of:

• a signup form
• a payment form
• a modal with a form embedded
• select boxes
• todo list

More?

---

Blocked by #152

import `testing-library/dom` from npm instead of unpkg

This comment needs to be fixed:

quoting for issue indexing:

This is not the way I want it to be, but I can't get '@testing-library/dom'
to build with Parcel. Something with "Incompatible receiver, Map required".
It works when running parcel in dev mode, but not in build mode. Seems to
have something to do with a core-js Map polyfill being used?
It's now loaded from unpkg.com via ./index.html

https://github.com/smeijer/testing-playground/blob/958a46b4be8520045908ac1d20de8236e45409f5/src/parser.js#L5-L16

naming things

I'm working on the embed mode, and realize that this is the time that we need to have proper names for the four areas that we have.

This is my current thought. When we talk about the area's or tabs, a js-tab and html-tab make sense. I was thinking about preview-tab and result-tab for the others.

I've also considered advise-tab, but as it's also showing errors, and just field information, that wouldn't be very accurate.

@marcosvega91, @timdeschryver, what do you think?

add a way to switch between `query` and `events` mode

Summary 💡

#167 added an /event route, yet there is no way to come there without knowing the route name. We should add a user accessible way to change mode.

Examples 🌈

Not sure how. Add a route to the nav bar? Add mode buttons to the bottom segment?

Motivation 🔦

Without it, users won't know that it exists.

Remove state from url

Once #151, #152 and #54 are completed, we might be able to remove the state from the url.

question: why the parse function returns also an id?

I'm looking at the code, in particular to the parse function.

let id = 0;

function parse({ htmlRoot, js }) {
  let result = {
    // increment the id every time we call parse, so we can use
    // it for react keys, when iterating over targets
    id: ++id,
  };

Is the id important to the parse function? I looked at the code but I didn't found the place where it is used.

Add packages

The project step by step will grow and could have in the next future more packages:

1. site with embed
2. chrome extension
3. devtools extension

We should think to add something similar to lerna to manage all of them

Sandbox code evaluation / prevent redirections

Trying to test the parser I see that in the editor you can write everything. There is not check on what you are writing. You can write for example alert('hello') or whatever.

I think that we need to parse the string before evaluate it, extracting method and check it is enabled to use.

make it embeddable

How awesome would it be if we had an embed-mode, so users can embed the playground in the blogs they write about testing / testing-library?

---

Resources:

• https://twitter.com/edouardr_/status/1264474482116354048?s=19

add "share" dialog / mode

The share dialog should allow us to construct the share URL. Let's start with an "embed" preview builder. We currently don't expose any interface to let the user toggle on/off various panes.

I also want to investigate if we can hookup firebase or a hosted Mongo. Preferably a database with a free level. So we can store sessions in a database, and provide a short URL instead of saving state in the URL as we currently do.

[DX] newly used classnames are not "hot reload" compatible

Bug Report 🐛

When running playground in dev mode (npm run start), newly added classnames are not automatically added to the bundle. A full restart of the node process is required. (ctrl + c -> npm run start) for the classname to be picked up.

To Reproduce ✔️

attempt 1

1. npm run start
2. add a class to an element that isn't used anywhere, ex: bg-pink-600
3. wait for the build to be refreshed (few ms)
4. browser doesn't update

attempt 2

5. try F5
6. browser still doesn't reflect changes

attempt 3

7. restart node ctrl + c -> npm run start
8. browser reflects changes

Expected behavior 🤔

The tailwind class name should be included as soon as it's added. A restart of parcel should not be required.

Suggested solution 🔦

Your Environment 💻

• browser: Chrome latest
• os: Ubuntu 19.10

Who uses `testing-playground.com`

Hi everyone!

If you or your company is using or talking about testing-playground, please let us know who you are. So we can mention you in the README and forthcoming website.

Instructions:

Media

• If it's a blog, video, post, website, awesome tweet, reddit, please share the link.

Projects

• Share your project/company name
• Share your logo (in which case it might be used in the readme / frontpage etc)
• If your project is open source or public, please share a link!

Blank screen

I was playing around in the playgroud and it seems that when I paste the following, the page goes blank. This might happen after a second, or while switching tabs.

  <form>
    <div>
      <label for="name">Name</label>
      <input
        type="text"
        id="name"
        name="name"
        formControlName="name"
        required
      />
    </div>

  </form>

In the console, I can see this error

react-dom.production.min.js:209 TypeError: t.querySelector is not a function
    at a (queryAdvise.js:15)
    at l (queryAdvise.js:43)
    at h (Preview.js:27)
    at ua (react-dom.production.min.js:153)
    at Xa (react-dom.production.min.js:175)
    at Ro (react-dom.production.min.js:263)
    at Lu (react-dom.production.min.js:246)
    at Ru (react-dom.production.min.js:246)
    at Cu (react-dom.production.min.js:239)
    at react-dom.production.min.js:123