Mocking Javascript interaction with the DOM

[thatstatsguy]

Hi all - apologies in advance if this has been asked somewhere else

As per this discussion, I'm aware that BUnit doesn't run a JS Runtime.

Therefore if you've got a div in your razor component such as

<div id="someidhere"/>

and you've got a Javascript file in your solution which is called to modify the div with something like

document.getElementById("someidhere").innerHTML = "whatever";

you won't be able to use that Javascript file in your testing.

Question
Is there some way in which one can mock out that interaction with the div? In my head I imagine something like

JSInterop.SetupVoid("SomeMethodName", () => {//insert some code here to change the div });

then one could say "ignore JS runtime, we'll see how the component behaves with this injected HTML"

If something like that isn't possible, my assumption would be that testing this kind of behaviour should rather be done through End to end testing frameworks like Playwright?

Many thanks in advance for any and all suggestions!

[egil]

Hi @thatstatsguy, good question!

A few points:

1. If Blazor is the owner of a specific part of markup, e.g. it was rendered by Blazor, you probably don't want to change it directly via JavaScript, since that can cause problems for the Blazor renderer. If it is markup not from Blazor you are modifying, then it is obviously not a problem.
2. The strategy we recommend is that you verify that the call to your JavaScript has happened when you test the component that should perform that call. Treat it as a unit test where you are mocking a web service call.
3. Then decide if you need to test the JavaScript code. If it is complex, then you can do so in isolation via normal JavaScritp testing methods, or if you have complex interactions between Blazor code and JavaScript, it is beneficial to end-to-end test via something like Playwright.

For example, the Blazor team uses Selenium/Playwright because they have very complex interactions between their C# parts and JavaScript/TypeScript parts of the code.

In my case, the JavaScript I need to write is just small functions around browser APIs so I've yet to feel the need to do thorough testing of the JavaScript.

[thatstatsguy]

thanks so much for the detailed reply @egil - really appreciate it!