Javascript integration

[MichaelFack1]

Hi!
This might be a silly question, but is it possible / will it be possible to interact with javascript?

We are dependent on a 3rd party library and have some functionality we would like under unit test that duo the 3rd party requires javascript to be run.

[linkdotnet]

Hey @MichaelFack1

this is currently not possible. But you can emulate all the events with bUnit: https://bunit.dev/docs/test-doubles/emulating-ijsruntime.html

There are some ideas around making this work but nothing you could use right now.
Is there a particular setup you can not realise at the moment with the given means ?

[MichaelFack1]

Using Selenium we're already testing quite a bit but we have some components that, using this 3rd party library, has some desired behavior we wanted to unit test. We are naturally aware that once you start mixing our own code with 3rd party we're not really testing a unit anymore but running several expensive Selenium full-stack tests instead is undesired.

Thank you for your quick response!

[egil]

As @linkdotnet says, it's not possible and will probably not every be, since that would require us to run a full JavaScript/browser runtime as well, and in that case you might as well just use Playwright or Selenium.

We are dependent on a 3rd party library and have some functionality we would like under unit test that duo the 3rd party requires javascript to be run.

Is that 3rd party lib a JavaScript lib or a Blazor lib?

If it's the first, we recommend setting up the JSInterop in bUnir to emulate the responses from the JS lib. Some also wrote their own JS wrapper around 3rd party js libs, so they have a stable facade to call. That will make upgrades to the 3rd party lib more safe, and aligns with the rule of thumb to never mock things you dont own.

Hope this helps.

[MichaelFack1]

The lib is mainly JavaScript with some Blazor put on top, which has some undesirable consequences for testing, such as timing issues.

We already test a lot using Selenium, but those tests run a whole lot slower and there's some unit logic we would like to test. Suppose there's no way around that.

Thank you for the quick response!

[egil]

The lib is mainly JavaScript with some Blazor put on top, which has some undesirable consequences for testing, such as timing issues.

If you access it though the Blazor parts, then take a look at https://bunit.dev/docs/providing-input/substituting-components. If you have something that is unpredictable, then replacing the 3rd party components with a substitute during testing is probably a good idea.

Then have a few "integration tests" to verify the integration between your app and the 3rd party lib.

[Andras-Csanyi]

Just to make absolutely for myself let me summarise:

• if all the UI logic is written in Blazor/C# then we can test not only the render (if the rendered HTML is what we expect), but also majority, if not the full, logic represented by the component (e.g. user clicks here HTML changes this and that way)
• whenever JS comes into picture (you have to include a JS library to work with the given UI framework even though you generate the HTML with blazor) in a way it implements behavioral logic (like click handling, for example bootstrap's accordion where the click is caught by the JS part and it does generate the changed HTML) we are strongly limited in bUnit

Do I understand correctly the situation?

Whatever the answer is I'm grateful for bUnit, good stuff! ❤️

[egil]

Just to make absolutely for myself let me summarise:

• if all the UI logic is written in Blazor/C# then we can test not only the render (if the rendered HTML is what we expect), but also majority, if not the full, logic represented by the component (e.g. user clicks here HTML changes this and that way)
• whenever JS comes into picture (you have to include a JS library to work with the given UI framework even though you generate the HTML with blazor) in a way it implements behavioral logic (like click handling, for example bootstrap's accordion where the click is caught by the JS part and it does generate the changed HTML) we are strongly limited in bUnit

Do I understand correctly the situation?

Whatever the answer is I'm grateful for bUnit, good stuff! ❤️

Essentially yes. bUnit does not run in a browser, so there is no JS runtime to execute JavaScript. With bUnit you can verify the contract between your C# code and JavaScript by using bUnits JSInterop (a mock of the various IJSRuntime and family interfaces we use to call into JavaScript).

If you have some javascript you are the maintainer of, then you have to test that (if needed) via a JavaScript testing framework. If it's somebody else's JavaScript, I suggest you don't test it, that's hopefully done already by its developers.

[linkdotnet]

To amend @egil, the same applies to CSS. If you have CSS classes or styles, which would hide an HTML element, of course they are still in the markup itself. There is no browser applying CSS rules to your elements.

Also if you "click" on an <a href> element, there is no one navigating to the given link. You can assert such stuff.