Change value of HTML select multiple element

[MarkusRodler]

It's a follow up question for this thread: #275

I've got a select with the multiple attribute and I've got no clue how to pass in the value for .Change to test that part.

All of these are not working:

cut.Find("#select").Change(new int[] { 1, 2, 3 });
cut.Find("#select").Change(new string[] { "1", "2", "3" });
cut.Find("#select").Change("1, 2, 3");
cut.Find("#select").Change("[1, 2, 3]");
cut.Find("#select").Change("{ 1, 2, 3 }");

Component looks like this:

<div>
    <InputSelect
        Value="Persons"
        ValueChanged="x => PersonsChanged.InvokeAsync(x)"
        ValueExpression="() => Persons"
        TValue="int[]"
        id="select">
        @foreach (var item in AllPersons)
        {
            <option value="@item.Key">@item.Value</option>
        }
    </InputSelect>
    <span>Selected:</span>
    <ul>
        @foreach (var id in Persons)
        {
            <li>@AllPersons[id]</li>
        }
    </ul>
</div>

@code
{
    [Parameter, EditorRequired]
    public required Dictionary<int, string> AllPersons { get; set; } = [];

    [Parameter, EditorRequired]
    public int[] Persons { get; set; } = [];

    [Parameter, EditorRequired]
    public EventCallback<int[]> PersonsChanged { get; set; }
}

Test like this:

    [TestMethod]
    public void CanChoosePersons()
    {
        Dictionary<int, string> allPersons = new()
        {
            [1] = "Hans Meier",
            [2] = "Schorsch Zuckal",
            [3] = "Sepp Huber"
        };
        int[] persons = [];
        var cut = Render(@MultiSelect @bind-Persons="persons" AllPersons="allPersons" />);

        var personsSelect = cut.Find("#select");
        personsSelect.Change(new int[] { 1, 2, 3 }); // Does nothing. Throws no error

        var lis = cutty.FindAll("li");
        Assert.AreEqual(3, lis.Count()); // Wrong
    }

[linkdotnet]

Hey @MarkusRodler,

@egil and I will have thought about that today in our weekly stream.
At first sight, it looks good what you are doing.

[linkdotnet]

Okay @egil and I had a look at this. The reason the current approach doesn't work is because the parent of your MultiSelect is your test itself.

Basically, ValueChanged="x => PersonsChanged.InvokeAsync(x)" means: "Hey, I have a change and here it is". And now the parent is responsible to propagate the changed value down again (to your MultiSelect). But the test, doesn't do that as it isn't a normal ComponentBase and tracked by the renderer.

That said, if you assign your Persons directly (so you are not relying on the outside world) it works:

ValueChanged="x => PersonsChanged.InvokeAsync(Persons = x)"

Of course you can make that a bit prettier :D

[MarkusRodler]

Thanks a lot. That works. Now I understand Blazor better.
Merci und uf Wiederluege,
Markus

[linkdotnet]

Merci vilmal!

Small todo for myself: we should add this somewhere to our docs so we know in 3 weeks what went on and can help at least the next person falling into that trap!

[MarkusRodler]

Thats a very good idea!