12

In un'applicazione Rails sto provando a testare un Bootstrap modal con un jQuery TokenInput field in Rspec utilizzando Capybara con il driver capybara-webkit. La parte in questione è la seguente: pulsanteProblemi di interazione con le modalitā Bootstrap via Capybara (v2)

click_link 'Create Team Modal' 
sleep 1 

within('div#modal_popup') do 
    fill_in 'input#token-input-team_name', with: 'Fancy team name' 
    sleep 1 
    fill_in 'input#token-input-team_name', with: '\t' 
    sleep 1 

    click_button 'Create Team' 
end 

page.should have_content('Fancy team name') 
  • Fare clic per ottenere modale
  • Compilare TokenInput con un nome della squadra
  • Simulare un Tab pressione di un tasto per farlo selezionato
  • Creare il squadra
  • Verificare il nome compare sulla pagina

Questo sarà solo lavoro con tutti quelli sleep 1 s in luogo; altrimenti Capybara si arresta in modo anomalo a have_content, causando infine un errore del server perché il nome del team non è mai stato possibile selezionare correttamente. Altri mod Bootstrap senza un campo TokenInput non richiede un sleep 1 prima che vengano caricati, tuttavia.

Con tutto ciò detto, esiste un modo per sbarazzarsi dei dormienti e procedere così normalmente? Capybara 2 ha eliminato wait_until (con una buona ragione) poiché attenderà entro il tempo di attesa predefinito per testare qualcosa ... ma ciò non sembra riflettersi nel mio test precedente; è come se Capibara non si impegnasse in quel periodo di attesa entrando/uscendo da questo modale. Qualcuno ha qualche esperienza con questo? Utilizzo di Rails 3.2.10, Rspec 2.12, Capybara 2, capybara-webkit 0.14.0, TokenInput 1.6.

+2

Questo potrebbe essere utile: http://blog.crowdint.com/2013/09/20/poltergeist-and-bootstrap-modals.html – Matt

risposta

10

provare a disabilitare le animazioni in prova ENV, layout/applicaiton.html.erb

<% if Rails.env.test? %> 
<style type="text/css"> 
    .modal.fade, .fade { 
     -webkit-transition: opacity 0.01s; 
     -moz-transition: opacity 0.01s; 
     -ms-transition: opacity 0.01s; 
     -o-transition: opacity 0.01s; 
     transition: opacity 0.01s; 
    } 
</style> 
<%end%> 
+1

Come indicato nell'articolo [croudint] (http: // blog. crowdint.com/2013/09/20/poltergeist-and-bootstrap-modals.html) che @matt ha collegato, questo può anche andare in un foglio di stile separato. –

+0

A quale versione di Bootstrap è applicabile? Sto incontrando lo stesso problema, ma sto usando Bootstrap 3 e la raccomandazione di cui sopra non sembra risolvere il problema per me. – danielricecodes

+0

Questo funziona per me su Bootstrap v3.0.2 – hooverlunch

8

suggerisco di aggiungere css falowing in prova ENV:

div, a, span, footer, header { 
     -webkit-transition: none !important; 
     -moz-transition: none !important; 
     -ms-transition: none !important; 
     -o-transition: none !important; 
     transition: none !important; 
    } 

    .modal { 
    display: none !important; 
    } 

    .modal.in { 
    display: block !important; 
    } 

    .modal-backdrop { 
    display: none !important; 
    } 

Aggiungere questo js nel corpo e di :

$(".fade").removeClass("fade"); 

Questo ha risolto la maggior parte dei miei problemi con capibara e bootstrap.

+0

E 'stato anche richiesto (nel mio caso) di usare 'gem' capybara-webkit'' – jmarceli

+0

Questo copre tutti i casi, a differenza della risposta accettata – babonk

0

Abbiamo solo fare questo e sembra funzionare (ad esempio per fare clic su $('.tp-header-login'):

# instead of find(".tp-header-login") 

find(".tp-header-login") # still do the find so you are sure its loaded then... 
execute_script "$('.tp-header-login').click()" 
0

Per coloro che desiderano evitare Rails.env.___? hack *, il seguente sembrava a lavorare (finora - dita incrociate) per evitare problemi con il test jQuery UI drag-and-drop functionality su un modale basato su Bootstrap.

In primo luogo, eravamo già "in attesa" per il modal appaia, utilizzando un metodo di supporto come questo:

def wait_for_modal_to_appear 
    modal = wait_until { 
    # Look for the modal by ID/whatever... 
    } 
    raise Capybara::ModalNotFound.new('...') if modal.nil? 
    return modal 
end 

Eppure, stavamo avendo problemi di spurie quando si cerca di drag-and-drop elementi in quel modale.La seguente aggiunta di codice, ha aggiunto appena prima della riga return, sembra di aver fatto il trucco:

page.execute_script("document.getElementById('#{modal[:id]}').classList.remove('fade');") 

* Proprio come un hack di recente ha portato alla necessità di una distribuzione d'emergenza in un'azienda per cui lavoro con ... Un brutto cambiamento di codice è riuscito a farlo entrare in produzione perché è stato attivato solo da un qualificatore if Rails.env.production?; altrimenti avrebbe fallito metà della suite di test.