Seducente Jasmine

Jasmine è una bella donna. È viola. Ti dice cosa è giusto e cosa è sbagliato.
Jasmine è una libreria di test per javascript.
Jasmine è fatta per Rails.
Io ancora non la uso.
Sono timido ma lei è li.
Con gli occhi seducenti verdi scuro della sua documentazione.

Come installo jasmine?

Jasmine si installa utilizzando il solito Gemfile. All’interno del gruppo test e development aggiungere le seguenti righe:

group :test, :development do
  gem 'jasmine-rails'
  gem 'jasmine-jquery-rails'
end

Aggiungete i gruppi se già non ci sono.
Da terminale eseguire le magiche parole:

bundle install

Come faccio a vedere il risultato dei test?

  1. Avvia il server rails.
  2. Vai su /specs

La gemma crea una rotta /specs dove si possono vedere i risultati dei test. Comodo e veloce. Potete anche usare la linea di comando ma a me al momento non interessa.

Come posso testare la manipolazione del dom?

Con l’utilizzo di jasmine-fixtures. Jasmine-fixture una volta installato si usa nel seguente modo:

affix("div.test");

Potete annidare gli elementi che create. Come?

affix("div.test").affix("div.div-annidato");

Facile facile. Un esempio più strutturato? Eccolo:

    child_0 = affix(".fatherquestion[data-children='1 2 3'][data-id='0']");
    child_0.affix(".inputs").affix("input[type=radio][value='yes']")
                            .affix("input[type=radio][value='no']");

Solitamente la preparazione del dom avviene nel file di test nella cartella spec/javascripts all’interno del file argomento_del_tuo_test_spec.js. Se vuoi utilizzare la stessa struttura più volte lo puoi fare dentro il metodo before_each. Esempio:

describe('TuoOgetto', function(){
  beforeEach(function() {
    affix(".div-ripetuto-per-ogni-test");
  })
})

Come si installa Jasmine Fixtures?

Per l’utilizzo all’interno di Rails:

  1. Scaricare jasmine-fixture.js dalle releases.
  2. Posizionare il file dentro /spec/javascript/helpers

Se la cartella helpers non è presente va creata.

Jquery, come aggiungo una funzione ad un elemento di JQuery?

Utilizzando il metodo extend si possono aggiungere tutti i metodi che si ritengono opportuni.

jQuery.fn.extend({
  subquestions: function(e){

    var ids_of_children  = $(this).data("children").split(" ")
    var $subquestions = $('')

    ids_of_children.forEach(function(id){
      $subquestions = $subquestions.add($("#acquisition_field_row_id_"+id))
    })
    return $subquestions
  }
})

Video e altro materiale

Come testare sul DOM

Video che introduce all’uso di Jasmine in contesti reali di legacy code.
La prima parte riguarda un esempio dove javascript viene usato nel classico modo (jquery e manipolazione del dom) mentre il secondo è un esempio con backbone.