• Stars
    star
    776
  • Rank 58,561 (Top 2 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

Testing-Playground

test-tube

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

online playground | next version


All Contributors

Playground for testing-library/dom

screenshot of unimported results

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!

More Repositories

1

react-testing-library

🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
JavaScript
18,952
star
2

react-hooks-testing-library

🐏 Simple and complete React hooks testing utilities that encourage good testing practices.
TypeScript
5,083
star
3

jest-dom

πŸ¦‰ Custom jest matchers to test the state of the DOM
JavaScript
4,422
star
4

dom-testing-library

πŸ™ Simple and complete DOM testing utilities that encourage good testing practices.
JavaScript
3,271
star
5

user-event

πŸ• Simulate user events
TypeScript
2,181
star
6

cypress-testing-library

πŸ… Simple and complete custom Cypress commands and utilities that encourage good testing practices.
JavaScript
1,798
star
7

vue-testing-library

🦎 Simple and complete Vue.js testing utilities that encourage good testing practices.
JavaScript
1,071
star
8

eslint-plugin-testing-library

ESLint plugin to follow best practices and anticipate common mistakes when writing tests with Testing Library
TypeScript
979
star
9

angular-testing-library

πŸ¦” Simple and complete Angular testing utilities that encourage good testing practices
TypeScript
626
star
10

svelte-testing-library

🐿️ Simple and complete Svelte DOM testing utilities that encourage good testing practices
JavaScript
615
star
11

native-testing-library

🐳 Simple and complete React Native testing utilities that encourage good testing practices.
JavaScript
515
star
12

testing-library-docs

docs site for @testing-library/*
JavaScript
449
star
13

jest-native

πŸ¦… Custom jest matchers to test the state of React Native
TypeScript
436
star
14

eslint-plugin-jest-dom

eslint rules for use with jest-dom
JavaScript
360
star
15

pptr-testing-library

puppeteer + dom-testing-library = πŸ’–
TypeScript
283
star
16

playwright-testing-library

πŸ” Find elements in Playwright with queries from Testing Library
TypeScript
248
star
17

testing-library-recorder-extension

Testing Library Extension for Chrome DevTools Recorder
TypeScript
144
star
18

preact-testing-library

Simple and complete Preact DOM testing utilities that encourage good testing practices.
JavaScript
139
star
19

which-query

🦩 Which query should I use?
CSS
124
star
20

testcafe-testing-library

πŸ‚ Simple and complete custom Selectors for Testcafe that encourage good testing practices.
TypeScript
71
star
21

preact-hooks-testing-library

Simple and complete Preact hooks testing utilities that encourage good testing practices.
TypeScript
56
star
22

jasmine-dom

πŸ¦₯ Custom Jasmine matchers to test the state of the DOM
JavaScript
45
star
23

nightwatch-testing-library

πŸ¦‡Simple and complete custom queries for Nightwatch that encourage good testing practices.
JavaScript
31
star
24

dom-testing-library-template

Template repository for bug reports to @testing-library/dom, @testing-library/react, and @testing-library/jest-dom
JavaScript
17
star
25

webdriverio-testing-library

πŸ•·οΈ Simple and complete WebdriverIO DOM testing utilities that encourage good testing practices.
TypeScript
16
star
26

native-testing-library-docs

🐳 Docs site for native-testing-library
JavaScript
16
star
27

react-testing-library-help

Fork this repo to reproduce your issue
HTML
12
star
28

web-testing-library

πŸ™ Experimental Web testing utilities that encourage good testing practices.
JavaScript
3
star