How to test components based on different device?

[fingers10]

I'm having a component which renders differently on mobile device and desktop devices. I would like to test this behavior.

Here is my component code:

<nav class="[ sticky bottom-0 h-14 md:fixed md:top-14 md:left-0 md:h-full md:w-16 ] 
            [ bg-white ] [ dark:bg-gray-800 dark:bg-gray-800/80 ] [ backdrop-blur-sm bg-white/30 ] [ md:pt-2 ]
            [ flex justify-around items-center md:flex-col md:justify-start md:space-y-4 ]">
</nav>

I'm using tailwindcss and so the output will appear at different place visually on small devices and medium devices.

Please can you assist on how to assert this behaviour?

Do I need to have a Property to toggle css classes instead of using md prefix?

Something like below?
SmallDevice ? "bottom-0" : "top-14 left-0 "

[linkdotnet]

Hey @fingers10 hope you are doing fine and thanks for reaching out.

I would advise against testing that behaviour in the first place and there are two reasons for it.

1. bUnit is "just" a unit testing framework for Blazor. There is no real browser involved. That said no one would apply your css styles. Therefore you don't have a screen size, window object or what not.
2. More important: It is not your concern even if you could test it. You would test tailwindcss (3rd party library) with that and not your code. For 3rd party code you can simply "assume* that it works. We can take another example, let's imagine you have an <a href element. In a test you would not check that the user lands on the given href address because then you would check browser/router behaviour. SImply checking the content of the href is enough.

That leaves you with one option: Asserting if a specific css class is given for your element. You can do this without any problem with bUnit, but still I would argue that testing styling is something you don't necessarily want.

[fingers10]

@linkdotnet many thanks for the inputs

[linkdotnet]

@fingers10 Something like Playwright is more what you would use for your requirements.
Still in my opinion I wouldn't do that, but I am also no expert in that matter ;) so take that with a grain of salt.

[egil]

Just to add to what @linkdotnet already said. bUnit allows you to verify the markup being presented to the browser, it does not actually convert that markup into graphics and text like the browser does.