CODEWITHSUNDEEP
jqueryangularjs
Axel Örn Sigurðsson
Axel Örn Sigurðsson

Reputation: 372

Open a select2 select box in angularjs E2E test

I'm trying to E2E test my angularjs application. It has a select2 select box that is populated with items from an API. This select2 select box has a list of filters that will be added to a search. 

<input id="filter-select2" ui-select2="dataArray" ng-model="selected"/>

The problem I'm having is that I can't seem to open the select box in the E2E tests I'm doing. If I load the application I'm able to do $('#s2id_filter-select2').select2('open'); in the Chrome Javascript Console to open the select2 select box. I'm also able to do angular.element('#s2id_filter-select2').select2('open');.

But if I try to do this in the E2E tests themselves the element doesn't seem to have .select2().

I tried both element('#s2id_filter-select2').select2('open'); and

element('#s2id_filter-select2').query(function (e, done) {
    e.select2('open');
    done();
});

in the E2E test. I'm able to call .fadeOut() in the latter example (element().query()), but not .select2().

I tried including select2.js and angularui.js (I'm using the directive from angular-ui) in the E2E test config but that doesn't change anything.

Has anyone had any success in calling some jQuery libraries, such as select2, from an E2E test?

I also thought about just skipping the select2 box, that is, setting the "selected" model directly, since I have a $watch that will update the application on filter select, but I can't seem to find a way to set the model through the test itself.

The e2e config is using the following files:

files = [
    ANGULAR_SCENARIO,
    ANGULAR_SCENARIO_ADAPTER,
    'tests/students/scenarios/*.scenario.js',
    'dev/students/js/script.js',
    'dev/students/js/*.js'
];

I tried having select2, jQuery and angular-ui included both before and after the tests/ and dev/ files.

Edit: I am able to set the selected model with input('selected').enter('sth');, but I can't seem to be able to set it as a model. I might have to write a custom DSL for this?

Upvotes: 2

Views: 1112

Answers (1)

nbyarnell
nbyarnell

Reputation: 26

You can indeed use a custom DSL to open select2 boxes in angular e2e tests. I take no credit for the following code block, I found it at: How to execute jQuery from Angular e2e test scope?

By adding:

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

to the top of your e2e test file, you can then open a select2 box like so:

jQueryFunction('#s2id_roleselect', 'select2', 'open');

replacing roleselect with your own id. All credit goes to user Jeroen V. for supplying the DSL.

Upvotes: 1

Related Questions