Testez vos applications Front End avec JavaScript

Avant de vous lancer dans les tests d’intégration, petit rappel lexical. :)

On appelle parfois les tests d’intégration des tests fonctionnels, et on confond parfois les tests d’intégration avec les tests End2End (ou E2E).

C’est un quiproquo assez fréquent dans le milieu du développement, qui n’a heureusement aucune incidence. Mais c’est toujours bon à savoir pour votre culture générale. :D

Découvrez les tests d’intégration

Très bonne question !

Tout d’abord, vous devez savoir que les tests d’intégration arrivent souvent après les tests unitaires.

En effet, ils sont un peu plus complexes à réaliser, et vous aurez souvent besoin de librairies complémentaires pour les mettre en place. De plus, alors que les tests unitaires visent à tester des portions très précises de votre code, les tests d’intégration testent l’ensemble d’une fonctionnalité.

Dans ce type de test, on va donc simuler des clics de souris, compléter les champs de formulaire et récupérer des données auprès d’une API, pour voir si tout s’affiche comme il faut. Cela dit, ces tests ne correspondent pas non plus au parcours complet d’un utilisateur.

Un parcours complet serait plus proche des étapes suivantes :

• Je vais sur telle URL ;

• Je renseigne mon adresse e-mail et mon mot de passe, je valide ;

• J’arrive sur la page d’accueil d’utilisateur ;

• Je clique sur la page d’un capteur ;

• Je vérifie si je suis bien arrivé sur la page du capteur ;

• etc.

Dans ce type de cas, nous serions plutôt dans un test E2E. En effet, un test E2E va répliquer un parcours complet : nous allons parcourir plusieurs pages et regarder si tout fonctionne correctement. Un test d’intégration, lui, ne teste qu’une fonctionnalité d’une page.

Cette différence peut être parfois un peu légère, mais avec l’expérience et les exemples que nous allons voir ensemble, ça devrait être beaucoup plus clair. :)

Mettez en place vos tests d’intégration

Où devez-vous ajouter vos tests d’intégration ?

Comme pour les tests unitaires, il est important que vous ajoutiez vos tests d’intégration aux endroits les plus critiques de votre application.

Et comme pour les tests unitaires, il est important de prendre du recul sur votre projet. Cela dit, à la différence des tests unitaires, essayez d’analyser votre projet dans son ensemble, plus que votre code, dans un premier lieu.

Quelles sont les fonctionnalités critiques de votre application ? Ici, on ne parle pas forcément des plus simples ou des plus complexes, mais juste des fonctionnalités, qui, si elles cassent, ne vous permettent plus d’utiliser votre site correctement.

Nous allons devoir simuler des clics de souris, et voir si les données changent comme il faut.

const routes = [
{
    path: "/",
    component: SignIn
},
{
    path: "/home",
    component: Home
},
{
    path: "/add-sensor",
    component: AddSensor
},
{
    path: "/facade-details",
    component: FacadeDetails
},
]

const parseLocation = () => location.hash.slice(1).toLocaleLowerCase() || '/'

const findComponentByPath = (path, routes) => routes.find(r => r.path.match(new RegExp(`^\\${path}$`, 'gm'))) || undefined;

const bindEventListener = () => {
    if (parseLocation() === '/') {
        handleSignInForm()
    }
}

export const router = async () => {
    // Find the component based on the current path
    const path = parseLocation()

    // If there is not matching route, get the "Error" Component
    const { component = ErrorPage } = findComponentByPath(path, routes) || {}

    // Render the component in the app placeholder
    document.querySelector('#root').innerHTML = await component.render()
    
    // Finally bind the app event listeners
    bindEventListener()
}

Une fois que vous avez réalisé une liste de ces fonctionnalités critiques, plongez-vous dans le code et analysez-le. Vous pouvez d’ailleurs vous faire aider de quelqu’un de l’extérieur, comme un Product Manager.

Tout à fait !

Posez-vous des questions :

• Quelle est la complexité du code et de la fonctionnalité ?

• À quel(s) objets ou partie(s) de votre programme parle la fonctionnalité ?

Là encore, il est important de vous projeter dans cette fonctionnalité, et de bien la comprendre.

Réalisez des tests d’intégration pertinents

Une chose qui arrive souvent quand on réalise des tests d’intégration, c'est qu’on ne les teste qu’à moitié. On va tester seulement une partie de la fonctionnalité parce que cela prend trop de temps de faire le reste.

Ce genre de comportement est le plus souvent dû à une mauvaise compréhension des tests : on n’a pas vraiment réfléchi à ce qu'on va tester, alors on essaie de voir ce qui se fait ailleurs dans la base de code, et on fait la même chose.

Par exemple, sur le projet fil rouge, dans le cadre de notre routeur, il faut non seulement tester le clic de la souris, mais ne pas oublier de vérifier aussi que le titre de la page a changé. En effet, si vous oubliez de tester ce changement, votre test ne sera réalisé qu’à moitié, et le code coverage ne pourra pas vous aider à voir ce que vous avez oublié. :)

Découvrez des tests d’intégration pour le projet

Nous allons maintenant repartir sur notre projet fil rouge. Nous allons ici nous intéresser au formulaire de connexion. Vous n’avez pas besoin de changer de branche : vous pouvez rester sur la branche main.

Quels tests pourriez-vous réaliser ? N’hésitez pas à noter les réponses avant de regarder la vidéo ci-dessous.

Voici le lien vers l’issue comprenant l’ensemble des cas de tests à réaliser .

En résumé

• À la différence des tests unitaires, les tests d’intégration ont une portée (ou scope, en anglais) un peu plus grande. Ils testent l’ensemble d’une fonctionnalité.

• Avant de vous lancer dans la rédaction des tests, analysez et réfléchissez aux parties les plus critiques de votre application. Quand pourriez-vous les tester efficacement ?

• N’hésitez pas à vous faire aider soit d’un autre développeur, soit de quelqu’un d’extérieur, quelqu’un du produit par exemple, pour voir quelles parties tester.

Vous savez maintenant ce que sont les tests d’intégration, et surtout quelles parties doivent être testées. Nous allons maintenant les intégrer . :)