Adloun

Vue : construire une application web (école d'ingénieur) · Chapitre 11 · Exercice de TD

Une espace invisible

Tests et mise en production · niveau 1 (application)

Énoncé

Un étudiant teste la fonction prixEnEuros de la Librairie :


import { test, expect } from "vitest";
import { prixEnEuros } from "../../../librairie/src/utils/format.js";

test("prix au format français", () => {
  expect(prixEnEuros(8.5)).toBe("8,50 €"); // espace ordinaire tapée au clavier
});

Il obtient :



 RUN  v5.0.3 …

 ❯ tests/prix.test.js (1 test | 1 failed) 5ms
   × prix au format français 4ms

─────── Failed Tests 1 ───────

 FAIL  tests/prix.test.js > prix au format français
AssertionError: expected '8,50 €' to be '8,50 €' // Object.is equality

Expected: "8,50 €"
Received: "8,50 €"

 ❯ tests/prix.test.js:5:28
      3|
      4| test("prix au format français", () => {
      5|   expect(prixEnEuros(8.5)).toBe("8,50 €"); // espace ordinaire tapée a…
       |                            ^
      6| });
      7|

────────────────────────[1/1]─


 Test Files  1 failed (1)
      Tests  1 failed (1)
   Start at  20:24:43
   Duration  452ms (environment 89%, import 5%, transform 3%, tests 1%, worker 1%)

Attendu et reçu semblent identiques. Expliquer l'échec et corriger le test.

Corrigé

Les caractères diffèrent sans se voir. Intl.NumberFormat, avec la locale "fr-FR", sépare le nombre du symbole par une espace insécable (U+00A0), qui empêche un retour à la ligne entre « 8,50 » et « € » ; le test contient une espace ordinaire (U+0020). On écrit le caractère attendu par son code :


// \u00a0 : espace insécable ; \u202f : espace fine insécable (milliers)
expect(prixEnEuros(8.5)).toBe("8,50\u00a0€");
expect(prixEnEuros(1234)).toBe("1\u202f234,00\u00a0€");

(Les milliers sont séparés par une espace fine insécable, U+202F.) Devant deux chaînes « identiques » qui diffèrent, on soupçonne toujours un caractère invisible : espace insécable, espace en fin de ligne, apostrophe courbe (’) contre droite (').

100 % gratuit

La suite du chapitre est sur Adloun

Exercice suivant et tuteur

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.

Le cours du chapitre · Tous les exercices du chapitre

Exercice suivant et tuteur →