Revolutionizing UI Development in DotNet with Ui Mock

The need for speed, efficiency, and adaptability in UI development in .Net has never been greater, and I am thrilled to introduce you to my new (and very first) library, Dotnet UI Mock.

The above video provides a quick demonstration of the library's capabilities, particularly its proficiency in swiftly iterating between multiple mocked scenarios to validate the behavior of your .Net application's UI.

While working with single-page applications, I've frequently utilized libraries like WireMock and ngApiMock to mock my backend REST API endpoints. However, while developing your frontend in .Net, you might encounter multiple dependencies you'd want to mock, such as databases, REST APIs from different services, GRPC services, SOAP services, etc. Achieving a similar developer experience as with Single Page Applications often felt challenging.

Dotnet UI mock (github) is a solution to this challenge, extending this streamlined experience to .Net UI development.

You can find an example that demonstrates the use of this library in the GitHub repository. The results are displayed in the demo video above.

In the demo, I initiate the sample using the dotnet watch command:
dotnet watch --project=sample

The world of UI development in .Net is rapidly evolving, with an increasing demand for speed, efficiency, and adaptability. Recognizing these needs, I am excited to present my first-ever library, Dotnet UI Mock.

The above video provides a quick demonstration of the library's capabilities, particularly its proficiency in swiftly iterating between multiple mocked scenarios to validate the behavior of your .Net application's UI.

During my journey working with single-page applications, I've frequently utilized libraries like WireMock and ngApiMock to mock my backend REST API endpoints. However, while developing your frontend in .Net, you might encounter multiple dependencies you'd want to mock, such as databases, REST APIs from different services, GRPC services, SOAP services, etc. Achieving a similar developer experience as with Single Page Applications often felt challenging.

Dotnet UI Mock (github) is a solution to this challenge, extending this streamlined experience to .Net UI development.

You can find an example that demonstrates the use of this library in the GitHub repository. The results are displayed in the demo video above.

In the demo, I initiate the sample using the dotnet watch command:
dotnet watch --project=sample

This command automatically detects changes in the mock setting and refreshes the UI, which in this case, is built with Blazor.

Creating a list of mocks is quite simple with Dotnet UI Mock. In its initial implementation, I've chosen Nsubstitute as the preferred mocking library (currently, it's the only supported mocking library). This powerful tool is set to revolutionize the way you approach UI development in .Net.

public class WeatherServiceMock : BaseMockService<IWeatherService>
{
    public WeatherServiceMock()
    {
        MethodMocks =
        [
            new("GetForecastAsync",
            [
                new MockScenario("oneitem", GetForecastOneItem),
                new MockScenario("threeitems", GetForecastThreeItems),
                new MockScenario("exception", GetForecastAsyncException),
            ], 200),
            new("GetForecastAsync(string location)",
            [
                new MockScenario("withlocation", GetForecastWithLocation),
                new MockScenario("exception", GetForecastWithLocationException),
            ], 100),
        ];
    }

    private static void GetForecastOneItem(object service, int delay)
    {
        (service as IWeatherService)?.GetForecastAsync().Returns(async _ =>
        {
            await Task.Delay(delay);
            return new WeatherForecast[]
            {
                new() {Date = new DateOnly(2021, 1, 1), TemperatureC = 10, Summary = "Freezing"}
            };
        });
    }

    // removed other scenarios
}

To wrap up this post, let's highlight some key features of the Dotnet UI Mock library:

• Swift iteration between multiple mocked scenarios: This allows you to validate various scenarios without spending significant time on setup.
• Switching to the original implementation: If you need to compare the mock with the original or just revert to the actual functionality, Dotnet UI Mock makes this a breeze.
• Automatic UI refresh with dotnet watch: With this feature, you can see the impact of your changes immediately, enhancing productivity and reducing debugging time.
• Mocking application authentication: This feature, detailed in the sample, adds another layer of flexibility to your testing approach.

I am genuinely excited to hear your thoughts and feedback on this new library! Your insights can help make Dotnet UI Mock an even more potent tool for the .Net community. Feel free to share your experiences, suggestions, or questions. Let's collaborate and make .Net UI development more efficient and enjoyable!