Angularjs E2E Testing with Angular-UI Select2 Element

Question

I have a partial with a select2 element utilizing Angular UI http://angular-ui.github.io/

The issue I am running into is that the element is required and although i have successfully set the field through the following code, the required attribute is not removed as Angular's model must not be updating due to the outside change and I am not sure how to either provide a $scope.apply() or utilize another function of Angular to continue the test.

First to allow for direct jQuery functions to run: (taken from How to execute jQuery from Angular e2e test scope?)

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));
    });
};
});

Then to change the field value:

jQueryFunction('#s2id_autogen1', 'select2', 'open');
    jQueryFunction('#s2id_autogen1', 'select2', "val", "US");
    jQueryFunction('#s2id_autogen1', 'select2', 'data', {id: "US", text: "United States"});
    jQueryFunction('.select2-results li:eq(3)', 'click');
    jQueryFunction('#s2id_autogen1', 'trigger', 'change');
    jQueryFunction('#s2id_autogen1', 'select2', 'close');
    input('request._countrySelection').enter('US');

Note that not all of those functions are needed to reflect the changes to the ui, merely all that I have utilized to try and get this working...

Answer 1

I was unable to get this to work within the Karma test runner, however this became significantly easier within the protractor test suite.

To accomplish this within the protractor test suite I used the following to select the first select2 box on the page and select the first option within that box:

var select2 = element(by.css('div#s2id_autogen1'));
select2.click();
var lis = element.all(by.css('li.select2-results-dept-0'));
lis.then(function(li) {
    li[0].click();
});

The next select2 on the page has an id of s2id_autogen3