support `testing-library/user-event`

[smeijer]

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

[delca85]

@smeijer what do you mean with

enabling users to play with user-event

? What would you like to enable users to do?

[smeijer]

I was thinking that a user should be able to write mixed HTML in the markup editor. Something like:

<label for="checkbox">Check</label>
<input id="checkbox" type="checkbox" />

<button onClick="javascript:document.querySelector('#checkbox').setAttribute('checked', true)">

 Accept
</button>

And that would result in a working demo in the HTML preview pane.

Then just like we can currently use screen.getBy... methods to test locating elements, we could have user-event to let the user click that button, and verify that it worked.

userEvent.click(screen.getByText(/accept/i))

I think we should then also add a 'refresh' button to the preview pane, to undo the changes that have been done by the query.

I'm also not sure how useful this is without having expect, but we can explore adding that later as well. So we can turn the query into something like:

userEvent.click(screen.getByText(/accept/i))
expect(screen.getByLabelText(/check/i)).toHaveAttribute('checked', true)

[delca85]

Hey!
I could give it a shot. I don't know if I will be able to accomplish the whole task by myself, if I'll face some blocking problem I will share it!

[delca85]

Hi @smeijer!
I am working on this feature and I have a major question: according to you, which is the right way to make the HTML preview panel responds to user-event fired events?
I hope I am explaining myself but I don't see a straight solution to make the code be updated after the event is fired so I don't know if you suppose to catch the event and manually change the element state or if there is something I am missing.
Thank you!

[smeijer]

Hi @delca85!

What do you have so far? Do you have the mixed html working in code mirror? Does that result in an interactive html preview?

For example, can the user create a button, wich displays an alert on click? I think this is step 1.

Once that's done, (which could be merged individually), we can figure out how to use events.

I think that applying the events isn't the complicated part. The thing we need to figure out is, how to maintain state or restore the html view.

One idea that I have, is to disable real time updates, when we detect a user-event call. And instead show an execute button (which can also be submitted by ctrl enter).

Or just refresh the html preview on every query change. And show a toggle button in the html preview. But I don't know how performant that is. I think this would be the preferred variant.

Does this answer your question?

[delca85]

I have added the html mixed mode with CodeMirror and set it as mode in MarkupEditor. I haven't worked yet with nested mode, while it should be used for html mixed as told in CodeMirror manual.
Anyway I am not sure I am deeply understanding the point, because this kind of code:

<label for="checkbox">Check</label>
<input
  id="checkbox"
  type="checkbox"
/>
<button
  onClick="javascript:alert('clicked')"
>
  Accept
</button>

is already working in current playground version. I am sure I am missing something!

I agree with your idea about showing an execute button (and make an execution by ctrl+enter), I am not sure about this but I suppose that as a user I would expect to have a button to make effective the event firing.

[smeijer]

I haven't worked yet with nested mode

I don't even know what it is 😅, do we need it? What does it do?

I am sure I am missing something!

My bad, that example works. This one doesn't. Should itwork? Can it work?

<label for="checkbox">Check</label>
<input
  id="checkbox"
  type="checkbox"
/>
<button id="btn">
  Accept
</button>

<script>
  const btn = document.getElementById('btn');
  btn.addEventListener('click', () => { alert('click'); });
</script>

[delca85]

:D
I suppose that it should work but I need to investigate more! I am going to do it today.

[delca85]

The code indentation and styling is working but I need to investigate a little more to make it working in Preview panel.

[smeijer]

We're setting the html with dangerouslySetInnerHTML, I think react doesn't evaluate the scripts.

Most easy solution that comes to mind, is to extract script elements from the HTML with a regex. Inject the HTML without those script elements. And eval those scripts after the HTML is injected.

[delca85]

I am reaching exactly the same idea.

[delca85]

I tried an initial implementation with eval and it's working! I am going to clean it a bit. When it will be ready I could push this initial code and start workin on user-event support like you told yesterday.

[smeijer]

That sounds great 👍 Thanks.