البرنامج التعليمي السابق: 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 محدد. القدرة على تشغيل اختبارات القبول من المكوّنات الإضافية هي ميزة جديدة نسبيًا، وإذا لم تقم بتحديد أحدث إصدار فلن تظهر اختباراتك.
لهذا المقال، سأقوم بكتابة اختبار قبول للمكوّن الإضافي 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 (تأكيد) شيء ما. في اختبارنا، نريد إجراء بعض التأكيدات للتحقق مما إذا كان مجس الأخطبوط مخفيًا في البداية ثم يظهر فقط بعد النقر على الزر.
نريد تعريف مجموعة من الإجراءات التي سيتم اتخاذها قبل إجراء التأكيد. للقيام بذلك نستخدم الكلمة المفتاحية 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
)