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