Test et déploiement

Test

La phase de test d’une application est un exercice à part entière, qui mobilise généralement des informaticiens spécialisés dans ce domaine de compétence. Nous n’aborderons dans cette section que quelques concepts de base.

Pour mettre en œuvre les tests, Angular possède un module spécifique tandis que Angular CLI propose trois outils permettant de spécifier et d’exécuter des tests.

Le module de test d’Angular @angular/core/testing offre un composant nommé TestBed (testbed signifiant « banc de test ») permettant de créer un module de test qui admet en paramètre avec le composant à tester.

Angular CLI propose le framework Jasmine et les outils de tests Karma et Protractor :

Voici le schéma de programmation d’un test unitaire « minimaliste » spécifié avec Jasmine :

it('<Description du test>', async(() => { 
    const fixture = TestBed.createComponent(<nom du composant>); 
    ... 
    const app = fixture.debugElement.componentInstance; 
    const compiled = fixture.debugElement.nativeElement; 
    ... 
    expect(<critère à tester>).<méthode de test>; 
})); 

La méthode TestBed.createComponent() crée une instance spécifique du composant à tester et renvoie un objet qui permet d’accéder à cette instance (componentInstance) ainsi qu’à l’élément du DOM qu’il a pu créer (nativeElement).

Il suffit ensuite de spécifier l’attribut du composant ou le sous-élément du DOM à tester ainsi que la valeur attendue.

La méthode de test peut être choisie parmi de nombreux « matchers »...

Déploiement

Vous avez créé une application Angular avec Angular CLI qui est mûre pour être mise en production, vous voulez maintenant la déployer.

(Les serveurs Node.js étant eux-mêmes mis en production, n’oubliez pas de modifier les adresses IP des serveurs les hébergeant, mises en œuvre dans vos services Angular, le mieux étant de les factoriser dans un service Angular ad hoc.)

Pour cela, utilisez la commande ng buid -prod, qui génère un dossier nommé dist que vous pouvez optionnellement renommer et transporter tel quel dans un des dossiers gérés par votre serveur préféré (Apache, Node.js, http-server...). Vous pouvez (suivant les cas) également utiliser l’option --bh pour spécifier la nouvelle racine de votre application.

Dans les exemples de déploiement sous Apache, Node.js et http-server qui suivent, nous prenons comme exemple la mise en production de l’application d’e-commerce et nous nous plaçons dans le contexte d’un serveur Apache exécuté sur un serveur Linux/Ubuntu.

Pour simplifier les exemples qui suivent, nous considérons que le serveur physique de développement est le même que celui de production (mais bien entendu, ils devraient être différents).

ng build --prod --bh /OnLineSales/ 

mv dist OnLineSales ...

Pour aller plus loin

Grâce à cet ouvrage, nous espérons vous avoir convaincu de la pertinence d’une architecture MEAN qui associe Angular avec Node.js et MongoDB, pour créer des applications monopages efficaces. Angular vous permet de créer du code parfaitement modulaire et vous assure donc des coûts de développement optimisés. Node.js en duo avec MongoDB garantit une réactivité redoutable dans la gestion des données au travers de services web gérés par le framework Express.

Angular est le framework applicatif JavaScript le plus abouti, mais aussi le plus complexe. Cet ouvrage est une introduction à sa mise en œuvre au sein d’une architecture MEAN. Au fil des pages, nous avons présenté de nombreuses facettes de cet écosystème luxuriant et les avons illustrées avec de nombreux cas concrets.

Nous n’avons pas discuté des environnements de développement qui seraient les plus adéquats pour scripter des codes JavaScript, et spécifiquement des codes Angular. Utiliser tel ou tel environnement de développement est souvent très subjectif, mais nous vous recommandons Visual Studio, qui offre un confort remarquable dans la construction d’applications Angular.

Pour finir, nous vous invitons à optimiser vos techniques d’analyse et de visualisation d’informations en explorant...