Query input/output non-functional

[ddehart]

Bug Report 🐛

To Reproduce ✔️

1. Visit https://testing-playground.com/
2. Change the getByRole query to any selector other than 'button'

Expected behavior 🤔

I expect QueryOutput to change based on my query

Your Environment 💻

• browser: Chrome
• os: Linux

[marcosvega91]

Hi @ddehart thanks for raising this :).

I can confirm the bug. Do you wanna work on a fix? With e2e now we can create a test case for the issue and then fix.
Thanks a lot :)

[smeijer]

For reference, it's 351c6ff that broke this (PR #296)

[delca85]

For reference, it's 351c6ff that broke this (PR #296)

Yes, I confirm that. In PlaygroundPanels the query value is update while the result value not. I assume that the reason behind that is no listener function is dispatched on a new query insertion (

testing-playground/src/hooks/usePlayground.js

Line 336 in fb43e61

const listener = ({ data: { source, type, result } }) => {

).

[delca85]

In my opinion, the error is somehow related to the usage of Suspense in PlaygroundPanels, removing that component the result is updated when a new query is inserted.

testing-playground/src/components/PlaygroundPanels.js

Line 46 in fb43e61

<Suspense fallback={null}>

Sorry for not having noticed that during the review.

[smeijer]

That's a great finding @delca85. Thanks! Can you submit a PR? Just remove the suspense logic.

[delca85]

I was wrong, this bug was not due by Suspense. I fixed it passing state and dispatch as props to PlaygroundPanels instead of making it retrieve them through usePlayground hook.