Mock multiple instances of a child component in parent with setup

[OnlyHicki]

Quite new to bUnit and trying to ensure I am thinking along the correct lines in terms of unit testing a component.

I have a parent search component that contains (amongst other things) 3 instances of a checkbox list. The lists are each bound to a view model property on the parent component in terms of their selected items.

I'd like to mock the lists and setup their selected items, which I assume would then be bound to the view model correctly when I render the cut. I can then confirm that each view model property is correctly bound to the respective child component selected items and is passed to the relevant method on search submit.

I can generate multiple mock instances as per the below, but how do I correctly "SetupGet" each of the instances to have the selected items below? Is it also possible to setup different selected items to each instance?

Could someone explain how I should do this please?

        var selectedItems = new List<GenericListViewModel>
        {
            new() {Id = 1, Description = "One"}
        };

        MockRepository mockRepository = new MockRepository(MockBehavior.Loose);
        ComponentFactories.Add<CheckboxList>(() => mockRepository.Create<CheckboxList>().Object);

        var cut = RenderComponent<AdvancedSearch>(parameters => parameters
            .Add(p => p.SearchDisplayToggle, SearchDisplay.Advanced)
            .Add(p => p.AdvancedSearchViewModel, viewModel)
            .Add(p => p.SelectedProteinId, 5));

        IReadOnlyList<IRenderedComponent<CheckboxList>> checkboxLists = cut.FindComponents<CheckboxList>();

        Assert.AreEqual(3, checkboxLists.Count);

[linkdotnet]

Hey @OnlyHicki,

I am not sure I do understand your requirements entirely.

So you have a component like this (called AdvancedSearch):

...
<CheckboxList></CheckboxList>
<CheckboxList></CheckboxList>
<CheckboxList></CheckboxList>
...

@code {
  [Parameter]
  public SearhcDIsplay SearchDisplayToggle { get; set; }

  [Parameter]
  public AdvancedSearchViewModel AdvancedSearchViewModel { get; set; }

  [Parameter]
  public int SelectedProteinId { get; set; }
}

Right now, I am not 100% sure what has to be bound to CheckboxList, what you tried to do, and what failed.
Also, why do you need to create three different mocks or fakes for your scenario? Maybe if you explain your reasoning, we can find a way to resolve your issue.

[OnlyHicki]

Hi @linkdotnet, thanks for getting back to me! I hope what I am saying below makes sense, but please tell me if my intended approach is flawed!

Yes, so my Advanced Search contains 3 variations of this below:

<div class="col-4 col-xl-12 mb-3">
    <label class="form-label">Thing type</label>
    <CheckboxList Items="@Things" SelectedItems="@AdvancedSearchViewModel.ListOfSelectedThings" Context="thing">
        <ItemTemplate>
            @thing.Description
        </ItemTemplate>
    </CheckboxList>
</div>

As you can see the selected items on the checkbox is bound to the view model. On submit for my search the view model is passed to the repo method. I thought the correct way to ensure the binding is to setup each checkboxlist with a list of selected item prior to rendering the advanced search itself. I thought I would then be able to check that each view model property had the correct selected items and on submit they were correctly passed to the method and it was called exactly once.

The bit I wanted help understanding was how using a mockRepository approach to mock each instance of a component, can you call setup.

Mock.Get(checkboxLists[0].instance).Setup(c => c.SetupGet()).Returns(selectedItems)

So something like the above, but before the componentfactory goes and creates the mock instances?

Which allows me to do something like the below?

Assert.AreEqual(selectedItems, checkboxLists[0].instance.selectedItems);
Assert.AreEqual(checkboxLists[0].instance.selectedItems, AdvancedSearchViewModel.ListOfSelectedThings)
Assert.IsTrue(mockRepo.Verify(x => x.Submit(), Times.Exactly(1)); 

On initial render my viewmodel has no selected items, I can then click a checkbox and the corresponding viewmodel property has an item added. I don't want to test the checkbox, but the adv search is bound and passed correctly on submit,

Is that a legitimate use case for a test? Does my further explanation help?

[linkdotnet]

I am still not 100% sure what you want to achieve.

So you have your ViewModel with ListOfSelectedThings and you want to select certain items in each of your CheckboxList components?
So that you can then check that the ListOfSlectedThings was specifically updated by CheckboxList1, ... and so on?

If so a few words of caution (because I don't see the full production code):
Communication from parent to child is done via (Cascading)Parameter. But talking from Child to Parent is normally done via EventCallbacks or shared DI services.

It can happen that you CheckboxList updates the VM, but as the parent doesn't get rendered, it will not be displayed.
In your case, that seems more like an "intermediate state" that just gets passed down and then handled in a submit function.

Back on track, I would more focus on the observable behavior in your unit tests. That said, is there a good reason to "mock" out the CheckboxList? It seems maybe easier to either use the real component and do a proper setup and outcome of your tests, or define fakes inside your test.

So how does your production logic bind those viewmodel objects to those 3 checkboxlist-components? Just checking whether or not the element is bound is easy via cut.FindComponents<CheckboxList>(); and check that each Instance of the components has a Items property set to the passed in ViewModel. But I am sure that is not what you are aiming at.

[OnlyHicki]

I will come back with additional code to help explain. I could be misunderstanding how the tests should be done, but I thought each component should be tested in isolation as much as possible.

[OnlyHicki]

Hi @linkdotnet!

I would like to thank you for your replies and making me think about my intentions further. I was trying to mock a component and ensure it was bound to a parent viewmodel, but without a callback to invoke, it was the same as defining a viewmodel irrespective of the child component.

I'm sorry to have taken up your time, but appreciate your help in making me see more clearly!

[linkdotnet]

Don't worry - that is why we have this discussion forum. Glad you could sort it out for yourself!