Comments (22)
Jeff - I want to help you, but you also have to do some work and provide me with the information I need to be able to do so. And you really need to take a look at the GitHub markdown documentation and wrap your markup and code in the appropriate tags - https://guides.github.com/features/mastering-markdown/
As for your latest comment, we already looked at the rendered markup and it does not reveal the problem. Please look at the Bug Issue template for the appropriate information to provide to be able to get help: https://github.com/egil/razor-components-testing-library/issues/new?assignees=&labels=&template=bug_report.md&title=
from bunit.
What @jpiell is saying is that when you create a form, in blazor, using the parameter OnValidSubmit, it will not cause the cut.Find("form").Submit() to fire.
This works
<EditForm Model="@Model.CreateUserModel" OnSubmit="@CreateUser">
<button type=submit>
</EditForm>
cut.Find("form").Submit()
This does not work
<EditForm Model="@Model.CreateUserModel" OnValidSubmit="@CreateUser">
<button type=submit>
</EditForm>
cut.Find("form").Submit()
By the way @jpiell, the reason it's not working for you is that the model associated with your form is not considered a valid one. You're are effectively trying to submit an empty model because of the way you're trying to set the values for your model's fields. You will need to populate the fields for your model like so:
cut.Find("#FirstName").Input("John Doe");
Instead of using InnerHtml. Then you should be able to use the OnValidSubmit. Hope this helps if you haven't already figured it out.
from bunit.
You likely have to trigger the forms submit event handler, not the submit button. E.g. cut.Find("form").Submit()
.
I think it might be worth enhancing the Click()
logic such that if a submit button is clicked, if it does not have a event handler itself and the form it belongs to do, then the forms submit event handler is triggered.
from bunit.
from bunit.
Ok. Try setting a break point in your test, and inspect cut.Markup
. That should show you the raw rendered markup, and you can look for attributes prefixed with "blazor" for possible triggers available to you.
Post the cut.Markup
here if you need more help.
from bunit.
from bunit.
Well, in that case, you can use the .Click()
on the element that had the blazor attribute.
from bunit.
from bunit.
The number in the blazor attribute is just used to tie the event handler to the binding. It is generated, but if you call Click() on the same element each time, then the same trigger should be called.
from bunit.
from bunit.
Ok - I am trying cut.Find("#Save_button").Submit();
This throws:
System.ArgumentException
HResult=0x80070057
Message=The element does not have an event handler for the event 'onsubmit'.
Source=Egil.RazorComponents.Testing.Library
StackTrace:
at Egil.RazorComponents.Testing.EventDispatchExtensions.GeneralEventDispatchExtensions.TriggerEventAsync(IElement element, String eventName, EventArgs eventArgs)
at Egil.RazorComponents.Testing.EventDispatchExtensions.InputEventDispatchExtensions.SubmitAsync(IElement element)
at Egil.RazorComponents.Testing.EventDispatchExtensions.InputEventDispatchExtensions.Submit(IElement element)
at TIPS.ComponentTests.CommonComponentTests.LookupRendersCorrectlyAddItem() in C:\Projects\TIPS\TIPS.ComponentTests\Common.Components\CommonComponentTests.cs:line 336
Here is the cut.Markup:
<header>
<h1 class="h3"> Management</h1>
</header>
<div class="mb-2">
<button id="Add_button" class="btn btn-primary" blazor:onclick="1"><span class="oi oi-plus mr-2"></span>Add </button>
</div>
<div class="contentWrapper fade-in">
<div id="0bd29dd7-9e93-4905-85e9-ee56ae38c10a" class="k-grid k-widget telerik-blazor" style="">
<div class="k-grid-header" id="8a790449-04a5-41f2-9009-3307b0ef8828">
<div class="k-grid-header-wrap">
<table role="grid" style="width: ;">
<colgroup>
<col style="width: 250px" />
<col style="width: " />
<col style="width: 100px" />
<col style="width: 200px" />
<col style="width: 130px" />
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="2">
Name
</span>
<div id="faa72a8f-e6dc-4513-bfcc-b1d320dca5d7" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="3">
Description
</span>
<div id="8e76869c-3b3a-496f-8d52-c84f7f63a965" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="4">
Active
</span>
<div id="e075f1c9-67c1-48da-9a80-fb3adf77011a" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="5">
Date
</span>
<div id="ad22b32d-4033-4c20-b982-94d68000e4f7" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="6">
Action
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-grid-content k-virtual-content" id="6ff53f79-f92e-4e65-87b9-e80c6562dd98">
<div style="position: relative;">
<div class="k-virtual-position" style="" data-translate="0" data-total="0">
<table data-role="grid" role="grid" class="k-grid-table" style="height: auto; width: ;">
<colgroup>
<col style="width: 250px;" />
<col style="width: ;" />
<col style="width: 100px;" />
<col style="width: 200px;" />
<col style="width: 130px;" />
</colgroup>
<tbody role="rowgroup">
</tbody>
</table>
</div>
</div>
<div class="k-height-container">
<div style=""></div>
</div>
</div>
</div>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap telerik-blazor" data-role="pager">
<span blazor:onclick="7" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-end-left"></span>
</span>
<span blazor:onclick="8" aria-label="Go to the previous page" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-60-left"></span>
</span>
<ul class="k-pager-numbers k-reset">
</ul>
<span blazor:onclick="9" aria-label="Go to the next page" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-60-right"></span>
</span>
<span blazor:onclick="10" aria-label="Go to the last page" title="Go to the last page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-end-right"></span>
</span>
<span class="k-pager-info k-label">
0 - 0 of 0 items
</span>
</div>
</div>
</div>
<div class="k-dialog-wrapper">
<div class="k-overlay"></div>
<div class="k-widget k-window k-window-wrapper telerik-blazor k-centered " style="width: 800px;" role="dialog">
<div class="k-window-titlebar k-dialog-titlebar k-header">
<div class="k-window-title k-dialog-title">
<strong>Add </strong>
</div>
</div>
<div class="k-content k-window-content k-dialog-content" tabindex="0" role="dialog">
<form blazor:onsubmit="11">
<div class="form-group ">
<label class="control-label" for="Name">
Name
</label>
<input class="form-control" id="Name_textbox" name="Name" type="text" blazor:onchange="12" />
</div>
<div class="form-group ">
<label class="control-label" for="Description">
Description
</label>
<textarea class="form-control" id="Description_textarea" name="Description" rows="7" blazor:onchange="13"></textarea>
</div>
<div class="pb-2 pt-2">
<div class="mat-switch mdc-switch mdc-switch--checked" style="" Id="matBlazor_id_b6c1933d-56fa-486a-96b3-efc73afb4862" blazor:elementreference="64a55ed8-e5f2-4301-ad92-3c54d589b686">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="matBlazor_id_b6c1933d-56fa-486a-96b3-efc73afb4862" class="mdc-switch__native-control" role="switch" checked blazor:onchange="15" blazor:elementreference="a6444ba6-7c8c-4ffa-a01b-b86f01984e42"></input>
</div>
</div>
</div>
<label for="matBlazor_id_b6c1933d-56fa-486a-96b3-efc73afb4862"> Active</label>
</div>
<div class="d-flex flex-row-reverse">
<button id="Save_button" type="submit" class="btn btn-primary ml-2">Save</button>
<button id="Cancel_button" type="button" class="btn btn-light ml-2" blazor:onclick="14">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div class="telerik-blazor k-animation-container " id="c19ee251-a6e1-40d0-b72d-fd63748faece" style="width: ; z-index: 10002; "></div>
<div class="telerik-blazor k-animation-container " id="6354648f-c6ad-457b-be19-f5ce3f4a1d29" style="width: ; z-index: 10002; "></div>
<div class="telerik-blazor k-animation-container " id="914ce7fd-08e6-4ee9-b32a-fc24ea72380b" style="width: ; z-index: 10002; "></div>
<div class="telerik-blazor k-animation-container " id="5459e71b-70af-472c-aadb-578f0df301af" style="width: ; z-index: 10002; "></div>
I do see the
How can I specify this as the submit handler? It has not been generated util run time. Do I use a lambda?
from bunit.
I am not familier with the Telerik controls, so I cannot be sure, but if you are trying to submit the <form blazor:onsubmit="11">
at the bottom part of the markup, you need to use Submit()
I think. At least it looks as if Blazor has added an onSubmit
binding to that form. So e.g. cut.Find("form").Submit()
.
Btw. Please use markdown and take the time to format your code snippets when posting issues here on Github. I edited your previous comment to make the markup easier to read.
It makes it much easier to help you. Google can help you find the documentation you need.
from bunit.
from bunit.
OK. To understand whats going on, you will have to post your CUT as well, so I can inspect the razor/c# code you have written. If you cannot share your code, then please provide a minimum example where this issue is present (this is the preferred way anyway). That will make it much easier for me to help and potentially fix any problems.
See the issue template for bug report for the type of information I generally prefer having available to help effectively: https://github.com/egil/razor-components-testing-library/issues/new/choose
from bunit.
<header>
<h1 class="h3"> Management</h1>
</header>
<div class="mb-2">
<button id="Add_button" class="btn btn-primary" blazor:onclick="1"><span class="oi oi-plus mr-2"></span>Add </button>
</div>
<div class="contentWrapper fade-in">
<div id="d85d3145-091f-449b-9976-8263b7945b41" class="k-grid k-widget telerik-blazor" style="">
<div class="k-grid-header" id="cbcfd24d-bbb6-4679-942d-a223dd523aef">
<div class="k-grid-header-wrap">
<table role="grid" style="width: ;">
<colgroup>
<col style="width: 250px" />
<col style="width: " />
<col style="width: 100px" />
<col style="width: 200px" />
<col style="width: 130px" />
</colgroup>
<thead role="rowgroup">
<tr role="row">
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="2">
Name
</span>
<div id="f9934efe-b945-482c-9e1d-5e5e55ad17dc" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="3">
Description
</span>
<div id="f0062488-616d-435b-beed-c3e3c5ca4c7e" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="4">
Active
</span>
<div id="f60e8b63-55ce-4a93-ab9b-521efc35f668" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="5">
Date
</span>
<div id="82416859-1d19-42d2-959c-e0f3985128b2" class="k-grid-filter ">
<span class="k-icon k-i-filter"></span>
</div>
</th>
<th colspan="1" class="k-header" data-role="columnsorter">
<span class="k-link" blazor:onclick="6">
Action
</span>
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="k-grid-container">
<div class="k-grid-content k-virtual-content" id="59cc1806-2bcc-4287-949d-4bd4bbd75a4c">
<div style="position: relative;">
<div class="k-virtual-position" style="" data-translate="0" data-total="0">
<table data-role="grid" role="grid" class="k-grid-table" style="height: auto; width: ;">
<colgroup>
<col style="width: 250px;" />
<col style="width: ;" />
<col style="width: 100px;" />
<col style="width: 200px;" />
<col style="width: 130px;" />
</colgroup>
<tbody role="rowgroup">
</tbody>
</table>
</div>
</div>
<div class="k-height-container">
<div style=""></div>
</div>
</div>
</div>
<div class="k-pager-wrap k-grid-pager k-widget k-floatwrap telerik-blazor" data-role="pager">
<span blazor:onclick="7" aria-label="Go to the first page" title="Go to the first page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-end-left"></span>
</span>
<span blazor:onclick="8" aria-label="Go to the previous page" title="Go to the previous page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-60-left"></span>
</span>
<ul class="k-pager-numbers k-reset">
</ul>
<span blazor:onclick="9" aria-label="Go to the next page" title="Go to the next page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-60-right"></span>
</span>
<span blazor:onclick="10" aria-label="Go to the last page" title="Go to the last page" class="k-link k-pager-nav k-state-disabled" tabindex="-1">
<span class="k-icon k-i-arrow-end-right"></span>
</span>
<span class="k-pager-info k-label">
0 - 0 of 0 items
</span>
</div>
</div>
</div>
<div class="k-dialog-wrapper">
<div class="k-overlay"></div>
<div class="k-widget k-window k-window-wrapper telerik-blazor k-centered " style="width: 800px;" role="dialog">
<div class="k-window-titlebar k-dialog-titlebar k-header">
<div class="k-window-title k-dialog-title">
<strong>Add </strong>
</div>
</div>
<div class="k-content k-window-content k-dialog-content" tabindex="0" role="dialog">
<form blazor:onsubmit="11">
<div class="form-group ">
<label class="control-label" for="Name">
Name
</label>
<input class="form-control" id="Name_textbox" name="Name" type="text" blazor:onchange="12" />
</div>
<div class="form-group ">
<label class="control-label" for="Description">
Description
</label>
<textarea class="form-control" id="Description_textarea" name="Description" rows="7" blazor:onchange="13"></textarea>
</div>
<div class="pb-2 pt-2">
<div class="mat-switch mdc-switch mdc-switch--checked" style="" Id="matBlazor_id_b85ba47b-dbda-4703-906a-41db7bba0cef" blazor:elementreference="9ba04a76-3974-4adf-b6b7-6293ad940616">
<div class="mdc-switch__track"></div>
<div class="mdc-switch__thumb-underlay">
<div class="mdc-switch__thumb">
<input type="checkbox" id="matBlazor_id_b85ba47b-dbda-4703-906a-41db7bba0cef" class="mdc-switch__native-control" role="switch" checked blazor:onchange="15" blazor:elementreference="16e661e3-4c83-421e-8bde-af07395b17ca"></input>
</div>
</div>
</div>
<label for="matBlazor_id_b85ba47b-dbda-4703-906a-41db7bba0cef"> Active</label>
</div>
<div class="d-flex flex-row-reverse">
<button id="Save_button" type="submit" class="btn btn-primary ml-2">Save</button>
<button id="Cancel_button" type="button" class="btn btn-light ml-2" blazor:onclick="14">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<div class="telerik-blazor k-animation-container " id="3055106e-823e-4713-9bdc-cfd02dce6cac" style="width: ; z-index: 10002; ">
</div>
<div class="telerik-blazor k-animation-container " id="c552f561-9d9b-419e-b748-3aab7ce9cfc7" style="width: ; z-index: 10002; ">
</div>
<div class="telerik-blazor k-animation-container " id="b4493031-0499-41f9-9910-c2f98122b2bd" style="width: ; z-index: 10002; ">
</div>
<div class="telerik-blazor k-animation-container " id="4ce159db-8b71-479d-ad88-171e1527427c" style="width: ; z-index: 10002; ">
</div>
from bunit.
Egil - I am not familiar with Markdown. I didn't quite grasp the tags and what I should do. I pasted the cut.Markup because you asked me to in your last message.
I think what you are really saying is could I provide a sample app? If this is true, I would be happy to put one together,
Would that help you to figure out when I went wrong?
Also you idea of doing a submit when there is not a click event would most likely be correct as from what I read, it seems like this is the behavior that blazor follows when a button has the type submit and a form has the OnValidSubmit property.
The documentation also states that calling submit on the form will not cause the component to raise the events and that the proper way is clicking the button that has the type submit.
Here is a link to the documentation:
https://docs.microsoft.com/en-us/aspnet/core/blazor/forms-validation?view=aspnetcore-3.1
from bunit.
Jeff, take a look at the two links in my previous comment. The first is to docs on using markdown in GitHub. Hint, there is a preview button.
The second is a link to the bug report issue template. It should make it clear what you need to provide to make it easy to help you.
from bunit.
from bunit.
How are you writing your comments here? Are you just replying to the email GitHub sends you?
In that case, I get why you can't figure out markdown or know about the preview button. Please start writing comments and creating issues through GitHub.com, that will make it much easier for everyone to read your comments and you should have a much easier time.
from bunit.
And yes. I need a minimum example, with as little code as possible to show the issue. Or, alternatively, the things outlined in the bug report template.
from bunit.
I'll close this issue. If you still need help, just comment again.
from bunit.
Thanks for explaining @andrewmorris-dev
from bunit.
Related Issues (20)
- `Render(RenderFragment)` doesn't re-render and has other limitations HOT 9
- `IRenderedComponent.InvokeAsync` should support return values HOT 8
- Enable test doubles for (3rd party) components generation HOT 20
- Problems running docs project locally HOT 6
- Docs: search exposes pages that are not in the TOC
- bunit.web has dependency on alpha version of AngleSharp.Css HOT 2
- No way to set value for property with `[SupplyParameterFromQuery]` but not `[Parameter]` HOT 6
- Support for keyed services HOT 5
- Cannot trigger RowSelected eventcallback on SFgrid HOT 3
- `WrapperElementsGenerator` cachable
- IJSUnmarshalledRuntime removed in .NET 9 HOT 2
- FakeNavigationManager registration changed from Singleton to Scoped HOT 7
- bUnit does not set parameters as a result of two-way binding or chained binding when values are updated. HOT 6
- `@formname` attribute always causes an error: System.InvalidOperationException : Invalid element frame type 'NamedEvent' HOT 2
- upgrading bUnit to 1.27.17 results in bunit.web.testcomponents load errors HOT 2
- WASM MSAL Configuration Not Correctly Supported HOT 1
- Async Task in Multiple Tests HOT 8
- Clicking an Anchor Tag does not update NavigationManager HOT 2
- Unable to resolve service for type 'Bunit.Rendering.ITestRenderer' HOT 4
- diff:ignoreChildren does not Ignore Children of a Button HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from bunit.