عندما يصبح مشروع NG أكبر وأكبر ، يجب وضع اختبار الوحدة على جدول الأعمال. في بعض الأحيان ، يأخذ الفريق الاختبار أولاً ، وبعض الوظائف تنفذ أولاً ، ثم يختبر الوحدات الوظيفية. هذا له مزاياه وعيوبه. اليوم ، نتحدث بشكل رئيسي عن استخدام الكرمة والياسمين لإجراء اختبار الوحدة من وحدات NG.
ما هو الكرمة
Karma عبارة عن إطار تحكم في اختبار إجراء اختبار الوحدة ، حيث يوفر اختبارات وحدة الجري في بيئات مختلفة ، مثل Chrome و Firfox و Phantomjs ، إلخ. يدعم إطار الاختبار ياسمين ، موكا ، Qunit ، وهي وحدة NPM مع nodejs كبيئة.
يوصى باستخدام المعلمة ---- حفظ DEV عند تثبيت وحدات NPM ذات الصلة واختبارها ، لأن هذا مرتبط بالتطوير. بشكل عام ، إذا قمت بتشغيل Karma ، فالأمر التاليان التاليان مطلوبان.
نسخة الكود كما يلي:
NPM تثبيت Karma-save-dev
NPM تثبيت Karma-Junit-Reporter-Save-Dev
عند تثبيت الكرمة ، سيتم تثبيت بعض الوحدات الشائعة الاستخدام تلقائيًا. ارجع إلى خاصية peerdependencies لملف package.json في رمز الكرمة.
نسخة الكود كما يلي:
"peerdependencies": {
"Karma-Jasmine": "~ 0.1.0" ،
"الكرمة-requirejs": "~ 0.2.0" ،
"معالج كارما كوفي": "~ 0.1.0" ،
"معالجة كارما HTML2JS-": "~ 0.1.0" ،
"Karma-Chrome-Launcher": "~ 0.1.0" ،
"Karma-Firefox-Launcher": "~ 0.1.0" ،
"Karma-Phantomjs-Launcher": "~ 0.1.0" ،
"Karma-Script-Launcher": "~ 0.1.0"
}
ثم يتطلب إطار التشغيل النموذجي عادة ملف تكوين. في الكرمة ، يمكن أن يكون Karma.conf.js. الكود في الداخل هو نمط nodejs. مثال شائع على النحو التالي:
نسخة الكود كما يلي:
module.exports = function (config) {
config.set ({
// الدليل الأساسي في الملفات التالية
Basepath: '../' ،
// معلومات JS التي يجب تحميلها في بيئة الاختبار
الملفات: [
'app/bower_components/Angular/Angular.js' ،
'app/bower_components/angular-route/angular-route.js' ،
'app/bower_components/angular mocks/angular mocks.js' ،
"APP/JS/**/*. JS" ،
"اختبار/وحدة/**/*.
]
// ما إذا كنت للاستماع تلقائيًا إلى التغييرات في الملف أعلاه ، قم بتشغيل الاختبار تلقائيًا
Autowatch: صحيح ،
// إطار اختبار التطبيق
الأطر: ["ياسمين"] ،
// ما هي البيئة التي يجب استخدامها لاختبار الرمز؟ هنا كروم
المتصفحات: ['Chrome'] ،
// المكونات الإضافية المستخدمة ، مثل متصفح الكروم والمكونات الإضافية
الإضافات: [
"كارما كروم" ،
"الكرمة-فرونفوكس-لينشير" ،
'Karma-Jasmine' ،
'الكرمة junit-reporter'
]
// إخراج محتوى الاختبار واسم الوحدة المستخدمة للتصدير
المراسلون: ["تقدم" ، "جونيت"] ،
// قم بتعيين معلومات ملف محتوى اختبار الإخراج
Junitreporter: {
OutputFile: 'test_out/unit.xml' ،
جناح: "الوحدة"
}
}) ؛
} ؛
عندما تحتاج إلى الانتباه إلى هذا ، فإن معظم المكونات الإضافية أعلاه لا تحتاج إلى تثبيتها بشكل منفصل ، لأنه تم تثبيتها عند تثبيت الكرمة. فقط المكونات الإضافية للتصدير الكرمة-Junit-Reporter يجب تثبيتها بشكل منفصل. إذا كنت تريد معرفة المزيد عن ملفات التكوين ، فانقر هنا
هذا كل شيء عن الكرمة. إذا كنت تريد معرفة المزيد عنها ، فانقر هنا
ما هو ياسمين
ياسمين هو إطار تطوير يعتمد على السلوك لاختبار رمز JavaScript. لا يعتمد على أي أطر أخرى من JavaScript. لا يتطلب دوم. ولديه بناء جملة نظيف وواضح بحيث يمكنك كتابة الاختبارات بسهولة.
ما سبق هو شرحها في الوثيقة الرسمية للياسمين ، وما يلي هو ترجمة بسيطة باللغة الصينية
ياسمين هو إطار اختبار يعتمد على السلوك لا يعتمد على أي إطار JS و DOM. إنها مكتبة اختبار API نظيفة وودية للغاية.
فيما يلي مثال بسيط لتوضيح استخدامه
حدد أمر ملف الاختبار على أنه test.js
نسخة الكود كما يلي:
وصف ("مواصفات (مع الإعداد والدموع)" ، وظيفة () {
فار فو
قبل الوظيفة () {
foo = 0 ؛
foo += 1 ؛
}) ؛
بعد each (function () {
foo = 0 ؛
}) ؛
("هي مجرد وظيفة ، بحيث يمكن أن تحتوي على أي رمز" ، وظيفة () {
توقع (FOO). toequal (1) ؛
}) ؛
("يمكن أن يكون أكثر من توقع واحد" ، وظيفة () {
توقع (FOO). toequal (1) ؛
توقع (صحيح). إلى (صواب) ؛
}) ؛
}) ؛
المثال أعلاه يأتي من الموقع الرسمي. هنا فقط عدد قليل من واجهات برمجة التطبيقات المهمة. لمزيد من الاستخدام ، يرجى النقر هنا
1. أولاً ، يتم تعريف أي حالة اختبار بواسطة وظيفة الوصف. لديها معلمتان. يتم استخدام الأول لوصف المحتوى المركزي العام للاختبار ، والمعلمة الثانية هي وظيفة ، تكتب بعض رمز الاختبار الحقيقي.
2. يتم استخدامه لتحديد مهمة اختبار محددة واحدة ، ولديه أيضًا معلمتان. يتم استخدام الأول لوصف محتوى الاختبار ، والمعلمة الثانية هي وظيفة ، تخزن بعض طرق الاختبار.
3. يتوقع أن يستخدم بشكل أساسي لحساب قيمة المتغير أو التعبير ، ثم قارنه بالقيمة المتوقعة أو القيام ببعض الأحداث الأخرى.
4. قبل استخدام Easteach وبعد ذلك بشكل أساسي للقيام ببعض الأشياء قبل وبعد تنفيذ مهمة الاختبار. المثال أعلاه هو تغيير قيمة المتغير قبل التنفيذ ، ثم إعادة تعيين قيمة المتغير بعد اكتمال التنفيذ.
أخيرًا ، يمكن الوصول إلى النطاق في وظيفة الوصف في الوظائف الفرعية فيه ، تمامًا مثل ما سبق يصل إلى متغير FOO
إذا كنت ترغب في تشغيل مثال الاختبار أعلاه ، فيمكنك تشغيله عبر Karar. مثال الأمر كما يلي:
نسخة الكود كما يلي:
Karma Start Test/Karma.conf.js
بعد ذلك ، سوف نركز على اختبار وحدة وحدات التحكم والتعليمات ووحدات الخدمة في NG.
اختبارات الوحدة لـ NG
نظرًا لإطار NG نفسه ، يتم تحميل الوحدات النمطية وتثبيتها من خلال DI ، لذلك من أجل تسهيل كتابة البرامج النصية للاختبار مع الياسمين ، يوفر المسؤول فئة أداة اختبار الزاوية mock.js لتوفير تعريف الوحدة النمطية ، والتحميل ، والحقن ، وما إلى ذلك.
دعنا نتحدث عن بعض الطرق الشائعة في NG-Mock
1.angular.mock.module هذه الطريقة هي أيضًا في مساحة اسم النافذة ، والتي هي مريحة للغاية للاتصال.
يتم استخدام الوحدة النمطية لتكوين معلومات الوحدة التي تم حقنها بواسطة طريقة الحقن. يمكن أن تكون المعلمات سلاسل ووظائف وكائنات. يمكن استخدامها مثل ما يلي.
نسخة الكود كما يلي:
قبل MODULE ('myapp.filters')) ؛
قبل EACH (الوحدة (الدالة ($ توفير) {
$ prod.value ('الإصدار' ، 'test_ver') ؛
})) ؛
يتم استخدامه عمومًا في طريقة leteach ، لأن هذا يمكن أن يضمن أن طريقة الحقن يمكن أن تحصل على تكوين الوحدة النمطية عند تنفيذ مهمة الاختبار.
1.angular.mock.inject هذه الطريقة موجودة أيضًا في مساحة اسم النافذة ، والتي هي مريحة للغاية للاتصال.
يستخدم الحقن لحقن وحدة NG التي تم تكوينها أعلاه. يسمى في وظيفة الاختبار منه. أمثلة الاتصال الشائعة هي كما يلي:
نسخة الكود كما يلي:
angular.module ('myapplicationModule' ، [])
.value ('Mode' ، 'App')
.value ('الإصدار' ، 'v1.0.1') ؛
وصف ('myapp' ، function () {
// تحتاج إلى تحميل الوحدات النمطية التي تريد اختبارها ،
// يقوم بتحميل وحدة "NG" فقط بشكل افتراضي.
قبل الوحدة (وحدة myapplicationModule ')) ؛
// الحقن () يستخدم لحقن وسيطات من جميع الوظائف المعطاة
(يجب أن يوفر إصدارًا "، حقن (وظيفة (الوضع ، الإصدار) {
توقع (الإصدار). toequal ('v1.0.1') ؛
توقع (الوضع). toequal ('app') ؛
})) ؛
// يمكن أيضًا استخدام طريقة الحقن والوحدة داخل تكنولوجيا المعلومات أو قبلها
(يجب تجاوز الإصدار واختبار الإصدار الجديد "، Function () {
// الوحدة النمطية () يأخذ وظائف أو سلاسل (أسماء مستعارة للوحدة)
الوحدة النمطية (وظيفة ($ توفير) {
$ prod.value ('الإصدار' ، 'overridden') ؛ // version prose هنا
}) ؛
حقن (وظيفة (الإصدار) {
توقع (الإصدار). toequal ('overridden') ؛
}) ؛
}) ؛
}) ؛
ما سبق هو بعض الأمثلة عن طريق الحقن التي يوفرها المسؤول ، ويسهل فهم القانون. في الواقع ، الحقن هو مثيل حقن التبعية المدمج الذي تم إنشاؤه باستخدام طريقة Angular.Inject. ثم حقن الوحدة هو نفس معالجة التبعية في وحدات NG العادية.
بعد تقديم NG-Mock بإيجاز ، سنكتب اختبار وحدة بسيط باستخدام وحدات التحكم والتعليمات والمرشحات.
اختبار وحدة وحدة التحكم
تحديد وحدة تحكم بسيطة
نسخة الكود كما يلي:
var myapp = Angular.module ('myapp' ، []) ؛
myapp.controller ('myController' ، function ($ scope) {
$ scope.spices = [{"name": "pasilla" ، "spiciness": "mild"} ،
{"الاسم": "jalapeno" ، "spiciness": "Hot Hot Hot!"} ،
{"name": "habanero" ، "spiciness": "Lava Hot !!"}] ؛
$ scope.spice = "Hello Feenan!" ؛
}) ؛
ثم نكتب نص اختبار
نسخة الكود كما يلي:
وصف ('myController function' ، function () {
وصف ('myController' ، function () {
var $ scope ؛
قبل الوحدة (الوحدة ("myapp")) ؛
قبل الحقن (وظيفة (وظيفة ($ rootscope ، وحدة تحكم $) {
$ scope = $ rootscope. $ new () ؛
$ controller ('myController' ، {$ scope: $ scope}) ؛
})) ؛
(يجب إنشاء نموذج "توابل" مع 3 توابل "، وظيفة () {
توقع ($ scope.spices.length) .Tobe (3) ؛
}) ؛
(يجب تعيين القيمة الافتراضية للتوابل "، الدالة () {
توقع ($ scope.spice) .Tobe ('Hello Feedbook!') ؛
}) ؛
}) ؛
}) ؛
يستخدم ما سبق $ rootscope لإنشاء حلقة فرعية ، ثم يقوم بتمرير هذه المعلمة إلى وحدة تحكم Contraction $ الخاصة بوحدة التحكم $. أخيرًا ، سيتم تنفيذ الطريقة أعلاه. ثم نتحقق مما إذا كان عدد المصفوفات الموجودة في الفرعية وما إذا كانت متغيرات السلسلة مساوية للقيمة المتوقعة.
إذا كنت تريد معرفة المزيد عن وحدة التحكم في NG ، فيمكنك النقر هنا
اختبار وحدة التعليمات في NG
تحديد تعليمات بسيطة
نسخة الكود كما يلي:
var app = Angular.module ('myapp' ، []) ؛
app.directive ('AgreeTeye' ، function () {
يعود {
تقييد: 'e' ،
استبدال: صحيح ،
قالب:
} ؛
}) ؛
ثم نكتب نص اختبار بسيط
نسخة الكود كما يلي:
وصف ("اختبار الوحدة عروض أسعار رائعة" ، وظيفة () {
var $ compile ؛
var $ rootscope ؛
// قم بتحميل وحدة MyApp ، التي تحتوي على التوجيه
قبل الوحدة (الوحدة ("myapp")) ؛
// تخزين المراجع إلى $ rootscope و $ $
// لذلك فهي متاحة لجميع الاختبارات في هذه الكتلة الوصف
قبل enject (وظيفة (_ $ compile_ ، _ $ rootscope _) {
// يقوم الحاقن بفك السفقة (_) من حول أسماء المعلمات عند المطابقة
$ compile = _ $ compile_ ؛
$ rootscope = _ $ rootscope_ ؛
})) ؛
("يحل محل العنصر بالمحتوى المناسب" ، الدالة () {
// تجميع قطعة من HTML التي تحتوي على التوجيه
var element = $ compile ("<a-great-eye> </a-great-eye>") ($ rootscope) ؛
// تطلق جميع الساعات ، لذلك سيتم تقييم التعبير النطاق 1
$ rootscope. $ digest () ؛
// تأكد من أن العنصر المترجم يحتوي على المحتوى المحبل
توقع (element.html ()).
}) ؛
}) ؛
المثال أعلاه يأتي من المسؤول ، وسيتم استخدام الأمر أعلاه في HTML.
نسخة الكود كما يلي:
<a-great-eye> </a-great-eye>
يقوم برنامج الاختبار أولاً بحقن خدمتين $ $ و $ rootscope ، يتم استخدام إحداها لتجميع HTML والآخر يستخدم لإنشاء نطاق. لاحظ أن _ يستخدم هنا. عند إضافة الخدمة التي يتم حقنها في NG قبل وبعد ، ستتم معالجتها بواسطة NG. يتم تخزين هاتين الخدمتين في متغيرين داخليين ، بحيث يمكن استدعاء حالات الاختبار التالية.
يتم تمرير طريقة ترجمة $ في تعليمات HTML الأصلية ، ثم يتم تمرير الوظيفة التي تم إرجاعها في $ rootscope ، والتي تكمل الربط بين النطاق والعرض. أخيرًا ، اتصل بـ $ rootscope. $ Digest لإطلاق جميع الاستماع ، مما يضمن تحديث محتوى النموذج في العرض
ثم احصل على محتوى HTML للعنصر المقابل للتعليم الحالي وقارنه بالقيمة المتوقعة.
إذا كنت تريد معرفة المزيد عن الإرشادات في NG ، فيمكنك النقر هنا
اختبار وحدة التصفية في NG
حدد مرشحًا بسيطًا
نسخة الكود كما يلي:
var app = Angular.module ('myapp' ، []) ؛
app.filter ('interpolate' ، ['الإصدار' ، الدالة (الإصدار) {
وظيفة الإرجاع (نص) {
سلسلة الإرجاع (نص) .replace (// ٪ الإصدار/٪/mg ، الإصدار) ؛
} ؛
}]) ؛
ثم اكتب نص اختبار بسيط
نسخة الكود كما يلي:
وصف ('filter' ، function () {
قبل الوحدة (الوحدة ("myapp")) ؛
وصف ('interpolate' ، function () {
قبل EACH (الوحدة (الدالة ($ توفير) {
$ prod.value ('الإصدار' ، 'test_ver') ؛
})) ؛
(يجب استبدال الإصدار "، الحقن (وظيفة (interpolatefilter) {
توقع (interpolatefilter ('قبل النسخة ٪ بعد النسخة بعد')).
})) ؛
}) ؛
}) ؛
يقوم الرمز أعلاه أولاً بتكوين وحدة التصفية ثم يحدد قيمة الإصدار. لأن interpolate يعتمد على هذه الخدمة ، في النهاية يضخ مرشح interpolate مع الحقن. لاحظ أن المرشح هنا يجب أن يتبعه لاحقة المرشح ، وأخيراً يمر في محتوى النص في وظيفة المرشح لتنفيذها ، ومقارنتها بالقيمة المتوقعة.
لخص
هناك العديد من الفوائد لاستخدام الاختبارات لتطوير NG ، والتي يمكن أن تضمن استقرار الوحدة النمطية. شيء آخر هو أنه يمكن أن يكون لديك فهم متعمق لآلية التشغيل الداخلية لـ NG ، لذلك يوصى بأن يملأ الطلاب الذين يستخدمون NG لتطوير الاختبارات في أقرب وقت ممكن!