How to add ProtectedSessionStorage to Tests?

[newbiE247]

In my blazor component i use [Inject] public ProtectedSessionStorage SessionStorage { get; set; }. When testting with bunit it doesn't find implementation of ProtectedSessionStorage and IDataProtectionProvider, since IDataProtectionProvider is injected within ProtectedSessionStorage via contructor.

Typically i would implement services like it's shown here: https://bunit.dev/docs/providing-input/inject-services-into-components.html

But i have no clue how to implement ProtectedSessionStorage.

[Christian-Oleson]

Hey @newbiE247 ,

The link you provided does not take me anywhere. When implementing ProtectedSessionStorage, I would hide the storage behind an interface and then mock the dependency.

[newbiE247]

It is really weird and i don't know what i did wrong here. You can read the url and copy paste it even.

[egil]

hi @newbiE247, moved this to QA instead of an issue.

Anyway, the ProtectedSessionStorage is unfortunately pretty hard to fake or mock in tests without encapsulating it like @Christian-Oleson suggests. Here is some entirely untested code that you can consider using to see if it works for you.

First we create an abstraction that has the same API surface as ProtectedSessionStorage. Lets call it IBrowserStorage. That is what your component should have injected into it instead of ProtectedSessionStorage. E.g. update your components to have this:

[Inject] public IBrowserStorage SessionStorage { get; set; }

Here is the IBrowserStorage file:

public interface IBrowserStorage
{        
    ValueTask SetAsync(string key, object value);
    ValueTask SetAsync(string purpose, string key, object value);
    ValueTask<StorageResult<TValue>> GetAsync<TValue>(string key);
    ValueTask<StorageResult<TValue>> GetAsync<TValue>(string purpose, string key);
    ValueTask DeleteAsync(string key);
}

Since ProtectedBrowserStorageResult has an internal constructor, we cannot use that in our code, so we create our own version, lets call that StorageResult and it to our solution:

public readonly struct StorageResult<TValue>
{
    /// <summary>
    /// Gets whether the operation succeeded.
    /// </summary>
    public bool Success { get; }

    /// <summary>
    /// Gets the result value of the operation.
    /// </summary>
    public TValue? Value { get; }

    public StorageResult(bool success, TValue? value)
    {
        Success = success;
        Value = value;
    }

    public StorageResult(in ProtectedBrowserStorageResult<TValue> result)
    {
        Success = result.Success;
        Value = result.Value;
    }
}

Now we need to create two implementations, one for production use, and a fake implementation for testing purposes.

Here is the one for production use, lets name it BrowserStorage. It takes an ProtectedBrowserStorage as input, and just forwards calls to it:

public class BrowserStorage : IBrowserStorage
{
    private readonly ProtectedBrowserStorage browserStorage;
    public BrowserStorage(ProtectedBrowserStorage browserStorage) => this.browserStorage = browserStorage;
    public ValueTask DeleteAsync(string key) => browserStorage.DeleteAsync(key);
    public async ValueTask<StorageResult<TValue>> GetAsync<TValue>(string key) 
        => new StorageResult<TValue>(await browserStorage.GetAsync<TValue>(key));
    public async ValueTask<StorageResult<TValue>> GetAsync<TValue>(string purpose, string key) 
        => new StorageResult<TValue>(await browserStorage.GetAsync<TValue>(purpose, key));
    public ValueTask SetAsync(string key, object value) => browserStorage.SetAsync(key, value);
    public ValueTask SetAsync(string purpose, string key, object value) => browserStorage.SetAsync(purpose, key, value);
}

To use this in your Blazor app, update your Startup.cs file and add the following code in the right place:

builder.Services.AddScoped<IBrowserStorage>(s => new BrowserStorage(s.GetRequiredService<ProtectedSessionStorage>()));

Now, we just need the fake version, lets call it FakeBrowserStorage. Add that to your test project:

public class FakeBrowserStorage : IBrowserStorage
{
    private Dictionary<(string Key, string Purpose), object> storage = new();

    public ValueTask DeleteAsync(string key)
    {
        storage.Remove((key, string.Empty));
        return ValueTask.CompletedTask;
    }

    public ValueTask<StorageResult<TValue>> GetAsync<TValue>(string key) 
        => GetAsync<TValue>(string.Empty, key);

    public ValueTask<StorageResult<TValue>> GetAsync<TValue>(string purpose, string key)
    {
        var found = storage.TryGetValue((key, purpose), out var objValue);

        return found 
            ? ValueTask.FromResult(new StorageResult<TValue>(found, (TValue)objValue))
            : ValueTask.FromResult(new StorageResult<TValue>(found, default(TValue)));
    }

    public ValueTask SetAsync(string key, object value)
        => SetAsync(string.Empty, key, value);

    public ValueTask SetAsync(string purpose, string key, object value)
    {
        storage.Add((key, purpose), value);
        return ValueTask.CompletedTask;
    }
}

To use that in your tests, register it with bUnits services container before rendering a component that uses it:

using var ctx = new TestContext();
var fakeStorage= new FakeBrowserStorage();
ctx.Services.AddSingleton<IBrowserStorage>(fakeStorage);

var cut = RenderComponent....

NOTE NOTE: This code above compiles but is not tested. Give it a spin and let me know if it works.

[newbiE247]

Thank you very much for the quick response and the very detailed suggestion. Now i feel very stupid and sorry that my initial post wasn't detailed enough.

The reason why i can't use an interface is that my component is in a razer library. So i don't have a startup.cs to define a service for that interface. For the same reason i also can't inject ProtectedBrowserStorage in the constructor, since ProtectedBrowserStorage injects JSRuntime (which is provided by bunit) and IDataProtectionProvider in its constructor. Bunit would not find an implementation for IDataProtectionProvider when i tried to inject ProtectedBrowserStorage.

