How to make this test work with DevExpress DxMenuItem?

[h2df]

Trying to create my first bUnit test here and got stuck right away...

I have a component NavMenu which uses the DevExpress DxMenuItem . Here's the simplified code:

<DxMenu>
        <Items>
            <DxMenuItem Text="Home" NavigateUrl="/" />
       </Items>
</DxMenu>

Here's the (failed) test code:

    public NavMenuTest()
    {
        ....
        Services.AddDevExpressBlazor();
        JSInterop.Setup<String>("DxBlazor.Menu.addNavItemClickHandler", _ => true);
    }

    [Fact]
    public void HomeItem_Exists_And_NavigatesToHomepage()
    {
        var cut = RenderComponent<NavMenu>();
        var homeItem = cut.Find(".flex-column > li:nth-child(1) > dxbl-menu-item:nth-child(1) > a:nth-child(1)");
        homeItem.TextContent.MarkupMatches("Home"); //this passes fine
        var navManager = Services.GetRequiredService<FakeNavigationManager>();
        navManager.NavigateTo("somewhere");
        homeItem.Click();
        Assert.Equal("http://localhost/", navManager.Uri);
    }

The idea is to first verify that the item with the text "Home" exists, then clicking on the item should bring the user from "somewhere" back to the homepage.

Running the test won't update the mock NavigationManager 's Uri. The History property of the navigation manager also only records one navigation to "somewhere".

I can verify that the click event is fired as expected. I can also verify that the JSInterop has received the invocations with specified identifier. So my guess is that the navigation is done in the JS, hence the mock JS runtime won't do anything.

What is the correct way to test my component then? Any suggestion is appreciated. Thanks!

[egil]

Hi @h2df,

A few pointers:

1. The FakeNavigationManager that comes with bUnit does not intercept <a href="/somewhere">Home</a> navigations and update its location.
2. If the homeItem is just a link that points to some page, then you should just assert that the href attribute of it points to the expected page. There is no point in asserting that it will navigate to the expected page if clicked, as that is a framework-level implementation detail, which Microsoft/Blazor team already has tests for. In other words, you can assume that a link pointing to a different URL will work as expected.
3. Remember, only test code you are responsible for. Don't test browser functionality or Blazors built-in functionality. Also, I would strongly consider not testing 3rd party components, e.g. DevExpress components, either, since that is what you are paying them to do. So a completely different approach could be this:

var cut = RenderComponent<NavMenu>();

var menuItems = cut.FindComponents<DxMenuItem>();

DxMenuItem firstMenuItem = menuItems.First().Instance;

Assert.Equal("Home", firstMenuItem.Text);
Assert.Equal("/", firstMenuItem.NavigateUrl);

This tests that there is a DxMenuItem in the expected position in the component tree with the expected parameter values passed to it. Then you just have to trust that DevExpress does what they promise when you pass the correct values to their components. This way, your tests will not be tied to implementation details of their components, which means your tests won't break if they change how they do navigation, e.g. moving to use NavigationManager instead of a href attribute-based link.

Hope this helps!