عندما يزداد تعقيد وحجم ما ، يكون من غير العملي الاعتماد على الاختبار اليدوي للموثوقية والتقاط الأخطاء واختبار الانحدار للميزات الجديدة.
لحل هذه المشكلة ، أنشأنا عداء السيناريو الزاوي لتقليد عمليات المستخدم ومساعدتنا على التحقق من متانة التطبيقات الزاوية.
1. ملخص
يمكننا كتابة اختبارات السيناريو في JavaScript لوصف سلوك تطبيقنا والتفاعل مع حالات معينة. يتكون السيناريو من كتل "IT" واحدة أو أكثر (يمكننا التعامل مع هذه المتطلبات لتطبيقنا) ، والتي تتألف في مدور الأوامر والتوقعات. يخبر الأمر العداء أن يفعل شيئًا ما في التطبيق (مثل الذهاب إلى صفحة أو النقر فوق زر) ، ويخبر التوقع العداء أن يحكم على شيء عن الحالة (مثل قيمة مجال معين أو عنوان URL الحالي). في حالة فشل أي توقع ، يقوم العداء بعلامات هذا "It" على أنه "خطأ" ثم يستمر مع "It" التالي. يمكن أن يكون للسيناريو أيضًا كتل "قبل" و "بعد" التي تعمل قبل أو بعد كل كتلة "IT" ، بغض النظر عما إذا كانت تمر أم لا.
بالإضافة إلى العناصر المذكورة أعلاه ، يمكن أن يتضمن السيناريو أيضًا وظائف المساعد لتجنب الكود المكرر في كتلة "IT".
فيما يلي مثال على السيناريو البسيط:
وصف ('buzz client' ، function () {it ('يجب تصفية نتائج' ، function () {input ('user'). enter ('jacksparrow') ؛ element (': button'). click () ؛ توقع (متكرر ('ul li'). count (). li '). count ()).يصف هذا السيناريو متطلبات عميل الشبكة ، وبصورة صريحة ، يجب أن يكون لديه القدرة على تصفية المستخدمين. يبدأ بإدخال قيمة في مربع إدخال "المستخدم" ، والنقر فوق الزر الوحيد في الصفحة ، ثم يتحقق من وجود قائمة من 10 عناصر. بعد ذلك ، يدخل "النحل" في مربع الإدخال من "FilterText" ثم تحقق من أن القائمة سيتم تخفيضها إلى عنصر واحد فقط.
يسرد الفصل API التالي الأمر والتوقع المتاح في Runner.
2. API
رمز المصدر: https://github.com/angular/angular.js/blob/master/src/ngscenario/dsl.js
يوقف()
توقف عن تنفيذ الاختبار حتى ندعو السيرة الذاتية () في وحدة التحكم (يمكنك أيضًا النقر على رابط السيرة الذاتية في واجهة Runner)
النوم (ثواني)
وقفة اختبار تنفيذ لثانية ثوان.
متصفح (). Navigateto (URL)
قم بتحميل عنوان URL المحدد في setFrame.
متصفح (). Navigateto (URL ، FN)
قم بتحميل عنوان URL الذي تم إرجاعه بواسطة FN في إطار الاختبار. يتم استخدام معلمة عنوان URL هنا فقط كإخراج الاختبار. يمكن استخدام واجهة برمجة التطبيقات هذه عندما يكون عنوان URL الوجهة ديناميكيًا (لا يزال العنوان غير معروف عند كتابة اختبارات).
متصفح (). إعادة تحميل ()
قم بتحديث الصفحة التي تم تحميلها حاليًا في إطار الاختبار.
متصفح (). نافذة (). HREF ()
العودة إلى window.location.href من الصفحة الحالية لإطار الاختبار.
متصفح (). نافذة (). path ()
إرجاع window.location.pathName من الصفحة الحالية لإطار الاختبار.
متصفح (). Window (). Search ()
العودة إلى window.location.search من الصفحة الحالية لإطار الاختبار.
متصفح (). نافذة (). التجزئة ()
إرجاع window.location.hash (لا يشمل #) من الصفحة الحالية لإطار الاختبار.
متصفح (). الموقع (). url ()
إرجاع نتيجة $ location.URL () من الصفحة الحالية (http://docs.angularjs.org/api/ng.$location)
متصفح (). الموقع (). path ()
إرجاع نتيجة $ location.path () للصفحة الحالية (http://docs.angularjs.org/api/ng.$location)
متصفح (). الموقع (). البحث ()
إرجاع نتيجة موقع $ للصفحة الحالية. Search () (http://docs.angularjs.org/api/ng.$location)
متصفح (). الموقع (). التجزئة ()
إرجاع نتيجة موقع $. التجزئة () من الصفحة الحالية (http://docs.angularjs.org/api/ng.$location)
توقع (المستقبل). {matcher}
يحدد ما إذا كانت القيمة المستقبلية المحددة تلبي المطابقة. جميع إعلانات API تُرجع كائنًا مستقبليًا بقيمة محددة تم الحصول عليها بعد تنفيذها. يتم تعريف المطابقة باستخدام angular.scenario.matcher ، ويستخدمون قيمة العقود الآجلة لتنفيذ التوقع. على سبيل المثال:
توقع (Browser () .location () .href ()) .tequal ('http://www.google.com') ؛
توقع (المستقبل) .NOT (). {matcher}
يحدد ما إذا كانت قيمة مستقبل معين عكس التوقعات المتوقعة للمطابقة المحددة.
باستخدام (محدد ، تسمية)
نطاقات اختيار عنصر DSL التالي. (يفترض أنه يحد من نطاق المحدد ، وتستخدم تقديرات الملصقات لاختبار الإخراج)
مثال:
باستخدام ('#foo' ، "FOO 'Field"). الإدخال (' BAR ')
الربط (الاسم)
إرجاع الربط الأول الذي يطابق الاسم المحدد (ربما يتعلق بـ NG-bind).
الإدخال (الاسم). المقر (القيمة)
أدخل القيمة المحددة إلى حقل النموذج المحدد للاسم.
الإدخال (الاسم) .Check ()
حدد أو قم بإلغاء تحديد مربع الاختيار للاسم المحدد.
المدخلات (الاسم) .select (القيمة)
حدد الإدخال [type = "Radio"] مع قيمة متوسط الاسم المحدد لراديو.
إدخال (اسم) .val ()
إرجاع القيمة الحالية لإدخال الاسم المحدد.
مكرر (محدد ، ملصق) .count ()
إرجاع عدد صفوف المكرر الذي يتطابق مع المحدد المحدد (محدد jQuery). يستخدم التسمية فقط كإخراج الاختبار.
مكرر ('#products table' ، 'قائمة المنتجات'). count () // عدد الصفوف
مكرر (محدد ، ملصق) .Row (فهرس)
إرجاع صفيف ، وربط الصفوف المحددة في مكرر مطابقة للفهرس المحدد. يستخدم التسمية فقط لاختبار الإخراج.
مكرر ('#products table' ، 'قائمة المنتجات'). الصف (1) // جميع الروابط في الصف كصفيف
مكرر (محدد ، ملصق) .Column (الربط)
إرجاع صفيف مع قيمة العمود في المكرر الذي يطابق الربط المحدد الذي يطابق المحدد المحدد (محدد jQuery). يستخدم التسمية فقط لاختبار الإخراج.
مكرر ('#products table' ، 'قائمة المنتجات'). العمود ('product.name') // جميع القيم عبر جميع الصفوف في صفيف
حدد (اسم) .option (القيمة)
حدد خيار تحديد القيمة في تحديد الاسم المحدد.
حدد (اسم) .option (value1 ، value2)
حدد الخيار (الاختيار متعدد) للقيمة المحددة في تحديد الاسم المحدد.
عنصر (محدد ، ملصق) .count ()
إرجاع عدد العناصر التي تطابق المحدد المحدد. يستخدم التسمية فقط كإخراج الاختبار.
عنصر (محدد ، ملصق) .click ()
انقر فوق العنصر الذي يطابق المحدد المحدد. يستخدم التسمية فقط كإخراج الاختبار.
عنصر (محدد ، ملصق). query (FN)
تنفيذ FN المحدد (المحددات ، المنجز) ، و SelectElement هو مجموعة العناصر التي تتطابق مع المحدد المحدد ؛ والتم القيام به هو وظيفة سيتم تنفيذها بعد تنفيذ FN. يستخدم التسمية فقط كإخراج الاختبار.
العنصر (المحدد ، التسمية). {method} ()
إرجاع قيمة الإرجاع لتنفيذ الطريقة على العنصر الذي يطابق المحدد المحدد. يمكن أن تكون الطريقة هي أساليب jQuery التالية: VAL ، TEXT ، HTML ، الارتفاع ، الداخلي ، الخارجي ، العرض ، العرض الداخلي ، العرض الخارجي ، الموضع ، SCROLLLELL ، SCROLLTOP ، الإزاحة. يستخدم التسمية فقط كإخراج الاختبار.
العنصر (المحدد ، الملصق). {method} (القيمة)
قم بتنفيذ الطريقة المحددة على العنصر الذي يطابق المحدد المحدد ، واستخدم المفتاح والقيمة كمعلمات. يمكن أن تكون الطريقة هي أساليب jQuery التالية: VAL ، TEXT ، HTML ، الارتفاع ، الداخلي ، الخارجي ، العرض ، العرض الداخلي ، العرض الخارجي ، الموضع ، SCROLLLELL ، SCROLLTOP ، الإزاحة. يستخدم التسمية فقط كإخراج الاختبار.
عنصر (محدد ، تسمية). {method} (مفتاح)
إرجاع نتيجة تنفيذ طريقة محددة على العنصر الذي يطابق المحدد المحدد. يمكن أن تكون هذه الطرق هي طرق jQuery التالية: attr ، prop ، css. يستخدم التسمية فقط كإخراج الاختبار.
العنصر (المحدد ، التسمية). {method} (مفتاح ، قيمة)
تنفيذ طريقة على العنصر الذي يطابق المحدد المحدد واتخاذ المفتاح والقيمة كمعلمات. يمكن أن تكون هذه الطرق هي طرق jQuery التالية: attr ، prop ، css. يستخدم التسمية فقط كإخراج الاختبار.
JavaScript هي لغة مطبوعة ديناميكيًا تجلب تعبيرات قوية ، ولكنها تعطينا أيضًا القليل من المساعدة من المترجم. لذلك ، نشعر بشدة أن أي رمز مكتوب في JavaScript يتطلب الكثير من الاختبارات الشاملة. يحتوي Angular على العديد من الميزات التي تسهل علينا اختبار تطبيقاتنا. لذلك ليس لدينا عذر لعدم كتابة الاختبارات. (-_- !!)
ما سبق هو مجموعة من المعلومات حول اختبار AngularJS E2E. سنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!