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