search

testing-library / testing-playground

Simple and complete DOM testing playground that encourage good testing practices.
https://testing-playground.com
MIT License
783 stars 62 forks source link

Allow changing the markup inside embedded IFRAME #274

Closed michal-kocarek closed 3 years ago

michal-kocarek commented 3 years ago

Summary 💡

Playground allows to be embedded inside an IFRAME in other page. However, once loaded, there is no simple way of changing the markup within the playground.

By looking at the code I thought might be not difficult to allow this by adding one more case into 'message' event handler, which would allow changing the content of the markup once the IFRAME has been loaded.

Examples 🌈

It would be great if I could call from parent page something like this:

document.querySelector('iframe.testing_playground_embed_iframe').contentWindow.postMessage({type: 'SET_MARKUP', markup: '<div>Updated content</div>'}, 'https://testing-playground.com')

and as a result, the markup of the embedded IFRAME would update...

Motivation 🔦

I have a use case, where there is live HTML example that is updated in parent page and shall be accessible inside that playground. I would like to update the HTML markup while preserving the queries that user has been already writing in.

smeijer commented 3 years ago

That sounds very interesting! This would allow us to build interactive playgrounds / tutorials.

Are you willing/able to take a look at it, and submit a PR? I would be happy to support this.

michal-kocarek commented 3 years ago

Sure, I will do PR for this. Thank you for quick reply.

michal-kocarek commented 3 years ago

Hi @smeijer, I've made some PR for this issue, and am looking forward for any feedback.

Have a great day.

smeijer commented 3 years ago

Closed by #275.