الدليل السابق: Developing Discourse Plugins - Part 5 - Add an admin interface
هل كنت تعلم أن Discourse يحتوي على مجموعتي اختبارات كبيرتين لقاعدة الكود الخاصة به؟ في جانب الخادم، لدينا مجموعة اختبارات لكود Ruby تستخدم rspec. لتطبيق المتصفح، لدينا مجموعة qunit تتضمن ember-testing.
بافتراض أنك قمت بإعداد بيئة تطوير، إذا زرت عنوان http://localhost:3000/tests فستبدأ بتشغيل مجموعة اختبارات JavaScript في متصفحك. أحد الجوانب الممتعة هو أنك تستطيع رؤيتها تختبر التطبيق في نافذة مصغرة في الزاوية اليمنى السفلية:
تم بناء تطبيق Discourse مع كمية كبيرة من الاختبارات التي ستبدأ في التشغيل عند زيارتك لعنوان /tests. لذا قد يكون من المفيد تصفية اختباراتك حسب الإضافة التي تعمل عليها. يمكنك القيام بذلك في الواجهة عن طريق النقر على قائمة 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 (التحقق) من شيء ما. في اختبارنا، نريد إجراء بعض عمليات التحقق للتحقق من أن الحبار مخفي في البداية ثم يظهر فقط بعد النقر على الزر.
نريد تحديد مجموعة من الإجراءات التي يجب اتخاذها قبل إجراء عملية التحقق. للقيام بذلك، نستخدم الكلمة المفتاحية 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 وظائف مختلفة من خلال تصفح الاختبارات في مجلد اختبارات الجافاسكريبت لدينا. لدينا العديد من الأمثلة هناك يمكنك التعلم منها.
اختبارات ممتعة!
المزيد في السلسلة
الجزء 1: أساسيات الإضافات
الجزء 2: فتحات الإضافات (Plugin Outlets)
الجزء 3: إعدادات الموقع
الجزء 4: إعداد git
الجزء 5: واجهات الإدارة
الجزء 6: هذا الموضوع
الجزء 7: نشر إضافتك
هذا المستند مُدار بالإصدارات - اقترح تغييرات على github.
it is an Admin page
)