Mocking of "Sub"-Components

[dev-in-disguise]

Is it somehow possible when I write unit tests for component A which in its markup contains a component B to completely mock component B?

To give an example of my question I'll refer to my current blazor learning project which is a Blazor Server app where we try to build Minesweeper. In this example Component A is the Minefield component and Component B the Cell component.

A Simplified Minefield component with a single cell could look like this:

<table>
	<tr>
		var location = new Location(0, 0);
		<td>
			<Cell Location="location" />
		</td>
	</tr>
</table>

The Cell component in the current state of our development looks like this:

<button 
        @onclick="@OnClickAsync"
        @oncontextmenu="@OnRightClick"
	@oncontextmenu:preventDefault="true">
    @StatusText
</button>

While writing unit tests for the Minefield component I found the following problematic areas.

Markup tests
Currently when unit testing the markup of the Minefield component I have to include the complete markup of the Cell component as well. Sure in my example it's just adding a <button>Status</button> but still whenever I change something in the Cell components markup I not only have to update the unit tests of the Cell component but also the ones of the Minefield component. So my units aren't really separated from each other from a testing perspective.
What I rather would like to have is being able to define my expected markup the same way as I write it in my component. So my wished MarkupMatches call would look like this:

const string expectedMarkup = "<table><tr><td><Cell /></td></tr></table>";

componentUnderTest.MarkupMatches(expectedMarkup);

While writing this entry here I discovered the diffing possibilities with e.g. diff:ignore. This helps a bit since I can use this at the outermost element of the component but it's still not ideal.

Injected services
During the development process I added an injected service to the Cell component. I ran the unit tests and I received the following exception on not only the Cell component tests but also the Minefield component tests: System.InvalidOperationException : Cannot provide a value for property 'myProperty' on type 'myComponent'. There is no registered service of type 'myServiceType'.
Again I would expect that the tests of the Minefield component do not fail since the change was in another unit.

Are there already any solutions implemented for my situations that I just can't find?

[egil]

Hi @dev-in-disguise

Mocking of components is on the TODO list. It is unfortunately not something that is available right now, see #53 and #17.

You already discovered diff:ignore which is the best option right now.

As for services, while we wait for mocking of components, the easiest approach is to have a common setup methods for all your tests in a test class (when using xunit you can use the constructor) and just register a mock of the service your inner component needs.

Hope this helps!

[dev-in-disguise]

Hi @egil

Thanks for the reply. It surely helps a lot since I'm at least not left wondering if there is currently another possibility!

I surely would like to help with the issues but feel like I first need to learn a bit more about Blazor itself. So maybe I'll get back to you in a few weeks to support you in some way.

Still thanks very much for the very fast and detailed reply! That's much appreciated!