• 10 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 07/03/2022

Allez plus loin dans la réalisation de vos tests

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans le monde professionnel, vous travaillez la plupart du temps avec des frameworks pour réaliser vos applications front-end, tels que React, Angular ou Vue.

Pourquoi avons-nous réalisé ce cours sans framework, déjà ?

Rappelez-vous, on avait abordé au début du cours le fait que cela nous permettait de nous concentrer sur l’essentiel : les tests. Autrement dit, vous avez appris à les rédiger, à connaître la différence entre un bon et un mauvais test, et surtout vous avez pu concentrer votre apprentissage sur une chose : les tests.

Les bases que vous avez acquises pour rédiger des tests vous serviront quel que soit le framework sur lequel vous allez travailler. De plus, la rédaction des tests unitaires sera sensiblement la même entre vos différents projets.

Cela dit, les tests d’intégration vont être en partie différents à réaliser. Ils vont utiliser des librairies différentes en fonction du framework que vous utilisez. Vous devriez néanmoins trouver des points communs dans leur rédaction.

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";
import { act } from "react-dom/test-utils";
import Hello from "./hello";
let container = null;
beforeEach(() => {
// setup a DOM element as a render target
container = document.createElement("div");
document.body.appendChild(container);
});
afterEach(() => {
// cleanup on exiting
unmountComponentAtNode(container);
container.remove();
container = null;
});
it("renders with or without a name", () => {
act(() => { render(<Hello />, container); });
expect(container.textContent).toBe("Hey, stranger");
act(() => {
render(<Hello name="Jenny" />, container);
});
expect(container.textContent).toBe("Hello, Jenny!");
act(() => {
render(<Hello name="Margaret" />, container);
});
expect(container.textContent).toBe("Hello, Margaret!");
});
@Component({
selector: 'lightswitch-comp',
template: `
<button (click)="clicked()">Click me!</button>
<span>{{message}}</span>`
})
export class LightswitchComponent {
isOn = false;
clicked() { this.isOn = !this.isOn; }
get message() { return `The light is ${this.isOn ? 'On' : 'Off'}`; }
}
describe('LightswitchComp', () => {
it('#clicked() should toggle #isOn', () => {
const comp = new LightswitchComponent();
expect(comp.isOn).toBe(false, 'off at first');
comp.clicked();
expect(comp.isOn).toBe(true, 'on after click');
comp.clicked();
expect(comp.isOn).toBe(false, 'off after second click');
});
it('#clicked() should set #message to "is on"', () => {
const comp = new LightswitchComponent();
expect(comp.message).toMatch(/is off/i, 'off at first');
comp.clicked();
expect(comp.message).toMatch(/is on/i, 'on after clicked');
});
});

Comme vous pouvez le constater, il y a de nombreux points communs dans la réalisation de ces deux tests, ainsi que dans les tests que vous avez pu voir tout au long de ce cours. Vous y retrouvez les mots clés Describe  , it  , et les matchers. :)

Mais alors, quelle est la prochaine étape ? Que conseillerais-tu une fois ce cours terminé ?

Ça dépend (ma réponse préférée :)).

Si vous connaissez et travaillez déjà avec un framework front-end, je vous invite à regarder comment réaliser des tests d’intégration avec ce framework. Si, par contre, vous ne connaissez pas encore de framework, essayez de suivre un cours dessus, d’apprendre à vous en servir, et de regarder comment réaliser des tests dessus après.

Si vous vous intéressez à React, Alexia Toulmet a réalisé :

Si vous vous intéressez à Vue :

Si vous vous intéressez à Angular :

Enfin, si c’est plus la partie CI qui vous intéresse, essayez de découvrir les autres services de CI du marché, tels que Jenkins, ou de mettre en place une pipeline CI sur AWS.

Avant de vous laisser, j’aimerais vous remercier de votre attention et du temps que vous avez pris pour réaliser ce cours. L’informatique est l’une de mes passions, et la transmission de mes connaissances en est une autre. N’hésitez surtout pas à me contacter sur LinkedIn pour me donner un feedback sur le cours, et plus précisément ce qui vous a plu et déplu.

Merci encore et à bientôt. :)

Exemple de certificat de réussite
Exemple de certificat de réussite