الدرس السابق: Developing Discourse Plugins - Part 5 - Add an admin interface
هل تعلم أن Discourse يحتوي على مجموعتي اختبار كبيرتين لشيفرته البرمجية؟ من جانب الخادم (Server)، تمتلك شيفرتنا المكتوبة بلغة Ruby مجموعة اختبار تستخدم rspec. أما بالنسبة لتطبيق المتصفح، فلدينا مجموعة qunit التي تتضمن ember-testing.
بافتراض أن لديك بيئة تطوير جاهزة، إذا قمت بزيارة الرابط http://localhost:3000/tests فستبدأ بتشغيل مجموعة اختبارات JavaScript في متصفحك. ومن الجوانب الممتعة أنك يمكنك رؤية التطبيق وهو يتم اختباره في نافذة مصغرة في الزاوية اليمنى السفلية:
يتم بناء تطبيق Discourse باستخدام عدد كبير جداً من الاختبارات التي ستبدأ في التشغيل عند زيارة الرابط /tests. لذا، قد يكون من المفيد تصفية اختباراتك بناءً على البرنامج الإضافي (Plugin) الذي تعمل عليه. يمكنك فعل ذلك من خلال الواجهة بالنقر على القائمة المنسدلة Plugin واختيار البرنامج الإضافي الخاص بك:
إضافة اختبار قبول (Acceptance Test) في البرنامج الإضافي الخاص بك
أولاً، تأكد من أنك قمت بتنزيل أحدث إصدار من Discourse. القدرة على تشغيل اختبارات القبول من داخل الإضافات ميزة جديدة نسبياً، وإذا لم تقم بتنزيل أحدث إصدار فلن تظهر اختباراتك.
في هذا المقال، سأقوم بكتابة اختبار قبول للبرنامج الإضافي 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. من خلال استخدام هذه الكلمة، ننتظر انتهاء تنفيذ كل أداة مساعدة غير متزامنة (Asynchronous helper) أولاً.
إجراءنا الأول ذو الأهمية هو: 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");
ملاحظة جانبية: الإصدار السابق من البرنامج الإضافي purple-tentacle لم يكن يحتوي على معرف العنصر #show-tentacle في قالب handlebars. تحقق من أحدث إصدار لمتابعة الشرح!
بمجرد نجاح هذه الاختبارات، حان الوقت لاختبار التفاعل.
الأمر التالي هو await click('#show-tentacle'); الذي يخبر إطار عمل الاختبار بأننا نريد النقر على الزر لإظهار الأخطبوط.
بعد محاكاة النقر على الزر، يمكننا التحقق مما إذا كان الأخطبوط قد ظهر من خلال التأكيد على:
assert.ok(exists(".tentacle"), "the tentacle wants to rule the world!");
ليس بصعوبة كبيرة، أليس كذلك؟ يمكنك تجربة الاختبار بنفسك بزيارة http://localhost:3000/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: مخارج البرنامج الإضافي (Plugin Outlets)
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: واجهات الإدارة
الجزء 6: هذا الموضوع
الجزء 7: نشر البرنامج الإضافي الخاص بك
هذا الملف خاضع للتحكم في الإصدارات - اقترح التغييرات على github.
it is an Admin page
)