Testez vos applications Front End avec JavaScript

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.

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. :)

Ç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é :

• Un cours d’introduction à React ;

• Et un cours React avancé avec des tests à l’intérieur.

Si vous vous intéressez à Vue :

• Alexia Toulmet a réalisé un cours complet sur Vue ;

• Une fois le cours réalisé, rendez-vous sur la documentation officielle pour voir comment tester vos applications en VueJS.

Si vous vous intéressez à Angular :

• Will Alexander a réalisé  un cours complet sur Angular ;

• La documentation officielle d’Angular est vraiment bien réalisée, et vous montre pas à pas comment tester vos applications.

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. :)