> For the complete documentation index, see [llms.txt](https://guide-angular.wishtack.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://guide-angular.wishtack.io/angular/testing/unit-testing.md).

# Unit-Testing

## Apprenez à unit-tester vos applications Angular avec nos recettes de dev sur Marmicode

{% embed url="<https://marmicode.fr>" %}
Marmicode
{% endembed %}

## Configuration

Grâce à [Angular CLI](/tools/angular-cli.md), **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 [Angular CLI](/tools/angular-cli.md) **`ng test --watch`**.

{% hint style="info" %}
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` :

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

{% endhint %}

La commande `ng test` lance les tests unitaires en utilisant [**Karma**](https://karma-runner.github.io/2.0/index.html) *(ex testacular: Cf.* [*https://github.com/karma-runner/karma/issues/376*](https://github.com/karma-runner/karma/issues/376)*)*.

**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 un serveur** permettant de communiquer avec les "browsers" *(généralement sur :* [*http://localhost:9876*](http://localhost:9876)*)*,
2. Karma **déclenche les "browsers" demandés** qui se connectent sur le serveur Karma,
3. Karma "**watch**" les changements du **code source** des tests unitaires et récursivement des fichiers importés depuis ces tests,
4. à chaque changement, Karma **déclenche le "build"** du code source modifié,
5. à 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**,
6. les tests sont exécutés sur le "browser" et les résultats sont transmis au serveur Karma,
7. Karma **produit les rapports** en fonction des plugins activés : console, HTML, "code coverage" etc...

{% hint style="info" %}
Par défaut, tous les fichiers `.spec.ts` contenus dans le dossier `src` sont importés pour être exécuter. Cf. `src/test.ts`.
{% endhint %}

### "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.

{% hint style="info" %}
Cette option n'est pas activé par défaut pour éviter de ralentir les tests lancés avec l'option `--watch`.
{% endhint %}

{% hint style="warning" %}
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é**.
{% endhint %}

{% content-ref url="/pages/-LDLbVWCkxGz1WKpvVXm" %}
[Jasmine](/angular/testing/unit-testing/jasmine.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LDLb2KAOd4UBoKymd8N" %}
[Unit-Test Synchrone](/angular/testing/unit-testing/unit-test-synchrone.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LDLb\_Fm-Q0eBei89e16" %}
[Unit-Test Asynchrone](/angular/testing/unit-testing/unit-test-asynchrone.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LDLbb22bRwrGZClyf02" %}
[Unit-Test d'un Service](/angular/testing/unit-testing/unit-test-dun-service.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LDLbpFiKBymwdHaU6Fv" %}
[Unit-Test d'un Composant](/angular/testing/unit-testing/unit-test-dun-composant.md)
{% endcontent-ref %}

{% content-ref url="/pages/-LDLbvsB27Kr5YyIu9tM" %}
[Unit-Test et HttpClient](/angular/testing/unit-testing/unit-test-et-httpclient.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://guide-angular.wishtack.io/angular/testing/unit-testing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.