feat: allow dynamic updates of query and markup from embedding window

[michal-kocarek]

What:

Added possibility to dynamically update markup and query of embedded playground (#274)

Why:

It will support use case where something might update the markup or query after playground has been already rendered.

How:

New hook is added into <Embedded> component, that listens for UPDATE_DATA message from parent window.
Also, a message is sent out from the playground to parent window after it has been rendered, so parent window
can know from which time it can pass updates to the playground.

Checklist:

• Tests
• Ready to be merged

[smeijer]

Thanks for the PR! I'll try to take a look at it later this week.

[smeijer]

Thanks! Looking great!

[michal-kocarek]

Thank you for quick cooperation 👍

[smeijer]

I'm curious to see what you're building with it. Will it be publicly available?

[michal-kocarek]

I am building a tool that will help see current state of the DOM rendered by testing library when debugging tests.

I wanted to see what is currently rendered, and ideally provide quick way to test selectors while writing/debugging tests, as we do this all time as part of our job. The Testing Library is super useful for that, and now I can embed the IFRAME, and when DOM changes, browser will receive new HTML and can tell the Playground to update itself with fresh data.

On screenshot is obviously old version, where I am just using the chrome tool, but I'd like to have it embedded directly.

It's nothing fancy yet, but maybe someone finds it useful... https://github.com/michal-kocarek/testing-library-spy I just need few more days to publish it.

[smeijer]

Looks interesting @michal-kocarek ! I'm watching the repo, and will definitely try it out.

[michal-kocarek]

Hi @smeijer, I've managed to publish the package to NPM. If you could find a time and try it out, I would really appreciate your feedback.

Please take a look at https://github.com/michal-kocarek/testing-library-spy readme for usage instructions.
So far I guess it works quite nicely:

Thank you in advance.

[smeijer]

That looks very, very nice @michal-kocarek! Do you think it makes sense merge that into testing-playground, and publish it as an official @testing-library lib?

/cc @kentcdodds

[kentcdodds]

🤯 that's awesome!

@michal-kocarek if you're interested, I'd be happy to invite you to the org on GitHub and npm and let you publish it as an official package. You'd still have total control over your package and it's completely up to you. Just want you to know that's an option. Either way, very cool project!

[michal-kocarek]

@smeijer, @kentcdodds - thanks for positive message. It would make much more benefits to incorporate this project into whole ecosystem, if you think the community would benefit from that.

What is your opinion on when would be the best time to move this project under the organization? Why I am asking... Right now, it is very immature & buggy. Are you willing to accept the project in such an early stage and then improve it alter and/or shall I do something with it first?

[smeijer]

Right now, it is very immature & buggy.

Testing-Playground itself joined also pretty early. The great thing about joining early, is that the community here can help you stabilize. That way, you don't need to do it all yourself. If that fits you best, is up to you.

It would make much more benefits to incorporate this project into whole ecosystem.

I see two ways in which we can incorporate the project.

1. Move the repo into the @testing-library org, and that's it. You'll benefit from it's community and maintainers.

2. Integrate a bit more, and merge it in this testing-playground repo. Right now, testing library spy depends on https://testing-playground.com/embed.js. If we merge it into this repo, we can make a truly stand-alone npm lib that doesn't depend on external servers.

The most important thing is that you feel comfortable with whatever you choose. Your project is awesome!

[marcosvega91]

I have looked at the project and is very cool and funny. I have a lot of colleagues having problem with "which query" to use and testing playground with your project will be very useful for all newcomers.

[kentcdodds]

I think the most productive direction forward is to move it into testing-playground.com personally. For the reasons @smeijer mentioned.

[michal-kocarek]

Testing-Playground itself joined also pretty early. The great thing about joining early, is that the community here can help you stabilize. That way, you don't need to do it all yourself. If that fits you best, is up to you.

In that case, I would be happy to move it as soon as possible 👍 And continue on work inside your org.

I see two ways in which we can incorporate the project.

If you want to put it into playground, it makes sense, as it could lower the amount of deployment & UI boilerplate. And also, there won't be external dependency. I am for it :)

[michal-kocarek]

Sooo... What is going to be next step? I can create a PR to testing-library (probably during weekend), to:

• incorporate the codebase
• and merge (= use existing) building infrastructure

I will also try to use the Testing Playground UI directly instead of mine.

[smeijer]

I've invited you as member to the @testing-library org. So welcome to the club!

Standard collaborator disclaimer below. Note that the links are for testing-playground, but the org uses the same docs for all repos. So you only need to read them once 😅

Your plan on "what's next" sounds fine. Feel free to open a PR early, if it's a lot of work. That way other contributors can follow along, give some assistance, and we can have a discussion there on how to approach things.

---

Disclaimer:

Please make sure that you review the MAINTAINING.md and CONTRIBUTING.md files (specifically the bit about the commit messages and the git hooks) and familiarize yourself with the code of conduct (we're using the contributor covenant).

You might also want to watch the repo to be notified when someone files an issue/PR. Please continue to make PRs as you feel the need (you can make your branches directly on the repo rather than your fork if you want).

[smeijer]

@all-contributors please add @michal-kocarek for code, ideas

[allcontributors]

@smeijer

I've put up a pull request to add @michal-kocarek! 🎉

[michal-kocarek]

So welcome to the club!

Thank you, guys 🎉

I will look on that during weekend, open the PR and then work on that so we can shape it up together. Am looking forward to get this into working shape :) Thanks for your support.

[smeijer]

Hi @michal-kocarek, I'm curious about the state of the merge. Can you provide us with an update?

[smeijer]

@michal-kocarek are you still interested in merging these repo's?