Come creare un’applicazione Angular Universal con supporto multilingua i18n
Questo articolo ha come obiettivo conoscere ed approfondire con alcuni casi concreti riscontrati nello sviluppo quotidiano il testing funzionale di applicazioni Angular 2 eseguito tramite Protractor.
Il test funzionale detto anche E2E (end to end) consiste nel verificare la funzionalità completa di un’applicazione. Al contrario di quello unitario che si prefigge il test di funzionalità atomiche, il test E2E ha come obiettivo verificare che tutte funzionalità lavorino correttamente assieme.
Lo strumento principale utilizzato con Angular è Protractor, un framework di test E2E che viene integrato in applicazioni generate con Angular cli.
Le modifiche da applicare ad un progetto standard per avere più controllo sull’esecuzione dei test unitari tramite karma.
Per chi sviluppa frontend, le questioni relative al testing sono spesso “meno lineari” rispetto al classico approccio TDD dello sviluppo backend. Chi ha avuto occasione di lavorare in angular 2 avrà sicuramente potuto apprezzare angular CLI e gli strumenti che mette a disposizione, soprattutto per il testing.
Nello sviluppo quotidiano ho riscontrato che “ng test”, il comando che ci permette di eseguire test unitari tramite karma, non fornisce la possibilità di scegliere quali test eseguire, cosa che al crescere del numero dei test rallenta considerevolmente l’esecuzione, soprattutto in modalità “watch” rendendo così quasi impossibile un approccio TDD.
Infatti, ci capita spesso di lavorare su progetti frontend molto complessi per i nostri clienti e, nonostante questo tipo di problema, al contempo vogliamo mantenere alti i livelli qualitativi, anche con tecniche come appunto il TDD.
Per ovviare al problema ho perciò applicato le seguenti modifiche al mio progetto angular per avere la possibilità di lanciare e tenere in modalità watch solo i test che mi interessano durante lo sviluppo.
Una prassi comune lavorando nel mondo server-side è definire diversi ambienti di esecuzione e di deploy per le proprie applicazioni. Solitamente troviamo almeno un ambiente dedicato allo sviluppo ed un altro che rappresenta l’ambiente di produzione. I vari ambienti si differenziano utilizzando diversi valori per parametri comuni quali le credenziali di accesso al database, l’attivazione degli strumenti di log, il modello di autenticazione, ecc.
Uno dei primi ostacoli che si incontrano lavorando con un framework client-side come AngularJS è quello di trovare un meccanismo per poter differenziare l’ambiente di esecuzione della propria applicazione senza poter contare sugli strumenti abituali disponibili lato server.
In questo articolo mostreremo una possibile soluzione realizzata collaborando assieme a PhotoSì e Fabio Masini basata sulla riscrittura dei nostri file sorgenti tramite task Grunt che valorizza determinate variabili JavaScript a seconda che si voglia eseguire la nostra applicazione in un ambiente di sviluppo o in un ambiente test.
In particolare vedremo come utilizzare diversi endpoint REST a seconda dell’ambiente di esecuzione che vogliamo utilizzare.