bUnit: Performing a `Click()` on a Table Cell does not fire the `onclick` method in the page

Describe the bug Blazorise Datagrid (Not important, just what it is) Create a table, that has onclick overrides for each cell.

These are then routed through to allow detection of RowChnaged, RowSelecterd, RowClicked, etc methods.

What is needed is a way to simulate a cell click and for those methods to fire to be able to detect changes in the page selected item.

Example: None of these work.

                var cellLast = cut.FindAll("table tr td:nth-child(1)");
                await ClickAsync(cellLast[cellLast.Count-1]);

                //Other ways
                //var table = ((AngleSharpWrappers.Wrapper<AngleSharp.Dom.IElement>)cut.Find(@"table")).WrappedElement as IHtmlTableElement;
                //var lastRow = table.Rows.Last();
                //await ClickAsync(lastRow.Cells[0]);
                //await ClickAsync(lastRow.Cells[1]);
                //lastRow.Cells[0].Click();
                //lastRow.Cells[1].Click();
                //lastRow.Cells[0].DoFocus();
                //lastRow.Cells[0].DoClick();
                //lastRow.Cells[1].DoFocus();
                //lastRow.Cells[1].DoClick();

<div class="container-xl"><h2>
        Please select a Project (and model) to use: &nbsp; &nbsp;
        <button id="0HM8RI4IJMBEF" type="button" class="btn disabled" disabled blazor:onclick="1" blazor:elementReference="">Use Selected</button></h2>
    <div class="table-responsive"><table id="0HM8RI4IJMBEG" class="table table-striped table-bordered table-hover table-sm b-datagrid" blazor:ondrag="2" blazor:ondragend="3" blazor:ondragenter="4" blazor:ondragleave="5" blazor:ondragover="6" blazor:ondragstart="7" blazor:ondrop="8" blazor:elementReference=""><thead blazor:ondrag="9" blazor:ondragend="10" blazor:ondragenter="11" blazor:ondragleave="12" blazor:ondragover="13" blazor:ondragstart="14" blazor:ondrop="15"><tr blazor:onclick="23" blazor:ondrag="24" blazor:ondragend="25" blazor:ondragenter="26" blazor:ondragleave="27" blazor:ondragover="28" blazor:ondragstart="29" blazor:ondrop="30"><th scope="col" style="cursor: pointer" blazor:onclick="31" blazor:ondrag="32" blazor:ondragend="33" blazor:ondragenter="34" blazor:ondragleave="35" blazor:ondragover="36" blazor:ondragstart="37" blazor:ondrop="38">Project Name</th><th scope="col" style="cursor: pointer" blazor:onclick="39" blazor:ondrag="40" blazor:ondragend="41" blazor:ondragenter="42" blazor:ondragleave="43" blazor:ondragover="44" blazor:ondragstart="45" blazor:ondrop="46">Created UTC</th><th scope="col" style="cursor: pointer; width: 150px" blazor:onclick="47" blazor:ondrag="48" blazor:ondragend="49" blazor:ondragenter="50" blazor:ondragleave="51" blazor:ondragover="52" blazor:ondragstart="53" blazor:ondrop="54"></th></tr></thead>
        <tbody blazor:ondrag="16" blazor:ondragend="17" blazor:ondragenter="18" blazor:ondragleave="19" blazor:ondragover="20" blazor:ondragstart="21" blazor:ondrop="22"><tr class="table-row-selectable" blazor:onclick="71" blazor:ondrag="72" blazor:ondragend="73" blazor:ondragenter="74" blazor:ondragleave="75" blazor:ondragover="76" blazor:ondragstart="77" blazor:ondrop="78"><td class="text-nowrap" blazor:onclick="135" blazor:ondrag="136" blazor:ondragend="137" blazor:ondragenter="138" blazor:ondragleave="139" blazor:ondragover="140" blazor:ondragstart="141" blazor:ondrop="142">571bde52-2bbd-4994-b232-fbe118737e27</td><td blazor:onclick="143" blazor:ondrag="144" blazor:ondragend="145" blazor:ondragenter="146" blazor:ondragleave="147" blazor:ondragover="148" blazor:ondragstart="149" blazor:ondrop="150">&quot;2021-05-20T12:47:09.075698300Z&quot;</td><td style="width: 150px" blazor:onclick="151" blazor:ondrag="152" blazor:ondragend="153" blazor:ondragenter="154" blazor:ondragleave="155" blazor:ondragover="156" blazor:ondragstart="157" blazor:ondrop="158"><button id="0HM8RI4IJMBEU" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="327" blazor:elementReference="bb9df550-76b0-4187-a5af-a2a046e98136">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="79" blazor:ondrag="80" blazor:ondragend="81" blazor:ondragenter="82" blazor:ondragleave="83" blazor:ondragover="84" blazor:ondragstart="85" blazor:ondrop="86"><td class="text-nowrap" blazor:onclick="159" blazor:ondrag="160" blazor:ondragend="161" blazor:ondragenter="162" blazor:ondragleave="163" blazor:ondragover="164" blazor:ondragstart="165" blazor:ondrop="166">a5eb5e2f-ea25-41a6-b7a4-9da57fdf0512</td><td blazor:onclick="167" blazor:ondrag="168" blazor:ondragend="169" blazor:ondragenter="170" blazor:ondragleave="171" blazor:ondragover="172" blazor:ondragstart="173" blazor:ondrop="174">&quot;2021-05-20T12:47:10.053221500Z&quot;</td><td style="width: 150px" blazor:onclick="175" blazor:ondrag="176" blazor:ondragend="177" blazor:ondragenter="178" blazor:ondragleave="179" blazor:ondragover="180" blazor:ondragstart="181" blazor:ondrop="182"><button id="0HM8RI4IJMBEV" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="328" blazor:elementReference="073052b8-ba77-4d5b-b74e-84bef7175dd6">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="87" blazor:ondrag="88" blazor:ondragend="89" blazor:ondragenter="90" blazor:ondragleave="91" blazor:ondragover="92" blazor:ondragstart="93" blazor:ondrop="94"><td class="text-nowrap" blazor:onclick="183" blazor:ondrag="184" blazor:ondragend="185" blazor:ondragenter="186" blazor:ondragleave="187" blazor:ondragover="188" blazor:ondragstart="189" blazor:ondrop="190">a0754d47-5df9-4a4e-84fd-9d7487495470</td><td blazor:onclick="191" blazor:ondrag="192" blazor:ondragend="193" blazor:ondragenter="194" blazor:ondragleave="195" blazor:ondragover="196" blazor:ondragstart="197" blazor:ondrop="198">&quot;2021-05-20T12:47:38.612592200Z&quot;</td><td style="width: 150px" blazor:onclick="199" blazor:ondrag="200" blazor:ondragend="201" blazor:ondragenter="202" blazor:ondragleave="203" blazor:ondragover="204" blazor:ondragstart="205" blazor:ondrop="206"><button id="0HM8RI4IJMBF0" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="329" blazor:elementReference="1e15f046-092b-4967-b192-5cf367085599">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="95" blazor:ondrag="96" blazor:ondragend="97" blazor:ondragenter="98" blazor:ondragleave="99" blazor:ondragover="100" blazor:ondragstart="101" blazor:ondrop="102"><td class="text-nowrap" blazor:onclick="207" blazor:ondrag="208" blazor:ondragend="209" blazor:ondragenter="210" blazor:ondragleave="211" blazor:ondragover="212" blazor:ondragstart="213" blazor:ondrop="214">09b9941e-d9c6-4b35-9e0c-d392d47df140</td><td blazor:onclick="215" blazor:ondrag="216" blazor:ondragend="217" blazor:ondragenter="218" blazor:ondragleave="219" blazor:ondragover="220" blazor:ondragstart="221" blazor:ondrop="222">&quot;2021-05-20T12:47:40.541344Z&quot;</td><td style="width: 150px" blazor:onclick="223" blazor:ondrag="224" blazor:ondragend="225" blazor:ondragenter="226" blazor:ondragleave="227" blazor:ondragover="228" blazor:ondragstart="229" blazor:ondrop="230"><button id="0HM8RI4IJMBF1" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="330" blazor:elementReference="841b3865-20b2-424f-94a1-f7cb16a13f19">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="103" blazor:ondrag="104" blazor:ondragend="105" blazor:ondragenter="106" blazor:ondragleave="107" blazor:ondragover="108" blazor:ondragstart="109" blazor:ondrop="110"><td class="text-nowrap" blazor:onclick="231" blazor:ondrag="232" blazor:ondragend="233" blazor:ondragenter="234" blazor:ondragleave="235" blazor:ondragover="236" blazor:ondragstart="237" blazor:ondrop="238">2d25fb2e-3136-4e20-b3d1-a02eb2efc249</td><td blazor:onclick="239" blazor:ondrag="240" blazor:ondragend="241" blazor:ondragenter="242" blazor:ondragleave="243" blazor:ondragover="244" blazor:ondragstart="245" blazor:ondrop="246">&quot;2021-05-20T12:50:56.061792700Z&quot;</td><td style="width: 150px" blazor:onclick="247" blazor:ondrag="248" blazor:ondragend="249" blazor:ondragenter="250" blazor:ondragleave="251" blazor:ondragover="252" blazor:ondragstart="253" blazor:ondrop="254"><button id="0HM8RI4IJMBF2" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="331" blazor:elementReference="871dedf3-f100-47a3-b309-270322d9b675">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="111" blazor:ondrag="112" blazor:ondragend="113" blazor:ondragenter="114" blazor:ondragleave="115" blazor:ondragover="116" blazor:ondragstart="117" blazor:ondrop="118"><td class="text-nowrap" blazor:onclick="255" blazor:ondrag="256" blazor:ondragend="257" blazor:ondragenter="258" blazor:ondragleave="259" blazor:ondragover="260" blazor:ondragstart="261" blazor:ondrop="262">56bf53ce-fad2-4491-9bfe-df952d180e32</td><td blazor:onclick="263" blazor:ondrag="264" blazor:ondragend="265" blazor:ondragenter="266" blazor:ondragleave="267" blazor:ondragover="268" blazor:ondragstart="269" blazor:ondrop="270">&quot;2021-05-20T12:56:00.321929700Z&quot;</td><td style="width: 150px" blazor:onclick="271" blazor:ondrag="272" blazor:ondragend="273" blazor:ondragenter="274" blazor:ondragleave="275" blazor:ondragover="276" blazor:ondragstart="277" blazor:ondrop="278"><button id="0HM8RI4IJMBF3" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="332" blazor:elementReference="00d35b37-828c-47ed-aff2-6d3901c59384">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="119" blazor:ondrag="120" blazor:ondragend="121" blazor:ondragenter="122" blazor:ondragleave="123" blazor:ondragover="124" blazor:ondragstart="125" blazor:ondrop="126"><td class="text-nowrap" blazor:onclick="279" blazor:ondrag="280" blazor:ondragend="281" blazor:ondragenter="282" blazor:ondragleave="283" blazor:ondragover="284" blazor:ondragstart="285" blazor:ondrop="286">04a2e7f5-5d7c-4b31-9fdd-df60f2cacf12</td><td blazor:onclick="287" blazor:ondrag="288" blazor:ondragend="289" blazor:ondragenter="290" blazor:ondragleave="291" blazor:ondragover="292" blazor:ondragstart="293" blazor:ondrop="294">&quot;2021-05-20T13:03:18.727588700Z&quot;</td><td style="width: 150px" blazor:onclick="295" blazor:ondrag="296" blazor:ondragend="297" blazor:ondragenter="298" blazor:ondragleave="299" blazor:ondragover="300" blazor:ondragstart="301" blazor:ondrop="302"><button id="0HM8RI4IJMBF4" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="333" blazor:elementReference="df430233-fb0e-46c4-93f3-7398e6d4e880">                        Archive Designs
                    </button></td></tr><tr class="table-row-selectable" blazor:onclick="127" blazor:ondrag="128" blazor:ondragend="129" blazor:ondragenter="130" blazor:ondragleave="131" blazor:ondragover="132" blazor:ondragstart="133" blazor:ondrop="134"><td class="text-nowrap" blazor:onclick="303" blazor:ondrag="304" blazor:ondragend="305" blazor:ondragenter="306" blazor:ondragleave="307" blazor:ondragover="308" blazor:ondragstart="309" blazor:ondrop="310">45cb783c-f566-49f5-80fc-5f846f698831</td><td blazor:onclick="311" blazor:ondrag="312" blazor:ondragend="313" blazor:ondragenter="314" blazor:ondragleave="315" blazor:ondragover="316" blazor:ondragstart="317" blazor:ondrop="318">&quot;2021-05-20T13:14:05.195472300Z&quot;</td><td style="width: 150px" blazor:onclick="319" blazor:ondrag="320" blazor:ondragend="321" blazor:ondragenter="322" blazor:ondragleave="323" blazor:ondragover="324" blazor:ondragstart="325" blazor:ondrop="326"><button id="0HM8RI4IJMBF5" type="button" class="btn btn-primary disabled no-padding" disabled blazor:onclick="334" blazor:elementReference="62cc8471-5ac3-48b4-bb6b-186f5bd416d1">                        Archive Designs
                    </button></td></tr></tbody></table></div>

