Aller au contenu principal
Version: 27.2

Manipulation du DOM

Une autre classe de fonctions qui est souvent considérée comme difficile à tester est le code qui manipule directement le DOM. Voyons comment nous pouvons tester le bout de code jQuery suivant qui écoute un événement de clic, récupère des données de manière asynchrone et définit le contenu d'un span.

displayUser.js
'use strict';
const $ = require('jquery');
const fetchCurrentUser = require('./fetchCurrentUser.js');
$('#button').click(() => {
fetchCurrentUser(user => {
const loggedText = 'Logged ' + (user.loggedIn ? 'In' : 'Out');
$('#username').text(user.fullName + ' - ' + loggedText);
});
});

Encore une fois, nous créons un fichier de test dans le dossier __tests__/ :

__tests__/displayUser-test.js
'use strict';
jest.mock('../fetchCurrentUser');
test('displays a user after a click', () => {
// Set up our document body
document.body.innerHTML =
'<div>' +
' <span id="username" />' +
' <button id="button" />' +
'</div>';
// This module has a side-effect
require('../displayUser');
const $ = require('jquery');
const fetchCurrentUser = require('../fetchCurrentUser');
// Tell the fetchCurrentUser mock function to automatically invoke
// its callback with some data
fetchCurrentUser.mockImplementation(cb => {
cb({
fullName: 'Johnny Cash',
loggedIn: true,
});
});
// Use jquery to emulate a click on our button
$('#button').click();
// Assert that the fetchCurrentUser function was called, and that the
// #username span's inner text was updated as we'd expect it to.
expect(fetchCurrentUser).toBeCalled();
expect($('#username').text()).toEqual('Johnny Cash - Logged In');
});

La fonction testée ajoute un écouteur d'événements sur l'élément DOM #button, nous devons donc configurer notre DOM correctement pour le test. Jest est livré avec jsdom qui simule un environnement DOM comme si vous étiez dans le navigateur. Cela signifie que chaque API du DOM que nous appelons peut être observée de la même manière qu'elle le serait dans un navigateur !

Nous simulons fetchCurrentUser.js pour que notre test ne fasse pas une vraie requête réseau mais se résolve localement avec des données simulées. Cela permet à notre test de se terminer au bout de quelques millisecondes plutôt qu'en secondes et garantit une vitesse d'itération rapide du test unitaire.

The code for this example is available at examples/jquery.