Tested/Expected rendered values do not match actual UI values

[gismofx]

I am writing a test to ensure when a bound value of a component is changed, that it is rendered correctly. The component appears to be working correctly(manual testing):

Pressing the toggle button changed the bound value to the component. Then, the user changes the value inside the component and it should update the bound value. Then toggling the button should switch between the values and the new value should be displayed(like above)

Here is the original bug(with gifs showing the bug):
MudBlazor/MudBlazor#2800 (comment)
Bug seems to be fixed, but need to write a test to ensure it does not come back.

Here my repo and test code:
https://github.com/gismofx/MudBlazor/blob/4edc36f3e278b9bf4d4aa32e2196b5d7d28788e4/src/MudBlazor.UnitTests/Components/AutocompleteTests.cs#L646

The test seems to behave like the old version, but the real UI version seems to work fine. Any help would be appreciated!

[egil]

hi @gismofx,

What's the name of the branch you are working on? I would like to clone locally and try it out.

[gismofx]

Thanks. Clone the DEV branch in my repo:
https://github.com/gismofx/MudBlazor/tree/dev

[egil]

So I had a look, and nothing springs out at me in the test. I did change a few things, but it still has the same problem. My problem is that the components under test is too complex for me to comprehend without spending quite a while to untangle what goes on where, so I'm afraid its as far as can go with the current sample.

Here is my updated test (still fails):

[Test]
public async Task Autocomplete_ChangeBoundValue()
{
    var comp = Context.RenderComponent<AutocompleteChangeBoundObjectTest>();
    Console.WriteLine(comp.Markup);
    var autocompletecomp = comp.FindComponent<MudAutocomplete<string>>();
    var autocomplete = autocompletecomp.Instance;
    autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.DebounceInterval, 0));
    autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.CoerceText, true));

    // check initial state
    autocomplete.Value.Should().Be("Florida");
    autocomplete.Text.Should().Be("Florida");
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//redundant?
    
    //Get the button to toggle the value
    comp.Find("button").Click();
    autocomplete.Value.Should().Be("Georgia");
    autocomplete.Text.Should().Be("Georgia");
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Georgia"));//redundant?

    //Change the value of the current bound value component
    //insert "Calif"
    autocompletecomp.Find("input").Input("Alabam");
    await Task.Delay(100);

    //press Enter key
    autocompletecomp.Find("input").KeyUp(key: Key.Enter);

    //The value of the input should be California
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Alabama"));

    autocomplete.Value.Should().Be("Alabama");
    autocomplete.Text.Should().Be("Alabama");
    
    //Change the bound object
    comp.Find("button").Click();

    autocomplete.Value.Should().Be("Florida"); //pass
    autocomplete.Text.Should().Be("Florida"); //fail
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));//breaks here:
    
    var markup2 = autocompletecomp.Markup;
    autocomplete.Value.Should().Be("Florida");
    //autocomplete.Text.Should().Be("Florida");

    //Change the bound object back and check again.
    comp.Find("button").Click();

    var t1 = autocompletecomp.Find("input").GetAttribute("value");
    var t2 = autocompletecomp.Find("input").GetAttribute("text");
    autocomplete.Value.Should().Be("Alabama");
    autocomplete.Text.Should().Be("Alabama");
}

A few things I would try next:

1. Set up logging like described here (just do something similar for NUnit that I do here for xUnit): https://bunit.dev/docs/misc-test-tips.html#capturing-logs-from-ilogger-in-test-output. This will allow you to see into the internals of the Blazor/bUnit renderer, and e.g. see when event handlers are triggered, and what components are re-rendered after.
2. Try to figure out what is different between the autocomplete.Value property and the autocomplete.Text property. Why does one get updated correctly when the other does not. Where does their execution path differ.

Hope this helps.

[gismofx]

@egil Thank you for taking the time to look and providing feedback. I suppose I'm just looking for a sanity check as well; and that my approach isn't completely wrong...

I appreciate it. I'm digging deeper into the base components and classes and hope to get some help from the MB devs too. I'll update this thread if I get any answers.

[gismofx]

Here is the final test. What made it work was just calling WaitForAssertion after each ui change/render. We were close! Thanks! Issue resolved.

[Test]
public async Task Autocomplete_ChangeBoundValue()
{
    var comp = Context.RenderComponent<AutocompleteChangeBoundObjectTest>();
    var autocompletecomp = comp.FindComponent<MudAutocomplete<string>>();
    var autocomplete = autocompletecomp.Instance;
    autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p=> p.DebounceInterval, 0));
    autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.CoerceText, true));
    // this needs to be false because in the unit test the autocomplete's input does not lose focus state on click of another button.
    // TextUpdateSuppression is used to avoid binding to change the input text while typing.  
    autocompletecomp.SetParametersAndRender(parameters => parameters.Add(p => p.TextUpdateSuppression, false));
    // check initial state
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));
    autocomplete.Value.Should().Be("Florida");
    autocomplete.Text.Should().Be("Florida");
    
    //Get the button to toggle the value
    comp.Find("button").Click();
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Georgia"));
    autocomplete.Value.Should().Be("Georgia");
    autocomplete.Text.Should().Be("Georgia");
    
    //Change the value of the current bound value component
    //insert "Alabam"
    autocompletecomp.Find("input").Input("Alabam");
    await Task.Delay(100);

    //press Enter key
    autocompletecomp.Find("input").KeyUp(key: Key.Enter);
    //ensure autocomplete is closed and new value is committed/bound
    comp.WaitForAssertion(() => autocomplete.IsOpen.Should().BeFalse());

    //The value of the input should be Alabama
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Alabama"));
    autocomplete.Value.Should().Be("Alabama");
    autocomplete.Text.Should().Be("Alabama");
    
    //Again Change the bound object
    comp.Find("button").Click();
    
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Florida"));
    autocomplete.Value.Should().Be("Florida");
    autocomplete.Text.Should().Be("Florida");

    //Change the bound object back and check again.
    comp.Find("button").Click();
    comp.WaitForAssertion(() => autocompletecomp.Find("input").GetAttribute("value").Should().Be("Alabama"));
    autocomplete.Value.Should().Be("Alabama");
    autocomplete.Text.Should().Be("Alabama");
}