Lambda in eventcallback

[anddrzejb]

I am trying to test a fairly complex component of AntDesign (datepicker). My current issue is that for some reason bunit blocks(?) raising event if lambda is used to define the handling. Without going deep into details (yet), I wanted to test the result of this onclick event:

<td title="2021-04-05" class="ant-picker-cell ant-picker-cell-in-view">
    <div class="ant-picker-cell-inner" @onclick="@(() => CellClick(currentColDate))">5</div>
</td>

I find this element in my tests and execute click on it

(...)
var cellToClick = cut.FindAll("div.ant-picker-cell-inner")[15];
cellToClick.Click();

This does not work, the breakpoint on CellClick is never reached (here is another minor issue that I have - my understanding is that I should be able to find the div that I want with a css selector like this [title=2021-04-05] but Find method cannot find it). I do find the proper div, the cellToClick contains markup I am expecting.
So just to do a sanity check, I modified the code to remove lambda (also had to modify CellClick)

<td title="2021-04-05" class="ant-picker-cell ant-picker-cell-in-view">
    <div class="ant-picker-cell-inner" @onclick="CellClick">5</div>
</td>

Now the breakpoint in CellClick is fired. The problem is that I really need the lambda because I need to pass this extra data currentColDate. Is there a simple explanation to this or shall I try to do a repro?

This component works as it is expected when run in browser.

[egil]

Hi,

I think I need you to reproduce this in a small downloadable sample. My own example below works with an inline lambda eventcallback:

@* Index.razor *@
<div @onclick="@(() => Counter++)">@Counter</div>
@code
{
    public int Counter { get; set; }
}

@* IndexTest.razor *@
@inherits TestContext
@code
{
    [Fact]
    public void Test()
    {
        var cut = Render(@<Index />);
        cut.Find("div").MarkupMatches(@<div>0</div>);
                
        cut.Find("div").Click();
        
        cut.Find("div").MarkupMatches(@<div>1</div>);
    }
}

[anddrzejb]

I was trying to prepare a repro, but until now, I failed. This component is a complex component that nests another 5 level of subcomponents while also managing a DOM independent 6th component. Anyway, whining aside, at some point I decided to get bUnit source and see what's up. I haven't managed yet to figure it out completely, but, I found out that when I debug occasionally the code works. Most of the time, it does not and fails with exception (that apparently is swallowed) There is no event handler associated with this event. EventId: '73'. (Parameter 'eventHandlerId')

How should I read that? The event was somewhere registered but was removed later on?

More context

So maybe more context is needed here. DatePicker in its base form is rendered as an input element (wrapped in divs but that is mostly for styling purposes):

When it is clicked, an overlay is opened with the picker:

That overlay is not really a part of the DatePicker DOM. If it does not exist, it is added to the DOM (it is rendered separately and resides actually outside <app> element). If it exists, its visibility is toggled. So, when rendered it looks like this:

In tests, it is rendered as a separate div. So, before click, when cut is rendered, it looks like this:

And after I simulate clicking on the input (which suppose to open the overlay), it looks like this:

The second click that I want to test (the one that should fire the event that does not fire in bUnit) is actually in the overlay. This is the date that a user is expected to click.

Is it possible that this failure is happening due to overlay being a component that is rendered independently in DOM? It is a child component in the tree of components used by DatePicker.

[egil]

There is no event handler associated with this event. EventId: '73'. (Parameter 'eventHandlerId').

This indicates that an event handle was bound to the element you called Click() on, but that it is not any more. Can happen if the element is removed from the DOM or the event handler is removed/disposed.

Why though. My guess is you have some async code that updates the RenderTree in the render thread while the test thread queries the DOM tree and calls the click method... So a race condition. The way to her around this is to use the WaitForState or WaitForAssertion methods to block in the test thread until the right state is there.

I would also recommend trying to write tests that isolate components more. I talk about my approach to this in this talk: https://twitter.com/egilhansen/status/1403660454287843328?s=19