Permettez-moi de vous parler brièvement des tests angulaires.
Comment concevez-vous vos applications angulaires pour être testables ?
Comment concevez-vous les tests pour votre application angulaire ?
Comment exécutez-vous les tests et assurez-vous que
votre application angulaire satisfait tous les tests que vous avez écrit
même lorsque vous développez votre application angulaire ?
Maintenant, c'est là que je parlerais aussi brièvement du développement piloté par les tests
des applications angulaires.
Fait intéressant, angulaire lui-même a été construit à partir de la base pour permettre le test,
pour faire partie de votre développement d'applications angulaires.
La force principale derrière angulaire Misko Hvery était lui-même un ingénieur de test Google et donc,
son influence sur la conception angulaire pour être testable de
ground-up peut facilement être vu partout dans le cadre.
Donc, angulaire lui-même comme vous l'avez compris dans les conférences et exercices précédents,
est de nature modulaire.
Ainsi, les modules d'angulaire avec les composants et
leurs modèles, puis les services et les tuyaux et les directives,
signifient que angulaire se prête facilement pour être testé.
Maintenant, parce que l'application angulaire elle-même est composée de ces différentes parties,
vous pouvez tester chacune de ces parties en isolement premier
avant même qu'elles ne fassent partie de l'application angulaire entière.
Le deuxième aspect est le mécanisme d'injection de dépendance que l'angulaire tire parti de
pour soutenir la combinaison des différentes parties de
votre application angulaire elle-même signifie que vous pouvez facilement remplacer les mocks
pour ces dépendances dans
vos différentes parties de l'angulaire application et effectuer des tests.
J'ai utilisé le mot mock dans,
dans la phrase précédente va venir à comprendre
que dans un peu plus en détail et plus que, plus tard diapositives.
C'est là que nous devons être conscients de
une approche pour faire le développement d'applications appelée développement piloté par les tests.
Dans le développement piloté par les tests, comme vous pouvez le comprendre par le nom lui-même,
signifie que vous écrivez d'abord des tests automatisés pour
toutes les fonctionnalités que vous souhaitez implémenter dans votre application.
Alors vient d'abord le test,
ensuite vous écrivez votre code d'application afin de passer le test.
Donc, le test lui-même spécifie quelle fonctionnalité vous voulez implémenter.
Ensuite, vous écrivez le code pour implémenter cette fonctionnalité.
Puisque vous avez déjà le test en place,
vous pouvez tester pour voir si l'implémentation que vous faites satisfait ou non le test.
Maintenant, bien sûr, une fois que votre réalisation de vos fonctionnalités satisfait le test,
vous pouvez toujours refactoriser le code pour se conformer à leurs normes d'ingénierie logicielle.
Mais même après cela,
vous pouvez retester le code pour vous assurer qu'il satisfait toujours
les exigences spécifiées dans
ce test spécifique que vous utilisez dans votre développement piloté par les tests.
Donc, en effet, le développement piloté par les tests est
une approche très viable pour concevoir
une bonne application à partir de la base pour être entièrement testée.
Maintenant, quand nous parlons de tests,
vous pouvez aborder les tests à partir de plusieurs aspects différents.
Le premier et avant tout est que si votre application
elle-même est implémentée sous forme de différentes pièces,
comme des composants, comme des services, comme des directives,
comme les tuyaux que vous implémentez dans votre application.
Cela signifie que vous pouvez facilement tester chacune de ces unités individuelles en isolement.
C'est donc là que les tests unitaires viennent au premier plan.
Test unitaire signifie que vous testez les unités de code individuelles,
en vous assurant que cette unité individuelle en particulier
satisfait la fonctionnalité qu'elle est censée prendre en charge,
et que la fonctionnalité et la logique dans ce morceau de code sont implémentées correctement.
Maintenant, isoler l'unité et le tester est très,
très utile pour comprendre la plupart des problèmes initiaux dans votre,
dans votre code, puis les réparer avant même d'intégrer ce patch dans le code.
Maintenant, une fois que vous commencez à intégrer ces parties dans l'ensemble,
, il devient encore plus lourd de pouvoir effectuer des tests détaillés de votre code.
Donc, par conséquent, les tests unitaires isolés forment la première ligne
de défense contre les bogues lorsque vous développez votre application,
spécifiquement votre application angulaire.
Maintenant, comme nous le voyons avec un angulaire,
nous avons une séparation claire entre les composants angulaires et le DOM lui-même.
Ainsi, dans un composant, par exemple,
la logique de votre composant est complètement implémentée dans
le code dactylographié que vous avez implémenté dans un composant qui dactylographié fichiers.
Et puis le DOM lui-même est contrôlé via
le modèle que vous avez conçu pour votre composant angulaire.
Donc Beta elle-même, vous voyez la séparation claire entre les deux.
Donc, vous pouvez simplement tester la logique de
votre code de composant lui-même sans écrire un modèle vertical.
Mais alors vous pourriez aussi considérer les deux ensemble et ensuite évaluer ces aspects.
Comme nous le verrons dans l'exercice qui suit cette conférence,
nous allons réellement faire ces deux approches.
Non seulement cela, le fait que angulaire utilise l'injection de dépendance
signifie que vous pouvez injecter des dépendances fictives dans votre application.
Quand je dis faux, je veux dire, par exemple,
si votre composant dépend d'un service particulier, vous pouvez toujours implémenter
un service simulé qui imite le comportement du service
, puis le substituer en place pendant que vous testez le composant afin que vous puissiez garder
votre composant indépendamment de la façon dont le service est réellement mis en œuvre.
Tant que l'interface entre votre composant et le service est correctement conçue
, vous pouvez remplacer un service simulé en place et toujours tester votre composant.
Là, à partir de la maquette,
vous pouvez facilement contrôler ce qui est fourni au composant à partir du service.
Donc, cette approche vous permet de faire des tests unitaires
en détail dans votre application angulaire.
C'est là que la disponibilité des frameworks de test comme « Jasmine ».
Donc, ce que Jasmine fournit est
un framework de test basé sur le comportement qui est complètement conçu en JavaScript.
Maintenant, ce framework Jasmine est un framework général qui
est disponible pour tester toutes les applications JavaScript.
Angular adopte Jasmine comme approche pour spécifier nos tests pour d'autres parties angulaires,
leurs composants, les services et divers aspects de notre application angulaire.
Maintenant, au sein de Jasmine, Jasmine utilise deux choses qui viennent à votre aide.
Un est l'utilisation d'une fonction « description ».
La fonction « description » vous permet de regrouper un ensemble de tests, puis
exécuter ces tests ensemble en un seul groupe de tests.
Quand nous écrivons le code dans l'exercice, vous me verrez
englobant un ensemble de tests dans une fonction de description.
Ensuite, nous écrivons notre code pour notre,
le code Jasmine, pour nos tests angulaires.
Maintenant, dans ces fonctions « décrivez », vous utiliserez également ce qu'on appelle des fonctions « it ».
Les fonctions « it » vous permettent de spécifier
tests individuels que vous souhaitez effectuer sur votre application angulaire.
C'est donc là que vous me verrez spécifier « it » et ensuite spécifier que
la nature du test particulier et puis
concevoir le code pour ce test particulier avec une fonction « it ».
Alors que nous concevons le code dans l'exercice, recherchez le « description » et
le « it » dans vos applications de test angulaires.
Une fois que vous avez conçu le test avec le framework Jasmine,
Karma est un outil de ligne de commande basé sur JavaScript
qui vous permet d'effectuer ces tests automatiquement.
Maintenant, Karma avec Jasmine,
vous permet d'effectuer des tests pour votre application angulaire.
Maintenant avec Karma, ce que Karma prend en charge,
est qu'il vous permet de générer
un serveur web dans lequel vous chargez votre code source d'application et
puis Karma utilise ensuite un navigateur pour effectuer les tests réels de vos différentes unités.
C'est donc là que lorsque vous exécutez vos tests en utilisant Karma,
vous verrez Karma empiler un navigateur,
si c'est une fenêtre de navigateur d'un navigateur existant ou
si vous utiliseriez quelque chose appelé PhantomJS qui démarre
un navigateur fantôme dans les coulisses pour effectuer le test.
Peu importe, mais Karma utilise
le navigateur en un instant pour effectuer le test de votre application angulaire.
Comme vous le verrez dans l'exercice qui suit,
c'est là que si l'un de vos collègues insiste sur le fait que sa mise en œuvre de
un morceau particulier de votre application angulaire est
correct et continue de souligner le point,
vous pouvez toujours concevoir quelques tests en utilisant Jasmine et
Karma puis effectuer les tests et si les tests échouent,
vous pouvez toujours réfuter leur argument.
Alors c'est à ce moment-là que vous pouvez vous tourner,
tourner autour de votre collègue et dire,
mon Karma a couru sur votre dogme.
Maintenant, bien sûr, vos applications angulaires ne sont pas complètement dépourvues
de l'implication du framework angulaire lui-même.
Votre composant ne peut pas être conçu par vous-même sans
en utilisant la plupart des fonctionnalités de bibliothèque que angular vous fournit,
bien qu'une partie de la logique de base puisse être testée indépendamment de angulaire.
Ce que nous appelons des tests isolés.
Mais, de plus en plus,
vous constaterez que, sauf si vous en,
voulez le support de cadre angulaire lui-même, vous
ne serez pas en mesure d'effectuer une grande partie du test de
vos parties angulaires, que ce soit des composants ou des services ou des tuyaux ou des directives.
C'est donc là que les utilitaires de test angulaire fournissent
un environnement de test qui vous permet d'effectuer
les tests unitaires dans votre application angulaire.
Donc, les utilitaires de test angulaire comme vous me verrez utiliser dans les exercices,
dans le tout prochain exercice,
nous fourniront certaines implémentations de fonctionnalités angulaires que vous utilisez
dans vos tests afin de mettre en place l'environnement où vous pouvez effectuer leurs tests.
Donc, c'est là que l'interaction avec l'environnement angulaire,
au lieu d'utiliser les implémentations angulaires réelles,
vous utiliserez ces utilitaires de test qui fourniront
suffisamment de fonctionnalités pour vous permettre d'effectuer les tests.
Et c'est là que le TestBed que nous utiliserons
dans notre application angulaire est très, très utile.
Le TestBed crée essentiellement un test angulaire modulaire.
Comme vous le réalisez, vos composants n'existent pas par eux-mêmes.
Vos composants doivent être inclus dans un module NG.
Maintenant, vous ne pouvez pas simplement utiliser un module NG standard pour effectuer vos tests.
C'est donc là que le TestBed,
qui est pris en charge par l'utilitaire de test angulaire,
vous fournit un environnement de module NG qui vous permet de tester leurs composants.
Donc, dans le TestBed,
, vous utiliserez quelque chose appelé TestBed Create Component pour créer
un composant individuel et une instance du composant pour effectuer les tests à ce sujet.
Et quand vous faites cela
, le TestBed vous donne accès à quelque chose appelé ComponentFixture,
le ComponentFixture est quelque chose qui vous fournit une poignée qui vous permet d'entourer
votre composant avec suffisamment de fonctionnalités pour que le composant puisse être testé par lui-même.
Le luminaire donne accès au composant lui-même et
puis aussi à travers cela, nous allons utiliser quelque chose appelé le DebugElement.
Vous me verrez utiliser cela dans l'exercice qui suit.
Le DebugElement vous donne accès au DOM,
qui est le modèle qui est pris en charge dans le cadre de votre composant.
Ainsi, vous pouvez faire des manipulations sur le DOM comme cliquer sur des éléments dans le DOM,
obtenir l'accès à un élément DOM, puis lire ce qui est enfermé
à l'intérieur de ces éléments Dom et ainsi de suite qui vous permettra d'effectuer les tests.
Maintenant, avant de passer à l'exercice,
je veux que vous soyez au courant de certaines de ces choses afin que lorsque nous les rencontrons dans
l'exercice lui-même vous comprendrez pourquoi je fais usage de chacune de ces différentes pièces.