Anchor click and NavigationManager

[jiaming0708]

I would like to try a test case, the user click the anchor and the navigation can get the uri, unfortunately, the FakeNavigationManager did not catch any change

use the dotnet cli to new a WASM project, and write a testing for NavMenu component

here is my test case

    using var ctx = new Bunit.TestContext();
    var navMan = ctx.Services.GetRequiredService<FakeNavigationManager>();
    var comp = ctx.RenderComponent<NavMenu>();
    var menu = comp.Find(@"a.nav-link[href=""counter""]");
    menu.Click();
    StringAssert.Contains("/counter", navMan.Uri);

testing result

Expected: String containing "/counter"
  But was:  "http://localhost/"

[linkdotnet]

Hey @jiaming0708.
It looks like you are testing what a browser would do when you click on a a href element. That is more like an integration test than a unit test (which is the intention of bUnit).
Furthermore you would test the implementation provided by Blazor. As a rule of thumb you do not want to test 3rd party code.
You can relay that Blazor (NavigationManager, Router, ...) does the right thing once you click on a href element.

[jiaming0708]

yap, totally agree with you, it's an integration test, not a unit test.
I should re-design my test case.

Thank you very much!!

[egil]

Hi there,

Can you share what your component under test looks like?

[linkdotnet]

@egil he's using the default NavMenu which gets shipped with the Blazor Wasm template:

<div class="top-row ps-3 navbar navbar-dark">
    <div class="container-fluid">
        <a class="navbar-brand" href="">BlazorApp1</a>
        <button title="Navigation menu" class="navbar-toggler" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
</div>

<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
    <nav class="flex-column">
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="" Match="NavLinkMatch.All">
                <span class="oi oi-home" aria-hidden="true"></span> Home
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="counter">
                <span class="oi oi-plus" aria-hidden="true"></span> Counter
            </NavLink>
        </div>
        <div class="nav-item px-3">
            <NavLink class="nav-link" href="fetchdata">
                <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
            </NavLink>
        </div>
    </nav>
</div>

@code {
    private bool collapseNavMenu = true;

    private string? NavMenuCssClass => collapseNavMenu ? "collapse" : null;

    private void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }

}

[egil]

Ahh, and does the NavLink component change url via NavigationManager or just navigate directly? If it's the first, then our fake NavigationManager should pick up on it. Otherwise, there is little point to his test, as he is basically testing that browser follows links when clicked.

The test should just verify that the right url is set.

[linkdotnet]

The NavLink navigates directly without the NavigationManager (click on an "a"-element with href).
It uses the NavigationManager internally for constructing the href attribute with the absolute uri but that's about it.
You would need a router component to set the NavigationManagers state.

Therefore yes it would add little value to test that behavior.