Change value of HTML select element

[dawidr]

Is there a way to change the option of HTML select element using bUnit?

I'm testing the following component:

PageSize.razor

<select id="pageSize" @bind="Size">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

PageSize.razor.cs

public partial class PageSize
{
    private int _size = 10;

    [Parameter]
    public int Size
    {
        get
        {
            return _size;
        }
        set
        {
            if (_size != value)
            {
                _size = value;
                if (SizeChanged.HasDelegate)
                {
                    SizeChanged.InvokeAsync(value);
                }
            }
        }
    }

    [Parameter]
    public EventCallback<int> SizeChanged { get; set; }
}

The test looks like:

public class PageSizeTests: TestContext
{
    [Fact]
    public void ComponentShouldChangePageSize()
    {
        int pageSize = 0;
        var component = RenderComponent<PageSize>(
            ComponentParameterFactory.EventCallback("SizeChanged", (int selectedPageSize) =>
            {
                pageSize = selectedPageSize;
            })
        );

        var select = component.Find("#pageSize");
        select.Click(); //ERROR: Can't click on select as there is no such even handler assigned

        var option = component.Find("option[value='10']");
        option.Click(); //ERROR: Can't click on the option as there is no such event handler assigned

        Assert.Equal(10, pageSize);
    }
}

I can't get it to work...

[egil]

Hi @dawidr

There is. The trick is to use the right event trigger method (https://bunit.egilhansen.com/docs/interaction/trigger-event-handlers) that comes with bUnit. For select elements, I am pretty sure the one you need is Change(newValue), e.g.:

public class PageSizeTests: TestContext
{
    [Fact]
    public void ComponentShouldChangePageSize()
    {
        int pageSize = 0;
        var cut = RenderComponent<PageSize>(parameters => parameters
            .Add(p => p.SizeChanged, selectedPageSize => pageSize = selectedPageSize)
        );
        
       cut.Find("#pageSize").Change(10);

       Assert.Equal(10, pageSize);      
    }
}

I made a few changes to your example:

1. Use the parameter builder pattern pass parameters to the component under test, see https://bunit.egilhansen.com/docs/providing-input/passing-parameters-to-components to learn more.
2. Abbreviate the component under test as CUT.
3. Trigger the Change event handler on the select element and pass in the new value.

Hope this helps.

[dawidr]

@egil Thanks for a quick response! Change was the first thing I tried...

As far as I understand there is no difference between:

int pageSize = 0;
var component = RenderComponent<PageSize>(
    ComponentParameterFactory.EventCallback("SizeChanged", (int selectedPageSize) =>
    {
         pageSize = selectedPageSize;
     })
);

and your code:

int pageSize = 0;
var cut = RenderComponent<PageSize>(parameters => parameters
    .Add(p => p.SizeChanged, selectedPageSize => pageSize = selectedPageSize)
);

I'm I, right?

Besides this, your example also doesn't work for me. Take a look, the pageSize is not changed:

[egil]

1. The two ways of passing parameters results in the same thing, yes, but the builder is strongly typed and refactor friendly, so I recommend that over the other.

2. A few things you can do to debug:

   • Inspect cut.Markup and look for blazor:on.... attributes to figure out what event handler to trigger. However, if calling Change did not throw, then you probably have the right one.
   • Set a breakpoint in your components Size property and see if it gets called.

[dawidr]

The property is not called...

[dawidr]

[egil]

hmm try passing a string "20" instead. It might be what is needed.

[egil]

OK, I can confirm that this works:

CUT:

<select id="pageSize" @bind="Size">
    <option value="5">5</option>
    <option value="10">10</option>
    <option value="20">20</option>
    <option value="50">50</option>
    <option value="100">100</option>
</select>

@code 
{
    private int _size = 10;

    [Parameter]
    public int Size
    {
        get
        {
            return _size;
        }
        set
        {
            if (_size != value)
            {
                _size = value;
                SizeChanged.InvokeAsync(value);
            }
        }
    }

    [Parameter]
    public EventCallback<int> SizeChanged { get; set; }
} 

Test:

[Fact]
public void ComponentShouldChangePageSize()
{
    int actual = 0;
    int expected = 50;

    var cut = RenderComponent<Selector>(parameters => parameters
        .Add(p => p.Size, 20)
        .Add(p => p.SizeChanged, selectedPageSize => actual = selectedPageSize)
    );


    cut.Find("#pageSize").Change(expected.ToString());

    Assert.Equal(expected, cut.Instance.Size);
    Assert.Equal(expected, actual);
}

The key is unfortunately to convert expected to a string before passing it to Change method. Otherwise the binding wont be triggered. It makes sense, since Blazors binding logic expects a string to come from the browser, independent of the underlying data type it is bound to.

[egil]

Ps. added an issue to make this easier in the future: #276

[sc-dawidrutkowski]

@egil Thanks for checking! I will update my code later on!