إعداد بيئة اختبار وحدة جافا سكريبت

في البداية كان هناك وظيفة ودعا في مكان واحد. ثم أردنا الاتصال بها في مكان آخر بميزات جديدة وقمنا بتحديثها. لقد أحببنا هذا الأمر كثيرًا لدرجة أننا أطلقناه في المرتبة الثالثة ومازلنا نجري تعديلات وظيفية و ... في المقام الأول حدث خطأ ما. كيف تعرف؟ تحقق في جميع الأماكن التي استخدمنا فيها هذه الوظيفة ، هل يعمل كل شيء بشكل صحيح؟ من الممكن ، ولكن من الأفضل استخدام اختبارات الوحدة.

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

ملاحظة: من المنطقي قراءة المقال بشكل أكبر إذا كان القارئ قد أتقن العمل مع npm أو مدير حزم مماثل.

لنبدأ بتعاريف صغيرة:

• اختبار الوحدة عبارة عن تقنية تهدف إلى تقليل احتمالية حدوث الأخطاء والآثار الجانبية (عند إدخال خطأ آخر عند إصلاح خطأ واحد).
• karma هي أداة تسمح لك بإجراء اختبارات جافا سكريبت في المتصفحات.
• الياسمين هو إطار لاختبار كود جافا سكريبت.

تنص تعليمات تثبيت Karma (مثل العديد من التطبيقات الأخرى) على ضرورة تثبيت الحزم محليًا في المشروع.

# Install Karma: $ npm install karma --save-dev 

 # Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev 

للراحة ، يمكننا أيضًا تثبيت karma- npm install -g karma-cli ، وإلا ستكون الأوامر متاحة من الجهاز مثل هذا ./node_modules/karma/bin/karma .

ثم يمكننا إنشاء ملف التكوين:

 karma init karma.conf.js 

• أولاً ، سوف يطلب منا إطار الاختبار المستخدم. (ياسمين)
• هل نستخدم ملف / وحدة تحميل Require.js. (لا يوجد)
• ما المتصفحات التي نريد عرضها (Chrome)
• ما هي الملفات التي نستمع إليها. (* [Ss] pec.js)
• يجب استبعاد أي ملفات
• هل يجب علي مراقبة تغييرات الاختبار (نعم)

بعد الإجابة على الأسئلة ، سيكون لدينا ملف التكوين.

 // Karma configuration // Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 ()) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*[Ss]pec.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) } 

إنشاء ملف اختبار آخر.

 // test.spec.js describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); it("and so is a spec", function() { a = true; expect(a).toBe(false); }); }); 

يمكننا أن نرى بالفعل كيف يعمل karma start karma.conf.js عن طريق تشغيل الأمر karma start karma.conf.js ، لكنني أوصي بالانتظار قليلاً وتقديم وظائف إضافية.

قم بتثبيت npm i -D karma-jasmine-html-reporter package npm i -D karma-jasmine-html-reporter ، والذي يعرض نتائج الاختبار في المستعرض ديناميكيًا. دعنا نضيف كارما التكوين:

 ... reporters: ['progress', 'kjhtml'], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, ... 

الآن نحن جميعا مجموعة. نطلق karma start karma.conf.js وننتقل إلى أول اختبار: D