I'm new to C# and Blazor so please pardon me, if i misunderstood your concept. Did i miss something here?

[egil]

So you do not own the component that uses ProtectedSessionStorage and thus cannot change it to use IBrowserStorage instead?

[egil]

Another option is to use BlazoredStorage which does come with builtin support for bUnit, and is not in preview like the package from Microsoft, which honestly seems abandoned.

[newbiE247]

I know BlazoredStorage but like to use the official package since i don't feel comfortable relying on third party ones. But i think i will give it a go if i can't manage to mock ProtectedBrowserStorage.

[egil]

Considering the fact that Microsoft.AspNetCore.Components.ProtectedBrowserStorage hasnt been updated in over a year, is still in preview, and has less than 10k downloads, makes me think that you should not use it. Blazored.LocalStorage is getting close to 1mill downloads and is being actively developed, so I would absolutely use that over the "official" from MS (which was likely a summer project by an intern that has since left, and is thus now dead).

[newbiE247]

I see BlazoredStorage use this:
var localStorage = this.AddBlazoredLocalStorage();

I tried something like Services.AddDataProtection(); but it seem to have no effect on ProtectedBrowserStorage. Does anyone know if there is already an implementation like this?

Here some codesample:

 public class DataGridTests: TestContext
    {
        private readonly DokumentRepository dokumentRepository = new();

        public DataGridTests()
        {
            JSInterop.Mode = JSRuntimeMode.Loose;
            Services.AddDataProtection();            
        }       

        [Fact(DisplayName = "expected to find correct item count after adding items to context")]
        public void ExpectToFindCorrectItemCount()
        {
            // Arrange
            var initialItemCount = 5;
            var additionalItemCount = 3;
            var expectedFinalItemCount = initialItemCount + additionalItemCount;
            var context = dokumentRepository.GetSearchResults(initialItemCount);

            // Act
            var cut = RenderComponent<DataGrid<Dokument>>(parameters => parameters
                .Add(p => p.Context, context)
            );

            var newItems = dokumentRepository.GetSearchResults(additionalItemCount);
            context.AddRange(newItems);
            cut.Render();

            var items = cut.FindComponents<DataGridItem<Dokument>>();

            // Assert
            Assert.Equal(expectedFinalItemCount, items.Count);

        }
}        

[newbiE247]

I am using Blazor Server and I'm still trying not to use BlazoredStorage. Everything works fine, i just can't use bunit to test the component. Since ProtectedBrowserStorage injects IDataProtectionProvider in its constructor and neither a razer library nor a testproject has a startup.cs to register service for interfaces.

I own the library. But a razer library structure doesn't have a startup.cs, where i can register a service for an interface. So if i would use an interface in a component, it would not work in the library. That's why i have to use ProtectedBrowserStorage directly instead of an interface.

BlazoredStorage mocks with var localStorage = this.AddBlazoredLocalStorage(); - how can i mock my service like that? is this some kind of middleware?

[egil]

You do not register the components with a service container in your component library, you do so in the runtime blazor project. In a test project. you can do it on the TestContext's Services collection.

You can absolutely do what I suggested above. Create the interfaces and implementations in your blazor component library, and then register in the blazor server app.

For testing, you register as I show in the example above.

Another ressource you might find useful is to go through the Blazing Pizza Workshop. My version of it here also has tests, and videos that you can use to follow along with: https://github.com/egil/blazor-workshop. If you look at the source in there, you can see how another dependency, the IPizzaApi, both have a production implementation and a fake implementation used in testing, and how and when they are used by components and are registered.

[newbiE247]

I know the BlazingPizza Tutorial and i'm really surprised it's from you, cool man. I know how to implement interfaces with blazor server and c# overall. That's not the issue here. I know your solution would work and i will consider doing it your way.

Sorry if my english is really bad and i fail to explain myself propperly.

The situation is, we have a shared library and i'm trying to make reuseable components self sufficient as possible. I'd like to have a component which manage it's session state all by itself, so app can just implement the component from the library and don't need to bother with ProtectedBrowserStorage all together.

Do you have another sugesstion other than interface or BlazoredStorage? Thank's a lot for your time.

[egil]

I know the BlazingPizza Tutorial and i'm really surprised it's from you, cool man. I know how to implement interfaces with blazor server and c# overall. That's not the issue here. I know your solution would work and i will consider doing it your way.

The tutorial is not by me, but did do my own version with testing in it. All credits goes to the Blazor team for that original tutorial though.

Sorry if my english is really bad and i fail to explain myself propperly.

No worries, a lot of us here have english as a second or third language.

The situation is, we have a shared library and i'm trying to make reuseable components self sufficient as possible. I'd like to have a component which manage it's session state all by itself, so app can just implement the component from the library and don't need to bother with ProtectedBrowserStorage all together.

It is typical for a shared component library to need the users of it to register some services in the blazor apps, so its completely reasonable for yours to do so also.

1. create blazor component library (dotnet new razorclasslib) and add your components and the services they need to it.
2. when the component lib is referneced in a blazor project. instruct the users to add the necessary service registrations to their services container. that could also be cascading values that should added in the App.razor file

Do you have another sugesstion other than interface or BlazoredStorage? Thank's a lot for your time.

My suggestion is to use BlazoredStorage instead of ProtectedBrowserStorage. The users of your component library will still have to register some servies in their blazor app when doing so, but that is, again, a normal pattern for blazor component libraries to follow.

[newbiE247]

Thank you for your suggestions. I will rewrite the component and use an Interface instead.