لقد قمنا بالكثير من التدريب الأساسي في الخطوة السابقة ، لذلك يمكننا الآن القيام ببعض الأشياء البسيطة. نريد إضافة وظيفة البحث النصية الكاملة (نعم ، هذا أمر بسيط للغاية!). في الوقت نفسه ، سنكتب أيضًا اختبارًا شاملاً ، لأن الاختبار الجيد من طرف إلى طرف يمكن أن يساعد كثيرًا. يراقب تطبيقك وتقاريرك بسرعة عند حدوث الانحدار.
يرجى إعادة تعيين دليل العمل:
git checkout -f step -3
تطبيقنا الآن لديه مربع بحث. لاحظ أن قائمة الهاتف في الصفحة تتغير عند دخول المستخدم في مربع البحث.
يتم سرد الاختلافات الأكثر أهمية بين الخطوة 2 والخطوة 3 أدناه. يمكنك رؤية الفرق الكامل في Github.
وحدة تحكم
نحن لا نقوم بأي تغييرات على وحدة التحكم.
نموذج
app/index.html
<viv> <viv> <viv> <!-محتوى الشريط الجانبي-> البحث: <input ng-model = "query"> </div> <div> <!-محتوى الجسم-> <ul> <li ng-repeat = "phone in phons | filter: Query"> {phone.name}} </viv> </viv>نضيف الآن علامة <pection> ونستخدم وظيفة مرشح $ angularjs للتعامل مع إدخال توجيه ngrepeat.
يتيح ذلك للمستخدمين إدخال معايير البحث ورؤية نتائج البحث على الفور لقائمة الهاتف. دعنا نوضح الرمز الجديد:
ربط البيانات: هذه ميزة أساسية من AngularJS. عند تحميل الصفحة ، سترتبط AngularJs مع المتغيرات بنفس الاسم في نموذج البيانات استنادًا إلى اسم قيمة الخاصية لمربع الإدخال لضمان التزامن بين الاثنين.
في هذا الرمز ، يسمى اسم البيانات الذي أدخله المستخدم في مربع الإدخال الاستعلام ، والذي سيتم استخدامه على الفور كمدخل إلى مرشحه بواسطة ITERATOR في القائمة (الهاتف في الهواتف | مرشح: QUERY`). عندما يتسبب نموذج البيانات في تغييرات في إدخال التكرار ، يمكن للمؤلف أن يحديث DOM بكفاءة لتعكس أحدث حالة نموذج البيانات.
استخدم مرشح المرشح: تستخدم وظيفة التصفية قيمة الاستعلام لإنشاء صفيف جديد لا يطابق سوى سجلات الاستعلام.
ستقوم NGrepeat بتحديث العرض تلقائيًا بناءً على صفيف بيانات سجل الجوال الذي تم إنشاؤه بواسطة مرشح المرشح. العملية برمتها شفافة للمطور.
امتحان
في الخطوة 2 ، تعلمنا كيفية الكتابة وتختبار. يعد اختبار الوحدة مناسبًا للغاية لاختبار وحدات التحكم والمكونات الأخرى التي نكتبها في JS ، ولكن لا يمكنها بسهولة اختبار عمليات DOM وتكامل التطبيق. بالنسبة لهؤلاء ، يعد الاختبار الشامل خيارًا أفضل.
يتم تنفيذ ميزات البحث بالكامل من خلال القوالب وربط البيانات ، لذلك تحقق اختباراتنا الأولى إلى النهاية من أن هذه الميزات تلبي توقعاتنا.
اختبار/e2e/السيناريوهات:
وصف ('phonecat app' ، function () {وصف ('عرض قائمة الهواتف' ، function () {eSteach (function () {browser (). navigateto ('../../ app/index.html') ؛}) ؛ it ('يجب تصفية قائمة الهاتف كنوع مستخدم في صندوق البحث "، وظيفة () الإدخال (الاستعلام ".على الرغم من أن بناء جملة رمز الاختبار هذا يشبه إلى حد كبير اختبار الوحدة التي كتبناها في ياسمين من قبل ، فإن الاختبار الشامل يستخدم الواجهة التي يوفرها اختبار AngularJS.
قم بإجراء اختبار شامل وفتح أي مما يلي في علامة التبويب المتصفح الجديد:
User Node.js: http: // localhost: 8000/test/e2e/runner.html
المستخدمون الذين يستخدمون خوادم HTTP أخرى: http: // localhost: [port-number]/[context-path] /test/e2e/runner.html
الزائر: http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html
يتحقق هذا الاختبار من دمج مربع البحث والمؤلف بشكل صحيح. يمكنك أن تجد مدى سهولة كتابة اختبار شامل في AngularJS. على الرغم من أن هذا المثال هو مجرد اختبار بسيط ، إلا أنه من السهل إنشاء أي اختبار معقد وقابل للقراءة.
يمارس
أضف {{query}} ملزمة لقالب index.html لعرض القيمة الحالية لنموذج الاستعلام في الوقت الفعلي ، ثم لاحظ كيف تتغير وفقًا للقيمة في مربع الإدخال.
الآن دعونا نلقي نظرة على كيفية ظهور قيمة نموذج الاستعلام على عنوان صفحة HTML.
قد تعتقد أن إضافة ملزمة إلى علامة العنوان مثل هذا:
<title> معرض هاتف Google: {{query}} </title>
ومع ذلك ، عند إعادة تحميل الصفحة ، لا يمكنك ببساطة الحصول على النتيجة المرجوة. وذلك لأن نموذج الاستعلام صالح فقط ضمن النطاق المحدد بواسطة عنصر الجسم.
<body ng-controller = "phonelistctrl">
إذا كنت تريد أن يرتبط عنصر <title> بنموذج الاستعلام ، فيجب عليك نقل إعلان NGController إلى عنصر HTML ، لأنه الجد المشترك للعنوان وعنصر الجسم.
<html ng-app ng-controller = "phonelistctrl">
تأكد من حذف إعلان NG-Controller على عنصر الجسم.
يمكننا تحقيق هدفنا عند ربط اثنين من الأقواس المجعد على عنصر العنوان ، ولكن قد تجد أنه يتم عرضها بالفعل للمستخدم عند تحميل الصفحة. الحل الأفضل هو استخدام توجيهات NGBIND أو NGBINDTEMPLATE ، والتي لا تتوافق مع المستخدم عند تحميل الصفحة:
<title ng-bind-template = "Google Phone Gallery: {{Query}}"> Google Phone Gallery </title>
أضف رموز الاختبار من طرف إلى طرف إلى كتلة وصف للاختبار/E2E/Sinarios.js:
("يجب أن يعرض قيمة المرشح الحالية داخل عنصر مع المعرف" الحالة "، الدالة () {توقع (العنصر ('#الحالة'). text ()). tomatch (/filter الحالي:/s*$/) ؛ إدخال ('Query'). أدخل ('nexus') ؛ توقع ('#status'). text () tomatch (/current filter: current nexus/s*$ $/$) ؛ الاختبارات فقط قيمة الربط باستخدام ('#الحالة'). توقع (الربط ('استعلام')). tebe ('nexus') ؛}) ؛قم بتحديث المتصفح والاختبار من طرف إلى النهاية سيقومون بالإبلاغ عن فشل الاختبار. للحصول على اختبار ، تحرير index.html وإضافة عنصر div أو p مع المعرف "الحالة" ، وهو ملزم استعلام ، والمرشح الحالي: بادئة. على سبيل المثال:
<div id = "status"> filter الحالي: {{query}} </div>
إضافة توقف مؤقت () ؛ بيان للاختبار من طرف إلى طرف وقم بتشغيله مرة أخرى. ستجد أن الاختبار متوقف مؤقتًا! يتيح لك ذلك الحصول على الفرصة لعرض حالة التطبيق الخاص بك أثناء تشغيل الاختبار. تطبيقات الاختبار هي في الوقت الفعلي! يمكنك تغيير محتوى البحث لإثبات ذلك. مع القليل من الخبرة ، ستعرف مدى أهمية ذلك لإيجاد مشاكل في الاختبار الشامل.
لخص
لقد أضفنا الآن ميزة بحث النص الكامل وأكملنا اختبارًا لإثبات أن البحث صحيح! الآن دعنا ننتقل إلى الخطوة 4 لرؤية إضافة وظيفة الفرز إلى تطبيق الجوال الخاص بنا.
ما سبق هو عبارة عن مجموعة من بيانات تصفية INGULALJS ، وسنستمر في إضافة المعلومات ذات الصلة في المستقبل. شكرا لك على دعمك لهذا الموقع!