bUnit testing a dropdown button

[BenPughyy]

Hi!

I have a component, namely a Syncfusion Dropdown Button, that I am trying to write some tests for in bUnit. I took some advice on an earlier discussion on this GitHub, and I'm not testing the core functionality of the component, just the parameters I have passed down. I need to access the Context Menu within the dropdown button in order to do that, but I'm unsure on what I should be using to access it? I'm sure bUnit have the ability to, I'm just not that good with it at the moment.
The dropdown button, when clicked, renders a Syncfusion ContextMenu component in a popup container, and I have tried the below but unsure on how to then test the ContextMenu itself:

[Fact]
public void CheckParametersPassDownToComponentCorrectly_ItemSelected()
{
    // Add Syncfusion Service to Test, in order to render Sf components.
    using var testContext = new TestContext();
    testContext.Services.AddSyncfusionBlazor();
    testContext.Services.AddOptions();

    // Populate Context Menu
    List<ContextMenuItemModel> ContextMenu = new List<ContextMenuItemModel>()
    {
        new ContextMenuItemModel() { Content="Users", IconCss="fa-regular fa-user-plus", Id="add-user" },
        new ContextMenuItemModel() { Content="Workflows", IconCss="fa-regular fa-sitemap", Id="add-workflow" },
        new ContextMenuItemModel() { Content="Risks", IconCss="fa-regular fa-triangle-exclamation", Id="add-risk" },
    };

    using var cut = testContext.RenderComponent<DropDownButton>(parameters => parameters
    .Add(p => p.PopupItems, ContextMenu));

    var button = cut.Find(".e-dropdown-btn"); // Css class of Syncfusion button
    button.Click();

    var contextMenu = cut.FindComponent<SfContextMenu<ContextMenuItemModel>>; // This comes back not null, so it does find the context menu when the button has been clicked.

    using var context = testContext.RenderComponent<contextMenu>();  // this was me attempting to access it, but it isn't allowing me to.
}

[linkdotnet]

context is already a rendererd component. So you can try to find stuff on it like you would do with the cut.
That said, what do you try to achieve?

[BenPughyy]

Hi,

Apologies for my explanation. It isn't really very helpful. I am testing the button (underlined in Red), and trying to access the popup menu (underlined in Blue). When i use the dot operator on the variable contextMenu, it doesn't allow me to interact with it the way it does with cut

I need to access the Id of one of these ContextMenu items, to verify that the parameter passes down to the component correctly.

[linkdotnet]

I am no expert in SyncFusion - but couldn't you just retrieve every MenuItem component and check the id's against them?

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

PS:
RenderComponent is a method defined on the TestContext(Base). You would call RenderComponent to initially render a component - but as you already did this, everything is "rendered" - including your context menu.

If you would print out the markup: cut.Markup or contextMenu.Markup you would see your entries (and probably id's as well).

[BenPughyy]

Thank you - I will give it a try. I'm unsure whether the Syncfusion render their menu as a <ul> or a component, but I will investigate further. Thank you for the prompt responses.