Le Guide Angular
  • Le Guide Angular par Wishtack
  • Pourquoi Angular ?
  • ECMAScript 6+
    • Un Peu d'Histoire
    • Propriétés du Langage
    • "Single-Threaded" donc Asynchrone
    • Classes
    • Hoisting is Dead: var vs. let vs. const
    • this & "binding"
    • Arrow Functions
    • Template Strings
    • Syntactic Sugar
      • Spread
      • Destructuring
      • Rest
      • Object Literal Property Value Shorthand
    • Named Parameters
    • Compatibilité
  • TypeScript
    • Pourquoi TypeScript ?
    • De l'ECMAScript au TypeScript
    • Visibilité des Propriétés
    • Typing des Propriétés
    • Types
    • Interfaces
    • Inference
    • Duck Typing
    • Duck Typing Patterns
      • Compatibilité de Librairies
      • Entity Constructor
    • Décorateurs
      • Décorateurs de Propriété
      • Décorateurs de Classe
      • Décorateurs de Méthode & Paramètres
    • Quelques Liens
  • Tools
    • Git
    • Command Line
    • NodeJS
    • NPM
    • Yarn
      • Pourquoi Yarn ?
      • Définition et Installation des Dépendances
      • Scripts
      • Mise à Jour et Automatisation
    • Chrome
    • IntelliJ / WebStorm / VSCode
      • Raccourcis clavier IntelliJ / WebStorm
    • Floobits
    • Angular CLI
    • StackBlitz
    • Compodoc
  • Angular
    • Bootstrap
    • Composants
      • Root Component
      • Template Interpolation
      • Property Binding
      • Class & Style Binding
      • Event Binding
      • *ngIf
      • *ngFor
      • L'approche MVC
      • Création de Composants
      • Exemple
    • Container vs. Presentational Components
    • Interaction entre Composants
      • Input
      • Output
      • Exemple
    • Change Detection
      • Les Approches Possibles
      • Fonctionnement de la Change Detection
      • Optimisation de la Change Detection
      • Immutabilité
      • Quelques Liens
    • Project Structure & Modules
      • Entry Point
      • Définition d'un Module
      • Root Module
      • Feature Module
      • Shared Module
      • Exemple
    • Dependency Injection
      • Qu'est-ce que la "Dependency Injection" ?
      • Injection d'un Service Angular
      • Services & Providers
      • Portée des Services
      • Tree-Shakable Services
      • Class vs Injection Token
      • Exemple
    • Callback Hell vs. Promise vs. Async / Await
      • Callback Hell
      • Promise
      • Async / Await
    • Observables
      • Reactive Programming
      • Promise vs Observable
      • Subscribe
      • Unsubscribe ⚠️
      • Création d'un Observable
      • Opérateurs
        • Définition d'un Opérateur
        • Lettable Operators vs Legacy Methods
        • map
        • filter
        • mergeMap & switchMap
        • shareReplay
        • buffer
        • debounceTime
        • distinctUntilChanged
        • retry
      • Quelques Liens
    • Http
      • Pourquoi HttpClient ?
      • Utilisation de HttpClient
      • Utilisation dans un Service
      • Gestion de la Subscription ⚠️
    • GraphQL
    • Formulaires
      • Template-driven Forms 🤢
      • Reactive Forms 👍
        • Avantages des "Reactive Forms"
        • La boite à outils des "Reactive Forms"
        • Validation
        • Observation des Changements
    • Directives
      • Attribute Directive
      • Structural Directive
    • Pipes
    • Routing
      • Mise en Place du Routing
      • Lazy Loading
      • Project Structure
      • Route Guards
    • Testing
      • Unit-Testing
        • Jasmine
        • Unit-Test Synchrone
        • Test-Driven Development
        • Unit-Test Asynchrone
        • TestBed
        • Unit-Test d'un Service
        • Unit-Test d'un Composant
        • Unit-Test et Spies
        • Unit-Test et HttpClient
      • End-to-End
    • Sécurité
      • Quelques Liens
    • Animation
    • Internationalisation
    • Quelques Liens
  • Cookbook
    • Authentification et Autorisation
Powered by GitBook
On this page
  • Configuration
  • Exécution des Tests
  • Fonctionnement de Karma
  • "Code Coverage"

Was this helpful?

  1. Angular
  2. Testing

Unit-Testing

PreviousTestingNextJasmine

Last updated 5 years ago

Was this helpful?

Configuration

Grâce à , tous les outils nécessaires à l'implémentation et l'exécution des tests unitaires sont installés et pré-configurés dès la création de l'application. Cf. fichier karma.conf.js.

Exécution des Tests

La commande yarn test permet de déclencher la commande ng test --watch.

L'option --watch permet de relancer les tests unitaires à chaque changement dans le code.

Cela permet de s'assurer en temps réel que les développements en cours n'ont pas d'effets négatifs sur les tests existants et également de savoir quand la fonctionnalité est opérationnelle.

Pour lancer les tests sur un environnement d'intégration continue, pensez à ajouter une commande dédiée dans les scripts du package.json :

"scripts": {
    "test": "ng test --watch",
    "test:singlerun": "ng test --code-coverage"
}

La commande ng test lance les tests unitaires en utilisant (ex testacular: Cf. ).

Karma est un outil permettant de configurer et d'interconnecter simplement les différents éléments nécessaires à la mise en place de tests unitaires frontend : "watch" des changements, "build" des tests, exécution des tests sur les "browsers", "debug", "reporting", "code coverage" etc...

Fonctionnement de Karma

Au lancement des tests :

  1. Karma déclenche les "browsers" demandés qui se connectent sur le serveur Karma,

  2. Karma "watch" les changements du code source des tests unitaires et récursivement des fichiers importés depuis ces tests,

  3. à chaque changement, Karma déclenche le "build" du code source modifié,

  4. à chaque build, Karma émet un événement aux "browsers" connectés par WebSocket pour les informer du changement et demander l'exécution des tests,

  5. les tests sont exécutés sur le "browser" et les résultats sont transmis au serveur Karma,

  6. Karma produit les rapports en fonction des plugins activés : console, HTML, "code coverage" etc...

Par défaut, tous les fichiers .spec.ts contenus dans le dossier src sont importés pour être exécuter. Cf. src/test.ts.

"Code Coverage"

L'option --code-coverage permet de produire un rapport indiquant quelles parties de code sont couvertes ou non par les tests.

Les rapports sont produits dans le dossier coverage et contiennent des fichiers HTML "Human Readable" mais aussi d'autres formats tels que "lcov" pour une intégration plus facile avec les outils d'intégration continue.

Cette option n'est pas activé par défaut pour éviter de ralentir les tests lancés avec l'option --watch.

Le "code coverage" n'est indiqué que pour les fichiers qui sont importés par les tests unitaires.

Le code source qui n'est jamais importé par les tests unitaires n'est donc pas comptabilisé.

Karma déclenche un serveur permettant de communiquer avec les "browsers" (généralement sur : ),

Angular CLI
Angular CLI
Karma
https://github.com/karma-runner/karma/issues/376
http://localhost:9876
Jasmine
Unit-Test-Synchrone
Unit-Test-Asynchrone
Unit-Test d'un service
Unit-Test d'un composant
Unit-Test et HttpClient