Testing components that uses the <InputFile> component

[egil]

Here is a quick guide for writing tests of components that uses the <InputFile> component.

The <FileUpload1> component, our component under test in this example, heavily inspired by the one listed in the asp.net core docs for the <InputFile> component, looks like this:

@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.Extensions.Logging
@inject IBrowserFileProcessor FileProcessor

<h3>Upload Files</h3>

<p>
    <label>
        Upload: <InputFile OnChange="@LoadFiles" multiple />
    </label>
</p>

@if (isLoading)
{
    <p>Uploading...</p>
}
else
{
    <ul>
        @foreach (var file in loadedFiles)
        {
            <li>
                <ul>
                    <li>Name: @file.Name</li>
                    <li>Last modified: @file.LastModified.ToString()</li>
                    <li>Size (bytes): @file.Size</li>
                    <li>Content type: @file.ContentType</li>
                </ul>
            </li>
        }
    </ul>
}

@code {
    private List<IBrowserFile> loadedFiles = new();
    private bool isLoading;

    private async Task LoadFiles(InputFileChangeEventArgs e)
    {
        isLoading = true;
        loadedFiles.Clear();

        foreach (var file in e.GetMultipleFiles())
        {
            loadedFiles.Add(file);
            await FileProcessor.ProcessAsync(file);
        }

        isLoading = false;
    }
}

This <FileUpload1> component doesn't process the uploaded files itself directly, since we do not want to write tests that e.g. upload files to Azure Blob Storage or save them to the file system. That is pretty likely to not be good test experience. Instead, the component is passed a IBrowserFileProcessor (listed below) that we can mock during testing and have a proper implementation of in production. As always, keep your concerns separated!

using System.Threading.Tasks;
using Microsoft.AspNetCore.Components.Forms;

namespace InputFileTestExamples
{
    public interface IBrowserFileProcessor
    {
        public Task ProcessAsync(IBrowserFile uploadedFile);
    }
}

Testing this component now looks like this:

using System;
using System.IO;
using System.Threading;
using System.Threading.Tasks;
using Bunit;
using FluentAssertions;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Logging.Abstractions;
using Microsoft.Extensions.Options;
using NSubstitute;
using Xunit;

namespace InputFileTestExamples
{
    public class FileUpload1Test : TestContext
    {
        public FileUpload1Test()
        {
            // FileInput component configuration
            Services.AddSingleton(Options.Create(new RemoteBrowserFileStreamOptions()));
            JSInterop.SetupVoid(invocation => invocation.Identifier == "Blazor._internal.InputFile.init")
                .SetVoidResult();
        }

        [Fact]
        public void Empty_List_On_Initial_Render()
        {
            Services.AddSingleton(Substitute.For<IBrowserFileProcessor>());

            var cut = RenderComponent<FileUpload1>();

            cut.FindAll("li").Should().BeEmpty();
        }

        [Fact]
        public async Task Calls_Processor_When_Files_Are_Uploaded()
        {
            // Arrange
            var mockFileProcessor = Substitute.For<IBrowserFileProcessor>();
            var filesToUpload = new InputFileChangeEventArgs(new[]
            {
                new TestFile{ Name = "Foo" },
                new TestFile{ Name = "Bar" },
                new TestFile{ Name = "Baz" },
            });

            // Render the component under test
            Services.AddSingleton(mockFileProcessor);
            var cut = RenderComponent<FileUpload1>();

            // Find the InputFile component in the render tree
            var inputComponent = cut.FindComponent<InputFile>().Instance;

            // Invoke the OnChange event callback to emulate the
            // user uploading one or more files
            await cut.InvokeAsync(() => inputComponent.OnChange.InvokeAsync(filesToUpload));

            // Assert file upload correctly handled
            cut.FindAll("ul > li > ul > li:first-child").Should().HaveCount(3);
            mockFileProcessor.Received(3).ProcessAsync(Arg.Any<IBrowserFile>());
        }

        record TestFile : IBrowserFile
        {
            public string Name { get; init; }
            public DateTimeOffset LastModified { get; init; }
            public long Size { get; init; }
            public string ContentType { get; init; } = string.Empty;

            public Stream OpenReadStream(long maxAllowedSize = 512000, CancellationToken cancellationToken = default)
            {
                throw new NotImplementedException();
            }
        }
    }
}

There are two tests. The first test just verifies that we are able to render the <InputFile> component. To do so, we have to provide a IOptions<RemoteBrowserFileStreamOptions> to it, as well as set up a simple JSInterop handler for its "init" call.

Then, in our individual tests, we pass a mock of the IBrowserFileProcessor services.

In the second test, we actually emulate a user uploading files through the <InputFile> component. This is done simply by calling the OnChange event callback that is passed to the component. That event callback is accessed by first finding the <InputFile> component in the render tree, and then invoking the event callback. This has to happen on the renderers thread, so we wrap the call in a cut.InvokeAsync call.

The .csproj used to build the files and run the tests looks like this:

<Project Sdk="Microsoft.NET.Sdk.Razor">

  <PropertyGroup>
    <TargetFramework>net6.0</TargetFramework>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="6.0.0-preview.4.*" />
    <PackageReference Include="bunit" Version="1.2.28-preview" />
    <PackageReference Include="FluentAssertions" Version="5.10.3" />
    <PackageReference Include="Microsoft.NET.Test.Sdk" Version="16.10.0" />
    <PackageReference Include="NSubstitute" Version="4.2.2" />
    <PackageReference Include="xunit" Version="2.4.1" />
    <PackageReference Include="xunit.runner.visualstudio" Version="2.4.3">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
    <PackageReference Include="coverlet.collector" Version="3.0.3">
      <IncludeAssets>runtime; build; native; contentfiles; analyzers; buildtransitive</IncludeAssets>
      <PrivateAssets>all</PrivateAssets>
    </PackageReference>
  </ItemGroup>

</Project>

NOTE, while this uses NET6, it should work the same with NET5.

Hope this helps.

Related: #318 and #317.

[harshvirani911]

can you please let me know What will be inside OpenReadStream?

[egil]

Nothing. It's just a test stub to enable testing.

[harshvirani911]

@egil , i got issue with this function as i have used invokeasync and inside the delegate it was triggering this function

[egil]

I'm sorry, I don't know what that means.

[marcoatribeiro]

Hi @egil !

I know this is an old thread, but may I suggest the documentation is updated to include this example?

[egil]

That's not a bad idea 😊