TDD in Javascript con RequireJS

Qualche tempo fa, scorrendo gli annunci di lavoro su LinkedIn, mi sono imbattuto in una descrizione molto simpatica (e significativa per l’argomento di questo post) di cosa era richiesto al candidato dalla società proponente. Tra le richieste più comuni (conoscenza delle tecnologie X e Y, approccio TDD, programmazione secondo i principi SOLID,….) spuntava in bella vista un punto che recitava testualmente: “you test your javascript“! (traduzione estratta dal contesto: era richiesto un uso abituale del testing anche nello sviluppo di “semplice” Javascript).

Quella semplice frase riassume in sé la consapevolezza che: benché Javascript si sia diffuso molto, così non si sono diffuse le pratiche normalmente molto più accettare per gli altri linguaggi (come appunto il testing). Questa considerazione di Javascript come “fratello minore” di altri linguaggi si deve probabilmente al fatto che questo linguaggio era inizialmente molto limitato e relegato quasi unicamente allo sviluppo dell’interfaccia utente.

Ad oggi, benché sia ancora la scelta favorita da molti sviluppatori per il codice di interfaccia, le sue possibilità di utilizzo sono in realtà molto superiori. Vedremo nelle prossime righe una libreria per la modularizzazione (RequireJS) e come utilizzarla al meglio al fine di poter “testare” anche le funzionalità più complesse.

Immaginiamo di avere una semplice struttura dato ad albero e una funzione di toString(), le cose possono diventare molto complesse anche in poche righe!

Nel codice che segue vengono mostrate alcune casistiche che, per esperienza, non sono lontane da quel che succede realmente in un progetto dove il codice viene sviluppato a più mani.

Sei in grado di prevedere cosa viene stampato nella pagina principale nei div log{1|2|3|4}“?

Tree.js

 
function createTree(val,a,b){
    var res = {};
    if (val) res.value = val;
    if (a) res.left=a;
    if (b) res.right=b;
    return res;
}

function toString(a){
    
    if (a &&( a.left ||  a.right))
      return " [" +toString(a.left)+a.value+toString(a.right)+"] ";
    
    if (a && a.value)
        return " ["+a.value+"] ";
    
    return " [] ";
};

Utils.js

 
function toString(a){
         return "{"+a+"}";
};

IndexNoRJ.html