bookmark_borderJavaScript / Jest – Comment gérer les mocks

Pour faciliter les explications, voici une fonction triviale, qu’on peut supposer être une fonction importante à mocker.

exports.bob = () => {
  // fonction très TRÈS complexe...
  return "real";
}

Problème: Les mocks ne se réinitialisent pas automatiquement après chaque test. Il faut le faire manuellement et il y a deux méthodes équivalentes.

const index = require("./index")

test("test 1", () => {
  const original = index.bob;
  index.bob = jest.fn(() => 0);
  expect(index.bob(0)).toBe("mocked");
  index.bob = original; // <-- on remet la fonction originale en place
});

Ou encore

test("test 1", () => {
  const bob = jest.spyOn(index, "bob");
  bob.mockImplementation(() => "mocked");
  expect(index.bob(0)).toBe("mocked");
  addMock.mockRestore(); // <-- on remet la fonction originale en place
});

Oui, ça fonctionne, le hic c’est que si un test plante avant de réinitialiser le mock, les autres tests qui dépendent de ladite fonction planteront. Par exemple:

test("test 1", () => {
  original = index.bob;
  index.bob = jest.fn(() => 0);
  expect(index.bob(0)).toBe("mocked");
  throw "erreur"; // oups!
  index.bob = original; // ça n'arrive pas
});

test("test 2", () => {
  expect(index.bob(7)).toBe("real"); // va échouer car bob retourne encore 0
})

Solution 1 – try / finally

test("test 1", () => {
  original = index.bob;
  try {
    index.bob = jest.fn(() => "mocked");
    expect(index.bob(10)).toBe("mocked");
    throw "erreur"; // oups!
  } finally {
    index.bob = original;
  }
});

test("test 2", () => {
  expect(index.bob(7)).toBe("real");
})

C’est n’est pas tellement élégant car ça indente le code. C’est aussi facile d’oublier de mettre l’étape de réinitialisation dans un finally.

Solution 2 – Une fonction router / proxy

const original_bob = index.bob;
index.bob = jest.fn((arg) => {
  // un ou plusieurs if/else pour diriger les mocks
  if (arg === 0) {
    // mock pour "test 1"
    return "mocked";
  }

  // si rien ne correspond, on appelle la fonction originale
  return original_bob(arg);
});

test("test 1", () => {
  expect(index.bob(0)).toBe("mocked");
});

test("test 2", () => {
  expect(index.bob(10)).toBe("real");
})

Gros défaut: Ça ne fonctionne pas pour les fonctions qui n’ont pas d’argument. Autre inconvénient, la fonction peut rapidement devenir lourde s’il y a beaucoup de if / else. Pour ne pas perdre le fil, ça demande d’écrire des commentaires pour garder une trace de l’association entre chaque mock et test. Si on renomme un test sans mettre à jour le commentaire dans le mock, le lien est rompu.

De l’autre côté, cette approche a l’avantage de pouvoir réutiliser les mocks entre les tests sans devoir les reconfigurer à chaque test. De plus, elle n’exige pas au programmeur de devoir se rappeler à chaque fois d’encapsuler le mock dans un bloc try / finally et elle ne crée pas d’indentation du code.

Conclusion

Je théorise que la source du problème est probablement attribuable à l’absence de destructeurs en JavaScript, ce qui empêche d’encapsuler les mocks dans des objets et d’utiliser la technique resource acquisition is initialization, aussi connue sous RAII.

Merci JavaScript. Merci.

Références

bookmark_borderPièges de la fonction pour JavaScript Array Sort

Ah JavaScript, tu ne cesses de me surprendre par tes pièges. La fonction sort en a plus d’un. Commençons avec sa description.

La méthode sort() trie les éléments d’un tableau, dans ce même tableau, et renvoie le tableau. Par défaut, le tri s’effectue sur les éléments du tableau convertis en chaînes de caractères et triées selon les valeurs des unités de code UTF-16 des caractères. [Réf]

Emphase sur «convertis en chaînes de caractères». Il s’avère donc que le code suivant

data = [1, 2, 3, 20, 10]
data.sort();
console.log(data)

retourne

[ 1, 10, 2, 20, 3 ]

Il faut donc fournir sa propre fonction de tri. Mais, il y a encore un piège. Allons-y avec l’implémentation naïve.

data = [1,2,3,20,10]
data.sort((left, right) => left < right);
console.log(data)

retourne

[ 1, 2, 3, 20, 10 ]

Regardez où se situe le 20. Pas là où on s’attendrait. Le problème est que la fonction passée en argument à sort ne doit pas retourner un booléen, elle doit retourner un entier < 0, = 0 ou > 0. Donc, la bonne solution pour trier des entiers en ordre croissant est

data = [1, 2, 3, 20, 10]
data.sort((left, right) => left - right);
console.log(data)

ce qui retourne

[ 1, 2, 3, 10, 20 ]

Merci JavaScript. Merci.

Mise à jour 2022-02-20

Nicolas Kruchten m’a fait remarquer que Python, jusqu’à la version 2.4, avait le même design questionnable de la fonction passée à sort. Ils en gardent d’ailleurs la trace dans la documentation de la version courrante.

bookmark_borderQuery string white space vs plus

Trivia: What is the difference between the encoded query string parameter “a+b” and “a%20b” ?

Answer: Nothing! They are both encoded representations for “a b”.

Isn’t a “+” supposed to remain a “+”? Well, the URL and the query strings are not encoded following the same rules. In the URL, the “+” remains a “+” indeed, but in the query string it’s actually encoded and becomes a “%2B”. This can be misleading.
Continue reading “Query string white space vs plus”

bookmark_borderGenerating a downloadable file from JavaScript

Recently, a friend asked me if I could help him with a very simple task: have a dialog with an input text field where he could paste some csv lines and press a “save” button that would reformat the csv and write it to a file.

I thought that the input text field and the reformatting could be done very easily with a web page and a few JavaScript lines, but I was afraid I wouldn’t be able to save anything back to the disk without having some sort of server to serve the final result.

Continue reading “Generating a downloadable file from JavaScript”