Exécuter les tests Angular dans un conteneur

Table des matières

Prérequis

Terminez toutes les sections précédentes de ce guide, en commençant par Conteneuriser une application Angular.

Aperçu

Les tests sont une partie essentielle du processus de développement. Dans cette section, vous apprendrez à :

Exécuter des tests unitaires Jasmine en utilisant l'interface de ligne de commande Angular à l'intérieur d'un conteneur Docker.
Utiliser Docker Compose pour isoler votre environnement de test.
Assurer la cohérence entre les tests locaux et les tests basés sur des conteneurs.

Le projet docker-angular-sample est pré-configuré avec Jasmine, vous pouvez donc commencer rapidement sans configuration supplémentaire.

Exécuter les tests pendant le développement

L'application docker-angular-sample inclut un fichier de test d'exemple à l'emplacement suivant :

$ src/app/app.component.spec.ts

Ce test utilise Jasmine pour valider la logique de l'AppComponent.

Étape 1 : Mettre à jour compose.yaml

Ajoutez un nouveau service nommé angular-test à votre fichier compose.yaml. Ce service vous permet d'exécuter votre suite de tests dans un environnement conteneurisé et isolé.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26


services:
  angular-dev:
    build:
      context: .
      dockerfile: Dockerfile.dev
    ports:
      - "5173:5173"
    develop:
      watch:
        - action: sync
          path: .
          target: /app

  angular-prod:
    build:
      context: .
      dockerfile: Dockerfile
    image: docker-angular-sample
    ports:
      - "8080:8080"

  angular-test:
    build:
      context: .
      dockerfile: Dockerfile.dev
    command: ["npm", "run", "test"]

Le service angular-test réutilise le même Dockerfile.dev que celui utilisé pour le développement et remplace la commande par défaut pour exécuter les tests avec npm run test. Cette configuration garantit un environnement de test cohérent qui correspond à votre configuration de développement locale.

Après avoir terminé les étapes précédentes, votre répertoire de projet devrait contenir les fichiers suivants :

├── docker-angular-sample/
│ ├── Dockerfile
│ ├── Dockerfile.dev
│ ├── .dockerignore
│ ├── compose.yaml
│ ├── nginx.conf
│ └── README.Docker.md

Étape 2 : Exécuter les tests

Pour exécuter votre suite de tests à l'intérieur du conteneur, exécutez la commande suivante depuis la racine de votre projet :

$ docker compose run --rm angular-test

Cette commande va :

Démarrer le service angular-test défini dans votre fichier compose.yaml.
Exécuter le script npm run test en utilisant le même environnement que pour le développement.
Supprimer automatiquement le conteneur une fois les tests terminés, en utilisant la commande docker compose run --rm.

Vous devriez voir une sortie similaire à ce qui suit :

Suites de tests : 1 réussie, 1 total
Tests : 3 réussis, 3 total
Instantanés : 0 total
Temps : 1.529 s

Note

Pour plus d'informations sur les commandes Compose, consultez la référence de l'interface de ligne de commande Compose.

Résumé

Dans cette section, vous avez appris à exécuter des tests unitaires pour votre application Angular à l'intérieur d'un conteneur Docker en utilisant Jasmine et Docker Compose.

Ce que vous avez accompli :

Création d'un service angular-test dans compose.yaml pour isoler l'exécution des tests.
Réutilisation du Dockerfile.dev de développement pour garantir la cohérence entre les environnements de développement et de test.
Exécution des tests à l'intérieur du conteneur en utilisant docker compose run --rm angular-test.
Assurer des tests fiables et reproductibles dans tous les environnements sans dépendre de la configuration de votre machine locale.

Ressources connexes

Explorez les références officielles et les meilleures pratiques pour affiner votre flux de travail de test Docker :

Référence Dockerfile – Comprendre toutes les instructions et la syntaxe de Dockerfile.
Meilleures pratiques pour la rédaction de Dockerfiles – Rédigez des Dockerfiles efficaces, maintenables et sécurisés.
Référence du fichier Compose – Apprenez la syntaxe complète et les options disponibles pour configurer les services dans compose.yaml.
Référence de l'interface de ligne de commande docker compose run – Exécutez des commandes ponctuelles dans un conteneur de service.

Prochaines étapes

Ensuite, vous apprendrez à mettre en place un pipeline CI/CD en utilisant GitHub Actions pour construire et tester automatiquement votre application Angular dans un environnement conteneurisé. Cela garantit que votre code est validé à chaque poussée ou demande de tirage, maintenant la cohérence et la fiabilité tout au long de votre flux de travail de développement.