bUnit + Syncfusion: More complete and advanced example of how to start

[IT-VBFK]

Hi

Great library, but I have some troubles to get started, TTDing blazor components (meaning one Page) which have multiple Syncfusion components which are interacting with each other. For example (in my specific case): a few SfTextBoxes with bound value + a SfBarcodeGenerator which takes over the bound values (here for width/height and the value)

Nothing I worry about when not having test at all... jus adding this components, wire up the value fields and done.

But trying to write test for it, I cannot get simple test like this one

[Fact]
public void Setting_the_width_and_height_works()

{

    var cut = RenderComponent<QrCode>();
 
    cut.Instance.QrCodeSize = "200";
 
    cut.Render();

    var qrCodeComponent = cut.FindComponent<SfBarcodeGenerator>().Instance;


    qrCodeComponent.Width.Should().Be("200");

    qrCodeComponent.Height.Should().Be("200");

}

to work. (Setup runs in the constructor of this test class).

I think I am doing something fundamentally wrong, since this will throw this exception:

bUnit's JSInterop has not been configured to handle the call:

    InvokeAsync<Object>("sfBlazor.Barcode.createMeasureElements")

Configure bUnit's JSInterop to handle the call with following:

    Setup<Object>("sfBlazor.Barcode.createMeasureElements")

The setup methods are available on an instance of the BunitJSInterop or
BunitJSModuleInterop type. The standard BunitJSInterop is available
through the TestContext.JSInterop property, and a BunitJSModuleInterop
instance is returned from calling SetupModule on a BunitJSInterop instance.

but adding this Setup to my test

[Fact]
public void Setting_the_width_and_height_works()

{

    JSInterop.Setup<object>("sfBlazor.Barcode.createMeasureElements");
    var cut = RenderComponent<QrCode>();
 
    cut.Instance.QrCodeSize = "200";
 
    cut.Render();

    var qrCodeComponent = cut.FindComponent<SfBarcodeGenerator>().Instance;


    qrCodeComponent.Width.Should().Be("200");

    qrCodeComponent.Height.Should().Be("200");

}

doesn't change anything.. Still this exception.

So, since Syncfusion is sponsor of this project, I would appreciate some more "full" examples to get how to start for such scenario.

Thanks in advance

[linkdotnet]

Hey,

I am just pointing out the obvious here, but did you try to read through the docs about bUnit on SyncFusions side? See: https://blazor.syncfusion.com/documentation/common/how-to/configure-blazor-component-in-bunit-testing

[IT-VBFK]

Yeah, sure :)

In my world the test code is correct, but obviously if my world have some oddities :D.

[linkdotnet]

Okay. Before we go into the code.

So, since Syncfusion is sponsor of this project, I would appreciate some more "full" examples to get how to start for such scenario.

My personal bit, which doesn't reflect @egil s POV: For me, that should be part of SFs job over on their site and documentation. If a sponsor comes or goes, shouldn't reflect on our documentation. We don't wanna bind our docs into a specific direction or 3rd party library, given how different they can be.

To your specific problem. It is hard to tell without the component under test. But here a few general guidelines. When working with 3rd party libraries in your own code, you can go either:

1. Fake out all the JS calls via the Loose Mode. https://bunit.dev/docs/test-doubles/emulating-ijsruntime.html#strict-vs-loose-mode
2. Or mock/fake out the 3rd party component and mimic the public API surface. See: https://bunit.dev/docs/providing-input/substituting-components.html?tabs=moq We even have a source code generator which does some work for you: https://bunit.dev/docs/extensions/bunit-generators.html

I go most of the times with option 2 because that is the most maintainable approach for me. Mileage may vary.

A few other things, you can condens:

var cut = RenderComponent<QrCode>();
 
cut.Instance.QrCodeSize = "200";
 
cut.Render();

to:

var cut = RenderComponent<QrCode>(ps => ps.Add(p => p.QrCodeSize, "200"));

While we expose the Instance that shouldn't be the first resort when trying to manipulate components. See: https://bunit.dev/docs/providing-input/passing-parameters-to-components.html?tabs=csharp

So if I would be you, I would try the Loose mode as SF seemingly relies heavily on JavaScript (for animations and whatnot) and if you feel comfortable you can try to "mock" the external components.

[IT-VBFK]

Or mock/fake out the 3rd party component and mimic the public API surface. See: https://bunit.dev/docs/providing-input/substituting-components.html?tabs=moq We even have a source code generator which does some work for you: https://bunit.dev/docs/extensions/bunit-generators.html

I tried that according to the documentation, but cannot get the source generator to work (generating nothing).

My test project uses the ...Sdk.Razor sdk, but in the docs .Sdk is mentioned. Does this matter?

var cut = RenderComponent<QrCode>(ps => ps.Add(p => p.QrCodeSize, "200"));

While we expose the Instance that shouldn't be the first resort when trying to manipulate components.

This property isn't a parameter, just "some state" in the component.

[linkdotnet]

The source generators will not work in razor files. That is known limitation (which we might want to document) as a source generator can not operate on the output of another generator.
And razor files are transformed to regular C# files be a source code generator.

This property isn't a parameter, just "some state" in the component.

This is a fair way of doing it then.

[egil]

So, since Syncfusion is sponsor of this project, I would appreciate some more "full" examples to get how to start for such scenario.

Yeah, NO, that's NOT how things work.

I do not know why Syncfusion sponsors us, perhaps because they use bUnit internally to test their components, but I can promise you they did not ask us to support their customers nor author articles about their components when they decided to sponsor bUnit. And if they had, I would have politely said "no thanks".

In other words, your Syncfusion license does not grant you any special treatment here. I'd suggestion you go through Syncfusions support channels if you need more help than what @linkdotnet has already graciously provided.

Also, do recommend educating yourself on the cost of open source, a useful source is https://opensourcemaintenancefee.org, so perhaps you do not trigger another OSS developers with comments like that above another time.

[IT-VBFK]

Hi

This wasn't meant to be offending in any way, but when reading it again I realized this was rude. Apologies for that 🙏