Commit 8a684657 authored by François Agneray's avatar François Agneray
Browse files

Ajout de la page les tests

parent d85abe68
Pipeline #6825 passed with stages
in 1 minute and 9 seconds
# Les tests
Nous allons voir dans cette partie comment écrire un test unitaire et comment éxecuter ce test.
## Jest
Nous avons choisi ici d'éxecuter nos tests unitaire avec le framework JEST. Pour éxecuter les tests il suffira d'appeler la commande make suivante :
```
make tests_client
```
## Architecture d'un fichier de test
Pour tester un `component` il faut ajouter un fichier qui porte le même nom que le component mais avec l'extension `.spec.ts`.
Par exemple pour tester le component `AppComponent` il faut ajouter un fichier `app.component.spec.ts`.
Le fichier test du component doit contenir une fonction `describe` et cette fonction prend deux paramètres :
- Un commentaire qui sera affiché à l'éxecution
- La fonction de `callback` éxecutée
Exemple:
```ts
describe('AppComponent', () => {
// Les tests doivent être ajoutés ici
});
```
La fonction spéciale `beforeEach` sera appelée avant l'éxecution de chaque test.
Cette fonction va nous permettre, par exemple, de configurer l'environement d'éxecution comme l'imports des dépendances, les mocks des services...
Exemple :
```ts
describe('AppComponent', () => {
beforeEach(() => {
// Configuration
});
});
```
Enfin pour ajouter un test il faut faire appel à la fonction `it` qui prend deux paramètres comme la fonction `describe` :
- Un commentaire de description du test qui sera affiché à l'éxecution
- La fonction de `callback` éxecutée
Exemple :
```ts
describe('AppComponent', () => {
beforeEach(() => {
// Configuration
});
it('should create app component', () => {
// Test la fonctionnalité
});
});
```
## Angular testing
Angular met à la disposition du développeur un package pour faciliter les tests unitaires dans `@angular/core/testing`.
Ici nous allons utiliser `TestBed` pour configurer notre environement d'éxecution et créer le component à tester.
Le component à tester est stocké dans une variable accessible par tout les tests.
Exemple :
```ts
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
let app: AppComponent;
beforeEach(() => {
// Configuration de l'environement d'éxecution
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
const fixture = TestBed.createComponent(AppComponent);
app = fixture.componentInstance;
});
it('should create the app', () => {
expect(app).toBeTruthy();
});
});
```
Pour tester une valeur il faut utiliser la fonction `expect` qui prend comme paramètre la valeur à tester et appeler une méthode de validation.
Ici `toBeTruthy` s'assure que app est bien créé.
## TP : Tester le component MissionListTableComponent
1. Ajouter le fichier `mission-list-table.component.spec.ts`
2. Appeler la fonction describe avec comme commentaire `Test du component MissionListTableComponent`
3. Ajouter une variable `component` de type `MissionListTableComponent` qui prendra l'instance du component à tester
4. Appeler la fonction `beforeEach` pour configurer l'environement d'éxecution
5. Dans `configureTestingModule` ajouter la clé `imports` qui prend comme valeur un tableau
6. Dans le tableau des imports ajouter `RouterTestingModule` depuis `@angular/router/testing`
7. Ajouter un test avec la fonction `it` pour s'assurer que le component est bien créé
8. Ajouter un test avec la fonction `it` pour tester la fonction `getFullNameByIdAgent`
9. Ajouter un agent au tableau d'agents du component à tester
10. Tester le retour de la fonction `getFullNameByIdAgent` avec la méthode `toEqual`
11. Lancer les tests avec `make tests_client`
\ No newline at end of file
......@@ -9,4 +9,5 @@ nav:
- L'authentification: authentification.md
- Les agents: agents.md
- Les missions: missions.md
- Les tests: tests.md
- Les améliorations: ameliorations.md
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment