Tester avec Vitest et passer à TypeScript

Un test unitaire est un petit programme qui appelle une fonction avec des données choisies et vérifie qu'elle renvoie le résultat attendu ; on le relance après chaque modification pour s'assurer que rien n'a cassé. Ce chapitre montre comment tester les règles de Gestock avec Vitest, l'outil de test du monde Vite, puis comment TypeScript, JavaScript complété par des types, détecte une partie des erreurs avant même l'exécution. Les principes généraux des tests (types de tests, cas de test, non-régression, couverture) sont enseignés dans le cours Tests unitaires et non-régression ; ici, on se concentre sur leur mise en œuvre en JavaScript.

Pourquoi tester ses fonctions

Tu as écrit validerPiece au chapitre 8. Pour vérifier qu'elle marche, tu remplis le formulaire avec une bonne saisie, puis une référence en double, puis une quantité négative, puis un prix vide… Chaque modification du code t'oblige à tout refaire à la main, et tu finis par sauter des cas. Un test automatique fait ces vérifications en quelques millisecondes, à chaque enregistrement.

Les tests apportent trois choses :

• la non-régression : une modification qui casse un comportement existant est détectée tout de suite ;
• une documentation vivante : la liste des tests décrit ce que la fonction doit faire, cas limites compris ;
• une preuve pour l'E6 : montrer au jury une suite de tests qui passe, et expliquer pourquoi tu as choisi ces cas, compte dans l'évaluation de la qualité de ta réalisation (épreuve E6 SLAM).

Le découpage du chapitre 11 paie ici : stock.js ne contient que des fonctions pures, sans DOM ni réseau. Elles se testent directement dans Node.js, sans navigateur.

Installer Vitest

Dans le projet créé avec Vite :

npm install --save-dev vitest

Ajoute un script dans package.json :

{
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "test": "vitest"
  }
}

npm test lance Vitest en mode surveillance : il relance les tests concernés à chaque enregistrement d'un fichier. npx vitest run les lance une seule fois, comme le fera un serveur d'intégration continue (cours Intégration continue). Vitest trouve tout seul les fichiers dont le nom finit par .test.js.

Écrire un premier test

Le fichier de test se place à côté du fichier testé : js/stock.test.js.

import { describe, test, expect } from 'vitest';
import { estEnAlerte, valeurStock, ajusterQuantite, validerPiece, lireNombre } from './stock.js';

const pieces = [
  { ref: 'SSD-512', nom: 'SSD NVMe 512 Go', categorie: 'Stockage', quantite: 12, seuil: 5, prix: 42.9 },
  { ref: 'RAM-16', nom: 'Barrette DDR4 16 Go', categorie: 'Mémoire', quantite: 3, seuil: 4, prix: 38.5 },
];

describe('estEnAlerte', () => {
  test('alerte quand la quantité est sous le seuil', () => {
    expect(estEnAlerte({ quantite: 3, seuil: 4 })).toBe(true);
  });
  test('alerte quand la quantité est égale au seuil (cas limite)', () => {
    expect(estEnAlerte({ quantite: 4, seuil: 4 })).toBe(true);
  });
  test("pas d'alerte au-dessus du seuil", () => {
    expect(estEnAlerte({ quantite: 5, seuil: 4 })).toBe(false);
  });
});

describe('valeurStock', () => {
  test('additionne quantité × prix', () => {
    expect(valeurStock(pieces)).toBeCloseTo(630.3);
  });
  test('vaut 0 pour un stock vide', () => {
    expect(valeurStock([])).toBe(0);
  });
});

describe('ajusterQuantite', () => {
  test('ne descend jamais sous zéro', () => {
    const resultat = ajusterQuantite(pieces, 'RAM-16', -10);
    expect(resultat[1].quantite).toBe(0);
  });
  test('ne modifie pas le tableau reçu', () => {
    ajusterQuantite(pieces, 'SSD-512', 1);
    expect(pieces[0].quantite).toBe(12);
  });
});

