مقدمة في اختبار الواجهة الأمامية

كيف تبدأ باختبار تطبيقات الواجهة الأمامية باستخدام Mocha و Chai

تحذير: هذا المنشور قديم وقد لا يعكس حالة الفن الحالية

موكا هي أداة اختبار رائعة ومتعددة الاستخدامات. هناك العديد من أطر عمل الاختبار ، وقد اخترت Mocha نظرًا لشعبيتها وسهولة استخدامها.

دعنا نرى أولاً كيفية إجراء الاختبارات في المتصفح. تحميل


ضع ملفات mocha.js و chai.js و chai-jquery.js في اختبار / مجلد فرعي على موقعك.

اختر ملف index.html الخاص بك وقم بتحميله ، ثم سنقوم بإعداد Mocha لاستخدام أسلوب اختبار BDD وسنقوم بتحميل ملف يسمى test.web.js ، والذي سيستضيف قواعد الاختبار الخاصة بنا.

<script src="test/vendor/mocha.js" data-build-exclude="true"></script>
<script src="test/vendor/chai.js" data-build-exclude="true"></script>
<script src="test/vendor/chai-jquery.js" data-build-exclude="true"></script>
<script data-build-exclude="true">
  mocha.setup('bdd');
  expect = chai.expect;
</script>
<script src="test/test.web.js" data-build-exclude="true"></script>

داخل جسمك ، ضع div # mocha:

<div id="mocha"></div>

يعد ملف test / test.web.js هو الجزء الرئيسي من اللعبة ، وسوف يستضيف قواعد الاختبار.

describe('Array', function(){
  describe('#indexOf()', function(){
    it('should return -1 when the value is not present', function(){
      [1,2,3].indexOf(5).should.equal(-1);
      [1,2,3].indexOf(0).should.equal(-1);
    })
  })
})

describe(‘After this’, function() { it(‘should be logged in’, function(done) { expect($(’#the-main-div’)).to.exist; done(); }); });

يمكن الآن إجراء هذه الاختبارات داخل المتصفح ، عن طريق فتح وحدة تحكم المتصفح في الكتابةmocha.run().

يعد هذا أمرًا رائعًا لأنه أثناء إجراء الاختبارات ، يمكنك مشاهدة تغيير الشاشة وقراءة رسائل وحدة التحكم.

استخدامفانتوم جي اس- تنفيذ WebKit بدون رأس - يمكنك إجراء الاختبارات في الجهاز. الجانب السلبي هو أن PhantomJS ليست البيئة الحقيقية حيث سيتم تنفيذ التعليمات البرمجية الخاصة بك ، ولكنها أفضل للكشف التلقائي عن المشاكل.

كيف افعلها؟ قم بتنزيل وتثبيت PhantomJS. قم بتثبيت Mocha باستخدام ملفnpmتثبيت:npm install -g mocha. قم بتنزيل هذه الحزمةhttps://github.com/Backbonist/front-tests، ووضعه في دليل المشروع الخاص بك ، تحت الاختبار / على سبيل المثال.

يمكنك بعد ذلك إجراء الاختبارات الخاصة بك عن طريق الاتصالphantomjs run-mocha.js http://test-site.com

تكمن المشكلة في هذا الأسلوب في أنه لا يمكنك تنفيذ الاختبارات التي يتم إجراؤها برمجيًا في البيئة الحقيقية حيث سيتم تشغيلها. هذه ليست مشكلة حقًا عند الاستمرار في بناء النماذج الأولية والتطوير قبل فتحها للجمهور ، ولكن عندما تكون في الإنتاج ، لا ترغب في تشغيل مجموعة الاختبار من المتصفح في كل مرة تريد الاختبار. على كل متصفح ، أليس كذلك؟Testemمصنوع من أجل هذا. إنه مجرد عداء اختبار ، اختبار إطار محايد ، لذلك يمكنه تشغيل Mocha أو Jasmine أو QUnit أو ما تستخدمه.

  1. $ npm install testem -g

  2. انتقل إلى دليل الاختبار الخاص بتطبيقك ، واكتب$ testem

  3. افتح المتصفح إلى الموقع المحدد لإجراء الاختبارات.

يمكنك إجراء الاختبارات على أي متصفح تريده من خلال تشغيلها ، أو إخبار testem بإجراء الاختبارات نيابة عنك عن طريق التشغيل

$ testem -l Chrome,Safari

يمكنك أيضًا استخدام testem في وضع CI (التكامل المستمر).

$ testem ci

يؤدي هذا تلقائيًا إلى بدء الاختبارات التي حددها المتصفح والمخرجات بتنسيق يسمى TAP ، والتي يمكن قراءتها من قبل البشر ، ويمكن إدخالها في خادم تكامل مستمر لأتمتة العملية.

اختبار المتصفح

من المحتمل أن تقوم بتطوير موقعك على Chrome أو Firefox: أدوات المطورين الخاصة بهم رائعة ، وتساعدك على تسريع العملية.

يحتوي Google Chrome على إصدارات منفصلة يمكنك استخدامها لاختبار موقعك على الويب. النسخة المستقرة والعادية و Chrome Canary.

Canary هو متصفح يمكنك تشغيله جنبًا إلى جنب مع Google Chrome العادي. وتتمثل ميزته في حصولك على تحديثات يومية لما تم الالتزام به لمصادر Chromium ، ويمكنك الوصول إلى الميزات الجديدة قبل 11 أسبوعًا من إرسالها إلى قناة Chrome الثابتة الرئيسية ، وملف البقاذا احتجت. يمكنك حتى تعيينه كمتصفحك الافتراضي.

موزيلا لها الخاصة بهافايرفوكس ليلايفعل نفس الشيء مثل Chrome canary: التحديثات اليومية ستأتي إلى متصفحك.

قد ترغب في استخدامقناة Chrome Dev، وفايرفوكس أوروراوالتي تمثل إصدارًا "أقل تطوراً" ثم Canary / Nightly.

لاختبار Safari ، يمكنك استخدام ملفWebKit ليليًا يبني. عندما تستخدم WebKit ، فأنت تقوم بشكل أساسي بتشغيل Safari بإصدار محدث من المحرك الأساسي.


المزيد من دروس devtools: