Exécuter Mocha directement dans le navigateur permet de tester les API du DOM, les mises en page CSS et les fonctionnalités web sans émulation headless.
Modèle d’exécuteur HTML autonome
Enregistrez ce fichier sous test/index.html et ouvrez-le directement dans n’importe quel navigateur :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Mocha Browser Test Suite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
</head>
<body>
<!-- Conteneur où Mocha affiche les résultats des tests -->
<div id="mocha"></div>
<!-- Framework de test et bibliothèques d’assertions -->
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script src="https://unpkg.com/chai/chai.js"></script>
<script>
// Initialiser Mocha en mode BDD
mocha.setup('bdd');
window.expect = chai.expect;
</script>
<!-- Code source à tester -->
<script src="../src/calculator.js"></script>
<!-- Fichiers de la suite de tests -->
<script src="calculator.test.js"></script>
<script>
// Exécuter la suite de tests
mocha.run();
</script>
</body>
</html>
Exemple de fichier de test navigateur
Dans test/calculator.test.js :
describe('Browser Calculator', () => {
it('adds numbers accurately', () => {
expect(Calculator.add(2, 3)).to.equal(5);
});
it('inspects DOM elements', () => {
const el = document.createElement('div');
el.id = 'target';
document.body.appendChild(el);
expect(document.getElementById('target')).to.not.be.null;
document.body.removeChild(el);
});
});