09. Testing

Test unitaires + code coverage

Pour la réalisation de nos tests unitaires, nous avons utilisé la librairie Jest qui nous permet de tester très facilement notre code à l'aide de test unitaire.

La réalisation des tests se fait de la manière suivante :

• création d'un dossier "test" au sein de la structure des fichiers en frontend.
• création au sein de ce nouveau dossier un fichier portant le nom : "nom_fichier_js_à_tester.test.js"

Avec la commande npm test, tous les fichiers se terminant par .test.js seront lancés, réalisant ainsi tous nos tests écris.

Nos tests unitaires ont la structure suivante :

Dans le fichier Inscription.test.js (visant à tester le fichier inscription.js), nous importons la fonction que nous désirons tester de la manière suivante :

import { notXSSInjection } from '../components/Inscription.js'

La structure du code de test est la suivante :

test('Nom de notre test', () => {
    'élements nécessaires pour le test';
    expect('élement').toBe('résultat attendu');
});

Il existe de nombreux comparateurs fournis avec Jest : Liste complète disponible ici.

Pour notre fonction , le code sera donc :

test('Tester la non injection XSS', () => {
    const test = notXSSInjection('<Logan');
    expect(test).toBe(false);
});

Voici ici une partie des tests unitaires que nous avons réalisés dans le cadre de notre projet :

Lien des tests unitaires 1, Lien des tests unitaires 2, Lien des tests unitaires 3

Code Coverage à faire

Tests d'intégration

Pour la réalisation de nos tests d'intégration, nous utilisons Jest et la librairie supertest qui permet de faire des tests sur nos serveurs HTTP.

Nous avons rencontré un problème lors du lancement du code en rapport avec axios. Nous avons donc du ajouter cette ligne la dans notre package.json, au niveau du "Scripts" :

"test": "react-scripts test --transformIgnorePatterns \"node_modules/(?!axios)/\""

Grâce à cette ligne, nous pouvons donc lancer nos tests utilisant axios sans soucis.

La réalisation des tests se font sur le backend de la manière suivante :

• Création d'un dossier tests dans le backend qui regroupera l'ensemble de nos fichiers de tests.
• Création d'un fichier dans ce dossiers qui reprendra tous les fichiers à tester (dans l'exemple ci dessous, des tests effectués sur le fichier user.js)
• Le fichier de tests s'appelle : npm_du_fichier.test.js

Avec la commande npx jest, l'ensemble des fichiers possédant ".test" dans leur nom seront lancés.

Nos tests d'intégrations ont la structure suivante :

describe(Nom du test, () => {
    it(Description du test, async () => {
        const res = await request(app)
            .méthode('route')
            .send(élément à tester);
        expect(élément de retour).toEqual(valeur attendue);
    })
});

Pour notre cas, afin de tester la connexion à notre application, notre code se présente de la manière suivante :

1. Nous importons les éléments nécessaire pour tester notre partie d'application :

const request = require('supertest');
const user = require('../models/User');
const app = require('../app.js');

2. Une fois ces éléments importés, nous pouvons tester le code de notre application

describe('Login', () => {
    it("retourne 200 si l'authentification est correcte", async () => {
        const res = await request(app)
            .post('/user')
            .send({ email: 'a', mdp: 'a' });
        expect(res.statusCode).toEqual(200);
    })
});

Ici, nous essayons de nous connecter sur notre application, en envoyant un email de compte avec son mot de passe correspondant à l'adresse réalisant la connexion. Nous nous attendons donc de recevoir en retour un status 200, signifant "OK", soit l'authentification réussie.

Nous aurions également pu tester de récupérer toutes les informations de l'utilisateur avec la même logique, rendant le test plus complexe et complet.

Exemple de tests d'intégration que nous avons réalisé ici

Tests End 2 End

Pour ce qui est de nos tests end-to-end, nous avons utilisé Cypress, il nous permet de faire des tests complet de notre application en simulant l'interaction d'un utilisateurs avec notre site web.

Pour initialiser cypress il faut entrer la commande "npx cypress open". Après cela un dossier cypress ce crée automatiquement possédant ces sous dossiers

La réalisation des tests se font sur le backend de la manière suivante :

• Lorsque on entre la commande "npx cypress open" un onglet cypress s'ouvre et nous propose de lancer les tests dans un moteur de recherche au choix
• Ensuite nous avons accès aux dossiers de lancement de nos tests end-to-end et pouvons choisir lequel lancer.
• Lorsque nous lançons les tests une interface s'ouvre avec notre site web qui évolue automatiquement en fonction des tests.

La structure du code des tests end-to-end est la suivante :

Bilan (Qu'avez-vous réalisé comme tests ? Quand ? Comment ? De Quel type ? Quel est votre point de vue ? )

Nous avons réaliser divers tests, allant des tests unitaire, intégration et end to end. Les tests unitaires ont été réalisés lors de l'implémentation de nouvelles fonctionnalitées. Les tests d'intégrations aux même moments. Les tests end-to-end afin de vérifier les fonctionnalités de l'application.

Jest nous a fortement aider pour la réalisation de nos tests. Il est simple d'utilisation, complet et intuitif.

Nous pensons avoir réaliser quelque test acceptables, mais nous aurions pu réellement fournir d'avantage de travail sur la partie testing. Hélas, les grosses fonctionnalisées manquantes du projet nous a demander beaucoup de travail, travail qui nous a empêcher de réaliser d'avantages de tests