البرنامج التعليمي السابق: Developing Discourse Plugins - Part 5 - Add an admin interface
هل تعلم أن Discourse لديه مجموعتان كبيرتان من الاختبارات لقاعدة التعليمات البرمجية الخاصة به؟ على جانب الخادم، تحتوي قاعدة التعليمات البرمجية Ruby الخاصة بنا على مجموعة اختبارات تستخدم rspec. بالنسبة لتطبيق المتصفح، لدينا مجموعة qunit تتضمن ember-testing.
بافتراض أن لديك بيئة تطوير مُعدة، إذا قمت بزيارة عنوان URL http://localhost:4200/tests ستبدأ في تشغيل مجموعة اختبارات JavaScript في متصفحك. أحد الجوانب الممتعة هو أنه يمكنك رؤيتها وهي تختبر التطبيق في نافذة مصغرة في الزاوية اليمنى السفلية:
تم بناء تطبيق Discourse باستخدام الكثير من الاختبارات التي ستبدأ في التشغيل عند زيارة عنوان URL /tests. لذلك قد يكون من المفيد تصفية اختباراتك حسب المكون الإضافي الذي تعمل عليه. يمكنك القيام بذلك في الواجهة عن طريق النقر على القائمة المنسدلة Plugin واختيار المكون الإضافي الخاص بك:
إضافة اختبار قبول في المكون الإضافي الخاص بك
أولاً، تأكد من أن لديك أحدث إصدار من Discourse محددًا. القدرة على تشغيل اختبارات القبول (Acceptance tests) من المكونات الإضافية هي ميزة جديدة نسبيًا، وإذا لم تقم بتحديد أحدث إصدار فلن تظهر اختباراتك.
لهذا المقال، سأقوم بكتابة اختبار قبول للمكون الإضافي purple-tentacle الذي ألفناه في الجزء 5 من هذه السلسلة.
إضافة اختبار قبول سهل مثل إضافة ملف واحد إلى المكون الإضافي الخاص بك. قم بإنشاء ما يلي:
test/javascripts/acceptance/purple-tentacle-test.js
import { acceptance, exists } from "discourse/tests/helpers/qunit-helpers";
import { click, visit } from "@ember/test-helpers";
import { test } from "qunit";
acceptance("Purple Tentacle", function (needs) {
needs.settings({ purple_tentacle_enabled: true });
needs.user();
test("Purple tentacle button works", async function (assert) {
await visit("/admin/plugins/purple-tentacle");
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
await click("#show-tentacle");
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
});
});
لقد حاولت كتابة الاختبار بطريقة واضحة، ولكن قد يكون مربكًا بعض الشيء إذا لم تكتب اختبار قبول من قبل. أوصي بشدة بأن تقرأ مستندات Ember حول اختبارات القبول حيث تحتوي على الكثير من المعلومات الرائعة.
في كل اختبار نكتبه، نحتاج إلى assert (تأكيد) شيء ما. في اختبارنا، نريد إجراء بعض التأكيدات للتحقق مما إذا كان مجس الأخطبوط (tentacle) مخفيًا في البداية ثم يظهر فقط بعد النقر على الزر.
نريد تحديد مجموعة من الإجراءات التي سيتم اتخاذها قبل إجراء التأكيد. للقيام بذلك نستخدم الكلمة المفتاحية await. باستخدام هذه الكلمة المفتاحية، ننتظر حتى ينتهي تنفيذ كل مساعد غير متزامن أولاً.
أول إجراء مهم لنا هو: await visit("/admin/plugins/purple-tentacle");. يخبر هذا الاختبار الخاص بنا بالتنقل إلى عنوان URL هذا في تطبيقنا. كان عنوان URL هذا هو الذي يعرض زر مجس الأخطبوط.
بعد زيارة الصفحة التي يظهر فيها زر مجس الأخطبوط الأرجواني، نريد التحقق مما إذا كان يمكننا رؤية الزر موجودًا على الصفحة وأن صورة مجس الأخطبوط غير موجودة بعد.
يتم ذلك من خلال التأكيدات التالية:
assert.ok(exists("#show-tentacle"), "it shows the purple tentacle button");
assert.ok(!exists(".tentacle"), "the tentacle is not shown yet");
ملاحظة جانبية. الإصدار السابق من المكون الإضافي purple-tentacle لم يكن يحتوي على معرف العنصر #show-tentacle في قالب handlebars. تحقق من أحدث إصدار للمتابعة!
بمجرد اجتياز تلك الاختبارات، حان الوقت لاختبار التفاعل.
الأمر التالي هو await click('#show-tentacle'); الذي يخبر إطار الاختبار الخاص بنا بأننا نريد النقر على الزر وإظهار مجس الأخطبوط.
بعد محاكاة النقر على الزر، يمكننا التحقق مما إذا كان مجس الأخطبوط يظهر عن طريق التأكيد:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
ليس سيئًا جدًا، أليس كذلك؟ يمكنك تجربة الاختبار بنفسك عن طريق زيارة http://localhost:4200/tests?qunit_single_plugin=purple-tentacle&qunit_skip_core=1 على جهاز التطوير الخاص بك. يجب أن ترى مجس الأخطبوط الأرجواني يظهر بسرعة كبيرة وستجتاز جميع الاختبارات.
إذا كنت ترغب في تشغيل اختبارات qunit الخاصة بالمكون الإضافي من سطر الأوامر باستخدام PhantomJS، يمكنك تشغيل
rake plugin:qunit['purple-tentacle']
(حيث purple-tentacle هو اسم المجلد للمكون الإضافي الخاص بك)
تصحيح أخطاء اختباراتك
أثناء كتابة المكونات الإضافية الخاصة بك، يمكن أن تساعدك اختباراتك في تحديد المشكلات في المكون الإضافي الخاص بك. عندما تقوم بتطوير اختباراتك أو إذا أجريت تغييرات على الكود المصدري للمكون الإضافي الخاص بك، فقد تفشل الاختبارات. للمساعدة في فهم السبب، يحتوي Ember على بعض الأدوات المساعدة الجيدة: pauseTest() و resumeTest().
لاستخدامها، أضف await pauseTest() داخل كود الاختبار الخاص بك حيث تريد أن يتوقف الاختبار. الآن، عندما تقوم بتشغيل الاختبار في المتصفح، سيتوقف الاختبار تلقائيًا عند النقطة التي أضفت فيها pauseTest(). سيعطيك هذا فرصة لفحص الصفحة أو عرض أي أخطاء للمساعدة في تصحيح المشكلات.
إلى أين تذهب من هنا
أكره أن أبدو كاسطوانة مشروخة ولكن توثيق Ember حول الاختبارات ممتاز. قد ترغب أيضًا في رؤية كيف يختبر Discourse وظائف مختلفة من خلال تصفح الاختبارات في دليل اختبارات JavaScript الخاص بنا. لدينا العديد من الأمثلة هناك يمكنك التعلم منها.
اختبار سعيد!
المزيد في السلسلة
الجزء 1: أساسيات المكونات الإضافية
الجزء 2: منافذ المكونات الإضافية
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: واجهات المسؤول
الجزء 6: هذا الموضوع
الجزء 7: انشر المكون الإضافي الخاص بك
يتم التحكم في إصدار هذا المستند - اقترح تغييرات على github.
it is an Admin page
)