Testing Blazor component's css styles

[OClarkMT]

Hey all,

For my project we currently do E2E testing for our Blazor UI components but we're trying to move to adding some Unit Testing with bUnit. So far, it's been good but there's one part that is stomping me, the CSS styling.

Currently we get our CSS stylings from external style sheets which we can verify using our current E2E testing so it is really important that we can also verify this with bUnit. However, when I isolate an IElement and run ComputeCurrentStyle() on it, I do not see the styles I am expecting.

I understand that bUnit is all about solely verifying the Blazor component, but is there any way I could expand it so it is able to see the styles that would apply to it in our application? Like injecting the style sheets in the same manner I can inject things in the BUnitTestContext? I haven't been able to find any resources or prior posts asking about this so figured I would ask directly.

Thanks in advance.

[egil]

Hey, welcome to the bUnit community.

The short answer is that bUnit does not load your style sheets, so the DOM nodes (provided by the anglesharp library) will not have any knowledge about them.

You could probably look at anglesharp api and load the css files and then be able use ComputeCurrentStyle(), etc., the mainrainer of anglesharp @FlorianRappl will know this.

My suggestion would however be to not focus on css files with bUnit tests. It will not give you a visual verification anyway, so there is little value there. If I wanted to protect against regression in the visuals of components, I would do snapshot testing of my css files, or even better, use playwright to render the components on screen and the use snapshot testing to capture the expected visuals. Verify by @SimonCropp is a great library for doing just that.

[OClarkMT]

Thank you @egil, your explanation is what I was expecting regarding Bunit's relation with CSS but it's great to have official confirmation. I had noticed ComputeCurrentStyle() was for an Anglesharp component so hopefully it will be possible to create Unit Tests use a combination of Bunit for the Blazor component and its contents and something with Anglesharp to confirm our styling requirements are met.

What would be the best way to contact @FlorianRappl to inquire about this?

[egil]

bUnit uses AngleSharp to represent the DOM nodes. we essentially just use AngleSharps parser with a few modifications and parse the raw markup in cut.Markup.

Florian usually responds to questions over in AngleSharps repository/discussion forum. What you can probably do first though is to just create your own AngleSharp parser that takes the raw cut.Markup and attach a CSS file to that as well, and see how things behave. Then see what works and doesn't and then you may have a question or two to ask.