How to detect dispatched custom events

Grafana Plugin Development
, ,
1

I’m writing E2E tests upon a Grafana plugin using Playwright. The plugin renders a custom SVG web component (in house) embedded in the HTML markup; what I want to do is test whether changing a selected color (using Grafana’s own color chooser component) is reflected in the custom SVG’s render. This re-render is triggered by subscribing to a custom event named threholdsChanged that is dispatched upon changing the control’s selected value. As far as the render of the SVG, all SVG elements are removed, and new ones populated through the’s web component’s render function.

I wanted to catch the thresholdsChanged custom event, including some metadata about the change, that would be passed into a Playwright call invoking page.waitForEvent, but this doesn’t seem to catch the custom event. How can I do this? I also tried invoking a document.dispatchEvent, but waitForEvent doesn’t seem to catch events dispatched from it.

Note: Most of my code is in Typescript, so I had to write a function in a separate JS file to bypass type checks on the waitForEvent function’s event argument.

2

Hi @esanchez! Thanks for reaching out.

Typically when using Playwright, you want to test user-visible behaviour. You should not test implementation details such as waiting for certain events to be triggered.

With colors, this can be tricky of course. If possible, I suggest you render the color code in an html attribute, e.g aria-label="#37872D". Then you can assert that this attribute has the right color code after you have chosen a color in the color picker.

Hope this was helpful!