Blazor Server app state management testing

[shatvani]

Hi,
I'd like to test Blazor state management which persists data in ProtectedSessionStorage.
I followed this and bUnit documentation but no success, yet.
These my source:

public class CustomerState : ICustomerState 
{
    public ProtectedSessionStorage SessionStorage { get; set; }

    public UgyfelState(ProtectedSessionStorage sessionStorage)
    {
        SessionStorage = sessionStorage;
    }

    public async Task SetState(CustomerDto customer)
    {
        await SessionStorage.SetAsync(nameof(CustomerDto), JsonSerializer.Serialize(customer));
    }

    public async Task<CustomerDto?> GetState()
    {
        var savedStateJson = await SessionStorage.GetAsync<string>(nameof(CustomerDto));
        if (savedStateJson.Success)
        {
            return JsonSerializer.Deserialize<CustomerDto>(savedStateJson.Value!);
        }
        else
        {
            return new CustomerDto();
        }
    }
}

The test:

    [Fact]
    public async Task SetState_GetState_SerializeData_Success()
    {
        // Arrange
        var customerDto = new CustomerDto { Id = 1, Name = "somebody" };
        var expectedJson = JsonSerializer.Serialize(customerDto);

        string base64DataJson = Convert.ToBase64String(Encoding.ASCII.GetBytes(expectedJson));

        Mock<IDataProtector> mockDataProtector = new Mock<IDataProtector>();
        _ = mockDataProtector.Setup(sut => sut.Protect(It.IsAny<byte[]>())).Returns(base64DataJson is null ? null : Encoding.UTF8.GetBytes(base64DataJson));
        _ = mockDataProtector.Setup(sut => sut.Unprotect(It.IsAny<byte[]>())).Returns(base64DataJson is null ? null : Encoding.UTF8.GetBytes(base64DataJson));

        Mock<IDataProtectionProvider> mockDataProtectionProvider = new Mock<IDataProtectionProvider>();
        _ = mockDataProtectionProvider.Setup(s => s.CreateProtector(It.IsAny<string?>())).Returns(mockDataProtector.Object);

        var sut = CreateSut(JSRuntimeMode.Strict);
        var planned = sut.Setup<string>("CustomerDto").SetResult(base64DataJson);

        var stateManager = new CustomerState(new ProtectedSessionStorage(sut.JSRuntime, mockDataProtectionProvider.Object));

        // Act
        await stateManager.SetState(customerDto);
        var result = await stateManager.GetState();

        // Assert
        result.Id.ShouldBe(1);
        result.Name.ShouldBe("somebody");        
    }

And this is the error message which I tried but no success:

        InvokeVoidAsync("sessionStorage.setItem", "UgyfelDto", "ZXlKT1pYWWlPaUpJWVhSMllXNXBJRk5jZFRBd1JURnVaRzl5SWl3aVZFRktJanB1ZFd4c0xDSlRlblZzUkdGMGRXMGlPbTUxYkd3c0lsTjZkV3hJWld4NUlqcHVkV3hzTENKQmJubHFZVTVsZG1VaU9tNTFiR3dzSWxWbmVXbHVkR1Y2YjBsa0lqb2lNREF3TURBd01EQXRNREF3TUMwd01EQXdMVEF3TURBdE1EQXdNREF3TURBd01EQXdJaXdpVEdWMGNtVm9iM3BoYzBSaGRIVnRZU0k2SWpBd01ERXRNREV0TURGVU1EQTZNREE2TURBaUxDSlZkRzlzYW1GeVlVMXZaRzl6YVhSdmRIUmhWV2Q1YVc1MFpYcHZTV1FpT2lJd01EQXdNREF3TUMwd01EQXdMVEF3TURBdE1EQXdNQzB3TURBd01EQXdNREF3TURBaUxDSk5iMlJ2YzJsMFlYTkVZWFIxYldFaU9pSXdNREF4TFRBeExUQXhWREF3T2pBd09qQXdJaXdpVkc5eWIyeDJaU0k2Wm1Gc2MyVXNJa2xrSWpveGZRPT0")

Configure bUnit's JSInterop to handle the call with following:

    SetupVoid("sessionStorage.setItem", "UgyfelDto", "ZXlKT1pYWWlPaUpJWVhSMllXNXBJRk5jZFRBd1JURnVaRzl5SWl3aVZFRktJanB1ZFd4c0xDSlRlblZzUkdGMGRXMGlPbTUxYkd3c0lsTjZkV3hJWld4NUlqcHVkV3hzTENKQmJubHFZVTVsZG1VaU9tNTFiR3dzSWxWbmVXbHVkR1Y2YjBsa0lqb2lNREF3TURBd01EQXRNREF3TUMwd01EQXdMVEF3TURBdE1EQXdNREF3TURBd01EQXdJaXdpVEdWMGNtVm9iM3BoYzBSaGRIVnRZU0k2SWpBd01ERXRNREV0TURGVU1EQTZNREE2TURBaUxDSlZkRzlzYW1GeVlVMXZaRzl6YVhSdmRIUmhWV2Q1YVc1MFpYcHZTV1FpT2lJd01EQXdNREF3TUMwd01EQXdMVEF3TURBdE1EQXdNQzB3TURBd01EQXdNREF3TURBaUxDSk5iMlJ2YzJsMFlYTkVZWFIxYldFaU9pSXdNREF4TFRBeExUQXhWREF3T2pBd09qQXdJaXdpVkc5eWIyeDJaU0k2Wm1Gc2MyVXNJa2xrSWpveGZRPT0")
or the following, to match any arguments:
    SetupVoid("sessionStorage.setItem", _ => true)

The setup methods are available on an instance of the BunitJSInterop or
BunitJSModuleInterop type. The standard BunitJSInterop is available
through the TestContext.JSInterop property, and a BunitJSModuleInterop
instance is returned from calling SetupModule on a BunitJSInterop instance.

[linkdotnet]

I faced the same issue in on of my projects and the easiest and least brittle solution is to introduce a humble object as a facade:

public sealed class LocalStorageService : ILocalStorageService
{
    private readonly ProtectedLocalStorage localStorage;

    public LocalStorageService(ProtectedLocalStorage localStorage)
    {
        this.localStorage = localStorage;
    }

    public async ValueTask<bool> ContainKeyAsync(string key) => (await localStorage.GetAsync<object>(key)).Success;

    public async ValueTask<T> GetItemAsync<T>(string key) => (await localStorage.GetAsync<T>(key)).Value;

    public async ValueTask SetItemAsync<T>(string key, T value) => await localStorage.SetAsync(key, value);
}

Now you can use ILocalStorageService in your production code, which is easily fakeable/mockable inside your test.
Bonus points because it removes the dependency to Blazor you don't wanna test.

[shatvani]

Dear linkdotnet,
Thank you, I'm going to try your solution and I'll let you know about the result.