With this test:

Version info:

bUnit version Latest
.NET Runtime and Blazor version 5.0 latest
OS type and version Window 10 Pro

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 49 (22 by maintainers)

Commits related to this issue

fix: captured error message from event dispatcher in renderer (related to #399) — committed to bUnit-dev/bUnit by egil 3 years ago
fix: Click and DoubleClick methods have correct detail default set. Closes #399 — committed to bUnit-dev/bUnit by egil 3 years ago
fix: Click and DoubleClick methods have correct detail default set. Closes #399 — committed to bUnit-dev/bUnit by egil 3 years ago

Most upvoted comments

Hello, From Blazorise side, we’ve debugged the code. It successfully triggers our internal click. However the event arguments for the click brings a Detail of 0, while Blazorise expects that the Detail equals the number of clicks the user has issued. (Detect single click vs double click)

We didn’t find any issue with this behaviour on the browsers.

Any idea why the behaviour is different with BUnit? @egil can you help?

Edit: Adding Blazorise’s branch test for this issue if you guys need/want to fork/test/debug blazorise. Branch : https://github.com/Megabit/Blazorise/tree/rel-0.9.4-BUnit-DataGrid-RowClickTrigger

Thanks!

David-Moreira on Sep 26, 2021

Just to confirm Click(1) makes things work… Thanks for sticking with this

Smurf-IV on Oct 11, 2021

Hello, From Blazorise side, we’ve debugged the code. It successfully triggers our internal click. However the event arguments for the click brings a Detail of 0, while Blazorise expects that the Detail equals the number of clicks the user has issued. (Detect single click vs double click)

That explains it. bUnit doesn’t set that value by default, but I think it should set it to one when you call Click and two when you call DoubleClick.

Luckily that’s an easy fix, e.g. see the Click extension method here, I just need to set the detail argument to 1 instead of default in this case.

@David-Moreira would you be so kind to call the method like this to verify that this will work: cut.Find("button").Click(detail: 1).

And thank you for your help debugging this. You and the other people over at the Blazorise team are doing great work!

egil on Sep 27, 2021

if using Async version, below is what you need

cell.ClickAsync(new MouseEventArgs{Detail = 1});

rbillott on Oct 5, 2023

The fix has been merged in to main, so it should be available as a nightly release soon (see how to get it here: https://github.com/bUnit-dev/bUnit/discussions/209).

egil on Sep 30, 2021

@David-Moreira would you be so kind to call the method like this to verify that this will work: cut.Find(“button”).Click(detail: 1).

Tested. Works great.

David-Moreira on Sep 28, 2021

Edit: nvm there isn’t repeated clicking on bunit haha 😆

Haha yeah, well, it would be tricky to figure out when users were intending to emulate consecutive clicks or just one click followed by another.

This is mostly an issue because the users of Blazorise (and perhaps other 3rd party libs that uses the detail property) don’t know that the detail property should be set.

Users testing their own libs that uses detail will know to set it and not run into trouble.

But hopefully I can make folks lives easier by setting more sane detail values. However, this scenario from your MDN link is going to be hard:

For mousedown or mouseup events, UIEvent.detail is 1 plus the current click count.

egil on Sep 28, 2021

This will have to wait a few days, but I’ll get to the test eventually

Smurf-IV on Aug 12, 2021

@Smurf-IV, also, try adding logging to the test runner, as described here: https://bunit.dev/docs/misc-test-tips.html#capturing-logs-from-ilogger-in-test-output

This will give us insight into what is going on in the renderer.

egil on Aug 7, 2021

I’ve actually run into something similar here. After some testing the problem is that it does not execute onclick if there is a reference to a local variable. Stripping it down to the simplest test: @for(var i = 0;i<5;i++) { var index = i; <div @onclick="@(() => { Console.WriteLine(index); })">test</div> } If you call cut.FindAll(“div”).ElementAt(0).Click(), it will fail to write to console. If you hardcode the parameter in the writeline instead of referencing the local variable it will execute OK.

This sort of local variable reference works fine with hosted blazor instead of bunit.

Using bunit 1.2.36-preview

isulzer on Jul 30, 2021

I would really like to help but I’m also too overworked lately. Can’t promise anything yet.

stsrki on Jun 2, 2021

@Smurf-IV not sure what’s going on tbh. If we have bUnits JSInterop in strict mode, it only fails the test if some an seemingly unrelated JS call is not configured. I will have to debug with Blazorise’s source code locally to figure out what is going on. Unfortunately I am sort on time these days, so I cannot promise an answer soon. Maybe the Blazorise folks have time to look into this?

egil on Jun 2, 2021

As requested: TestBUnitClick.zip

Smurf-IV on May 24, 2021

.Click() should work. Can you create a minimal component under test that shows this bug?

egil on May 21, 2021