Simple guide to start testing your angular app

1. Tester votre
application
Angular 2+
Un guide par FERDINAND

2. Introduction
Tout comme son prédécesseur Angular 1, Angular a été
conçu avec la testabilité comme objectif principal.
Quand nous parlons de tests dans Angular, nous parlons
généralement de deux types de tests différents:
Test Unitaire
Test Fonctionnel (E2E)

3. Test Unitaire
➔ C’est quoi Jasmine?
➔ Comment écrire des tests dans Jasmine?
➔ C’est quoi Karma?
➔ Comment créer et exécuter des tests en
utilisant l'interface CLI Angular?

4. Jasmine est un framework
de test javascript
permettant de créer des
tests sous format
lisible par les humains
Tip
Jasmine applique une
pratique de
développement de
logiciels appelé
Behaviour Driven
Development, ou BDD
tous court.
C’est quoi Jasmine?

5. Exemple de fonctions à tester
function Bonjour() {
return 'Bonjour tout le monde!';
}
Jasmine Test
describe('Test Fonction Bonjour', () =>{
it('Doit dire Bonjour', () => {
expect(Bonjour())
.toEqual('Bonjour tout le monde!');
});
});
Comment écrire des tests sous Jasmine? Tip
Lambda Expression
( x : number) => { x*10 }
Cela remplace
function (x : number ) { return x*10 }
describe(string, function) La fonction définit une suite de
tests, une collection de spécifications de test individuelles (it).
it(string, function) définit une spécification de test
individuelle, qui contient une ou plusieurs attentes de test(expect).
expect(actual) l'expression est ce que nous appelons une attente.
En conjonction avec un Matcher, il décrit un comportement attendu dans
l'application.
L'expression matcher (attendue) fait une comparaison booléenne
avec la valeur attendue transmise par rapport à la valeur réelle passée à la
fonction expect, si elles sont fausses, la spécification échoue.

6. Exemple de Matchers
Jasmine vient avec quelques Matchers
prédéfinie comme ça:
expect(array).toContain(member);
expect(fn).toThrow(string);
expect(fn).toThrowError(string);
expect(instance).toBe(instance);
expect(mixed).toBeDefined();
expect(mixed).toBeFalsy();
expect(mixed).toBeNull();
expect(mixed).toBeTruthy();
expect(mixed).toBeUndefined();
expect(mixed).toEqual(mixed);
expect(mixed).toMatch(pattern);
expect(number).toBeCloseTo(number,decimalPlaces;
expect(number).toBeGreaterThan(number);
expect(number).toBeLessThan(number);
expect(number).toBeNaN();
expect(spy).toHaveBeenCalled();
expect(spy).toHaveBeenCalledTimes(number);
expect(spy).toHaveBeenCalledWith(...arguments);

7. Karma
Exécuter manuellement des tests Jasmine en actualisant un onglet du
navigateur à plusieurs reprises dans différents navigateurs chaque fois que
nous modifions du code peut devenir fastidieux.
Karma est un outil qui nous permet d'exécuter des tests de jasmin à partir de la
ligne de commande.
Karma peut également regarder vos fichiers de développement pour les
changements et relancer les tests automatiquement.
C’est quoi Karma?

8. Angular CLI
Les fichiers de test doivent y avoir l’extension
.spec.ts dans le dossier src/app
Lors de la création d’un composant(exp.
Home) à l’aide du CLI il genere
automatiquement deux fichiers
home.component.ts
Home.component.spec.ts
La même chose pour les services et les pipes
home.pipe.ts
Home.pipe.spec.ts
home.service.ts
Home.service.spec.ts

9. Angular CLI
La CLI Angular télécharge et installe
tout ce dont vous avez besoin pour
tester une application Angular avec le
framework de test Jasmine.
Le projet que vous créez avec la CLI est
immédiatement prêt à être testé.
Il suffit d'exécuter cette commande
CLI:
> ng test
10% building modules 1/1 modules 0 active
...INFO [karma]: Karma v1.7.1 server started
at http://0.0.0.0:9876/
...INFO [launcher]: Launching browser
Chrome ...
...INFO [launcher]: Starting browser Chrome
...INFO [Chrome ...]: Connected on socket ...
Chrome ...: Executed 3 of 3 SUCCESS
(0.135 secs / 0.205 secs)
La résultat dans le console est la suivante :

11. Tester un Component
Describe
BeforeEach
Create Test Component
TestComponentBuilder
Debugging Fixture component
It
Expect

12. Créer un Component
app/first/first.component.ts
@Component({
selector: 'app-first’,
template: '<h1>{{titre}}</h1>',
})
export class FirstComponent {
titre = 'This is my first test';
}
Créer le test
app/first/first.component.spec.ts
// Donner un titre à la collection du test
describe('Test First Component', () => {
// Déclarer les différentes variables
let component: FirstComponent;
let fixture: ComponentFixture<FirstComponent>;
let h1: HTMLElement;
// Avant Chaque (it) on peut initialiser les variables déclarées
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [FirstComponent],
});
fixture = TestBed.createComponent(FirstComponent);
component = fixture.componentInstance;
h1 = fixture.nativeElement.querySelector('h1');
});
// Une specification de test
it('should display original title', () => {
// Nous attendons que la valeur du h1 soit égale au var. titre
expect(h1.textContent).toContain(component.titre);
});
});

