Configurare Maven per far TDD con Javascript

Precisiamo subito una cosa: io di Javascript non so una mazza!
Quello che cercherò di spiegare in questo post è come configurare un progetto Maven per poter fare TDD con Javascript.

Come framework per scrivere i nostri test Javascript useremo Jasmine.
Se siete proprio a digiuno, diciamo che:

  

 

 Jasmine : Javascript = JUnit : Java

Iniziamo subito e facciamo finta di partir da zero... creiamoci una webapp con Maven (se l'avete già, potete saltare questo pezzo e passare alla configurazione):

    mvn archetype:generate \
        -DgroupId=robertosimoni \
        -DartifactId=tdd-in-javascript \
        -DarchetypeArtifactId=maven-archetype-webapp



e cambiamo quello che riteniamo più opportuno...
come ad esempio la versione di JUnit... e che cavolo ancora con sta 3.8.1!

Configurazione

Ora se guardiamo i sorgenti, come già saprete, tutto cio' che riguarda il sito web si trova sotto src/main/webapp, quindi html, jsp, css, etc...
Ci saranno anche i Javascript.
Concentriamoci su questi.
L'obbiettivo di questo post è fare in modo di sviluppare in TDD questi Javascript, cercando di poter tenere questi file lì sotto src/main/webapp evitandoci così di far dei tour de france quando dovremo creare il pacchetto finale della nostra applicazione.

Ipotizziamo di voler tenere tutto il codice Javascript in uso nella webapp in una cartella (non ve lo sto suggerendo, anzi...):
    src/main/webapp/js
e di tenere i test in:
    src/test/javascript
creiamo queste due directory.
Ora lo strumento più importante di tutto questo post è un plugin che si chiama jasmine-maven-plugin.
Aggiungiamolo al nostro pom.xml del progetto:

<plugin>
     <groupId>com.github.searls</groupId>
     <artifactId>jasmine-maven-plugin</artifactId>
     <version>1.2.0.0</version>
     <extensions>true</extensions>
     
     <executions>
         <execution>
             <goals>
                 <goal>bdd</goal>
                 <goal>test</goal>
             </goals>
         </execution>
     </executions>
     <configuration>

         <jsSrcDir>${project.basedir}/src/main/webapp/js</jsSrcDir>
     </configuration>
 </plugin>

Come potete vedere, abbiamo ridefinito la directory dei sorgenti Javascript dal suo default che è src/main/javascript alla nostra src/main/webapp/js
Per quella dei test, non abbiamo cambiato nulla perchè il default è già src/test/javascript (è comunque possibile farlo con il parametro jsTestSrcDir).

Il primo test

OK, siamo pronti per scrivere il nostro primo test.

Come vi dicevo, io non so nulla di Javascript, quindi meglio puntare a qualcosa di banale... tipo chiamo una funzione che restituisce un testo e verifico cosa ho ricevuto. OK... estremamente banale!

Creiamo in src/test/javascript il nostro primo test. Per ora creiamo un file Javascript denominato learnjsSpec.js (in Jasmine i file di test hanno suffisso Spec perchè si tratta di un framework BDD... ah ecco un'altra sigla che fa fico che devo ricordarmi di aggiungere alla descrizione del blog... nahhhhh). Aggiungiamo queste righe:

    describe('learnjs', function() {

        it("returns 'ciao mondo'", function() {
            expect(ciaoMondo()).toBe("Ciao Mondo");
        });

    });

le parole in grassetto fanno parte della sintassi di Jasmine che bisogna apprendere. Comunque e' abbastanza intuitivo lo scopo del test. Se ora da linea di comando lanciate:
    
    mvn jasmine:test

vedrete che appariranno questi messaggi:

-------------------------------------------------------
 J A S M I N E   S P E C S
-------------------------------------------------------
[INFO]
learnjs
  returns 'ciao mondo' <<< FAILURE!
    * ReferenceError: "learnjs" is not defined. in file:./tdd-in-javascript/target/jasmine/spec/learnjsSpec.js (line 4)

1 failure:

  1.) learnjs it returns 'ciao mondo' <<< FAILURE!
    * ReferenceError: "learnjs" is not defined. in file:./tdd-in-javascript/target/jasmine/spec/learnjsSpec.js (line 4)

Results: 1 specs, 1 failures

il motivo per cui fallisce spero sia ovvio... non esiste alcuna function denominata ciaoMondo()

Creiamo nella directory src/main/webapp/js il file learnjs.js

e scriviamo la nostra function:

    function ciaoMondo() {

return "Ciao Mondo";

    };

rilanciate: 

    mvn jasmine:test
 

un bel sorriso e ora dovreste vedere:

-------------------------------------------------------

 J A S M I N E   S P E C S

-------------------------------------------------------

[INFO] 

learnjs

  returns 'ciao mondo'

Results: 1 specs, 0 failures

Ecco fatto... OK, non è un granchè, ma da qualche parte bisogna pur partire.
In un prossimo post, illustrerò come effettuare i test quando bisogna fare delle chiamate ajax e/o aggiornare il contenuto del DOM.

Se siete come me che vi piace guardare il codice, trovate tutto quanto qui su Github.

... ed ora forkatevelo e moltiplicatevelo!