يتيح تشغيل Mocha مباشرة داخل المتصفح اختبار واجهات برمجة DOM وتخطيطات CSS وميزات منصة الويب دون محاكاة بلا واجهة (headless).
قالب مشغل HTML مستقل
احفظ هذا الملف باسم test/index.html وافتحه مباشرة في أي متصفح:
<!doctype html>
<html lang="ar">
<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>
<!-- إطار الاختبار ومكتبات التأكيد -->
<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>
مثال على ملف اختبار متصفح
في الملف 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);
});
});