13. Tester un Service
TestBED
Inject

14. Créer un Service
app/first/first.service.ts
@Injectable()
export class FirstService {
constructor(private firstService: FirstService)
{ }
getValue() { return “Data”); }
}
Créer le test
app/first/first.service.spec.ts
import { TestBed, inject } from '@angular/core/testing';
describe(‘Testing get value()', () => {
beforeEach(() => {
TestBed.configureTestingModule({
providers: [FirstService]
});
});
it('should Be GET method & Return data>',
inject([FirstService], (firstService) => {
expect(firstService.getValue()).toEqual(‘data’);
}));
});

15. Tester un Service avec
http
MockBackend
Http
TestBED
Inject

16. Créer un Service
app/first/first.service.ts
@Injectable()
export class FirstService {
constructor(private firstService: FirstService) { }
getValue() {
return this.http.get(url, { headers: headers })
.toPromise()
.then(response => { return response.json() })
.catch(this.handleError);
}
}
Créer le test
app/first/first.service.spec.ts
import { TestBed, async, inject } from '@angular/core/testing';
import { HttpModule,Http,Response,ResponseOptions,XHRBackend, RequestMethod} from
'@angular/http';
import { MockBackend } from '@angular/http/testing'
describe(‘Testing get value()', () => {
beforeEach(() => {
TestBed.configureTestingModule({
imports: [HttpModule],
providers: [FirstService, XHRBackend, RequestMethod]
});
});
it('should Be GET method & Return data>',
inject([FirstService, XHRBackend], (FirstService, mockBackend) => {
mockBackend.connections.subscribe((connection) => {
expect(connection.request.method).toBe(RequestMethod.Get);
connection.mockRespond(new Response(new ResponseOptions({
body: JSON.stringify(data)
})));
});
FirstService.getValue().then(
(data) => {expect(data).toBeDefined();}
}));
});

17. Test Fonctionnel (E2E)
Ceci est défini comme le test de la
fonctionnalité complète d'une application. En
pratique, avec les applications Web, cela
signifie interagir avec votre application car elle
fonctionne dans un navigateur, tout comme un
utilisateur interagissait avec elle dans la vie
réelle, c'est-à-dire via des clics sur une page.
Exemple : Protactor

18. Unit vs E2E
APIs
Minuscule
Boîte blanche
Isolé du monde
Test Unitaire
UIs
Large
Boîte noire
Faire les pièces s'emboîtent
Test E2E

19. Merci!
Développeur Full-stack avec une grande
passion.
"LIFE IS NOT PERFECT AND THE GREATEST
LESSONS OF ALL ARE LEARNED BY MAKING
MISTAKES AND IMPROVING"
-PAUL VII
Ussef Ben Amor
(Ferdinand)