Spike: Study implementation of unit tests requiring external components

[hocinehacherouf]

Description

External component like MudPopoverProvider should be injected in unit tests to update html DOM

Acceptance criteria

• Save and duplicate Feature: Add unit tests on device create/detail pages about save and duplicate feature #1001
• Edge Models

[hocinehacherouf]

Let's say we have a blazor component called ComponentOne and this component is using MudAutocomplete.
The component MudAutocomplete (similar to MudSelect) communicate with the component MudPopoverProvider to delegate to it the responsibility to render items listing (The user will be able to interact with this listing to select/scoll items).

To test the component ComponentOne (more precisely user interactions with MudAutocomplete), we need to render in first MudPopoverProvider:

[TestFixture]
public class DeviceToDuplicateSelectorTests : BlazorUnitTest
{
    [Test]
    public void Test()
    {
        // Arrange

        // 0) Previous arranges/mockups are ommited on this example
        
        // 1) First we have to render the component MudPopoverProvider
        var popoverProvider = RenderComponent<MudPopoverProvider>();

        // 2) Then the component under test must be rendered
        var cut = RenderComponent<ComponentOne>();

        // 3) Find the MudAutocomplete component
        var autocompleteComponent = cut.FindComponent<MudAutocomplete<string>>();
        // 4) Fire click event on the MudAutocomplete component to allow user input
        autocompleteComponent.Find(TagNames.Input).Click();
        // 5) Fire input event with user input content
        autocompleteComponent.Find(TagNames.Input).Input("");

        // 6) Wait until MudPopoverProvider render the expected list of items from MudAutocomplete
        popoverProvider.WaitForAssertion(() => popoverProvider.FindAll("div.mud-list-item").Count.Should().Be(1));

        // Act

        // 7) Find an item on rendered MudPopoverProvider
        var item = popoverProvider.Find("div.mud-list-item");
        // 8) Fire click event on the desired item to select it
        item.Click();

        // Assert
        
        // 9) Wait until the MudAutocomplete component is closed after the user has selected an item
        cut.WaitForAssertion(() => autocompleteComponent.Instance.IsOpen.Should().BeFalse());
        // 10) Add all necessary asserts
        cut.WaitForAssertion(() => MockRepository.VerifyAll());
    }
}

[kbeaugrand]

See #1168