E2E Testing with Angular UI datepicker

Question

First post. I have a situation where I am using jQuery UI's datepicker to set model attributes. This is done with Angular UI and seems to work well, but I'm having a hard time trying to test it in the E2E scenarios.

This is the html:

<form ng-submit="submitForm(request)">
    <input ng-model="request.startDate" ui-date placeholder="Start Date" />
</form>

This is the controller:

$scope.submitForm = function(request) {
    var startDateStr = $filter('date')(request.startDate, dateFilterFormat);
    // Do something with startDateStr.

    var startYear = request.startDate.getFullYear();
    var startMonth = request.startDate.getMonth(); // 0-based.
    var startDayOfMonth = request.startDate.getDate();
    // Do something with date fields.
}

I have tried to set the input field in my E2E test, but it doesn't seem to set the datepicker. When I try to access the model, I'm getting just the string as expected, not a date object like I would with Angular UI. My initial thoughts were to either set the datepicker via jquery, but I'm not sure how I would go about doing that in the E2E test, or set the model attribute directly, which I also don't know how to do.

Can anyone provide any insight please? Thanks.

score 1 · Answer 1 · edited May 23 '17 at 11:50

First add in your describe function:

angular.scenario.dsl('jQueryFunction', function() {
    return function(selector, functionName /*, args */ ) {
        var args = Array.prototype.slice.call(arguments, 2);
        return this.addFutureAction(functionName, function($window, $document, done) {
            var $ = $window.$; // jQuery inside the iframe
            var elem = $(selector);
            if (!elem.length) {
                return done('Selector ' + selector + ' did not match any elements.');
            }
            done(null, elem[functionName].apply(elem, args));
        });
    };
});

(taken from How to execute jQuery from Angular e2e test scope?)

Then to open and pick date use:

jQueryFunction('#datepickerElementId', "focus");
jQueryFunction('ul.dropdown-menu span:contains("07")', "click");

Where datepickerElementId is the id of the datepicker element in your html/template.

score 0 · Answer 2 · answered Jan 23 '14 at 16:09

To me the the element(selector, label).{method}(value) was working.

In coffeescript I've done a little helper:

@UiDateHelper =
  selectCalendarDay: (day) ->
    element("[ui-date] a:contains('#{day}')").click()

  selectCalendarYear: (year) ->
    element('[data-handler="selectYear"]').val(year)

  selectCalendarMonth: (month) ->
    element('[data-handler="selectMonth"]').val(month - 1)

  selectDate: (date) ->
    year = date.substr(0, 4)
    month = date.substr(5, 2)
    day = date.substr(8, 2)
    @selectCalendarYear(year)
    @selectCalendarMonth(month)
    @selectCalendarDay(day)

UiDateHelper.selectDate('2014-01-21')

Hope this was useful.

E2E Testing with Angular UI datepicker

2 Answers2