Custom Calendar Directive - Jasmine Testing

2 posts, 0 answers
  1. Danny
    Danny avatar
    3 posts
    Member since:
    Jun 2015

    Posted 03 Nov 2015 Link to this post

    Hi,

    I wrote a custom directive that wraps the kendo ui kendo-date-picker directive. The directive adds logic to create a custom footer. In my Jasmine tests, I am unable to trigger a click event on k-i-calendar span, because it is not visible in the DOM. I want to trigger the click to inspect the calendar widget and determine if the custom footer has been applied. Based on the attached screen shot, it appears the kendo-date-picker directive has been compiled because the element has been decorated with new attributes, however, it is missing the wrapping elements that I observe kendo in my application. 

     

    1) Is there a way to programatically open the calendar widget without relying on click events?

    2) Is the kendo-date-picker widget responsible for wrapping the input element in additional elements?

     

    Thanks

  2. Atanas Georgiev
    Admin
    Atanas Georgiev avatar
    126 posts

    Posted 06 Nov 2015 Link to this post

    Hello Danny,

    Straight up to your questions:

    1. I believe you are talking about the Kendo UI DatePicker here, as the Calendar does not have open/close states - it is always visible. The DatePicker can be opened using the 
    "open" method from the API, as described in the following documentation article:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/datepicker#methods-open

    For example if you navigate to our online demos you can achieve the desired behavior with:

    $("input[k-ng-model='dateObject']").data('kendoDatePicker').open()


    2. As you can see in the following dojo snippet there is only one <input> element in the HTML section, but in the DOM there are a couple of <span>-s that are created from the Kendo UI framework.

    Generally speaking, creating functional tests for Kendo UI application is not a trivial task, as it requires very detailed understanding on how Kendo UI widgets function: on which DOM element an event should be executed, when some of the hidden elements are shown and how we should use them. The generated DOM is complex because of the extensive functionality that Kendo UI controls provide. In the “Creating testable UI" section of his article “Functional GUI Testing and Kendo UI” Jim Holmes addresses the most common challenges Kendo UI application testers meet in their everyday work.

    As we do not officially support Jasmine or any other third party testing automation tool, we recommend you to check out Telerik TestStudio – a test automation product with built-in KendoUI translators. More detailed information can be found at:http://www.telerik.com/automated-testing-tools/campaigns/testing-kendoui-apps.aspx.

    Regards,
    Atanas Georgiev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top