feat: add tabs to switch between query and event mode

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

feat: add tabs to switch between query and event mode #296

Closed aganglada closed 3 years ago

aganglada commented 3 years ago

What:

This PR fixes #172 and merge the /events route with the playground, showing the two views together and making it possible for the user to switch between them.

Why:

Required from #172 in which we wanted a way to switch between views.

How:

Extracted TabButton to be used from Embed and the new view.
Created a new component called PlaygroundPanels
Moved the bottom part of DomEvents view into PlaygroundPanels
Moved the bottom part of Playground into PlaygroundPanels
Refactor functionality of DomEvents into a context, so we are able to get the correct ref for the Preview
Extracted DomEvent dom utilities into separate file.

Checklist:

[ ] Tests N/A
[x] Ready to be merged

smeijer commented 3 years ago

Hi @aganglada,

I want to let you know that I've noticed the PR. But it's quite large, so I need some time to properly review it.

I'll try to get to it somewhere this week.

Thanks for the PR. The screenshot looks great!

smeijer commented 3 years ago

@aganglada, although I did not yet review these changes, I do appreciate your recent contributions! Thanks again.

I've added you as a :frog: collaborator on the project. 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).

Thanks! And welcome to the team :tada:

aganglada commented 3 years ago

This is great!!!! 👏 So happy to be part of the team 😄 Thank you so much! 💪

aganglada commented 3 years ago

@smeijer have you had time to have a closer look to this?

smeijer commented 3 years ago

@marcosvega91, @delca85, I'm running really short on time this week. Does one of you have time to review this PR?

delca85 commented 3 years ago

If you are not in a great rush, I think I will be able to check this before the end of the week!

smeijer commented 3 years ago

Works for me. Thanks, @delca85!

smeijer commented 3 years ago

Awesome! Thanks, @delca85! As the few comments are only related to subtle style things, I'm going to merge this. If someone cares enough for code style, they're welcome to open a PR for that.

Thanks so much for this @aganglada! And sorry to have kept you waiting.

aganglada commented 3 years ago

Thank you @smeijer @delca85 you are awesome! ❤️