Angularjs E2E Test con angolare-UI Select2 elemento

Question

Ho un parziale con un elemento select2 utilizzando angolare UI http://angular-ui.github.io/

L'edizione che sto funzionando in è che è richiesto l'elemento e anche se ho impostato con successo il campo attraverso la seguendo il codice, l'attributo richiesto non viene rimosso poiché il modello di Angular non deve essere aggiornato a causa delle modifiche esterne e non sono sicuro di come fornire a $ scope.apply() o utilizzare un'altra funzione di Angular per continuare il test.

primo a consentire funzioni dirette jQuery per eseguire: (tratti da 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)); 
    }); 
}; 
}); 

Poi per modificare il valore del campo:

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

Nota che non tutti quelle funzioni sono necessari per rifletti le modifiche apportate all'interfaccia utente, semplicemente tutto ciò che ho utilizzato per provare a farlo funzionare ...

Answer 1

Non sono riuscito a farlo funzionare all'interno della Karma t est runner, tuttavia questo è diventato significativamente più semplice all'interno della suite di test del goniometro.

Per raggiungere questo obiettivo all'interno della suite di test goniometro ho usato il seguente per selezionare la prima casella select2 sulla pagina e selezionare la prima opzione all'interno di quella scatola:

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

La prossima select2 sulla pagina ha un id di s2id_autogen3

Answer 2

L'ho fatto funzionare sotto Karma con le seguenti modifiche.

Add seguito DSL alla parte superiore del vostro e2e file di prova:

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

Poi, per cambiare il valore select2 nel vostro uso scenario

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

A volte il select2 può richiedere tempo per caricare, soprattutto quando lavorando con dati caricati con Ajax. Così, quando si usa il goniometro, e ampliando la risposta di Brian, ecco un metodo che ho trovato per essere affidabili:

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

Questo utilizza il fatto che driver.wait can take a promise as a result.

Answer 4

Per arrivare a questo lavoro ho consultato sia la risposta e sinelaw di Brian, ma ancora non è riuscito nel mio caso per due motivi:

1. cliccando su 'div # s2id_autogen1' non si apre l'ingresso Select2 per me, il selettore che ho usato era 'div # s2id_autogen1 a'
2. ottenendo l'elemento select2 Avrei ricevuto l'errore ElementNotVisibleError, probabilmente perché la mia select2 si trova all'interno di un modal bootstrap, quindi attendo esplicitamente che l'elemento sia visibile prima di fare clic su di esso (puoi leggere il suggerimento originale che ho letto per utilizzare questo here).

Il codice risultante è:

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

Speranza che aiuta.

Answer 5

sarò secondo quanto @ Brian ha detto che se si utilizza goniometro e il nuovo karma questo ha funzionato per me:

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

utilizzarlo come:

se il valore della voce che si desidera selezionare è "Q3 2013" è possibile fornire il modello del selettore e una corrispondenza del testo esatto o parziale dell'elemento che si desidera selezionare.

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

o

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

saranno entrambi lavoro