Η εκτέλεση του Mocha απευθείας στον browser επιτρέπει τη δοκιμή DOM APIs, διατάξεων CSS και δυνατοτήτων της πλατφόρμας ιστού χωρίς εξομοίωση headless.
Αυτόνομο Πρότυπο HTML Runner
Αποθηκεύστε αυτό το αρχείο ως test/index.html και ανοίξτε το απευθείας σε οποιονδήποτε browser:
<!doctype html>
<html lang="el">
<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>
<!-- Στοιχείο υποδοχής όπου το Mocha αποδίδει τα αποτελέσματα δοκιμών -->
<div id="mocha"></div>
<!-- Πλαίσιο δοκιμών & βιβλιοθήκες ισχυρισμών (assertions) -->
<script src="https://unpkg.com/mocha/mocha.js"></script>
<script src="https://unpkg.com/chai/chai.js"></script>
<script>
// Αρχικοποίηση λειτουργίας Mocha BDD
mocha.setup('bdd');
window.expect = chai.expect;
</script>
<!-- Πηγαίος κώδικας υπό δοκιμή -->
<script src="../src/calculator.js"></script>
<!-- Αρχεία σουίτας δοκιμών -->
<script src="calculator.test.js"></script>
<script>
// Εκτέλεση σουίτας δοκιμών
mocha.run();
</script>
</body>
</html>
Παράδειγμα Αρχείου Δοκιμής Browser
Στο αρχείο 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);
});
});