describe('validerPiece', () => {
  const saisieValide = { ref: 'ven-12', nom: 'Ventilateur', categorie: 'Consommable', quantite: '4', seuil: '2', prix: '7,90' };

  test('accepte une saisie correcte', () => {
    expect(validerPiece(saisieValide, pieces)).toEqual({});
  });
  test('refuse une référence déjà utilisée', () => {
    const erreurs = validerPiece({ ...saisieValide, ref: 'SSD-512' }, pieces);
    expect(erreurs.ref).toMatch(/existe déjà/);
  });
  test.each(['', '-1', '2.5', 'abc'])('refuse la quantité « %s »', (quantite) => {
    expect(validerPiece({ ...saisieValide, quantite }, pieces)).toHaveProperty('quantite');
  });
});

test('lireNombre accepte la virgule décimale', () => {
  expect(lireNombre('7,90')).toBe(7.9);
  expect(lireNombre('')).toBeNaN();
});

Chaque test a un nom qui dit le comportement attendu, appelle la fonction, et vérifie le résultat avec expect(valeur) suivi d'un comparateur (matcher). describe regroupe les tests d'une même fonction. test.each exécute le même test pour plusieurs valeurs : ici, quatre saisies de quantité invalides.

Lancer les tests et lire le résultat

npx vitest run

 ✓ js/stock.test.js (14 tests) 2ms

 Test Files  1 passed (1)
      Tests  14 passed (14)

Quatorze tests : trois pour estEnAlerte, deux pour valeurStock, deux pour ajusterQuantite, six pour validerPiece (dont les quatre de test.each) et un pour lireNombre. Introduis maintenant volontairement un bug : remplace <= par < dans estEnAlerte. Vitest le signale aussitôt, avec le test concerné, la valeur attendue, la valeur reçue et la ligne :

 FAIL  js/stock.test.js > estEnAlerte > alerte quand la quantité est égale au seuil (cas limite)
AssertionError: expected false to be true // Object.is equality

- Expected
+ Received

- true
+ false

 ❯ js/stock.test.js:14:52

C'est précisément le cas limite (quantité égale au seuil) qui attrape l'erreur : les deux autres tests passent toujours. D'où l'importance de choisir les cas à tester.

Choisir les cas à tester

Pour chaque fonction, teste :

1. le cas normal, le plus fréquent ;
2. les cas limites : la valeur exactement égale au seuil, le tableau vide, la chaîne vide, zéro, la longueur maximale ;
3. les cas d'erreur : chaque règle de validation doit avoir au moins un test qui la viole ;
4. les effets indésirables : la fonction ne modifie-t-elle pas ce qu'elle ne doit pas modifier ?

Un test qui ne peut pas échouer ne sert à rien. Vérifie au moins une fois que chaque test échoue quand tu casses volontairement le code, comme ci-dessus.

Et le code qui touche au DOM ?

vue.js et main.js utilisent document, qui n'existe pas dans Node.js. Deux solutions :

• Vitest peut simuler un navigateur avec un environnement jsdom ou happy-dom (à installer, puis // @vitest-environment jsdom en tête du fichier de test) : document.createElement fonctionne, et tu peux vérifier le contenu d'un tbody après afficherPieces.
• Pour tester une application dans un vrai navigateur (cliquer, remplir un formulaire), on utilise des tests de bout en bout avec Playwright, ou le mode navigateur de Vitest.

Le plus efficace reste de mettre le maximum de logique dans des fonctions pures : ce qui reste dans vue.js et main.js est alors si simple qu'un test manuel suffit souvent.

TypeScript : JavaScript avec des types

JavaScript ne vérifie les types qu'à l'exécution, et souvent pas du tout : '3' <= 4 vaut true sans aucun avertissement. TypeScript, créé par Microsoft, est un langage qui ajoute à JavaScript des annotations de types, vérifiées avant l'exécution par le compilateur tsc. Le code TypeScript se transforme ensuite en JavaScript ordinaire, en retirant les types.

// stock.ts
interface Piece {
  ref: string;
  nom: string;
  categorie: string;
  quantite: number;
  seuil: number;
  prix: number;
}

function estEnAlerte(piece: Piece): boolean {
  return piece.quantite <= piece.seuil;
}

function valeurStock(pieces: Piece[]): number {
  return pieces.reduce((total, p) => total + p.quantite * p.prix, 0);
}

Une interface décrit la forme d'un objet ; piece: Piece dit que le paramètre doit avoir cette forme ; : boolean après les parenthèses annonce le type du résultat. Si tu passes une pièce dont la quantité est restée une chaîne (la saisie d'un formulaire non convertie), le compilateur refuse le code :

