Sviluppo test driven di un front-end con AngularJS

71 Pages·2015·1.94 MB·Italian

Università degli Studi di Padova
Dipartimento di Matematica
Corso di Laurea in Informatica
Sviluppo test driven di un front-end con
AngularJS
Tesi di laurea triennale
Relatore
Prof. Mauro Conti
Laureando
Mattia Sorgato
Anno Accademico 2014-2015
Mattia Sorgato: Sviluppo test driven di un front-end con AngularJS, Tesi di laurea
triennale, (cid:13)c Ott 2015.
Sommario
Il presente documento descrive il lavoro svolto durante il periodo di Stage, della durata
di circa trecento ore, dal laureando Mattia Sorgato presso l’azienda IKS s.r.l. Gli
obbiettivi da raggiungere erano molteplici.
In primo luogo, l’ideazione e l’implementazione del front-end[g] di un software per la
gestione del personale e dei progetti aziendali, per la quale scrittura è stato richiesto
l’impiego del framework AngularJS.
In secondo luogo, la scrittura delle Application Program Interface (API)[g] necessarie
alla stesura del back-end[g].
Per garantire la qualità del codice, durante l’intero progetto l’approccio utilizzato è
stato Test Driven.
iii

Ringraziamenti
Innanzitutto, vorrei esprimere la mia gratitudine al Prof. Mauro Conti, relatore della
mia tesi, per l’aiuto e il sostegno fornitomi durante la stesura del lavoro.
Desidero ringraziare con affetto i miei genitori per il sostegno, il grande aiuto e per
essermi stati vicini in ogni momento durante gli anni di studio.
Ho desiderio di ringraziare poi i miei amici per tutti i bellissimi anni passati insieme e
le mille avventure vissute.
Padova, Ott 2015 Mattia Sorgato
v

Indice
1 Introduzione 1
1.1 L’azienda . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.1.1 Aree di intervento . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 L’idea . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.3 Vincoli . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.1 Tecnologici . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.2 Temporali . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3.3 Organizzativi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.4 Organizzazione del testo . . . . . . . . . . . . . . . . . . . . . . . . . . 4
2 Metodologie e tecnologie 5
2.1 Metodologie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.1 Agile . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
2.1.2 Test Driven Developement. . . . . . . . . . . . . . . . . . . . . 8
2.2 Tecnologie utilizzate . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.1 Tecnologie di sviluppo . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.2 Strumenti di supporto ai processi . . . . . . . . . . . . . . . . . 11
2.2.3 Ambiente di sviluppo . . . . . . . . . . . . . . . . . . . . . . . 13
2.2.4 Tecnologie di Testing . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.5 Strumenti di Automazione . . . . . . . . . . . . . . . . . . . . . 14
3 Descrizione dello stage 17
3.1 Analisi preventiva dei rischi . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2 Requisiti e obiettivi. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3 Pianificazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.3.1 Fase 1: Formazione (40 ore) . . . . . . . . . . . . . . . . . . . . 18
3.3.2 Fase 2: Analisi e Progettazione (40 ore) . . . . . . . . . . . . . 19
3.3.3 Fase 3: Implementazione (180 ore) . . . . . . . . . . . . . . . . 19
3.3.4 Fase 4: Test e Verifica (40 ore) . . . . . . . . . . . . . . . . . . 20
4 Analisi dei requisiti 21
4.1 Casi d’uso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Tracciamento dei requisiti . . . . . . . . . . . . . . . . . . . . . . . . . 24
5 Progettazione e codifica 27
5.1 Progettazione Architetturale. . . . . . . . . . . . . . . . . . . . . . . . 27
5.1.1 Front-end REST . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2 Architettura di AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.1 Model . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
vii
viii INDICE
5.2.2 View . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28
5.2.3 Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
5.2.4 Two-way Data Binding. . . . . . . . . . . . . . . . . . . . . . . 30
5.2.5 Dependency Injection . . . . . . . . . . . . . . . . . . . . . . . 31
5.3 Definizione delle API REST . . . . . . . . . . . . . . . . . . . . . . . . 31
5.3.1 Informazioni utente . . . . . . . . . . . . . . . . . . . . . . . . 32
5.3.2 Esperienze professionali . . . . . . . . . . . . . . . . . . . . . . 33
5.3.3 Titoli di studio ed abilitazioni professionali . . . . . . . . . . . 35
5.3.4 Skill . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36
5.3.5 Progetti associati . . . . . . . . . . . . . . . . . . . . . . . . . . 37
5.4 Stub Back-end . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
5.5 Codifica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40
5.5.1 Callback e Promesse JavaScript . . . . . . . . . . . . . . . . . . 40
5.5.2 Diagrammi di attività . . . . . . . . . . . . . . . . . . . . . . . 42
6 Verifica e validazione 45
6.1 Test di unità . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45
6.1.1 Test di unità di AngularJS . . . . . . . . . . . . . . . . . . . . 45
6.2 Test End-To-End . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 48
7 Conclusioni 51
7.1 Bilancio finale . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51
7.2 Problematiche incontrate . . . . . . . . . . . . . . . . . . . . . . . . . 52
7.3 Conoscenze acquisite . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52
7.4 Valutazione personale . . . . . . . . . . . . . . . . . . . . . . . . . . . 53
Glossary 55
Acronyms 59
Bibliografia 61
Elenco delle figure
1.1 Logo di IKS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
2.1 Esempio di Kanban. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.2 Logo di AngularJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.3 Logo di Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.4 Logo di Git . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.5 Logo di JIRA . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.6 Esempio di schermata di una kanban di JIRA . . . . . . . . . . . . . . 12
2.7 Logo di Stash . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.8 Branching e merging in STASH . . . . . . . . . . . . . . . . . . . . . . 13
2.9 Logo di PhPStorm . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.10 Logo di Jasmine . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.11 Logo di Grunt. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.12 Logo di Karma . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
2.13 Logo di NPM . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.14 Logo di Protractor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
3.1 Diagramma Gantt della pianificazione iniziale . . . . . . . . . . . . . . 18
4.1 Use Case - Login . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.2 Use Case - Dashboard . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
5.1 Esempio di legame tra vista-controller-servizio . . . . . . . . . . . . . 29
5.2 Esempio di template di una vista e Data Binding . . . . . . . . . . . . 30
5.3 Esempio di legame tra template e Controller . . . . . . . . . . . . . . 30
5.4 Doppio legame tra vista e modello di AngularJS . . . . . . . . . . . . 31
5.5 Esempio di configurazione di una factory per l’iniettore . . . . . . . . 32
5.6 Diagramma di attività generale di SkillMatrix . . . . . . . . . . . . . . 42
5.7 Diagramma di attività di gestione delle skill di SkillMatrix . . . . . . 43
6.1 Metriche di copertura generali nel progetto SkillMatrix . . . . . . . . . 46
6.2 Metriche di copertura dei controller nel progetto SkillMatrix . . . . . 46
6.3 Metriche di copertura dei servizi nel progetto SkillMatrix . . . . . . . 46
6.4 Grafica da console dell’esecuzione di test End-To-End (E2E) di Protractor 48
7.1 Grafico di rapporto tra requisiti totali e soddisfatti . . . . . . . . . . . 51
ix
x ELENCO DELLE TABELLE
Elenco delle tabelle
4.1 Tabella del tracciamento dei requisti funzionali . . . . . . . . . . . . . 25
4.2 Tabella del tracciamento dei requisiti qualitativi . . . . . . . . . . . . 26
4.3 Tabella del tracciamento dei requisiti di vincolo . . . . . . . . . . . . . 26