'Diffs.ShouldHaveChanges()' passing when there are no changes.

[ricardo-noyolalozano]

I have a test that clicks on a collapsible panel twice to close and then re-open it. The open state looks or should look exactly the same as the first render. When I run 'GetChangesSinceFirstRender()' on the rendered component after the second click, I get back an empty ReadOnlyList. Just wondering if this is a bug or whether I'm not thinking about this correctly.

public void PanelOpens_WhenToggleIsClickedAgain()
    {
        //Arrange
        var cut = RenderComponent<Panel>();
        cut.Find("#toggle").Click();

        //Act
        cut.Find("#toggle").Click();
        var diffs = cut.GetChangesSinceFirstRender();

        //Assert
        diffs.ShouldHaveChanges();
    }

Using bUnit version: 1.16.2

[linkdotnet]

Hey @ricardo-noyolalozano,

I guess to give you educated advise, we would need to see the code of your CollapsePanel. A few general thoughts I want to give you, that might be the "culprit":

• bUnit is not a browser - with that, certain restrictions are in place. For example, if your solution relies on pure CSS - we don't "apply" CSS rules. There are implementations that use the :checked pseudoelement to make the collapsible happen. This will not work with bUnit
• If you use javascript, then this will also not applied to your DOM
• Depending on your implementation details, you might want to skip that test due to the fact that it has nothing to do with your (1st party) logic but you would test a browser

All in all, it would be helpful to see the code.

[ricardo-noyolalozano]

I would but I'm not allowed to share any of the code. We use a div element whose class is "collapse-panel". Sorry if I'm not using the right terms but this is not my forte. I would think though that if the function is returning an empty collection that this would throw an ActualExpectedAssertException. In other tests where there is a change in the HTML I see that this does return a populated collection.

[linkdotnet]

ShouldHaveChanges has a parameter with the expected changes. If you don't provide a parameter, "zero" changes is the expected amount.

Here is a bit more detail: https://bunit.dev/docs/verification/verify-markup.html#finding-expected-differences

Regarding the source code - maybe a very simplified version. It would be nice to know whether or not the solution relies on CSS or other techniques.

[ricardo-noyolalozano]

Gotcha, I assumed I was using it wrong. According to the devs there is no other technique being used just pure HTML and blazor elements.