التدوينة السابقة: Developing Discourse Plugins - Part 5 - Add an admin interface
هل كنت تعلم أن Discourse يحتوي على مجموعتي اختبارات ضخمتين لبيانات كوده؟ على جانب الخادم، يحتوي كود Ruby الخاص بنا على مجموعة اختبارات تستخدم rspec. أما بالنسبة لتطبيق المتصفح، فلدينا مجموعة qunit تتضمن ember-testing.
بافتراض أنك قمت بإعداد بيئة التطوير، إذا قمت بزيارة عنوان URL http://localhost:3000/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 هذا في تطبيقنا. كان هذا العنوان هو الذي يعرض الأخطبوط.
بعد زيارة الصفحة التي يظهر فيها زر الأخطبوط الأرجواني، نريد التحقق مما إذا كان بإمكاننا رؤية الزر على الصفحة، وأن صورة الأخطبوط غير موجودة بعد.
يتم ذلك من خلال عمليات التحقق التالية:
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
)