ValueChange event is not triggered in unit test (bUnit)

[Tristan Kim]

Hello Support, 

I wrote a unit test using bUnit for TimePicker. 

When I run the application, everything works great but in unit tests, the event handler is not invoked. 

<code>

<SfTimePicker ID="OpenTime" TValue="TimeOnly" @bind-Value="@item.OpenTime" Placeholder="Open Time"  
  FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto">

   <TimePickerEvents TValue="TimeOnly" ValueChange="@(e => onStartTimeChange(item.Open, item.CloseTime, e))"></TimePickerEvents>

</SfTimePicker>

</code>

The following is a part of unit tests.

<code>

var openTime = officeHoursComponent.Find("div.edit-dialog #OpenTime");

var newOpenTime = new TimeOnly(9, 0);

openTime.Change(newOpenTime.ToString("hh:mm tt"));

</code>

I do not have any idea why the handler is not invoked.
Do you have any idea how to test TimePickup when a value changes. 

It would be nice if you can provide an example of a unit test where your built-in event such as ValueChange is triggered?

Thank you very much,
Tristan Kim.

[Kokila Poovendran]

Hi Tristan Kim,

Thank you for reaching out to us regarding the issue you encountered with the unit test for the TimePicker component using bUnit.

Upon reviewing your query, we've prepared a code snippet that may assist you in testing the ValueChange event effectively:

 public async Task ChangeEvent()

 {

     bool IsChangeTriggered = false;

     int ChangeCount = 0;

     var Timepicker = RenderComponent<SfTimePicker<DateTime>>(parameters => parameters.

     AddChildContent<TimePickerEvents<DateTime>>(events => events.

     Add(e => e.ValueChange, (Blazor.Calendars.ChangeEventArgs<DateTime> args) =>

     {

         IsChangeTriggered = true;

         ChangeCount++;

     })).

     Add(calendar => calendar.Value, new DateTime(2020, 1, 1, 10, 30, 00)));

     Assert.Equal(new DateTime(2020, 1, 1, 10, 30, 00), Timepicker.Instance.Value);

     var inputElement = Timepicker.Find("input");

     await Timepicker.Instance.ShowPopupAsync();

     var popupEle = Timepicker.Find(".e-popup-wrapper");

     Assert.Contains("e-popup", popupEle.ClassName);

     Assert.Contains("e-timepicker", popupEle.ClassName);

     var ulEle = popupEle.QuerySelector("ul");

     Assert.Contains("e-ul", ulEle.ClassName);

     var liCollections = ulEle.QuerySelectorAll(".e-list-item");

     Assert.True(liCollections.Length > 0);

     Assert.Equal(48, liCollections.Length);

     // Select the value using popup

     liCollections[1].Click();

     Assert.True(IsChangeTriggered);

     Assert.Equal(1, ChangeCount);

     await Timepicker.Instance.HidePopupAsync();

     // Dynamically change value property

     IsChangeTriggered = false;

     Timepicker.SetParametersAndRender<SfTimePicker<DateTime>>(("Value", new DateTime(2020, 1, 1, 11, 30, 00)));

     Assert.False(IsChangeTriggered);

     Assert.Equal(1, ChangeCount);

 }

This code snippet provides a comprehensive test scenario for the ValueChange event of the TimePicker component, ensuring that the event is triggered correctly under various conditions.

We hope this example helps you effectively test the TimePicker component using bUnit. If you have any further questions or concerns, please feel free to reach out to us.

[Tristan Kim]

Hello Kokila Poovendran,

Thank you for your reply. 

Unfortunately, we are not just unit testing TimePicker only. The timepicker components are a part Grid since we use it under GridEditSettings and two different events are triggered depending on the id. The code is added in below. We would like to know if there is a way to call these events by Change() method or other method in unit test?

 

<code>

<SfGrid @ref="@Grid" DataSource="@Data" AllowSelection="true">

    <GridEvents TValue="OfficeHoursVM" OnActionBegin="ActionBegin" OnActionComplete="ActionComplete"

                RowSelected="RowSelected" RowDeselected="RowDeselected" RowDataBound="RowDataBound"></GridEvents>

    <GridSelectionSettings CheckboxOnly="true"></GridSelectionSettings>

    <GridEditSettings AllowEditing="true" Mode="EditMode.Dialog">

        <HeaderTemplate>Edit Hours</HeaderTemplate>

        <Template>

            @{

                var item = (context as OfficeHoursVM);

                    <div class="edit-dialog">

                        <SfTimePicker ID="OpenTime"

                            TValue="TimeOnly"

                            @bind-Value="@item.OpenTime"

                            Placeholder="Open Time"

                            Enabled="@item.Open"

                            FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto">

                            <TimePickerEvents TValue="TimeOnly" ValueChange="@(e => onStartTimeChange(item.Open, item.CloseTime, e))"></TimePickerEvents>

                        </SfTimePicker>

                        <SfTimePicker ID="CloseTime"

                            TValue="TimeOnly"

                            @bind-Value="@item.CloseTime"

                            Placeholder="Close Time"

                            Enabled="@item.Open"

                            FloatLabelType="Syncfusion.Blazor.Inputs.FloatLabelType.Auto">

                            <TimePickerEvents TValue="TimeOnly" ValueChange="@(e => onCloseTimeChange(item.Open, item.OpenTime, e))"></TimePickerEvents>

                        </SfTimePicker>

                        <SfCheckBox ID="Open" @bind-Checked="@item.Open" Label="Office Open" @onchange="@(e => onOpenChange(item.OpenTime, item.CloseTime, e))"></SfCheckBox>

                        <div>

                            <label id="UpdateErrorMessage" class="validation-message">@OfficeHoursUpdateErrorMessage</label>

                        </div>

                    </div>

            }

        </Template>

...

</code>

Thank you.

[Kokila Poovendran]

Hi Tristan Kim,

We have created a new branch forum for your last query. Kindly follow the below forum for further assistance.

 

Forum:  https://forumassist.syncfusion.com/186768

Regards,

Kokila Poovendran.