Button Click Not working on the right component - How to debug?

[gismofx]

I have a test and test component. I am trying to Click a button in the test component, but it does not seem to be clicking the instance in the component:

Test/Code Here:
https://github.com/gismofx/MudBlazor/blob/bf87c11e8eac474a156146112e386c359c60cb5a/src/MudBlazor.UnitTests/Components/TableTests.cs#L1346

[Test]
public async Task RowsPerPageChangeValueFromCode()
{
    var testComponent = Context.RenderComponent<TablePagerChangeRowsPerPageTest>();
    var table = testComponent.FindComponent<MudTable<string>>().Instance;
    var buttonComponent = testComponent.FindComponent<MudButton>();
    //try to force false, has no effect
    buttonComponent.SetParametersAndRender(parameters => parameters.Add(p => p.Disabled, false));
    var x = buttonComponent.Instance.Disabled;
              
    testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(35));
    testComponent.Find("button").Click();//disabled=true still. Why? 
    testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(10));//test fails because value is not toggled
    testComponent.Find("button").Click();
    testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(35));
}

Component and razor.cs
https://github.com/gismofx/MudBlazor/blob/bf87c11e8eac474a156146112e386c359c60cb5a/src/MudBlazor.UnitTests.Viewer/TestComponents/Table/TablePagerChangeRowsPerPageTest.razor

https://github.com/gismofx/MudBlazor/blob/bf87c11e8eac474a156146112e386c359c60cb5a/src/MudBlazor.UnitTests.Viewer/TestComponents/Table/TablepagerChangeRowsPerPageTest.razor.cs

[egil]

Sorry for the lack of response. I'll try to take a look at it tomorrow.

[egil]

I played around with the test, and here is a few observations:

1. Having a look at testComponent.Markup after the first render reveals that there is five <button> elements in the markup.
2. The button you change the Disabed parameter on, buttonComponent, doesn't contain the same <button> element as the one you find when you do testComponent.Find("button"), so changing it doesn't change the button you expect. That is why the button you are trying to click is still disabled.
3. Using testComponent.FindComponents<MudButton>(); show that there is one <MudButton> in the render tree.
4. Using testComponent.FindAll("button") we see there are five buttons, and the two first in the DOM tree is disabled.
5. If we search for MudBaseButton instead of MudButton, we do find five MudBaseButton components in the render tree, and the first one matches the first <button> element in the DOM tree (which is disabled).

My go to when debugging something like this is to investigate testComponent.Markup and have a look at the elements in there, and see if I can match that up with components.

For reference, here is the test as it looks currently on my machine:

public void RowsPerPageChangeValueFromCode()
{
    var testComponent = RenderComponent<TablePagerChangeRowsPerPageTest>();
    var table = testComponent.FindComponent<MudTable<string>>().Instance;
    var buttonComponent = testComponent.FindComponent<MudBaseButton>();
    var allButtonComponents = testComponent.FindComponents<MudBaseButton>();

    var btnElm1 = buttonComponent.Find("button");

    var allButtonElms = testComponent.FindAll("button");
    var disabledButtons = allButtonElms.Select(x => (x, x.HasAttribute("disabled"))).ToArray();

    buttonComponent.SetParametersAndRender(parameters => parameters.Add(p => p.Disabled, false));

    table.RowsPerPage.Should().Be(35);
    
    var btnElm2 = testComponent.Find("button");
    
    btnElm2.Click();

    table.RowsPerPage.Should().Be(10);
    
    btnElm2.Click();
    
    table.RowsPerPage.Should().Be(35);
}

The test doesn't pass, but I hope this helps you get further and figure it out.

Ps. this took a good hour to debug, so if you feel this is worth something to you, do consider hitting that sponsor button.

[gismofx]

@egil Thanks! This makes complete sense. I made a few subtle tweaks and now the test is passing:

Perform the find on the buttonComponent
buttonComponent.Find("button").Click();

I changed the test to this:

        [Test]
        public async Task RowsPerPageChangeValueFromCode()
        {
            var testComponent = Context.RenderComponent<TablePagerChangeRowsPerPageTest>();
            var table = testComponent.FindComponent<MudTable<string>>().Instance;
            var buttonComponent = testComponent.FindComponent<MudButton>();        
            testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(35));
            //Toggle the rows per page value from 35 to 10
            buttonComponent.Find("button").Click(); <-search for button element inside the button component! :)
            testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(10));
            //Toggle the rows per page value from 10 back to  to 35
            buttonComponent.Find("button").Click();
            testComponent.WaitForAssertion(() => table.RowsPerPage.Should().Be(35));
        }