AngularJS E2E Testing mit kantigem-UI Select2 Elemente

Question

Ich habe eine teilweise mit einem select2 Elemente verwendet Angular UI http://angular-ui.github.io/

Das Problem, das ich in laufen lasse, ist, dass das Element benötigt wird, und obwohl ich habe erfolgreich das Feld durch die eingestellte Im folgenden Code wird das erforderliche Attribut nicht entfernt, da das Modell von Angular aufgrund der Änderung von außen nicht aktualisiert werden muss und ich bin mir nicht sicher, ob ich entweder $ scope.apply() bereitstellen oder eine andere Funktion von Angular verwenden soll, um den Test fortzusetzen.

Erste direkte jQuery-Funktionen laufen lassen: (aus 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)); 
    }); 
}; 
}); 

Dann den Feldwert ändern:

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

Beachten Sie, dass nicht alle diese Funktionen benötigt werden, um spiegeln die Änderungen an der Ui, nur alles, was ich verwendet habe, um zu versuchen und dies funktioniert ...

Answer 1

Ich war nicht in der Lage, dies innerhalb des Karma t arbeiten zu bekommen est runner, jedoch wurde dies innerhalb der Winkelmesser-Testsuite wesentlich erleichtert.

dies im Winkelmesser Testsuite Um das zu erreichen habe ich die im Anschluss an die erste select2 Box auf der Seite und wählen Sie die erste Option in diesem Feld wählen:

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

Die nächste select2 auf der Seite eine ID von s2id_autogen3

Answer 2

Ich habe es mit folgenden Änderungen unter Karma arbeiten lassen.

In der Spitze Ihrer e2e Testdatei folgende DSL:

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

Dann select2 Wert in Ihrem Szenario Verwendung

it('should narrow down organizations by likeness of name entered', function() { 
    jQueryFunction('#s2id_physicianOrganization', 'select2', 'open'); 
    jQueryFunction('#s2id_physicianOrganization', 'select2', 'search', 'usa'); 
    expect(element('div.select2-result-label').count()).toBe(2); 
}); 

Answer 3

Manchmal ist die select2 dauern kann Zeit ändern zu laden, vor allem, wenn Arbeiten mit Ajax-geladenen Daten. Also, wenn Winkelmesser, und auf Brians Antwort erweitert, hier ist eine Methode, die ich gefunden habe, zuverlässig zu sein:

function select2ClickFirstItem(select2Id) { 
    var select2 = element(by.css('div#s2id_' + select2Id)); 
    select2.click(); 
    var items = element.all(by.css('.select2-results-dept-0')); 
    browser.driver.wait(function() { 
     return items.count().then(function (count) { 
      return 0 < count; 
     }) 
    }); 
    items.get(0).click(); 
} 

Dies nutzt die Tatsache, dass can take a promise as a result driver.wait.

Answer 4

Um dies zu erhalten, ich beide Antwort und sinelaw Brian konsultiert zu arbeiten, aber es immer noch in meinem Fall aus zwei Gründen fehlgeschlagen:

1. Klick auf ‚div # s2id_autogen1‘ öffnet nicht den select2 Eingang für mich, der Selektor, den ich benutzte, war 'div # s2id_autogen1 a'
2. das select2-Element bekommen Ich würde das ElementNotVisibleError bekommen, wahrscheinlich weil mein select2 in einem Bootstrap-modal ist, also warte ich explizit darauf, dass das Element sichtbar ist, bevor ich es anklicke (Sie können lese den originalen Hinweis, den ich gelesen habe, um dieses zu verwenden here).

Der resultierende Code ist:

function select2ClickFirstItem(select2Id) { 
     var select2Input; 

     // Wait for select2 element to be visible 
     browser.driver.wait(function() { 
      select2Input = element(by.css('#s2id_' + select2Id + ' a')); 
      return select2Input; 
     }).then(function() { 
      select2Input.click(); 

      var items = element.all(by.css('.select2-results-dept-0')); 
      browser.driver.wait(function() { 
       return items.count().then(function (count) { 
        return 0 < count; 
       }); 
      }); 
      items.get(0).click(); 
     }); 
    } 

Hoffe, es hilft.

Answer 5

Ich werde zweite, was @ Brian sagte, wenn Sie Winkelmesser verwenden und das neue Karma das hat für mich gearbeitet:

function uiSelect(model, hasText) { 
    var selector = element(by.model('query.cohort')), 
     toggle = selector.element(by.css('.ui-select-toggle')); 

    toggle.click(); 

    browser.driver.wait(function(){ 
     return selector.all(by.css('.ui-select-choices-row')).count().then(function(count){ 
      return count > 0; 
     }); 
    }, 2000); 

    var choice = selector.element(by.cssContainingText('.ui-select-choices-row',hasText)); 
    choice.click(); 
}; 

es gerne verwenden:

, wenn der Wert des Elements, das Sie wollen Wenn Sie "Q3 2013" auswählen, können Sie das Modell des Selektors und eine genaue oder teilweise Übereinstimmung des auszuwählenden Artikels mit dem Text angeben.

uiSelect('query.cohort','Q3 2013'); 

oder

uiSelect('query.cohort','Q3'); 

werden beide arbeiten