Giter Site home page Giter Site logo

Comments (22)

egil avatar egil commented on July 23, 2024 2

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.

andrewmorris-dev avatar andrewmorris-dev commented on July 23, 2024 2

@egil

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.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

egil avatar egil commented on July 23, 2024

Well, in that case, you can use the .Click() on the element that had the blazor attribute.

from bunit.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

jpiell avatar jpiell commented on July 23, 2024

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">&#xA0;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.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024
<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">&#xA0;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>

Markup.txt

from bunit.

jpiell avatar jpiell commented on July 23, 2024

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.

egil avatar egil commented on July 23, 2024

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.

jpiell avatar jpiell commented on July 23, 2024

from bunit.

egil avatar egil commented on July 23, 2024

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.

Screenshot_20200206-070638_Edge

from bunit.

egil avatar egil commented on July 23, 2024

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.

egil avatar egil commented on July 23, 2024

I'll close this issue. If you still need help, just comment again.

from bunit.

egil avatar egil commented on July 23, 2024

Thanks for explaining @andrewmorris-dev

from bunit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.