angularjs E2E Testowanie z Angular-UI Wybór2 Element

Question

mam częściowy z elementem select2 wykorzystującego kątowa UI http://angular-ui.github.io/

Problem używam na to, że wymagany jest element i chociaż nie udało się ustawić pole poprzez następujący kod, wymagany atrybut nie zostanie usunięty, ponieważ model Angular nie może być aktualizowany z powodu zewnętrznej zmiany i nie jestem pewien, jak zapewnić $ scope.apply() lub użyć innej funkcji Angular, aby kontynuować test.

pierwsze, aby umożliwić bezpośrednie funkcji jQuery Run: (zaczerpnięte z 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)); 
    }); 
}; 
}); 

Następnie, aby zmienić wartość pola:

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

pamiętać, że nie wszystkie z tych funkcji są potrzebne do odzwierciedlają zmiany w interfejsie użytkownika, po prostu wszystko, co wykorzystałem, aby spróbować i działało ...

Answer 1

Nie udało mi się uruchomić tego w ramach Karmy est runner, jednak stało się to znacznie łatwiejsze w ramach zestawu testów kątomierza.

Aby osiągnąć ten cel w ramach zestawu testowego kątomierz użyłem następujących czynności, aby wybrać pierwszą skrzynkę select2 na stronie i wybrać pierwszą opcję, w tym polu:

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

Następny select2 na stronie ma identyfikator z s2id_autogen3

Answer 2

Zrobiłem to pod nadzorem Karmy z następującymi zmianami.

Dodaj następujący DSL do początku pliku testowego e2e:

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

Następnie zmienić wartość select2 w użytku scenariusza

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

Czasami select2 może zająć sporo czasu, zwłaszcza gdy praca z danymi załadowanymi przez ajax. Więc przy użyciu kątomierza i rozszerza na odpowiedź Briana, oto sposób znalazłem się być wiarygodne:

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

ta wykorzystuje fakt, że driver.wait can take a promise as a result.

Answer 4

Aby uzyskać to do pracy I konsultacje zarówno odpowiedź i sinelaw Briana, ale jeszcze nie udało w moim przypadku z dwóch powodów:

1. kliknięcie na „div # s2id_autogen1” nie otworzyć wejście select2 dla mnie, selektor, którego użyłem, to "div # s2id_autogen1 a"
2. pobranie elementu select2 Otrzymałbym ElementNotVisibleError, prawdopodobnie dlatego, że mój select2 znajduje się wewnątrz modemu ładowania początkowego, więc wyraźnie czekam, aż element będzie widoczny przed kliknięciem (możesz przeczytaj oryginalną wskazówkę, którą przeczytałem, aby użyć tego here).

Otrzymany kod jest:

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

Nadzieję, że to pomaga.

Answer 5

będę drugi co @Brian powiedział, że jeśli używasz kątomierz i nowa karma ten pracował dla mnie:

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

używać go jak:

jeżeli wartość elementu, który chcesz select to "Q3 2013", możesz podać model selektora oraz dokładne lub częściowe dopasowanie tekstu do elementu, który chcesz wybrać.

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

lub

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

będą zarówno prace