raise onclick for div element

[aschaefer94]

I have a div with an @OnClick event that is calling an EventCallback. In testing, when I say cut.Find().Click() on the element, the test runner says "The element does not have an event handler for the event 'onclick', nor any other events." I have verified that I am correctly finding the element, so it is not that I am using the Find() method incorrectly.

Any ideas on how I can force the onclick event handler on a div?

Thank you.

[egil]

For some reason there is no event handler attached to the element when you get that error.

To debug this, look at the cut.Markup property and look for blazor:onclick attributes. That is how the event handlers are identified when attached to elements.

[aschaefer94]

Okay. I'm not seeing any attributes with the blazor: prefix. Is there a specific way to make BUnit see the blazor attributes that I may be missing? The click is actually working when running the app, so I know my syntax is working in real functionality.

[egil]

It should just work, nothing special required. Can you share your component under test (or just the part that is causing the problem) and your test code. Then we should be able to figure it out.

[egil]

Btw. It could be related to #119. Are you sure the event is bound to the element you expect and not an element higher up the DOM tree?

[aschaefer94]

Here's the html of the component under test.

<div class="row justify-content-center">
	<div id="openGroupDeleteModal" class="mb-3 col-lg-6 col-sm-10 row justify-content-end" @onclick="GetDeleteGroupModalMessage">
		<div class="oi oi-trash pt-3 mt-1 mr-2" style="color:white"></div>
	</div>
</div>

In my test I am calling:
cut.Find("#openGroupDeleteModal").Click()

In debugging, I can see that it is getting the element I want, but isn't binding the click to it.

[egil]

Hmm that's weird. Is that the entire component?

I'll have to try it locally later when the kids are in bed and get back to you.

In the mean time, check out the example on the https://bunit.egilhansen.com/ front-page. That shows a basic use of triggering am @onclick handler. I assume your example looks like this?

[aschaefer94]

Yes, my code looks just like the example, except that I am clicking on a < div> element instead of a < button> element.

Sorry, I realized I missed the first part of your response there. No, it is not the entire component. There is markup wrapped in an @if(){} razor code block above what I pasted into the comment above.

[egil]

@aschaefer94 can you post a minimal example that has this problem, if you cannot share your full component?

[aschaefer94]

We just hit a breakthrough here. The click was calling an EventCallback, which we were not properly passing to our cut when it was instantiated. Apparently, if the target of the @OnClick is null, Blazor doesn't register the onclick event on the element.

[egil]

Sounds right. If the @if(){} block is toggled during the test using async code, you might have to look at cut.WaitForState (https://bunit.egilhansen.com/docs/interaction/awaiting-async-state.html) to get your test stable.

Ps. I would really appreciate a minimal example of this scenario, so I can see if this is something that can be made easier through bUnit.

[aschaefer94]

Sure.

--Component Under Test (GroupDelete.razor)--
@if(Show)
{
< h1>Show this message< /h1>
}
< div class="row justify-content-end">
< div class="col-lg-6 row justify-content-end" @OnClick="GetDeleteGroupModalMessage">
< div class="icon">< /div>
< /div>
< /div>

@code{
[Parameter]
public EventCallback GetDeleteGroupModalMessage { get; set; }

-- Working Test--
var cut = RenderComponent(EventCallback("GetDeleteGroupModalMessage", 0 => {}));

cut.Find("#openGroupDeleteModal").Click();

cut.Render();

cut.MarkupMatches(expectedMarkup);

--Broken Test--
var cut = RenderComponent();

cut.Find("#openGroupDeleteModal").Click();

cut.Render();

cut.MarkupMatches(expectedMarkup);

[egil]

Yeah, no, Blazor wont render that onclick handler to the DOM when there is nothing to call. Btw. that additional call to cut.Render() should not be necessary in this case. This runs fine on my machine:

<div>
	<div id="elmId" 
      @onclick="ClickHandler">
		CONTENT
	</div>
</div>
@code 
{
  [Parameter]
  public EventCallback ClickHandler { get; set; }
}

var called = false;
var cut = RenderComponent<Modal>(parameters => parameters
  .Add(p => p.ClickHandler, () => called = true)
);

cut.Find("#elmId").Click();

Assert.True(called);

Note I am using the strongly type way of passing parameters to a component, covered on this page: https://bunit.egilhansen.com/docs/providing-input/passing-parameters-to-components.html

[aschaefer94]

Thanks Egil, I appreciate how quick you are to respond to these threads!