const saisie = { ref: 'RAM-16', quantite: '3', seuil: 4 };
estEnAlerte(saisie);

error TS2345: Argument of type '{ ref: string; quantite: string; seuil: number; }' is not assignable to parameter of type 'Piece'.
  Types of property 'quantite' are incompatible.
    Type 'string' is not assignable to type 'number'.

En JavaScript, ce même appel renverrait true sans broncher, et le bug apparaîtrait bien plus tard. VS Code affiche ces erreurs en direct, soulignées en rouge, pendant que tu tapes.

Le pas intermédiaire : @ts-check et JSDoc

Pas besoin de tout réécrire pour profiter de la vérification des types. Un commentaire // @ts-check en tête d'un fichier .js demande à VS Code de le vérifier, en lisant les types dans les commentaires JSDoc (chapitre 4) :

// @ts-check

/**
 * @typedef {{ ref: string, quantite: number, seuil: number }} Piece
 */

/**
 * @param {Piece} piece
 * @returns {boolean}
 */
export function estEnAlerte(piece) {
  return piece.quantite <= piece.seuil;
}

estEnAlerte({ ref: 'RAM-16', quantite: '3', seuil: 4 });
// VS Code souligne '3' : Type 'string' is not assignable to type 'number'.

Le fichier reste du JavaScript, qui s'exécute tel quel dans le navigateur. C'est une bonne façon d'essayer les types sur un projet existant.

Utiliser TypeScript dans un projet

Faut-il apprendre TypeScript tout de suite ? Non : TypeScript est du JavaScript, plus des types. Maîtrise d'abord le langage (ce cours), puis ajoute les types quand tes projets grossissent. Beaucoup d'entreprises démarrent aujourd'hui leurs nouveaux projets web en TypeScript, et React, Angular, Vue et Node.js s'utilisent couramment avec lui : c'est une compétence à mettre en avant dans ton portfolio.

Exercices

import { describe, test, expect } from 'vitest';
import { statut } from './stock.js';

describe('statut', () => {
  test('rupture quand la quantité vaut 0', () => {
    expect(statut(0, 2)).toBe('rupture');
  });
  test('rupture même si le seuil vaut 0', () => {
    expect(statut(0, 0)).toBe('rupture');
  });
  test('alerte quand la quantité est sous le seuil', () => {
    expect(statut(3, 4)).toBe('alerte');
  });
  test('alerte quand la quantité est égale au seuil', () => {
    expect(statut(4, 4)).toBe('alerte');
  });
  test('ok juste au-dessus du seuil', () => {
    expect(statut(5, 4)).toBe('ok');
  });
});

export function prixRemise(prix, taux) {
  const t = taux || 10;
  return prix * (1 - t / 100);
}

test('applique la remise', () => {
  expect(prixRemise(100, 20)).toBe(80);
});

test('une remise de 0 % ne change pas le prix', () => {
  expect(prixRemise(100, 0)).toBe(100);   // échoue avec le code actuel : reçu 90
});
test('10 % par défaut si le taux est absent', () => {
  expect(prixRemise(100)).toBe(90);
});

interface LigneCommande {
  ref: string;
  quantite: number;
  prix: number;
}

function totalCommande(lignes: LigneCommande[]): number {
  return lignes.reduce((total, l) => total + l.quantite * l.prix, 0);
}

error TS2741: Property 'prix' is missing in type '{ ref: string; quantite: number; }' but required in type 'LigneCommande'.