2

I am working a balzor webassembly project, I tried to write a unit test for by using Bunit, Xunit,and Moq

<MudSelect T="string" AnchorOrigin="Origin.BottomCenter" Label="Status" MultiSelection="true" SelectAll="true" SelectAllText="All" SelectedValuesChanged="SelcetOption" Variant="Variant.Outlined" Margin="Margin.Dense">
                            @foreach (var state in StatusOption)
                            {

                                <div>  @state </div>    // This line is printed  #1
                                 <MudSelectItem T="string" Value="@state"  id="@($"participant-status-{state}")" >@state</MudSelectItem>        // but this line is not printed #2

                            }
                        </MudSelect>

#1 printed when unit testing

                    <div>New Enquiry</div>
                    <div>Onboarding Follow-Up</div>
                    <div>Meeting Scheduled</div>
                    <div>New Client</div>
                    <div>Active</div>
                    <div>Inactive</div>
                    <div>Not Attending</div>
                    <div>Pending Action From Client</div>
                    <div>Pending Action From Organization</div>
                    <div>Exited</div>
                    <div>Deceased</div>
                    <div>Cancelled</div>

#2 does not print anything . Why?

The StatusOption array passed to the component correctly.

public string[] StatusOption = {  "New Enquiry","Onboarding Follow-Up", "Meeting Scheduled","New Client""};

I guess, the MudSelectItem component is typically used as an option inside a MudSelect component, which is a dropdown menu. When the user clicks on the placeholder of the MudSelect component, the list of MudSelectItem options will appear.

That is why #2 may not printed when component render.

Anyone has idea to check this filter view (i.e MudSelect )??

hanushi
  • 1,169
  • 2
  • 12
  • 27
  • 1
    Mud used bUnit to test their components, so you might find inspiration in their test suite: https://github.com/MudBlazor/MudBlazor/blob/dev/src/MudBlazor.UnitTests/Components/SelectTests.cs – Egil Hansen Jan 20 '23 at 19:12
  • Also you might consider not testing MudSelect, as that is already tested by the Mud team. Instead, consider mocking MudSelect: https://bunit.dev/docs/providing-input/substituting-components.html – Egil Hansen Jan 20 '23 at 19:15
  • Thanks Egil, If I select an option( this mud select is used to filter the table) the table data will change. How can I test this senario? I mean the Ui should change, So how can I test the view ? – hanushi Jan 21 '23 at 05:16
  • In the browser in is actually the same. MudBlazor does not render the entries until you click on the mudselect. Then it renders them in a completely different component. This behavior should be possible within in the test as well. To test the next component, just change the value of @state. – Wolfware May 25 '23 at 17:15

0 Answers0